HTML5新增的标签

来源：互联网发布：.us域名查询编辑：程序博客网时间：2024/05/21 10:58

一、新增的结构标签(块级元素 语义性)

1、<header> 头部标签
2、<nav> 导航
3、<footer> 页脚
4、<main> 主体部分--IE不支持
5、<aside> 侧边栏
6、<section> 带标题的段
7、<article> 文章帖子
8、<details> open属性打开配合summary使用--IE不支持
9、<summary> 解释说明
10、<dialog> open属性对话框脱离文本流有宽度默认居中会覆盖文本--IE不支持

二、新增的文本标签(块级元素 语义性)

1、<bdi> 改变文本的方向--各大浏览器不支持
2、<mark> 高亮显示标记可以通过background-color改变颜色
3、<meter> 定义度量

min最小值 max最大值 value值 low最小警戒线 high最大警戒线 optimum最优值
optimum 如果值大于high 越高越好；如果值小于low 越小越好

4、<progress> 正在进行的进度已完成多少

min最小值 max最大值 value值

5、<time> 定义时间--提供给搜索引擎收录

datetime="10-1" 指定具体的时间
<article pubdate="2016-12-6"></article>

6、<wbr> 截断单词

如果单词长度超过盒子，默认是超出，可以使用wbr分割单词

7、<ruby> 注音配合<rt>标签

<ruby>犇<rt>ben</rt></ruby>

三、新增的图像标签

1、<figure> 定义一段独立的流内容，删除不影响整体的文本内容

配合img、figcaption定义一个标题
<figure><img src="./1.jpg"></figure>

2、<canvas> 定义图像使用js画图

四、新增的列表标签

1、<dl> 对话形式的列表

<dt></dt>
<dd></dd>

</dl>

五、menu右键菜单标签--只有Firefox支持

需要在body中定义<body contextmenu="menu">
<menu id="menu" type="context">

<menuitem label="分享到QQ" onclick="alert"(分享完了)></menuitem>
<menuitem label="分享到微信"></menuitem>
<menuitem label="分享到微博"></menuitem>

</menu>

六、HTML5的音视频

1、<video> 视频

src="" 指定URL位置
width="" 播放器的宽度
height="" 播放器的高度
controls 播放器的控件
autoplay 自动播放
loop 循环播放
muted 默认静音
preload 边下边播--支持流媒体
poster="" 指定默认封面

2、<audio> 音频

src="" 指定URL地址
controls 播放器的控件
autoplay 自动播放
loop 循环播放
muted 默认静音
preload 边下边播--支持流媒体

3、<source> 定义多种媒体资源

类似于font:family
如果第一个可以播放，后面的不播放；
如果前面的格式不支持，开始播放后面
<source src="" type="">

七、HTML5新增的表单元素

A、新增input type=""属性

1、email 邮箱地址
2、url 需要http://
3、number 只能输入数字 e除外
min="最小值" max="最大值" step="步数"--每步增加多少
4、range 取值范围
min="最小值" max="最大值" step="步数"--每步增加多少
5、search 搜索框效果和text一样
results 在chrome中会出现放大镜--针对webkit内核
6、tel 输入框效果和text一样，在手机的时候，会调用手机的数字键盘
7、color 调出取色板--IE不支持

B、时间相关--Firefox、低版本的IE不支持

1、date 年月日
2、month 年月
3、time 小时分钟
4、week 年周
5、datetime utc时间--暂不支持
6、datetime_local 本地时间--暂不支持

C、新增input控件

1、pattern 使用正则
2、required 不为空
3、multiple 多文件上传
4、placeholder="" 提示信息
5、autocomplete="" 是否开启自动完成 on/off 默认打开
设置给form 所有的表单控件都没有自动完成
设置给input元素，执行规则，就近原则
6、autofocus 自动获取焦点
只能设置一个，如果设置多个，谁在前面执行谁

D、新增form属性

1、autocomplete="" 是否开启自动完成 on/off 默认打开
2、novalidate 表单不验证

阅读全文

1 1