目錄
一、列表
列表分爲有序列表、無序列表和自定義列表
1.有序列表
<ol>
<li>範雪雪演藏族女孩</li>
<li>撞死兩個人後自拍</li>
<li>詩隆甜蜜出遊</li>
<li>一線城市樓市退燒</li>
</ol>
有序列表特性：
- 有順序，每個<li>標籤獨佔一行（塊元素）
- 默認<li>標籤項前面有順序標記
- 一般用於排序類型的列表，如試卷、問卷選項等
有序列表標籤，默認在網頁中會以 1. 2. 3.往下排，但在 ol 後邊加上 type= “1/a/A/i/I ”，他就會以指定的排序方式往下排（共五種排序方式，我寫的/在筆記 中代表的是或者的意思，結束符不算哈），在 ol 後邊加上 reversed=“reversed”，則 以倒序排列，在 ol 後邊加上 start=“2”，則以第二個往下排，引號裏可以只寫數字， 寫數字幾，則從第幾個開始往下排。ol 和 li 在實際開發中基本上不用。
2.無序列表（重要）
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死兩個人後自拍</li>
<li>詩隆甜蜜出遊</li>
<li>一線城市樓市退燒</li>
</ul>
無序列表特性：
- 沒有順序，每個<li>標籤獨佔一行（塊元素）
- 默認<li>標籤項前面有個實心小圓點
- 一般用於無序類型的列表，如導航、側邊欄新聞、有規律的圖文組合模塊
無序列表標籤，默認前邊爲小黑點，即屬性爲 type=“disc”，小方塊爲 type= “square”，小圓圈爲 type=“circle”
ul 和 li 致力於做一些功能，有一些功能特別符合 ul 和 li 的父子結構，比如說有一個 功能，這個功能由許多的功能子項來組成，每一個功能子項的功能和樣式基本上都是 相同的，只不過他們的內容有一些差異，很多的功能子項組成了一個大功能，這樣的 東西我們就用 ul 和 li 來展示，因爲 ul 和 li 更符合他天生的結構。
3.自定義列表
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>桃子</dd>
<dd>李子</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黃瓜</dd>
<dd>西紅柿</dd>
</dl>
定義列表特性：
- 沒有順序，每個<dt>標籤、<dd>標籤獨佔一行（塊元素）
- 默認沒有標記
- 一般用於一個標題下有一個或多個列表項的情況（使用較少）
二、表格（主要用於數據顯示）
<table border="1" ><!--border="1" 邊框爲1-->
<tr>
<td colspan="3">學生成績</td> <!-- colspan="3" 跨3列-->
</tr>
<tr>
<td rowspan="2">張三</td> <!-- rowspan="2" 跨2行-->
<td>語文</td>
<td>98</td>
</tr>
<tr>
<td>數學</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>88</td>
</tr>
<tr>
<td>數學</td>
<td>91</td>
</tr>
</table>
效果圖：
三、媒體元素
視頻 video 音頻audio
<!--視頻-->
<video controls autoplay><!--autoplay自動播放-->
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的瀏覽器不支持video元素
</video>
<!-- 音頻-->
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的瀏覽器不支持audio元素
</audio>
四、html5的結構元素
|
元素名 |
描 述 |
|
header |
標題頭部區域的內容（用於頁面或頁面中的一塊區域） |
|
footer |
標記腳部區域的內容（用於整個頁面或頁面的一塊區域） |
|
section |
Web頁面中的一塊獨立區域 |
|
article |
獨立的文章內容 |
|
aside |
相關內容或應用（常用於側邊欄） |
|
nav |
導航類輔助內容 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>網易郵箱頁面佈局</title>
<!--此段代碼只是讓大家能更好的看到每塊元素的位置，後面在CSS中會具體講解-->
<style>
header,section,footer{
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體部分</h2>
</section>
<footer>
<h2>網頁底部</h2>
</footer>
</body>
</html>
效果圖： 
五、本章小結
