HTML常用标签介绍

html中标签有很多，主要分为三组，分别是块级元素、内联元素、内联块级元素。

块级元素

常见的块级元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最经典的块级元素。特征：一行只能放一个，有宽高。可容纳内联元素和其它块级元素。

内联元素

常见的内联元素有<a>、<strong>、<b>、<em>、<i>、<span>等，其中<span>标签时最经典的内联元素。特征：都在一行上，设置高宽无效，只能容纳文本（<a>除外），其它内联元素。

内联块级元素

常见的内联块级元素有<img>、<input>、<td>等。特征：可设置宽高和对齐属性，内外边距都可控制。

各种级别元素可以在CSS中display（标签显示模式转换）转换：

• 块级转内联：display:inline;
• 内联转块级：display:block;
• 块级、内联转内联块级：display:inline-block;

iframe标签

主要用于嵌套页面（在一个页面中存在另一个页面的内容）
<iframe src="http://www.baidu.com" name="xxx"></iframe>
就是在当前页面中打开一个百度的页面。
常见属性：

• frameborder="0"消除自带边框（默认为1）。
• name属性与<a>标签的target属性相结合使用。

<iframe name="xxx" src="#" frameborder="0"></iframe>
<a target="xxx" href="http://qq.com">

• src中一般是网址，也可以是相对路径。

a标签

用于跳转页面（HTTP GET请求）
<a href="" target="" ></a>

常见属性：

• target：_blank（在新页面打开）、_self（在当前页面打开）、_top（在顶层页面打开，如无则同_self）、_parent（在父页面打开，如无则同_self）。
• 可添加download属性，点击下载（慎用）。
• herf支持无协议（//qq.com）,查询字符串。当其内容为空时，刷新页面；当其中为#时点击<a>标签，地址栏链接出现锚点，并跳到页面顶端。
• javascript伪协议：herf="javascript:;"点击之后没有任何动作。

form标签

表单标签，提交时跳转（HTTP POST请求）注：也可以是GET请求，可以在method属性中更改。

常见属性：

• form表单提交方式：
  1 使用<input>标签，其type为submit。
  2 使用<button>标签，其type为空。
  3 使用JS提交表单
• action属性指定请求路径
• method属性指定请求动词

input标签

与表单联用，用来提交表单信息（注意：此时一定要在<input>中加入name属性），以接收用户信息。
<input>标签有很多种类和属性，简要介绍几个。

• radio：单选按钮（在多个<input>中要实现单选需要有相同的name属性）。
• checkbox：复选框，可以有多个，同一类的要有相同的name属性。默认被选中项可以在<input>中添加checked属性（或checked="checked"）。
• text：但行文本输入；password：密码输入（被遮盖）。

在以上几种都是type属性，在需要点击文字部分以实现光标进入或者选择时需要配合<label>标签使用。

<label for="xxx">用户名：</label><input type="text" name="usename" id="xxx">
<label for="yyy">密码：</label><input type="password" name="password" id="yyy">

可以看到此时<label>标签将“用户名：”和“密码：”包起来，这个时候点击“用户名”或者“密码”时光标会移动到相应的框内（注意：此时必须配合使用for和id）。单选按钮和复选框做法一样。
还可以用<label>将<input>标签全部包起，可以起到一样的效果（此时，可以省略for和id）。

<label>用户名：<input type="text" name="usename"></label><br>
<label>密码：<input type="password" name="password"></label><br>

• select：下拉菜单

<select>
        <option>第一个</option>
        <option disabled>第二个</option>
        <option selected>第三个</option>
</select>

此时，第二个选项不能被选中（disabled），第三个选项是默认被选中（selected）。

textarea标签

文本域（多行文字），其大小可能会被用户拖动更改，会影响页面，要固定其大小，需要使用其CSS属性中的resize: none;如果被提交需要有name属性。

table标签

可以在HTML中自作表格

<table border="1">
        <colgroup>
            <col width="100px">
            <col width="100px">
            <col width="100px">
        </colgroup>
        <thead>
            <tr>
                <th>一</th><th>二</th><th>三</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>21</td><td>22</td><td>23</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>31</td><td>32</td><td>33</td>
            </tr>
        </tfoot>
    </table>

此时，可以看到一个三行三列的表格。<thead>中是第一行，<tbody>中是第二行，<tfoot>中是第三行，这三个在不省略的情况下可以互换，但是并不会影响其显示（浏览器会自动纠正），但是在省略的情况下会影响其顺序。<tr>标签组成行，<td>标签组成列（由于html中并没有列的概念，所以使用<td>标签组成列的形式）。在<table>中加入border="1"可以出现如上图所示边框（双重边框），可以使用CSS中的style="border-collapse: collapse;"改成单边框（还可以在<table>标签中使用cellpadding="0" cellspacing="0"属性去除双重边框）。

写在最后

• <div>和<span>标签时我们在页面布局中经常使用的两个标签，没有语义。
• <b>标签和<strong>标签都表示粗体，但是<strong>标签的语义更强烈。<i>标签和<em>标签（倾斜）、<s>标签和<del>标签（加删除线）、<u>标签和<ins>标签（加下划线）同理，都是后者语义更强烈。