好好學習，天天向上

本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star

1. 標題標籤

<h1> </h1> ...... <h6> </h6>

為了使網頁更具有語義化,我們經常會在頁面中用到標題標籤。HTML提供了6個等級的網頁標題
即<h1>-<h6>

2. 段落和換行標籤

段落標籤：<p> </p>

在HTML標籤中,

標籤用於定義段落,它可以將整個網頁分為若千個段落

換行標籤：<br/>

在HTML中,一個段落中的文字會從左到右依次排列,直到瀏覽器視窗的右端,然後才自動換行。如果希望
某段文字強制換行顯示，就需要使用換行標籤<br/>

3. 文字格式化標籤

加粗：<strong> </strong>或者<b> </b>

傾斜：<em> </em>或者<i> </i>

刪除線：<del> </del>或者<s> </s>

下劃線：<ins> </ins>或者<u> </u>

4. <div></div>和<span></span>

<div></div>是大盒子，一行只能放一個大盒子

<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>

<span></span>是小盒子，一行可以放多個

5. 影象標籤

影象標籤：<img src="xxxxxx" 屬性2="xxxxxx">

6. 超連結標籤

< a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>

7. 錨點連結

<a href="#要跳轉的元素的id"></a>

點選連結的時候，會跳轉到指定元素所在的位置。

8. 註釋和特殊字元

註釋以“<!-”開頭，以“->”結束。

特殊字元：

9. 表格標籤

<table></tabe>是用於定義表格的標籤。

<tr></tr>標籤用於定義表格中的行,必須巢狀在< table></ table>標籤中

<td></td>用於定義表格中的單元格，必須巢狀在< tr></ tr>標籤中

<th></th>表示表格的表頭部分，表示表格的第一行或第一列，其中的文字內容加粗居中顯示

<thead></thead>用於定義表格的頭部。< thead>內部必須擁有< tr>標籤，一般是位於第一行

<tbody></tbody>用於定義表格的主體，主要用於放資料本體。

一些常用的屬性：

<table border="1" cellspacing="0" width="500" height="250">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td align="left" rowspan="2">111</td>
            <td colspan="2">222</td>
        </tr>
        <tr>
            <td>555</td>
            <td>666</td>
        </tr>
    </tbody>
</table>

10. 列表標籤

<ul></ul>：定義無序列表，裡面只能放 li 標籤，其它標籤不被允許

<ol></ol>：定義有序列表，裡面只能放 li 標籤，其它標籤不被允許

<li></li>：有序列表和無序列表中的列表項，相當於一個容器，裡面可以放其它標籤

<dl></dl>：定義自定義列表，裡面只能包含 dt 和 dd 標籤

<dt></dt>：定義自定義列表中的專案

<dd></dd>：描述自定義列表中的每一個專案

<ul>
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
</ul>

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<dl>
    <dt>幫助中心</dt>
    <dd>賬戶管理</dd>
    <dd>購物指南</dd>
    <dd>訂單操作</dd>
    <dt>服務支援</dt>
    <dd>售後政策</dd>
    <dd>自助服務</dd>
    <dd>相關下載</dd>
</dl>

11. 表單標籤

通常一個表單由一個大的表單域構成，表單域裡面又包含表單元素和提示資訊。

<form></form>：表單域標籤，表單域就是一個包含表單元素的區域

<form></form>標籤常用屬性：

<input/>：輸入表單元素

<lable></lable>：繫結一個表單元素，當點選 lable 標籤內的文字時，會自動將焦點轉到對應的表單元素上，lable 標籤的for屬性必須得與相關元素的id屬性相同

<select></select>：下拉表單元素，用於定義一個下拉列表

<option></option>：下拉列表中的元素，定義selected=“selected”屬性時，當前項為預設選中項

<textarea></textarea>文字域元素，用於定義一個多行文字輸入框，cols屬性規定每行的字元數，rows屬性規定顯示的行數

<input/>標籤的常用屬性：

<input/>標籤type屬性值：

<form action="xxx.jsp" method="GET">
    <table width="500">
        <tr>
            <td>性別</td>
            <td>
                <input type="radio" id="man" name="sex"/> 
                <label for="man"><img src="images/man.jpg"> 男 </label>
                <input type="radio" id="women" name="sex"/> 
                <label for="women"><img src="images/women.jpg"> 女 </label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="year">
                    <option selected="selected">--請選擇年--</option>
                    <option>1990</option>
                    <option>2000</option>
                    <option>2010</option>
                </select>
                <select name="month">
                    <option selected="selected">--請選擇月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select name="day">
                    <option selected="selected">--請選擇日--</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地區</td>
            <td>
                <input type="text" value="安徽" name="area">
            </td>
        </tr>
        <tr>
            <td>婚姻狀況</td>
            <td>
                <input type="radio" name="marital_status" id="spinsterhood"> 
                <label for="spinsterhood"> 未婚 </label>
                <input type="radio" name="marital_status" id="married"> 
                <label for="married"> 已婚 </label>
                <input type="radio" name="marital_status" id="divorce"> 
                <label for="divorce"> 離婚 </label>
            </td>
        </tr>
        <tr>
            <td>學歷</td>
            <td><input type="text" name="edu_bg"></td>
        </tr>
        <tr>
            <td>喜歡的型別</td>
            <td>
                <input type="checkbox" name="like_type" id="wumei"> 
                <label for="wumei"> 嫵媚的 </label>
                <input type="checkbox" name="like_type" id="keai"> 
                <label for="keai"> 可愛的 </label>
                <input type="checkbox" name="like_type" id="xiaoxianrou"> 
                <label for="xiaoxianrou"> 小鮮肉 </label>
                <input type="checkbox" name="like_type" id="laolarou"> 
                <label for="laolarou"> 老臘肉 </label>
                <input type="checkbox" name="like_type" id="douxihuan">
                <label for="douxihuan"> 都喜歡 </label>
            </td>
        </tr>
        <tr>
            <td>自我介紹</td>
            <td>
                <textarea cols="30" rows="10" name="self_introduction"></textarea>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="submit" value=" 免費註冊 ">
            </td>
        </tr>
    </table>
</form>

碼字不易，可以的話，給我來個點贊，收藏，關注

如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』