H5新增标签和属性

H5新增标签

1、结构标签

1. header：某个区块的头部信息/标题；
2. section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
3. nav：导航条部分信息
4. footer：底部信息；
5. hgroup：头部信息/标题的补充内容；
6. aside：标签内容之外与标签内容相关的辅助信息；
7. article：特殊独立区块，表示这篇页眉中的核心内容；
8. 增加了 检查列表 功能。
9. figure：独立的单元，例如某个有图片与内容的新闻块。
10. figcaption 给figure组合添加一个标题
11. dialog 类似于会话框
    eg:
    这是打开的对话窗口

2、 媒体标签

1. video：视频
2. audio：音频
3. embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

audio

    a) controls 添加音频控制条

   b) autoplay 设置音频自动播放（高版本屏蔽了autoplay自动播放功能）
muted属性 可以解决高版本屏蔽自动播放功能

   c) loop 循环播放

注：audio支持的音频格式：mp3,wav,ogg

video

注：

a) width和height 定义视频区域的宽度和高度

b) poster 在视频播放前加载一张图片

c) controls,autoplay,loop同audio中的这些属性

注：video支持的视频格式：mp4(MPEG4),ogg,webm

3、表单标签

1.email：必须输入邮件；
2. url：必须输入url地址；
3. number：必须输入数值；
4. range：必须输入一定范围内的数值；
5. Date Pickers：日期选择器；
　　a.date：选取日、月、年
　　b.month：选取月、年
　　c.week：选取周和年
　　d.time：选取时间（小时和分钟）
　　e.datetime：选取时间、日、月、年（UTC时间）
　　f.datetime-local：选取时间、日、月、年（本地时间）　
6. search：搜索常规的文本域；
7. color：颜色

4、其他功能标签

1. progress：进度条；
2. wbr：软换行，页面宽度到需要换行时换行；
3. canvas：使用JS代码做内容进行图像绘制；
4. datailst：文本域下拉提示；
5. deteils ：展开菜单； keygen:加密； mark：标注（像荧光笔做笔记）
6. time：属性：datetime datetime 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
   pubdate pubdate 指示 元素中的日期 / 时间是文档（或
   元素）的发布日期。

我们每天早上 9:00 开始上课。
 
我在 情人节 有个约会。

7. ruby和rt：对某一个字进行注释；注释浏览器不支持时如何显示
8. bdi：定义文本的文本方向，使其脱离其周围文本的方向设置
9. command：按钮；

H5新增属性

1、required 限制用户输入为必填项，不能为空
eg:

2.placeholder=“默认提示信息” 给input输入框添加默认提示信息

eg:

3.autofocus 页面加载完成后光标自动聚焦到某个输入框

eg:

4.pattern=“正则表达式” 输入的内容要匹配指定的正则表达式

eg:

5.min 设置最小值 max设置最大值 step 设置递增递减的数量

6.list 指定一个datalist作为下拉提示单

eg:

扩展：autocomplete=“on|off” 自动完成，显示历史记录

eg:

7.取消h5的表单验证

语法：

1、 对于js进行添加的属性。

dater(延迟加载) :先加载（下载）src中文件内容，然后等页面全部加载完成后，再加载onload

.async属性（异步加载），它会在加载src后，立即执行onload,同时还会继续加载页面以上执行顺序，alert显示会先显示b然后再显示a

2、网页中标签中加入小图标的样式代码

3、iframe新增属性

1. seamless定义框架无边框 无边距
2. srcdoc的显示级别比sandbox高
3. sandbox用来规定一个内嵌框架的安全级别
4. sandbox=“allow-forms:允许提交表单”
5. sandbox=“allow-origin:允许是相同的源”
6. sandbox="allow-scripts：允许执行脚本
7. sandbox=“allow-top-navigation:允许使外面的页面进行跳转”

4、其他属性

• manifest属性：定义页面需要用到的离线应用文件，一般放在标签里
• charset属性：meta属性之一,定义页面的字符集
• sizes属性：新增属性，当link的rel="icon"时，用以设置图标大小
• base属性:表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前
• defer属性：script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）
• async属性：script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）
• media属性：元素属性：表示对何种设备进行优化
• hreflang属性：的属性，表示超链接指向的网址使用的语言
• ref属性：的属性,定义超链接是否是外部链接
• reversed属性:
  的属性，定义序号是否倒叙
  1. start属性：
     的属性，定义序号的起始值
     1. scoped属性：内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发

H5全局属性

• contenteditable 规定是否可编辑元素的内容。
• contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
• data-* 用于存储页面的自定义数据
• draggable 指定某个元素是否可以拖动
• dropzone 指定是否将数据复制，移动，或链接，或删除
• hidden
• hidden 属性规定对元素进行隐藏。
• spellcheck 检测元素是否拼写错误
• translate 指定是否一个元素的值在页面载入时是否需要翻译

可直接在标签里插入的：data-自定义属性名字；

hidden（直接放上去就是隐藏）；
　spellcheck=“true”（语法纠错）；
　tabindex=“1”（Tab跳转顺序）；
　contenteditable=“true”(可编辑状态，单击内容，可修改)；