web前端基础知识之常用标签

1. Div：块级标签，独占一行
2. span： 行级标签，不独占一行，只是可以用来标记这段文字以用来单独处理
3. strong：可以加粗文字，用来加强语气
4. em：可以是文字变成斜体，同样是用来加强语气

span、strong、em的区别:strong、em标签都表示加强语气，但strong表现为加粗，em表示为斜体，
                    span标签没有语义，它的作用是为了设置单独的样式用的

5. table：表格标签，常与th、tr、td标签嵌套使用，table内的border属性可以使表格建立边框

thead:用来设置表格的表头属性
tr:指行数
td:指列数
<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)为有序标签和ul(unorder list)为无序标签，常与li标签嵌套使用

<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标签嵌套使用

<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dd>名词解释3</dd>
</dl>

8. from:表单标签，常用与注册等需要填写多项信息的场景中，form标签内可以使用input、select、textarea、label、fieldset等标签

<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>请单击确认按钮，会跳转到YAN7的简书个人页面。</p>

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