HTML5新特性总结0804

语义化标签

用最恰当的HTML元素标记的内容。

优点：

1. 提升可访问性
2. SEO
3. 结构清晰，利于维护

通用容器:

1. div 块级通用容器
2. span 短语内容无语义容器

：简短、描述性、唯一（提升搜索引擎排名）。

搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。

：h1~h6分级标题，用于创建页面信息的层级关系。

对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1

：页眉通常包括网站标志、主导航、全站链接以及搜索框。

也适合对页面内部一组介绍性或导航性内容进行标记。

：标记导航，仅对文档中重要的链接群使用。

Html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

：表示文档、页面、应用或一个独立的容器。

article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

：具有相似主图的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

如果只是为了添加样式，请用div

：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

如果放在main内，应该与所在内容密切相关。

：页脚，只有当父级是body时，才是整个页面的页脚。

：指定细则，输入免责声明、注解、署名、版权。

只适用于短语，不要用来不标记“使用条款”，“隐私政策”等长的法律声明。
不单纯的样式标签（有意义的，对搜索引擎抓取有强调意义 strong > em > cite）

：表示内容重要性。

：标记内容着重点（大量用于提升段落文本语义）（斜体）

：指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。（斜体）

：突出显示文本（黄色背景颜色），提醒读者

：创建图（默认有40px左右margin）

：figure的标题，必须是figure内嵌的第一个或者最后一个元素。

：引述文本，默认新的一行显示。

：标记事件。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。（不再相关的时间用s标签）

：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就可以了

：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）表示一个具体的地址，字体为斜体，会自动换行

：移除的内容。 ：添加的内容。

少有的既可以包围块级，又可以包围短语内容的元素。

：标记代码。包含示例代码或者文件名 （ >）

：预格式化文本。保留文本固有的换行和空格。

：表示分数的值或者已知范围的测量结果。如投票结果。

例如：20%completed

：完成进度。可通过js动态更新value。

标签新属性

细说data dataset(IE11，火狐谷歌)

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。通过dataset来获取这些数据。这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。

一个实例教你如何使用data dataset

例如我们要在一个文字按钮上存放相对应的id

下面是元素应用data属性的一个例子：

￥20.12
// 要想获取某个属性的值，可以像下面这样使用dataset对象：
var food = document.getElementById(‘food‘); 
var typeOfDrink = food.dataset.drink;

classList(火狐谷歌最新，IE10以上)

• obj.classList.add() 添加class类
• obj.classList.remove() 移出class类
• obj.classList.contains() 判断是否包含指定class类
• obj.classList.toggle() 切换class类
• obj.classList.length 获取class类的个数

HTML5新表单

新的input类型

email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

E-mail: 

url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

Homepage: 

number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

Points: 

range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：

search

search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

新的form属性

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 
 标签，以及以下类型的  标签：text, search, url, telephone, email, password, datepickers, range 以及 color。



    E-mail: 

novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 
 以及以下类型的  标签：text, search, url, telephone, email, password, date pickers, range 以及 color.



    E-mail: 

新的input属性

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 
 标签，以及以下类型的  标签：text, search, url, telephone, email, password, datepickers, range 以及 color。



    E-mail: 

autofocus

autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有  标签的类型。

User name: 

form

form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有  标签的类型。
form 属性必须引用所属表单的 id：


    First name:

Last name: 

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
- 表单重写属性有：
    1. formaction - 重写表单的 action 属性
    2. formenctype - 重写表单的 enctype 属性
    3. formmethod - 重写表单的 method 属性
    4. formnovalidate - 重写表单的 novalidate 属性
    5. formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的  标签：submit 和 image。


E-mail: 

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的  标签。

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的  标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: 

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的  标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

Points: 

multiple 属性

multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的  标签：email 和 file。

Select images: 

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 
 以及以下类型的  标签：text, search, url, telephone, email, password, date pickers, range 以及 color.



    E-mail: 

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。
注释：pattern 属性适用于以下类型的  标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: 

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的  标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的  标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: 

音频(audio)和视频(video)

支持的格式和写法

音频元素支持的3种格式：Ogg MP3 Wav

  
  您的浏览器不支持 audio 元素。

视频元素支持三种视频格式：MP4、WebM、Ogg。

标签属性

• 音视频：autoplay、controls、loop、muted、preload、src

• 视频：autoplay、controls、loop、muted、width、height、poster、preload、src

方法

• load():重新加载音频／视频元素
• play()：开始播放音频／视频
• pause()：暂停当前播放的音频／视频

事件

• durationchange:当音频/视频的时长已更改时

• ended:当目前的播放列表已结束时

• pause:当音频/视频已暂停时

• play:当音频/视频已开始或不再暂停时

• ratechange:当音频/视频的播放速度已更改时

• timeupdate:当目前的播放位置已更改时

• volumechange:当音量已更改时

事件属性

• 只读属性

  • duration：返回当前的总时长
  • currentSrc：返回当前URL
  • ended：返回是否已结束
  • paused：返回是否已暂停

• 获取并可修改的属性：

  • autoplay：设置或返回是否自动播放
  • controls：设置或返回是否显示控件（比如播放/暂停等）
  • loop：设置或返回是否是循环播放
  • muted：设置或返回是否静音
  • currentTime：设置或返回当前播放位置（以秒计）
  • volume：设置或返回音量（规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。）
    1.0 是最高音量（默认）；0.5 是一半音量 （50%）； 0.0 是静音；
  • playbackRate：设置或返回播放速度