1 列表

1.1 無序列表

    <!-- 
        unorder list 無序列表
        list item 列表項
     -->
    <ul>
        <li>HTMl 超文字標記語言</li>
        <li>CSS 層疊樣式表</li>
        <li>JavaScript 瀏覽器指令碼語言</li>
    </ul>

一組類似的內容排列在一起，適合使用無序列表，比如新聞列表，文章列表，導航條等。

1.2 有序列表

    <!-- 
        order list 有序列表
        list item 列表項
    -->
    <h2>小說</h2>
    <ol>
        <li>章節1</li>
        <li>章節2</li>
        <li>章節3</li>
        <li>章節4</li>
    </ol>
 

一組相似的內容排列在一起且排列項有序，適合使用的場景：各種排行榜

1.3 定義列表（瞭解）

    <!-- 
        dl define list 定義列表
        dt define title 定義列表項的標題
        dd define description 定義列表項描述
     -->
    <!-- 一個dt 對應一個dd -->

    <dl>
        <dt>HTML</dt>
        <dd>超文字標記語言</dd>
        <dt>CSS</dt>
        <dd>層疊樣式表</dd>
        <dt>JavaScript</dt>
        <dd>瀏覽器指令碼語言</dd>
    </dl>

     <!-- 一個dt對應多個dd -->
    <dl>
        <dt>如何掌握HTML標籤</dt>
        <dd>掌握語義</dd>
        <dd>掌握屬性及屬性值</dd>
        <dd>掌握標籤是雙標籤還是單標籤</dd>
    </dl>
 

1.4 列表標籤總結

<h1>列表項的巢狀</h1>
<hr>
<ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">熱賣商品</a>
        <ul>
            <li><a href="#">新人特賣</a></li>
            <li><a href="#">9.9包郵</a></li>
            <li><a href="#">人氣好物</a></li>
        </ul>
    </li>
    <li><a href="#">論壇</a></li>
    <li><a href="#">關於我們</a></li>
    <li><a href="#">加入我們</a></li>
</ul>
 

1. li標籤裡面可以包裹任何東西
2. li標籤必須被ul標籤或者 ol標籤直接包裹

2 表格標籤

2.1 表格的結構

    <table>
        <!-- 表格標題 -->
        <caption></caption>
        <!-- 表格頭部 -->
        <thead>
            <!-- 行 -->
            <tr>
                <!-- 表頭單元格 -->
                <th>表頭單元格</th>
                <th></th>
            </tr>
        </thead>
        <!-- 表格主體 -->
        <tbody>
            <!-- 行 -->
            <tr>
                <!-- 普通單元格 -->
                <td>普通單元格</td>
                <td></td>
            </tr>
        </tbody>
        <!-- 表格腳 -->
        <tfoot>
            <!-- 行 -->
            <tr>
                <td>普通單元格</td>
                <td></td>
            </tr>
        </tfoot>
    </table>

1. 表格標籤必須按照規定順序進行包裹 table > caption thead tbody tfoot > tr > th、td
2. 如果table標籤直接包裹tr，瀏覽器會自動新增 tbody，建議自己新增 thead,tbody,tfoot
3. td 和 th 作為單元格，內部可以包裹任意內容

2.2 表格整體樣式設定

給table標籤設定如下屬性：

width 設定表格寬度
height 設定表格高度
border 設定單元格邊框寬度
cellspacing 單元格間距
cellpadding 單元格內容和邊框距離

2.3 單元格樣式設定

① 設定單元格內容對齊方式

給td或者th設定如下屬性：

align 設定單元格的內容水平對其方式，值：left預設、center、right
valign 設定單元格的內容垂直對齊方式，值：middle預設、top、bottom

② 設定單元格寬高

給 td或者th設定如下屬性：

width 設定單元格所在的列寬
heigth 設定單元格所在的行高

2.4 單元格跨行和跨列（重要）

給 td或者 th設定如下屬性：

rowspan 設定該單元格所跨的行數
colspan 設定該單元格所跨的列數

2.5 表格標籤總結

3 表單

3.1 表單總體設定

<form action="https://www.baidu.com/s" method="get" target="_blank">
    <input type="text" name="wd">
    <input type="submit">
</form>

3.2 表單控制元件

① 文字輸入框

<!--  設定type屬性值為text表示文字輸入框 -->
<input type="text"> <br>
<!-- input標籤type預設值是text -->
<input> <br>
<!-- maxlength 設定最大可輸入長度 -->
<input type="text" maxlength="6"> <br>

② 密碼輸入框

<input type="password"> <br>
<input type="password" maxlength="4"> <br>

③ 單選框

<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

1、同一選項單選框要保證name的屬性值相同
2、設定checked屬性可以預設被選中，checked屬性不需要值

④ 複選框

<input type="checkbox" name="hobby" value="eat" checked> 吃飯 <br>
<input type="checkbox" name="hobby" value="sleep"> 睡覺 <br>
<input type="checkbox" name="hobby" value="code" checked> 敲程式碼 <br>
<input type="checkbox" name="hobby" value="study"> 學習 <br>

1、設定checked屬性可以預設被選中，checked屬性不需要值

⑤ 提交按鈕

<!-- 提交按鈕必須寫在form表單內 -->
<input type="submit">
<input type="submit" value="登入">
<!-- button預設type型別為submit -->
<button>提交</button>
<button type="submit">提交</button>

1、input標籤實現的提交按鈕，按鈕上的文字，預設是“提交”，可以使用 value屬性進行設定
2、button按鈕的type屬性預設是submit，預設就是提交按鈕

⑥ 重置按鈕

<input type="reset" value="重置">
<button type="reset">重置</button>

input標籤實現的重置按鈕，按鈕上的文字，預設是“重置”，可以使用value屬性設定按鈕上的文字。

⑦ 普通按鈕

<input type="button" value="普通按鈕">
<button type="button">普通按鈕</button>

⑧ 文字域

<!-- 
    rows：預設行數
    cols：預設列數
    -->
<textarea cols="30" rows="10"></textarea>

rows 設定預設顯示多少行，影響文字域的高度
cols 設定預設顯示多少列，影響文字域的寬度

⑨ 下拉選項

<!-- selected 屬性表示預設選中 -->
<select>
    <option>上海</option>
    <option selected>北京</option>
    <option>深圳</option>
    <option>新疆維吾爾自治區</option>
    <option>寧夏回族自治區</option>
    <option>伊犁哈薩克自治州</option>
</select>

給option設定selected屬性，可以讓該選項預設選中，selected屬性不需要屬性值