这篇文章将简单介绍几个在HTML常用的标签：iframe标签、a标签、form标签、input标签、button标签、select标签、textarea标签和table标签一共八个常用标签。
1.iframe标签
作用:嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
（1）iframe标签是一个自带属性的可替换标签，当使用这个标签后，相当于在一个页面中打开了两个网址，因此整体运行速度会明显变慢。
（2）一般使用这个标签时，要给标签加入frameborder="0"属性，可以消除嵌入页面的边框凹陷效果。
（3）frame标签一般还会有name属性，这个属性一般结合a标签使用。
（4）另外，此标签在现代前端开发中已经很少使用。
2.a标签
作用：用于跳转页面，在HTTP协议下发送GET请求。
target属性
当iframe标签中定义了name属性后，就可以通过a标签的target属性在嵌入页面中跳转a标签指定的网址。
例如：
<iframe src="#" frameborder="0" name=xxx></iframe>
<a href="http://www.baidu.com" target=xxx>跳转百度页面</a>
target属性还有四种其他用法，分别如下所示：
<a href="http://www.baidu.com" target="_blank">在空页面打开</a>
<a href="http://www.baidu.com" target="_self">在自己页面打开</a>
<a href="http://www.baidu.com" target="_parent">在父亲页面打开</a>
<a href="http://www.baidu.com" target="_top">在顶层窗口打开</a>
download属性
a标签可以通过加入download属性来下载当前页面。
可以下载的两种情况：
（1）a标签中加入了download形式
（2）响应返回的Content-Type为application/octet-stream
href属性
href后面的地址不能写成href=“qq.com”，因此.com有可能为文件后缀，浏览器无法正常识别。
href的四种用法：
<a href="//qq.com">不指定协议，当前页面是什么协议，就使用什么协议。</a>
<a href="#xxx">不发送请求，xxx自动加在地址后</a>
<a href="?name=xxx">发送请求，xxx自动加在地址后</a>
<a href="javascript: alert(1);">javascript伪协议，提示1</a>
<a href="javascript:;">javascript伪协议，点击后什么都不做的a标签</a>
3.form标签
作用：用于跳转页面，在HTTP协议下发送POST请求。
（1）如果form标签里面没有提交按钮，就无法提交form表单。
<form action="index.html" method="post">
<input type="text" name="text">
<input type="submit" valule="请求">
</form>
（2）form标签是HTML提交内容的唯一方法。
（3）用form标签提交内容时的Content-Type为：application/x-www-form-urlencoded。
（4）提交的内容若为键盘内容之外的（如中文），提交时需经过转译，会变成对应的UTF-8编码。
（5）另外，file协议是不支持post的。
（6）如果用form标签来写GET，所写的参数会放入查询参数里面，通过地址栏可以看到，但GET不能有第四部分。
（7）用form标签来写POST时，也可以写入查询参数，只需把查询参数写在“action”属性后即可。
（8）form标签也有target属性，且用法与a标签是一样的。
4.button标签
作用：生成一个按钮
如果在form标签中没有定义button标签的类型，button会自动升级成提交按钮。
<form action="index.html" method="post">
<input type="text" name="text">
<button>提交</button>
</form>
如果在form标签中定义button标签的类型为“button”，点击button标签则不会提交内容。
<form action="index.html" method="post">
<input type="text" name="text">
<button type="button">提交</button>
</form>
5.input标签
input标签的type有许多属性，其中：
“submit”：表示提交按钮。
“checkbox”：表示多选框。
另：通过label关联多选框与文字的方法
<input type="checkbox" id="xxx"> <label for="xxx">爱我</label>
或者
<label>爱我<input type="checkbox"></label>
“radio”：表示单选框，两个radio button有同一个name，就只能有一个被选中。
6.select标签
作用：生成一个下拉列表
<form action="user" method="POST">
<select name="xxx" multiple>
<option value="" selected>-</option>
<option value="1" disabled>第一组</option>
<option value="2">第二组</option>
<option value="3">第三组</option>
<option value="4">第四组</option>
<option value="5">第五组</option>
</select>
<input type="submit" value="提交">
</form>
其中，multiple属性可使下拉列表按住Ctrl或者Shift键进行多选。
selected属性表示下拉列表的默认项。
disabled属性表示下拉列表的不可选项。
7.textarea标签
作用：生成一个多行文本框
textarea可以让用户自己调节文本框大小，这样很容易出现问题，因此要通过CSS控制来确定它的大小
style="resize: none; width=xxx heitght=xxx"
或者：
cols="xx" rows="xx"cols为列数，rows为行数
8.table标签
作用：生成一个表格
（1）table的子元素只能有四个，分别为<colgroup>、<thead>、<tbody>和<tfoot>，这三个子元素后面跟<tr>（table rows），表示新增一行，每一行的数据分为两种，第一种为表头，用<th>表示。第二种为数据，用<td>来表示。
（2）<colgroup>用来控制表格的单元格宽度和背景色。
<table border=1>
<colgroup>
<col width=100 bgcolor=red>
<col width=200>
</colgroup>
<thead>
<tr>
<th>数字</th><td>123</td>
</tr>
</thead>
<tbody>
<tr>
<th>数字</th><td>123</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>数字</th><td>123</td>
</tr>
</tfoot>
</table>
上述代码会生成一个三行两列的表格，其中第一列的宽度为100px，且背景色颜色为红色，第二列宽度为200px，另外，bgcolor也可以通过CSS来实验。
上述表格中，可以通过CSS来合并表格间的间隙，代码如下
table{
border-collapse=collapase;
}
另外，<thead>、<tbody>和<tfoot>在代码中不管顺序如何，在展示时仍然会按照<thead>、<tbody>、<tfoot>的顺序来展示。且若代码中不写<tbody>，浏览器会自动补全<tbody>，不写<thead>和<tfoot>，也会自动补全<tbody>。
网友评论