1.列表

? ? ? ? (1).有序列表

? ? ? ? 概念：有順序或側重順序的列表。

<h2>要把大象放冰箱總共分幾步</h2>

<ol>

????????<li>把冰箱門打開</li>

????????<li>把大象放進去</li>

????????<li>把冰箱門關上</li>

</ol>

? ? ? ??(2).無序列表

? ? ? ? 概念：無順序或不側重順序的列表。

<h2>我想去的幾個城市</h2>

<ul>

????????<li>成都</li>

????????<li>上海</li>

????????<li>西安</li>

????????<li>武漢</li>

</ul>

? ? ? ? (3).列表嵌套

? ? ? ? 概念：列表中的某項內容，又包含一個列表（注意：嵌套時，請務必把結構寫完整）。

<h2>我想去的幾個城市</h2>

<ul>

????????<li>成都</li>

????????<li>

????????????????<span>上海</span>

????????????????<ul>

????????????????????????<li>外灘</li>

????????????????????????<li>杜莎夫人蠟像館</li>

????????????????????????<li>

????????????????????????????????<a href="https://www.opg.cn/">東方明珠</a>

????????????????????????</li>

????????????????????????<li>迪士尼樂園</li>

????????????????</ul>

????????</li>

????????<li>西安</li>

????????<li>武漢</li>

</ul>

? ? ? ? 注意：li?標簽最好寫在?ul?或 ol 中，不要單獨使用。

? ? ? ? (4).自定義列表

? ? ? ? ? ? ? ? (1.概念：所謂自定義列表，就是一個包含術語名稱以及術語描述的列表。

? ? ? ? ? ? ? ? (2.一個?dl?就是一個自定義列表，一個 dt 就是一個術語名稱，一個 dd 就是術語描述（可以有多個）。

<h2>如何高效的學習？</h2>

<dl>

????????<dt>做好筆記</dt>

????????<dd>筆記是我們以后復習的一個抓手</dd>

????????<dd>筆記可以是電子版，也可以是紙質版</dd>

????????<dt>多加練習</dt>

????????<dd>只有敲出來的代碼，才是自己的</dd>

????????<dt>別怕出錯</dt>

????????<dd>錯很正常，改正后并記住，就是經驗</dd>

</dl>

2.表格

? ? ? ? (1)基本結構

? ? ? ? ? ? ? ? (1一個完整的表格由：表格標題、表格頭部、表格主體、表格腳注，四部分組成。

? ? ? ? ? ? ? ? (2.表格涉及到的標簽：

? ? ? ? ? ? ? ? ? ? ? ? table：表格

? ? ? ? ? ? ? ? ? ? ? ? caption：表格標題

? ? ? ? ? ? ? ? ? ? ? ? thead：表格頭部

? ? ? ? ? ? ? ? ? ? ? ? tbody：表格主體

? ? ? ? ? ? ? ? ? ? ? ? tfoot：表格腳注

? ? ? ? ? ? ? ? ? ? ? ? tr：每一行

? ? ? ? ? ? ? ? ? ? ? ? th、td：每一個單元格（備注：表格頭部中用 th ，表格主體、表格腳注中用： td）

? ? ? ? ? ? ? ? (3.具體編碼：

<table border="1"><!-- 表格標題 --><caption>學生信息</caption><!-- 表格頭部 --><thead><tr><th>姓名</th><th>性別</th><th>年齡</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主體 --><tbody><tr><td>張三</td><td>男</td><td>18</td><td>漢族</td><td>團員</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>滿族</td><td>群眾</td></tr><tr><td>王五</td><td>男</td><td>20</td><td>回族</td><td>黨員</td></tr><tr><td>趙六</td><td>女</td><td>21</td><td>壯族</td><td>團員</td></tr></tbody><!-- 表格腳注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共計：4人</td></tr></tfoot>
</table>

? ? ? ? (2).常用屬性

標簽	標簽語義	常用屬性	單/雙 標簽
table	表格	width：設置表格寬度 height：設置表格最小高度，表格最終可能比設置的值大 border：設置表格邊框寬度 cellspacing：設置單元格之間的間距	雙
thead	表格頭部	height：設置表格頭部高度 align：設置單元格的水平對齊方式，可選值如下： ? ? ? ? 1.left：左對齊 ? ? ? ? 2.center：中間對齊 ? ? ? ? 3.right：右對齊 valign：設置單元格的垂直對齊方式，可選值如下： ? ? ? ? 1.top：頂部對齊 ? ? ? ? 2.middle：中間對齊 ? ? ? ? 3.bottom：底部對齊	雙
tbody	表格主體	常用屬性與 thead 相同	雙
tr	行	常用屬性與 thead 相同	雙
tfoot	表格腳注	常用屬性與 thead 相同	雙
td	普通單元格	width：設置單元格的寬度，同列所有單元格全都受影響 height：設置單元格的高度，同行所有單元格全都受影響 align：設置單元格的水平對齊方式 valign：設置單元格的垂直對齊方式 rowspan：指定要跨的行數 colspan：指定要跨的列數	雙
th	表頭單元格	常用屬性與 td 相同	雙

注意：

????????1. <table> 元素的 border 屬性可以控制表格邊框，但 border 值的大小，并不控制單元格邊框的寬度，只能控制表格最外側邊框的寬度，這個問題如何解決？—— 后期靠 CSS 控制。

????????2. 默認情況下，每列的寬度，得看這一列單元格最長的那個文字。

????????3. 給某個 th 或 td 設置了寬度之后，他們所在的那一列的寬度就確定了。

????????4. 給某個 th 或 td 設置了高度之后，他們所在的那一行的高度就確定了。

? ? ? ? (3).跨行跨列

? ? ? ? ? ? ? ? (1.rowspan：指定要跨的行數。

? ? ? ? ? ? ? ? (2.colspan：指定要跨的列數。

3.常用標簽補充

標簽名	標簽含義	單/雙 標簽
br	換行	單
hr	分隔	單
pre	按原文顯示（一般用于在頁面中嵌入大段代碼）	雙

注意：? ? ? ? ??

????????1. 不要用 <br> 來增加文本之間的行間隔，應使用 <p> 元素，或后面即將學到的 CSS margin 屬性。

????????2. <hr> 的語義是分隔，如果不想要語義，只是想畫一條水平線，那么應當使用 CSS 完成。