今天总结一下html的常用标签,大致包含以下内容
-
a标签及其属性介绍
-
img标签及其属性介绍
-
table标签及其子标签介绍
-
form标签的入门介绍
-
总结与注意点
一. a标签
a标签就是我们通常所说的链接标签,并且它可以链接到不同地址,用法很多。下面根据它的常用属性进行解释。
1.href属性, href的值就表示链接地址,并且它有种类型取值,来满足不同的开发需求。
- 网址
"//google.com"
href中填写以上三种形式的网址,那么a标签都会跳转到谷歌。第一种是最完整的网址,由于历史原因,因为游览器不可能要求广大用户完整记住各个网址,所以浏览器会根据原始网址经过重定向而找到最完整的网址并到达网页。
- 路径
/a/b/c 表示绝对路径,在接触http协议之前的所有路径是基于文件的,当接触http之后,如果我们开启的是http服务,那么它的根目录就不是硬盘的根目录,而是你在哪里开启的服务,哪里就是根目录。
a/b/c 表示相对路径,表示在当前目录。
index.html 或者./index.html 表示在当前目录找index.html
- 伪协议
javaScript:代码;用来执行javaScript代码,
mailto:邮箱地址 用来发邮件 例如“mailto:xiaocaotx@126.com” 。
tel:电话号码 用来打电话 例如“tel:13571356789” ,如果手机上给这个值,那么它就会调起电话且带有你写的号码。
- 内部锚点
#id 用来跳转到页面指定id的标签
2.target属性,target的值用来规定跳转的链接页面在那个窗口打开,它内置有四个选项值,也可以自定义值。
- 内置值
_blank: 表示在新窗口打开
_self: 表示在本页面打开,它默认值
_top:表示在最外层窗口中打开
_parent:表示在父窗体打开
其中_top和_parent容易混淆,其实是有区别的,例如,e页面使用ifram标签装了一个f页面,然后f页面中装有g页面,g页面有个a标签链接,那么target如果为_top时,链接页面在e页面打开,如果为_parent,链接页面在f页面打开。
- 自定义值
window的name 例如“xxx”
ifram的name 例如“yyy”
这样你可以在可以链接上使用这个值,然后不断在该窗口打开你想打开的内容。例如实现“goodbye”的网站
二.img标签
img标签的作用,发出Get请求,显示一张图片。
常用属性:alt/height/width/src
alt: 图片加载失败的时候加载的内容,
height/width: 设置高宽,如果只设置height或者width,另外一项就会自适应,如果同时都设置,那么图片就变型。
作为前端开发人员肯定不能出现,所以只需看情况设置一项即可。
src: 设置图片地址
事件:
onload, 图片加载成功的监听
onerror,图片加载失败的监听
响应式:
设置图片属性,max-width:100% ,即可使图片宽度永远跟页面窗口一样宽。
三.table标签
table中能用的,常用的,三个标签:thead, tbody,tfoot
tr: table row 表示table中的一行
th: table head 表示表头
td:table data 表示数据
1.当我们不写thead和tbody,直接写tr和td时,html会默认将其放到tbody中,如果连tr也没写,它也会帮你加上,这就是html的超强纠错。
2.thead,tbody,tfoot并不是一定要按照顺序写。
table的样式:
table-layout:css中表格布局中单元格行和列的算法,atuo表示自动,根据表头内容宽度去划分宽度,fixed表示尽量平均分单元格宽度。
border-collapse: collapse 使单元格边框合并
border-spacing:0px 使单元格边框之间没有间隙 ,通常这两个合用使边框无间隙。
四.总结与注意点
1.开发人员不要直接双击打开html文件,而是应该用网址打开。推荐两款工具打开,http-server和parcel。这两个工具安装简单使用方便,此处就不展开讲,有兴趣可自行了解。
2.ifram已经很少使用了,因为不好用,一些老系统还在使用,新的前端都是别的方式来实现,比如用ajax来实现。