HTML常用标签全解

203 阅读2分钟

1.a标签

a标签的用法

属性:href、target、download、ref=noopener

a标签的作用

跳转到外部页面、跳转到内部锚点、跳转到邮箱或电话

1.a的 href 取值

(1)网址:

google.com

google.com

//google.com

(2)路径

/a/b/c以及a/b/c

index.html以及./index.html

(3)伪协议

JavaScript:;

mailto:邮箱

tel:手机号

(4)id

href=#xxx

 <a href="#xxx">到xxx</a>

2.a的target的取值

(1)target的取值

_blank 在新标签页打开

_top 结合iframe,在顶层打开

_parent 结合iframe,在上一层打开

_self 结合iframe,在一边打开

(iframe内嵌窗口,只有一些老浏览器还在用)

(2)程序员的命名

window的name

iframe的name

3.a的download

(1)作用

下载页面,不是打开页面

(2)问题

不是所有的浏览器都支持,特别是手机浏览器不支持

2.table标签

1.相关的标签

table、thead、tbody、tfoot、tr、th、td

tr(table row)、th(table header)、td(table data)

2.相关的样式

(1)table-layout:(fixed;auto)

auto会根据标题字数的多少改变表格单元的宽度

fixed会不管标题字数的多少表格单元的宽度不变呢

(2)border-collapse:(collapse)

(3)border-spacing:(0)

给table加上边框,然后结合在一起,中间没有缝隙

3.img标签

(1)作用:发送get请求,展示一张图片

(2)属性:

alt:图片加载不出来,代替的文字内容

height:图片的高度

width:图片的宽度

src:图片的请求地址

(3)事件

onlaod 加载成功调用

onerror 加载失败调用

(4)响应式

max-width : 100% ;

(5)可替换元素

可替换元素

详情见mdn

4.form和input标签

1.form标签

(1)作用:发送git或者post请求,然后刷新页面

(2)属性:action、method、target、autocomplete

(3)事件:onsubmit

2.input标签

(1)作用:让用户输入内容

(2)属性:type = button / text /password /checkbox / email / file / hidden / number

其他属性:name 、 autofocus 、checked 、 disabled 、 placeholder 、 value

(3)事件:onchange 、 onfocus 、onblur

(4)验证器:html5新增功能