html5的常用标签

html5

版权声明：本文为博主原创文章，未经博主允许不得转载。

一、新增标签

1.结构标签

header  表示页面中一个内容区块或者整体内容的标题

nav    表示链接导航部分

footer   表示整个页面或者页面中一个内容区块的脚注 一般来说 他会包含创作作者的姓名 文章创作的日期以及创作者的联系信息

section  定义文档或应用程序的一区段  如文章章节 页眉 也叫或者文件的其他部分

article  文档中的一块独立的内容  写文章

aside  侧边栏  制作滚动广告的内容

2. 对话标签

dialog  定义对话  配合 dt dd 使用

dt 定义定义列表中题目标签

dd 定义列表中定义条目的解析部分标签

3.  标记标签

mark  标记的意思 例如高亮

默认背景颜色是黄色 你可以通过样式表修改成你想要的样式

4. 表示日期和时间

  time 语义标签  他是给搜索引擎来使用的 用来将你的页面进行分类的

5.进度条

meter 进度条 不是所有浏览器都兼容 IE不兼容

属性：

min 最小值

max 最大值

value 默认值

6.进度标签

progress     IE 不兼容  

属性:

min 最小值

max 最大值

value 默认值

二、多媒体标签

1. video  用于视频播放(ogg,mepg-4,webm)

属性:

src  资源地址

controls 显示控制

autoplay  自动播放

loop 循环播放

source  为媒介标签

作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源

属性

src

type

1. audio  用来播放音频(ogg,mp3,wav)

属性

src  资源地址

controls 显示控制

autoplay  自动播放

loop 循环播放

source  为媒介标签

作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源

属性

src

type

三、表单标签

1. input

type

email  匹配邮箱地址

url    网络地址（匹配的就是http://）

number 输入值必须是数字

属性

min 最小值

max 最大值

step  指定跳跃范围（步长）

value  默认值

range  取值范围 拉动条

属性

min 最小值

max 最大值

step  指定跳跃范围（步长）

value  默认值

 search 搜索框   效果和text一样

 tel     电话号  在pc端没有效果 在移动端会直接弹出数字键盘

 color  调用取色面板

2.时间相关内容表单属性 火狐不兼容

date   选取 日 月 年

month 选取 月 年

week  选取 周和年

time   选择时间  小时和分钟

datetime    选择utc时间，日月年

datetime-local 选取本地时间 日月年

四、属性

  placeholder  提示文字 有别于value

五、iframe  标签

可以构成一个特殊的框架结构 被称为浮动的框架 他是在浏览器窗口中嵌套另外一个网页文件

属性

src  默认显示页面

name 用于 target跳转

align 相对于周边元素的对齐方式  |left |right|top|middle|bottom

width 宽度

height 设置高度

scrolling 滚动条  yes no auto

frameborder  0 1  规定是否显示框架周围的边框

canvas 画布标签

 

总结：

这些都是常用的html5标签，还有很多没写出来，因为用的很少，像一些html5标签要注意IE和别的浏览器的兼容，主要是IE。

有一些标签我们对于它的使用要用到Javascript，像我们的画布canvas，这些需要一定的Javascript基础，所以我们把常用的好用的兼容性高的记住就行了，其他的了解就行。