本篇文章主要记录的是自己学习的 HTML 常用的标签。
1、iframe 标签——嵌套页面
iframe这个标签目前用的很少,但是如果有五年前的遗留项目可能就会看到这个标签,主要就是在一个界面里面嵌套一个界面。关于iframe的详细内容有可以参考如下两个网站:
iframe 相关问题:https://www.zhihu.com/question/20653055 。
阅读 iframe MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe 。
一下是我自己关于iframe的学习记录。
iframe标签在页面中显示的时候,默认的宽度是100px,高度是50px,也可以在CSS中进行设置宽度和高度。
iframe其中的frameborder表示的边框的样式,默认的样式是带有三维效果的框,不怎么好看,所以一般都会设置为frameborder="0"。
iframe的src属性一般会填写网址 ,表示所嵌套的网页是什么网页,比如src="http://qq.com",那么此时嵌套界面处显示的就是QQ的主页,如果src=”#”,那么这时嵌套界面是一个空的页面,什么都不包含在其中,src还可以是相对路径,比如所编写的网页文档在同一目录下的文件,src="./index2.html",这时嵌套界面显示的就是编辑的index2.html的界面内容。
iframe的name属性和a标签结合起来使用,关于a标签的详细说明在下面进行讲解。
这就是如何使用iframe和a配合使用的情况,这时在界面出现的QQ,点击后嵌套的界面就会跳转到QQ的页面上。点击百度,嵌套的界面就会跳转到百度的主页。
2、a 标签
跳转页面(HTTP GET 请求)
属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
2.1 展示界面
对于a标签来说,最为常用的功能就是使用来打开一个界面。
点击blank_QQ在一个新界面直接打开连接
点击self_QQ在当前界面的一个规定的区域打开链接
点击parant_QQ在所嵌套的那个区域打开链接
点击top_QQ在最顶层的界面中打开链接,也可以说是在最原始的网页中打开。
2.2 下载
a标签可以用来设置下载功能,比如
浏览器是否能进行相应下载请求,看http相应的Content-type为application/octet-stream时,服务器就会以下载的形式去接收这个请求,而不是展示。如果Content-type为text/html时,想要用户能进行下载,那么就是用a标签进行强制下载。下载,这时,点击界面上的下载按钮就能就行下载了,这时下载的是当前界面的html文件。可以设置为下载安装包等功能。
2.3 a标签的href的相关内容
QQ href的内容中的”//”表示当前什么协议访问的链接就是什么协议
QQ 此时点击QQ后会跳转到一个相对路径
QQ href的内容是一个锚点的话,点击之后不会进行跳转。是在当前页面,不发起请求
QQ 此时会发出一个GET请求,但是并没有跳转
href可以写一段伪协议。比如href="javascript:xxx"
警告,点击“警告”就会直接执行js代码
QQ 此时表示的是一个伪协议,点击的时候页面什么都不会动,实现这样的需求的话,如果使用的是QQ命令的话,点击之后页面将会有跳转的情况,a标签必须有herf,不能没有herf,href如果是“ ”也是不行,相当于界面会进行刷新,所以满足这种需求的时候就可以使用href="javascript:;"。
3、form 标签
跳转页面(HTTP POST 请求)
属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
如果form的表单里面没有提交按钮,将无法提交form,所以form一般都会和input等标签一起使用,form一般都是进行POST请求的。
会出现这样的一个页面布局
除此之外HTML就没有其他的提交方法上传内容,点击提交后此时点开所在网页界面的netbook在第四部分出现的form data上可以看到密码的明文,输入框中的内容如果是英文字母或者键盘上的特殊符号之外的将会出现一个utf-8转码的结果。
需要注意的是file协议是不支持POST的。
这样就可以将提交的内容放到一个嵌入的网页中,也可以正常的使用前面说讲的a标签的target的设置内容。
4、input / button
区别:是否为「空标签」
input 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
1、在
2、
3、 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
标签规定了用户可以在其中输入数据的输入字段
1、 元素在
如果form表单里面的button标签没有指定type,那么点击按钮之后将会实现的是submit的功能,当使用input标签的时候指定了type之后,定义的按钮就可以进行提交了。Submit是唯一能进行提交form的方式。
哎呀 出现的是一个勾选框,框后面是“哎呀”,点击“哎呀”勾选框就会被选中。
此处另外引出一个label标签的使用方法,具体为: 这样写就可以不用写id,两者就能直接连接起来。
Input的checkbox和radio
checkbox是多选框:
喜欢的水果
这个时候由于name是相同的,所以就可以进行多项选择
radio是单选框:
好吗
此时由于name是相同的,所以只能选择一个,要么Yes要么No,
两者都在form的表单里面时,当进行提交的时候选择的内容就会随着提交的按钮上传到服务器上。
比如
Select标签是进行分组的,和分组标签共同使用的得有option,
没有multiple的时候只能进行单选,有multiple时,就可以多选,按下Ctrl键,进行多选,选择的内容是option标签里面的内容,如果option的中有disable的时候表示不能进行选择,当option中有selected的时候是该选项已经被选中,为空就是value=””.
textarea标签是对于文字进行编辑的一个输入框
5、table 标签示例
用于展示数据
属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
table标签主要是用来添加表格的。例子如下:
项目 | 姓名 | 班级 | 武力值 |
---|---|---|---|
张三丰 | 1 | 88 | |
秦始皇 | 2 | 66 | |
平均分 | 77 | ||
总分 | 154 |
画出来的效果如下:
HTML规定table标签有三个元素,分别是指的是表头、
指的是表的主体、指的是表的脚,三者的顺序在代码中可以不分前后,但是将三个元素的表头都删掉了之后,代码中写的是什么顺序,显示的就会是什么顺序。由于以上的表格线之间存在着一定的间隙,可以通过CSS消除间隙,如下所示
table{
border-collapse:collapse //在head里面添加这一句就会将所画的表格线紧密的凑到一起。
}
到此就结束了本文的学习记录,HTML并非想象中的那么简单,里面的内容还有很多都是需要慢慢学习的,今后的学习过程中还得慢慢积累这方面的知识。