1. Div：塊級標(biāo)簽姨伟，獨(dú)占一行
2. span： 行級標(biāo)簽惩琉，不獨(dú)占一行，只是可以用來標(biāo)記這段文字以用來單獨(dú)處理
3. strong：可以加粗文字夺荒，用來加強(qiáng)語氣
4. em：可以是文字變成斜體瞒渠，同樣是用來加強(qiáng)語氣

span、strong技扼、em的區(qū)別:strong在孝、em標(biāo)簽都表示加強(qiáng)語氣，但strong表現(xiàn)為加粗淮摔，em表示為斜體，
                    span標(biāo)簽沒有語義始赎，它的作用是為了設(shè)置單獨(dú)的樣式用的

5. table：表格標(biāo)簽和橙，常與th、tr造垛、td標(biāo)簽嵌套使用魔招，table內(nèi)的border屬性可以使表格建立邊框

thead:用來設(shè)置表格的表頭屬性
tr:指行數(shù)
td:指列數(shù)
<table border="1">
        <th>這是表頭</th>
        <tr>
            <td>這是第一行第一列</td>
            <td>這是第一行第二列</td>
        </tr>
        <tr>
            <td>這是第二行第一列</td>
            <td>這是第二行第二列</td>
        </tr>
    </table>
在瀏覽器顯示為：
這是表頭
這是第一行第一列    這是第一行第二列
這是第二行第一列    這是第二行第二列

6. ol、ul五辽、li：ol(order list)為有序標(biāo)簽和ul(unorder list)為無序標(biāo)簽办斑，常與li標(biāo)簽嵌套使用

<ol>
        <li>這是有序列表1</li>
        <li>這是有序列表2</li>
        <li>這是有序列表3</li>
        <li>這是有序列表4</li>
        <li>這是有序列表5</li>
    </ol>
    <ul>
        <li>這是無序列表1</li>
        <li>這是無序列表2</li>
        <li>這是無序列表3</li>
        <li>這是無序列表4</li>
        <li>這是無序列表5</li>
    </ul>
在瀏覽器顯示為：
![***show effects***](http://upload-images.jianshu.io/upload_images/1183639-dce4f2089df074ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

7. dl:自定義列表，常與dt杆逗、dd標(biāo)簽嵌套使用

<dl>
<dt>名詞</dt>
<dd>名詞解釋1</dd>
<dd>名詞解釋2</dd>
<dd>名詞解釋3</dd>
</dl>

8. from:表單標(biāo)簽乡翅，常用與注冊等需要填寫多項信息的場景中，form標(biāo)簽內(nèi)可以使用input罪郊、select蠕蚜、textarea、label悔橄、fieldset等標(biāo)簽

<fieldset>

<legend>How Are You</legend>
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>

<p>gender: <label><input type="radio" name="gender">男</label>
<input type="radio" name="gender" id="123">
<label for="123">女</label>
</p>
<p>favored: <label><input type="checkbox">ride</label>
<input type="checkbox" id="456">
<label for="456">basktball</label>
<label><input type="checkbox">football</label>
<label><input type="checkbox">music</label>
</p>
<p>Birthday:

<select name="" id="">
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
<option value="">2011</option>
<option value="">2012</option>
<option value="">2013</option>
<option value="">2014</option>
<option value="">2015</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option selected="" value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>月
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option selected="" value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>日
</p>

<p><textarea name="" id="" cols="30" rows="10">remark</textarea>
</p>

<p><input type="reset" value="reset"></p>

<input type="submit" value="Submit" />
</fieldset>
</form>

<p>請單擊確認(rèn)按鈕靶累，會跳轉(zhuǎn)到Y(jié)AN7的簡書個人頁面。</p>

![***show effects***](http://upload-images.jianshu.io/upload_images/1183639-1d3754b61e8e2c95.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)