表格，視訊音訊
阿新 • • 發佈：2021-01-06
標題什麼是列表，列表的分類
1.列表就是資訊資源的一種展示形式
2.（1）無序列表
<ul><!--申明這是無序列表-->
<li>.....</li>·<!--表示列表內容-->
<li>.....</li>
</ul>
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>我是誰</li> <li>你是誰</li> <li>他是誰</li> </ul> </body> </html>
效果圖：
- 我是誰
- 你是誰
- 他是誰
無序列表的特性：
沒有順序，每個
- 標籤獨佔一行（塊元素）
- 標籤後面內容效果是一個小黑點
（2.）有序列表
<ol><!--表示有序列表--> <li>......</li><!--表示列表內容--> <li>......</li> </ol>案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ol> <li>我是誰</li> <li>你是誰</li> <li>他是誰</li> </ol> </body> </html>效果圖：
- 我是誰
- 你是誰
- 他是誰
有序列表的特性：
有順序，每個- 標籤獨佔一行（塊元素）
預設 - 標籤項前面有順序標記
一般用於排序型別的列表，如試卷、問卷選項等 -
（3）定義列表
<dl><!--表示定義列表--> <dt>......</dt><!--表示列表項，內容會頂格--> <dd>......</dd><--表示列表項的內容--> <dd>......</dd>案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <dl> <dt>我是誰</dt> <dd>你是誰</dd> <dd>他是誰</dd> </dl> </body> </html>效果圖：
-
我是誰
- 你是誰
- 他是誰
- 標籤獨佔一行（塊元素） 預設沒有標記 一般用於一個標題下有一個或多個列表項的情況
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p> <h3>熱門活動 更多</h3> <ul> <li><img src="./img/img1.png"alt="未顯示"><h6>推薦活動 | 原創音樂現金榜T榜</h6></li> <li><img src="./img/img2.png"alt="未顯示"><h6>推薦活動 | 原創音樂現金榜T榜</h6></li> <li><img src="./img/img3.png"alt="未顯示"><h6>推薦活動 | 原創音樂現金榜T榜</h6></li> <li><img src="./img/img4.png"alt="未顯示"><h6>推薦活動 | 原創音樂現金榜T榜</h6></li> </ul> </body> </html>效果圖：
3.表格的基本語言<tabie border="1"><!--表格標籤,border表示表格線條寬度--> <tr><!--行標籤--> <td><colspan="2" rowspan="4"></td><!--單元格標籤,colspan表示佔了2列，rowspan佔了4行--> <td>......</td> </tr> <tr> <td>......</td> <td>......</td> </tabie>案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border=1> <tr> <th colspan="6">班級資訊統計表</th> </tr> <tr> <th>班級</th> <th>學號</th> <th>姓名</th> <th>年齡</th> <th colspan="2" rowspan="4">備註</th> </tr> <tr> <td rowspan="3">kb99</td> <td>1</td> <td>王思聰</td> <td>18</td> </tr> <tr> <td>2</td> <td>PGOne</td> <td>23</td> </tr> <tr> <td>3</td> <td>李小璐</td> <td>22</td> </tr> </table> </body> </html>效果圖：
班級資訊統計表 班級 學號 姓名 年齡 備註 kb99 1 王思聰 18 2 PGOne 23 3 李小璐 22 其中表格跨列：colspan所跨的列數
rowspan所跨的行數4.網頁上播放視訊和音訊
視訊元素:video
音訊元素:audio<video src="視訊路徑" controls></video><!--src表示路徑、controls表示暫停和音量的控制元件-->案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <video src="視訊的路徑" controls></video> </body> </html><audio src="音訊路徑" controls></video>案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <video src="vedio/video.avi" controls></video> <audio src="music/music.mp3" controls></audio> </body> </html>HTML5的結構元素
header 標題頭部區域的內容（用於頁面或頁面中的一塊區域） footer 標記腳部區域的內容（用於整個頁面或頁面的一塊區域） section Web頁面中的一塊獨立區域 article 獨立的文章內容 aside 關內容或應用（常用於側邊欄） nav 導航類輔助內容示例：
<header><h2>網頁頭部</h2> </header> <section><h2>網頁主體部分</h2></section> <footer><h2>網頁底部</h2></footer>