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>标签（加下划线）同理，都是后者语义更强烈。
网友评论