html5常用标签的区别,HTML常用标签介绍

1.iframe标签：

iframe标签用于在一个页面当中嵌套页面。但目前已经很少用了，基本都是在一些旧项目才会看到。

它常与a标签一起用，用法如下(设置iframe标签的name与a标签中的target是同一个名字，代表a标签中的链接在iframe中打开)：

yyy

效果如上图，点击QQ就会在其左边这个框框里打开腾讯网页

2.a标签：

a标签用法通常有以下五种：

(1)在新页面打开：xxx

(2)在当前页面打开：xxx

(3)在父页面打开(有两个页面时)：xxx

(4)在顶层页面打开(有多于两个页面)：xxx

(5)下载：下载；若不在a标签写“download，也可在响应的content type写application/octet-stream

关于href要注意的地方：

(1)href后的地址要写上协议"https"，r若不写协议，例如只写"qq.com"，那只代表一个相对路径而已

(2)若写(即href后写一个锚点)则不会发起请求

(4)因为不能用file协议预览网页，因此想要预览自己写的网页有两种方式：

①上传到github预览

②用命令行下载一个工具，输入：npm i -g http-server；接下来运行，输入：http-server -c-1(写-c-1的目的是不要缓存)；复制它给的链接打开即可。如下图：

复制http://127.0.0.1:8080或者下面那个地址即可打开网页

(5)href还可以用来写一个伪协议，用法：

一般用来若想点击链接后什么都不做(不跳转页面)：

xxx(注意javascript：后接的是一个分号，若写页面会跳转到页面的开头，若写则会刷新页面)

3.form标签

form标签的作用与a标签的作用类似，也是跳转页面。但区别在于：通常a标签发起的是get请求，form标签用来发起post请求，用于提交用户名和密码。用法如下：

(注意一定要写method="post"，不写的话会默认是get请求，这样的话系统会把参数放到查询参数里，并不会把它放到响应的第四部分，没有意义；想要是post请求的时候也出现查询参数，可把查询参数写到action里)

值得注意的地方：

它的content type为application/x-www-form-urlencoded。用上面举例用法，我输入的username是xxx，password是yyy，那么它响应的就是“username=xxx&password=yyy”；但是如果我输入的username和password是中文，那么它就不会被直接显示，会根据其对应的utf编码显示

4.input与button标签

(1)input是一个空标签，button不是

(2)button用法：button，系统会把它自动升级成一个提交按钮

(3)若用input做一个提交按钮，则不能写，要写

checkbox与radio属性

checkbox用法一：

例：爱我

效果如下图：

“爱我”两字旁边出现了一个可以勾选的框框

值得注意的是：在input标签设置id="xxx"以及label标签里设置label for="xxx"可使点击勾选框和“爱我”两字的效果相同

用法二：用label标签把input标签包起来(也是最常用的一种方法)

例：用户名

若设置的是多选，则设置同一个name即可：

橘子

香蕉

radio属性(与checkbox的区别：check通常用于多选，radio通常用于单选)

用法如下图(设置同一个name即可使其只能单选)：

5.select标签

用法：

        //设置multiple可使其为多选

-

第一组

第二组

第三组          //设置disabled可使其不被选中

第四组        //设置selected可使其默认被选

6.textarea标签

textarea要设置好宽高，否则就会是一个可被任意拉动大小的输入框

用法一，在这是行数和列数(少用，因为不准确)

用法二：用CSS这是宽高(常用，准确)

7.table标签

用法如下图：

注意：

table{

border-collapse:collapse;

}