HTML標簽 1、標題和段落 <h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽，獨占一行，均有加粗效果，且字體逐漸變小 <h1>一級標題</h1> 一級標題 <h6>六級標題</h6> 六級標題 <p>p是段落標簽，獨占一行</p> p標簽是段落標簽，獨占一行 ...

HTML標簽

1、標題和段落

<h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽，獨占一行，均有加粗效果，且字體逐漸變小

<h1>一級標題</h1>

一級標題

<h6>六級標題</h6>

六級標題

<p>p是段落標簽，獨占一行</p>

p標簽是段落標簽，獨占一行

<br> (換行)

<hr> (一行橫線)

2、文本格式化標簽

標簽	說明	效果
`<b></b>` `<strong></strong>`	加粗	加粗
`<u></u>` `<ins></ins>`	下劃線	下劃線
`<i></i>` `<em></em>`	傾斜	傾斜
`<s></s>` `<del></del>`	刪除線	~~刪除線~~

其中，strong、ins、em、del表示的強調語義更強烈，更推薦

3、媒體標簽

圖片標簽：

<img src="" alt="">

其中路徑中的./表示當前的路徑，可用./文件名也可直接文件名獲取同級文件，預設寬高等比縮放（只需給出width和height中的一個值）

如：

<img src="C:\xxx.jpg" alt="" title="title文字在滑鼠懸停時顯示" width="60%" height="">

音頻標簽：

<audio src="" controls></audio>

controls：顯示播放控制項，autoplay：自動播放（部分瀏覽器不支持），loop：迴圈播放

如：

<audio src="C:\xxx.wav" controls></audio>

視頻標簽：

<video src=""></video>

controls：顯示視頻控制項，autoplay：自動播放（谷歌瀏覽器需配合muted屬性靜音播放），loop：迴圈播放

如：

<video src="C:\xxx.mp4" controls></video>

超鏈接：

<a href="目標網頁.html">超鏈接</a>

target：_self，預設值，在當前視窗跳轉；_blank，在新視窗跳轉。

如：

<a href="www.baidu.com" target="_blank">跳轉百度</a>

跳轉百度

開發初期，不知道跳轉地址，可以將href的值書寫為 #

4、列表標簽

無序列表

ul表示無需標簽的整體，用於包裹li標簽

li標簽表示無序列表的每一項，用於包含每一行的內容

ul中只能包含li標簽，li標簽中可以包含任何內容

如：

<ul>
    <li>蘋果</li>
    <li>香蕉</li>
</ul>

蘋果
香蕉

有序列表

ol表示無需標簽的整體，用於包裹li標簽

li標簽表示無序列表的每一項，用於包含每一行的內容

ol中只能包含li標簽，li標簽中可以包含任何內容

如：

<ol>
    <li>蘋果</li>
    <li>香蕉</li>
</ol>

蘋果
香蕉

自定義列表

dl表示自定義列表的整體，用於包裹dt/dd標簽

dt表示自定義列表的主題

dd表示自定義列表的針對主題的每一項內容

dd會預設顯示縮進效果，dl中只能包含dt/dd標簽，dt/dd標簽中可以包含任何內容

如：

<dl>
    <dt>幫助</dt>
    <dd>指南</dd>
    <dd>xx</dd>
</dl>

幫助: 指南; xx

5、表格標簽

table表示整體，可用於包裹多個tr

tr表示表格的每一行，可用於包裹td

td表示表格單元格，可用於包裹內容

表格屬性：

border：邊框寬度，width：表格寬度，height：表格高度（寬高設置只對tbody有效，但一般寬高在CSS里設置）

caption：表格標題，書寫在table標簽內部，th：表頭單元格（有加粗效果），書寫在tr標簽內部

表格結構標簽包含thead、tbody、tfoot，分別表示表頭、表主體、表底，表格標簽內部用於包裹tr標簽，可省略不寫

合併單元格：（保留左/上原則）

rowspan：跨行合併，屬性值：合併單元格的個數

colspan：跨列合併，屬性值：合併單元格的個數

如：

<table>
    <caption><strong>學生表</strong></caption>
    <thead>
        <tr>
        	<th>name</th>
        	<th>age</th>
        	<th>sex</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
        	<td>小明</td>
        	<td rowspan="2">14</td>
        	<td>女</td>
    	</tr>
        <tr>
        	<td>小紅</td>
        	<!-- <td>15</td>   //刪除該行 --> 
        	<td>男</td>
    	</tr>
    </tbody>
    <tfoot>
        <tr>
        	<td>...</td>
        	<td>...</td>
        	<td>...</td>
    	</tr>
    </tfoot>
</table>

**學生表**
name	age	sex
小明	14	女
小紅	14	男
...	...	...

6、表單標簽

input系列標簽：根據type屬性不同，展示不同效果。

標簽名	type屬性值	說明
`input`	`text`	文本框，輸入單行文本
—	`password`	密碼
—	`radio`	單選框
—	`checkbox`	多選框
—	`file`	文件選擇
—	`submit`	提交
—	`reset`	重置
—	`button`	普通按鈕，預設無功能，配合`JS`使用

text/password：placeholder屬性表示占位符

radio：含有相同name屬性的為一組，checked預設選中

checkbox：checked預設選中

file：multiple表示多文件選擇

submit、reset、button：需要配合form（表單域標簽）使用

button標簽是雙標簽，更便於包裹其他內容：文字圖片等，Google瀏覽器中button預設是提交（submit）按鈕

如：

<form action="">
    文本框：<input type="text" placeholder="請輸入文字">
    <br>
    密碼：<input type="password" placeholder="請輸入密碼">
    <br>
    性別：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
    <br>
    愛好：<input type="checkbox" checked>
    <br>
    多文件選擇：<input type="file" multiple>
    <br>
    
    <input type="submit">
    <input type="reset">
    <input type="button" value="按鈕">
    <br>
    
    <button>我是按鈕</button>
    <button type="submit">提交button</button>
    <button type="reset">重置button</button>
    <button type="button">無用button</button>
</form>

select下拉菜單標簽：select：下單菜單整體，option：下拉菜單的每一項

selected：下單菜單的預設選中

textarea標簽：cols規定文本域內可見寬度，rows規定文本域內可見行數（可通過右下角調整大小，實際推薦使用CSS設置樣式）

label標簽：實現點擊文字即勾選

①用label標簽把內容包裹，表單添加id屬性，label標簽for屬性設置對應id

②直接用label把內容和標簽標簽一起包裹，把label標簽的for屬性刪除

如：

<select>
    <option>北京</option>
    <option>上海</option>
    <option selected>廣州</option>
    <option>深圳</option>
</select>

<textarea cols="40" rows="10"></textarea>

性別：<input type="radio" name="sex" id="man"><label for="man">男</label> <!-- 第一種方法 -->
	 <label><input type="radio" name="sex" checked>女</label>            <!-- 第二種方法 -->

7、語義化標簽

沒有語義的佈局標簽：

div：一行只顯示一個

span：一行可顯示多個

如：

<div>
    this is div
</div>
<div>
    this is div
</div>

<span>this is span</span>
<span>this is span</span>

有語義的佈局標簽：

header：網頁頭部

nav：網頁導航

footer：網頁底部

aside：網頁側邊欄

section：網頁區塊

article：網頁文章

8、字元實體

源碼中即使輸入多個空格，網頁端也只會識別一個

HTML骨架標簽說明

<!DOCTYPE html>：文檔類型聲明，告訴瀏覽器該網頁的HTML版本
<html lang="en">：標識網頁使用的語言，常見：zh-CN簡體中文，en英文
<meta charset="UTF-8">：標識網頁使用的字元編碼，開發統一使用UTF-8即可
- 常見的字元編碼：
- UTF-8：萬國碼，國際化的字元編碼，收錄了全球語言文字
- GB2312：6000+漢字
- GBK：20000+漢字
<meta http-equiv="X-UA-Compatible" content="IE=edge">，解決IE相容性差
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 寬度 = 設備寬度，移動端網頁的時候用

HTML基礎（基於黑馬程式員視頻的學習筆記）