本文将介绍以下五种标签的常见用法：
- iframe标签
- a标签
- form标签
- input/button标签
- table标签
1. iframe标签
- 作用：在当前页面嵌套一个页面
- 格式：
<iframe src="https://isujin.com/" frameborder="0"></iframe>
- 技巧：配合a标签可以实现在本页打开另一个页面的功能
<iframe name=xxx src="https://isujin.com/" frameborder="0"></iframe>
<a target=xxx href="https://isujin.com/">素锦</a>
2. a标签：
- 作用： 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。发起GET请求
- 格式：
<a href="https://www.imooc.com/">慕课</a>
- 方法：
1). target实现在不同方式打开URL链接
<a href="https://www.imooc.com/" target="_blank">新建页面打开</a>
<a href="https://www.imooc.com/" target="_self">当前页面打开</a>
<a href="https://www.imooc.com/" target="_parent">父级页面打开</a>
<a href="https://www.imooc.com/" target="_top">顶层页面打开</a>
2). download实现下载URL链接
<a href="https://www.imooc.com/" download>下载</a>
实现下载的方式有三种：网页中下载文件的相关总结
3). href打开超链接指向的URL或URL片段。
<a href="https://imooc.com/">下载</a>
// 以HTTPS协议打开imooc.com
<a href="//imooc.com/">下载</a>
// 当前页面是什么协议就用什么协议打开imooc.com
<a href="imooc.com/">下载</a>
// 会跳到当前目录/imooc.com
<a href="#imooc/">下载</a>
// 会跳到当前页面中的imooc锚点，不发起请求
<a href="?name=imooc">下载</a>
// 会跳到当前目录/?name=imooc
<a href="javascript:;">下载</a>
// 实现一个点击之后什么也不做的按钮
<a href="javascript:alerte(1);">下载</a>
// 执行JS代码 一个弹窗
4). 技巧：
<a href="href="#>下载</a>
<a href="href="#top;>下载</a>
// 跳转到页面顶部
3. form标签：
- 作用：表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。发起POST请求。
- 格式：
<form action="users" method="POST">
<!--action是处理form信息的程序所在的URL-->
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
<!--提交必须要有，不然不能提交（回车也不行）
如果只有button(没有type)，会自动升级成submit -->
</form>
-
方法：
- 与<a>标签相同的Target用法
技巧：
<form action="users" method="POST">
<!--method可以有GET跟POST
GET模式下会将参数当作查询参数提交给服务器
POST模式下会将参数当作第四部分提交给服务器
通过action="users/？Name=xxx"可以实现POST模式也有查询参数
但是没有方法让GET模式有第四部分-->
4. Input/button标签
- 作用：
- Input用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
- button表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 button可以有子元素，input不能有。
- 格式：
<input type="text" name="username">
<button name="button">Click me</button>
-
方法：
1). 与<lable>一起实现文字与选框的关联
<!--方法一-->
<label>用户名<input type="text" name="username"></label>
<!--方法二-->
<label for="name">用户名</label><input type="text" name="username" id="name">
2). 用checkbox实现多选框，value的值会被提交
今晚吃什么？
<label><input type="checkbox" name="dinner" value="Dumplings">饺子</label>
<label><input type="checkbox" name="dinner" value="noodles">面条</label>
3). 用radio实现单选框，需要有相同的name才能单选，value的值会被提交
明早吃啥子？
<label><input type="radio" name="breakfast" value="Fritters">油条</label>
<label><input type="radio" name="breakfast" value="Rice noodle">米线</label>
5. table标签
- 作用：用来表示表格数据 — 即通过二维数据表表示的信息。
- 格式及方法：
<table border="1">
<!--colgroup指定背景及宽度-->
<colgroup>
<col width=100>
<col bgcolor=green width=200>
<col width=100>
</colgroup>
<thead>
<tr>
<th>姓名</th><th>班级</th><th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td><td>C</td><td>80</td>
</tr>
<tr>
<td>小华</td><td>C</td><td>82</td>
</tr>
<tr>
<td>小苹</td><td>A</td><td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>备注</th><td></td><td></td>
</tr>
</tfoot>
</table>
