1. 程式人生 > 其它 >HTML基礎(持續更新)

HTML基礎(持續更新)

ctrl+/:添加註釋語句;
aling=“center“:居中對齊;
<hr/>:水平線;
<hr size="2" :粗細;
corlor=”#ccccc":顏色;
<strong>:加粗標記;
<em>:傾斜;
<img src="圖片路徑”>:插入圖片標記;
<body bgcolor="bisque">:更改背景顏色,在body標籤中;
<body style="background-image:url(圖片/頁面背景.jpg);
background-repeat:no-repeat">:設定背景頁面;


1<meta name="ketwords" content="網頁關鍵字"; :在搜尋時增加網頁關鍵字;
2<meat name="description" contet="網頁描述"; :設定網頁描述怎加搜尋量;
3<meat name="author" contet="網頁作者"; :設定網頁作者描述;
在頭部<head>123</head>裡面設定
align="center";:居中對齊程式碼;
align="left";;左對齊程式碼;
<br/>;換行標記;
<header>
<h1>sdsfs<h1>

</header>:這是頁面頭部內容的部分;
<nav>這是導航部分<nav>
<article></article>:頁面左邊主體內容
<section></section>:頁面主體內容
<meta name="author" content="作者
標籤分為單標籤和雙標籤,<html></html>為雙標籤;
<br/>為單標籤;
1標籤的屬性寫在開始標籤的內部;
2標籤上可以存在多個屬性;
3屬性之間用空格隔開;
4標籤名與屬性之間必須以空格隔開,
5屬性之間,沒有順序之分;、、
6絕對路徑:指目錄下的絕對位置,可以直達目標位置,

通常從碟符開始的路徑,:
列如:碟符開頭:D\zay01\images\1.ipg;
以及圖片的網路地址:https//www.indd.cn/2018dad/adad/tp.gif;
相對路徑:
)同級

直接編寫, 例如:girl.png

加上./ 編寫, 例如./girl.png

./代表當前目錄,./girl.png代表在當前目錄下查詢

(2)下級

直接編寫, 例如abc/girl.png

加上./ 編寫, 例如./abc/girl.png

相對當前目錄有幾個資料夾,就在後面依次補全幾個資料夾名稱即可, 例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

(3)上級

../代表訪問上級目錄

假設a資料夾下面有b資料夾, 圖片存放在a資料夾中, html檔案存放在b資料夾中, 那麼路徑為../girl.png

因為html檔案在b資料夾中, 所以路徑是相對於b資料夾的, 所以../代表訪問b資料夾的上一級目錄, b資料夾的上一級目錄是a資料夾, 所以../girl.png就代表在a資料夾查詢girl.png

注意:

1.路徑中不要出現中文, 否則可能出現未知問題

音訊標籤:<audio src="./music.mp3" controls></audio>
1,src:音訊的路徑;
2,controls:顯示播放的控制元件;
3,autoplay:自動播放;
3,loop:迴圈播放;
視訊標籤<video src="./video.mp4" controls></video>
1,src:視訊的路徑;
2,controls:顯示播放的控制元件;
3,autoplay:自動播放(谷歌瀏覽器需要配合muted實現靜音播放);
3,loop:迴圈播放;

超連結:<a href="網址" target="_blank">名字或者你要連結上的文字或圖片</a>
屬性名:target;
屬性值:目標網頁的開啟形式;
_self:預設值,在當前視窗跳轉(覆蓋原網頁);
_blank:在新視窗中跳轉(保留原網頁);
無序列表:
標籤名 uI:表示無序列表的整體,用於包裹li標籤;
標籤名li:表示無序列表的每一項,用於包含每一行的內容;
. 列標的每一項前預設顯示圓點標識;
注意點:uI標籤中只允許包含li標籤
li標籤可以包含任意內容;
有序列表:
標籤名ol:
表示無序列表的整體,用於包裹li標籤;
標籤名li:表示無序列表的每一項,用於包含每一行的內容;
列標的每一項前預設顯示序號標識;

注意點:oI標籤中只允許包含li標籤
li標籤可以包含任意內容;

自定義列表:

標籤名:
dl:表示自定義列表的整體,用於包裹dt/dd標籤;
dt:表示自定義列表的主題;
dd:表示自定義列表的針對主題的每一項內容;
dd前會預設顯示縮排效果;
dl標籤中允許包含dt/dd標籤;
dt/dd標籤可以包含任意內容;
表格的基本標籤;
table :表格整體,可以用於包裹多個tr;
tr:表格每行,可用於包裹td;
td:表格單元格,可用於包裹內容;
注意點:標籤的巢狀關係:table>tr>td

表格的相關屬性:
border: 表格寬度;
width: 表格寬度;
height: 表格高度;
屬性值都為數字;
表格標題和表頭單元格標籤
場景:在表格中表示整體大標題和一系列小標題;
其他 標籤:
caption:表格大標題:表示表格整體大標題,
預設在表格整體的頂部居中位置顯示;
th:表頭單元格:表示一系列小標題,通常用於表格
第一行,預設內部文字加粗並居中顯示;
注意點 :
caption 標籤寫在table標籤內部
th標籤書寫在tr標籤內部(用於替換td)標籤;

表格的結構標籤:
thead:表格頭部;
tbody:表格主體;
tfoot: 表格底部;
注意點:
表格結構標籤內部用於包裹tr標籤;
表格的結構標籤可以省略;

合併單元格:將垂直或者水平的單元格合併成一個
合併單元格步驟;
1,明確合併那幾個單元格
2,通過左上原則,確定保留誰刪除誰
上下合併—只保留最上面的,刪除其他;
左右合併—只保留最左面的,刪除其他;
給保留的單元格設定:跨行合併(rowspan)或者跨列合併(colspan)
屬性名 rospan 屬性值:合併的單元格的個數:跨行垂直合併;
屬性名 colspan 屬性值:合併的單元格的個數:跨列水平合併;

注意點:
只有同一個結構標籤中的單元格才能合併,不能
跨結構標籤合併(不能跨:thead,tbody,tfoot)