HTML5基本語法

一、基礎(chǔ)標(biāo)簽

1、分級(jí)標(biāo)題

<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>

2、段標(biāo)簽

<p></p>

3、換行及水平線標(biāo)簽

<br>換行    <hr>水平線

4、文本格式標(biāo)簽

<b>加粗</b>    <u>下劃線</u>    <i>傾斜</i>    <s>刪除線</s>		   

二、圖片標(biāo)簽

1、格式

<img src="" alt="" title="" width="" height="">

2、屬性介紹

• $src$中可以填入圖片的絕對(duì)路徑或相對(duì)路徑或者圖片的網(wǎng)址
• $alt$中填入當(dāng)圖片不能正常顯示的文字信息
• $title$中填入的是鼠標(biāo)指針在圖片懸停一會(huì)兒后出現(xiàn)的文字

三、音頻標(biāo)簽

1、格式

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

2、屬性介紹

• $src$音頻路徑
• $controls$顯示播放的控件
• $autoplay$自動(dòng)播放
• $loop$循環(huán)播放

四、視頻標(biāo)簽

1、格式

<video src="" controls></video>

2、屬性介紹

• $src$視頻路徑
• $controls$顯示播放的控件
• $autoplay$自動(dòng)播放
• $loop$循環(huán)播放

五、鏈接標(biāo)簽

1、格式

<a href="" target="">超鏈接</a>

2、顯示特點(diǎn)

• a標(biāo)簽?zāi)J(rèn)文字有下劃線
• a標(biāo)簽從未點(diǎn)擊過，默認(rèn)文字顯示藍(lán)色
• a標(biāo)簽點(diǎn)擊過之后，文字顯示為紫色（清除瀏覽器歷史記錄可恢復(fù)藍(lán)色）

3、屬性介紹

• $href$視頻路徑
• $target$：
  $$\{\begin{array}{l}\_self默認(rèn)值，覆蓋原網(wǎng)頁\\ \_blank在新窗口中跳轉(zhuǎn)，保留原網(wǎng)頁\end{array}$$

4、補(bǔ)充（空鏈接）

<a href="#">空鏈接</a>

功能：

• 點(diǎn)擊之后回到網(wǎng)頁頂部
• 開發(fā)中不確定該鏈接的最終跳轉(zhuǎn)位置，暫時(shí)用空鏈接占位

六、列表標(biāo)簽

1、無序列表

（1）格式

<ul><li>列表內(nèi)容</li>
</ul>

2、有序列表

（1）格式

<ol><li>列表內(nèi)容</li>
</ol>

3、自定義列表

（1）格式

<dl><dt>自定義列表主題</dt><dd>每個(gè)主題下的內(nèi)容項(xiàng)</dd>
</dl>

七、表格標(biāo)簽

1、基本標(biāo)簽

<table><tr>//表格每行<td>表格某一行的內(nèi)容</td></tr>
</table>

2、相關(guān)屬性

• $border$表格邊框?qū)挾?/li>
• $width$表格寬度
• $height$表格高度

3、表格大標(biāo)題和表頭

<table><caption>表格大標(biāo)題</caption><tr><th>表頭元素</th></tr>
</table>

4、表格結(jié)構(gòu)標(biāo)簽

• 表頭

<thead>表頭</thead>

• 表體

<tbody>表體</tbody>

• 表腳

<tfoot>表腳</tfoot>

5、合并單元格

（1）合并單元格步驟：

• 明確合并哪些單元格
• 保留左上單元格，其余單元格元素清空
• 合并同行或同列的單元格
• 注意：只能合并具有相同結(jié)構(gòu)標(biāo)簽的單元格

（2）語法

<td rowspan="2">xxx</td>   //跨行合并
<td colspan="2">xxx</td>   //跨列合并

$rowspan="2"$意思是跨行合并兩行

八、Input系列標(biāo)簽

1、常用標(biāo)簽type

• text 文本框
• date 年月日
• time 時(shí)分秒
• password 密碼框
• radio 單選框
• checkbox 多選框
• file 文件
• submit 提交
• reset 重置
• button 普通按鈕，默認(rèn)無功能，之后配合js添加功能

2、基本語法

<input type="" 屬性="">

3、屬性

• text——文本框
  placeholder 占位符
• password———密碼框
  placeholder 占位符
• radio——單選框
  name 擁有相同name的兩個(gè)選項(xiàng)不能被同時(shí)選擇
  checked 默認(rèn)選中
• checkbox ——多選框
  checked 默認(rèn)選中
• file——文件選擇
  multiple 可選擇多個(gè)文件
• button——按鈕
  submit 提交
  reset 重置

4、注意

input使用buttton類時(shí)，需要使用form標(biāo)簽，將整個(gè)代碼體包裹起來，這樣button類屬性才可以發(fā)揮相應(yīng)功能

<form></form>

九、button標(biāo)簽

1、type

• submit
• reset
• 普通button

十、select下拉標(biāo)簽

1、語法結(jié)構(gòu)

<select><option>下拉框內(nèi)容</option>
</select>

2、屬性介紹

• selected 默認(rèn)選中

十一、textarea文本域標(biāo)簽

1、語法結(jié)構(gòu)

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

2、屬性介紹

• cols 多少列
• rows 多少行

十二、label標(biāo)簽

1、語法結(jié)構(gòu)

<label>可包裹任意內(nèi)容</label>

2、常用場(chǎng)景

可以將表單標(biāo)簽與內(nèi)容綁定
使用方法：
（1）使用label標(biāo)簽將內(nèi)容和表單標(biāo)簽一起包裹起來
（2）需要把label標(biāo)簽的for屬性刪除即可

實(shí)例：

<label><input type="radio">男</label>

十三、布局標(biāo)簽

1、無語義的

• div 一行只顯示一個(gè)
• pan 一行顯示多個(gè)

語法實(shí)例

<div>xxx</div>

2、有語義的