HTML5常见标签详解

本文将介绍以下五种标签的常见用法：

1. iframe标签
2. a标签
3. form标签
4. input/button标签
5. table标签

1. iframe标签

1. 作用：在当前页面嵌套一个页面
2. 格式：

3. 技巧：配合a标签可以实现在本页打开另一个页面的功能

素锦

2. a标签：

1. 作用： 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。发起GET请求
2. 格式：

慕课

3. 方法：
   1). target实现在不同方式打开URL链接

新建页面打开

当前页面打开

父级页面打开

顶层页面打开

2). download实现下载URL链接

下载

实现下载的方式有三种：网页中下载文件的相关总结

3). href打开超链接指向的URL或URL片段。

下载

// 以HTTPS协议打开imooc.com

下载

// 当前页面是什么协议就用什么协议打开imooc.com

下载

// 会跳到当前目录/imooc.com

下载

// 会跳到当前页面中的imooc锚点，不发起请求

下载

// 会跳到当前目录/?name=imooc

下载

// 实现一个点击之后什么也不做的按钮

下载

// 执行JS代码 一个弹窗

4). 技巧：

下载

下载

// 跳转到页面顶部

3. form标签：

1. 作用：表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。发起POST请求。
2. 格式：

3. 方法：

   1. 与标签相同的Target用法

4. 技巧：

4. Input/button标签

1. 作用：

• Input用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
• button表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 button可以有子元素，input不能有。

2. 格式：

Click me

3. 方法：

   1). 与一起实现文字与选框的关联

用户名



用户名

2). 用checkbox实现多选框，value的值会被提交

今晚吃什么？

饺子

面条

3). 用radio实现单选框，需要有相同的name才能单选，value的值会被提交

明早吃啥子？

油条

米线

5. table标签

1. 作用：用来表示表格数据 — 即通过二维数据表表示的信息。
2. 格式及方法：

姓名
班级
分数









小米
C
80





小华
C
82





小苹
A
90









备注