常用的html标签

1. a标签
   a标签可以配合iframe标签

QQ

2. iframe标签

2.1 target属性
(1) _blank(也是默认状态): 在新页面打开链接。
(2) _self: 在当前页面打开链接。
(3) _parent: 在父元素打开链接。
(4) _top: 在祖先最顶部元素打开链接。

image.png

image.png

如图：点击index2中的parent QQ链接会在index页面打开链接，点击index3中的top QQ会在index页面打开链接。

2.2 download属性

下载

点击「下载」，可以下载「index2.html」文件。
还有一种下载方式，就是网页响应的「Content-type」为「application/octet-stream」时可以下载。但是如果「Content-type」为其他类型，则可以添加「download」属性来进行下载。

2.3 href属性
1）当我们直接这么写的时候：

QQ

href中的qq.com是一个相对路径。
点击后，网址变化如下：

image.png

2）以当前协议打开。

QQ

可能你的当前协议是file，点击后不能打开QQ的网页，此时可以在命令行安装一个叫「http-server」的东西，此时当前协议是以http打开页面。

3）查询条件

QQ

不会改变页面网址，会在当前网址后增加此「查询条件」。

4）#（锚点）
除了此方式，其他a标签都会发送get请求。

5）伪协议
如果有这么一个 需求，就是点a标签，但是什么都不做。

QQ

如果我们这么写，会“跳到”当前页面顶部。

QQ

如果什么都不写，浏览器会认为你是跳转到当前页面本身，也就是说会刷新页面。
因此，伪协议孕育而生。

QQ

3. form标签（）

3.1 如果form表单中没有提交按钮，则无法提交表单。（除非使用JS）

3.2 一般用于HTTP的POST请求

其中为username和password的值会作为POST请求的第四部分发出去。

image.png

但是如果此时换成GET请求，会有一些小区别。

image.png

会作为查询参数放在网址后面。

我们也可以在POST请求中增加查询参数。

3.3 form标签的target功效跟a标签相同，同样可以对iframe标签进行操作。

4. input 标签
   4.1 如果一个form中只有一个按钮，那么这个按钮会自动升级type为submit提交按钮。

      
      
      提交

如果input标签的type为button则不能提交。

4.2 type="checkbox"

爱我

此时为了便捷性，用户应该直接点“爱我”两个文字就可以勾选那个box。于是乎：

爱我

用label标签包住“爱我”，label标签中的for属性指向input标签的id属性。
但是老司机一般已经不这么做了，取名字太复杂了！！！！
就直接用label标签包住文字和input标签。

爱我

4.3 type="radio"，可以控制只选择一个选项，就是拥有相同的name。

yes
no

综合4.2和4.3，checkbox用于多选框，radio用于单选框。

5. select标签

    --
    第一组
    第二组
    第三组
    第四组

disabled使得选项不可选，selected是默认选项，multiple是可以选多个选项。

6. table标签

6.1 table的孩子标签就只有三个：,,,并且可以随意打乱顺序，浏览器会识别出三个标签应该有的顺序。

6.2 如果不写，浏览器会自动补充对应内容为标签里面。