1.iframe标签:
iframe标签用于在一个页面当中嵌套页面。但目前已经很少用了,基本都是在一些旧项目才会看到。
它常与a标签一起用,用法如下(设置iframe标签的name与a标签中的target是同一个名字,代表a标签中的链接在iframe中打开):
效果如上图,点击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;
}