Summary of new features in HTML5

Semantic tags

Content tagged with the most appropriate HTML element.

Advantages :

1. Improve accessibility
2. SEO
3. Clear structure, easy to maintain

General container :

1. div block-level generic container
2. span phrase content has no semantic container

<title></title>: short, descriptive, unique (improves search engine rankings).

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

<hn></hn>: H1~h6 hierarchical title, used to create a hierarchical relationship of page information.

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

<header></header>: The header usually includes the site logo, main navigation, site-wide links, and a search box.

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

<nav></nav>: mark navigation, only for important link groups in the document.

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

<main></main>: The main content of the page, a page can only be used once. If it is a web application, surround its main function.

<article></article>: Represents a document, page, application, or a standalone container.

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

<section></section>: A group of content with a similar main image, for example, the home page of a website can be divided into sections such as introduction, news items, contact information, etc.

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

<aside></aside>: Specify a sidebar, including quotes, sidebars, a set of links to articles, advertisements, affiliate links, related product listings, and more.

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

<footer></footer>: Footer, only when the parent is body, is the footer of the entire page.

<small></small>: Specify details, enter disclaimer, comment, signature, copyright.

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

<strong></strong>: Indicates the importance of the content.

<em></em>: Mark the content to the point (largely used to improve the semantics of paragraph text) (italic)

<cite></cite>: Indicates a citation or reference, such as the title of a book, the title of a song, movie, etc., concert, concert, code, newspaper, or legal document, etc. (italic)

<mark></mark>: Highlight text (yellow background color) to alert readers

<figure></figure>: Create a graph (with a margin of about 40px by default)

<figcaption></figcaption>: The title of the figure, which must be the first or last element embedded in the figure.

<blockquoto></blockquoto>: Quote text, displayed on a new line by default.

<time></time>: Mark the event. The datetime attribute follows a specific format. If this attribute is omitted, the text content must be in a valid date or time format. (times that are no longer relevant are marked with s)

<abbr></abbr>: Explain abbreviations. Use the title attribute to provide the full name, only the first time it appears

<dfn></dfn>: The definition term element, which must be next to the definition, can be used in the description list dl element.

<address></address>: Contact information (email address, link to contact information page) of the author, related person, or organization indicating a specific address in italics with word wrapping

<del></del>: removed content. <ins></ins>: Added content.

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

<code></code>: Tag code. Contains sample code or filename (< < > >)

<pre></pre>: Preformatted text. Line breaks and spaces inherent to text are preserved.

<meter></meter>: A value representing a fraction or measurement of a known range. such as voting results.

例如：<meter value="0.2" title=”Miles“>20%completed</meter>

<progress></progress>:Complete schedule. The value can be dynamically updated through js.

 

Label new attribute

Elaborate on the data dataset (IE11, Firefox Google)

In HTML5, we can use the data- prefix to set the custom attributes we need to store some data. Get these data through dataset. The data- prefix here is called the data attribute, which can be defined by script or styled using CSS attribute selectors. Unlimited in number, providing very powerful control over how to manipulate and render data.

An example to teach you how to use data dataset

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

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

<div id="food" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
// 要想获取某个属性的值，可以像下面这样使用dataset对象：
var food = document.getElementById('food'); 
var typeOfDrink = food.dataset.drink;

classList (Firefox and Google latest, IE10 and above)

• obj.classList.add() add class
• obj.classList.remove() removes the class
• obj.classList.contains() Determines whether the specified class is included
• obj.classList.toggle() toggle class
• obj.classList.length to get the number of classes

HTML5 new form

new input type

email

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

E-mail: <input type="email" name="user_email" />

url

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

Homepage: <input type="url" name="user_url" />

number

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

Points: <input type="number" name="points" min="1" max="10" />

range

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

<input type="range" name="points" min="1" max="10" />

search

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

new form attribute

autocomplete

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

<form action="demo_form.asp" method="get" autocomplete="on">
    E-mail: <input type="email" name="email" autocomplete="off" />
</form>

novalidate

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

<form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>

new input property

autocomplete

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

<form action="demo_form.asp" method="get" autocomplete="on">
    E-mail: <input type="email" name="email" autocomplete="off" />
</form>

autofocus

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

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form

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

<form action="demo_form.asp" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

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 属性
注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

height and width properties

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

<input type="image" src="img_submit.gif" width="99" height="99" />

list property

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

Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min, max, and step properties

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

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple attribute

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

Select images: <input type="file" name="img" multiple="multiple" />

novalidate attribute

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

<form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>

pattern attribute

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

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

placeholder property

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

<input type="search" name="user_search"  placeholder="Search W3School" />

required attribute

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

Name: <input type="text" name="usr_name" required="required" />

Audio (audio) and video (video)

Supported formats and notation

3 formats supported by audio element: Ogg MP3 Wav

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

The video element supports three video formats: MP4, WebM, Ogg.

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

Label properties

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

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

method

• load(): reload audio/video elements
• play(): start playing audio/video
• pause(): Pause the currently playing audio/video

event

• durationchange: when the duration of the audio/video has changed

• ended: when the current playlist has ended

• pause: when the audio/video has been paused

• play: when the audio/video has started or is no longer paused

• ratechange: when the playback speed of the audio/video has changed

• timeupdate: when the current playback position has changed

• volumechange: when the volume has changed

Event properties

• read-only property

  • duration: returns the current total duration
  • currentSrc: returns the current URL
  • ended: Returns whether it has ended
  • paused: returns whether it has been paused

• Get modifiable properties:

  • autoplay: set or return whether to autoplay
  • controls: Set or return whether to display controls (such as play/pause, etc.)
  • loop: set or return whether it is looping
  • muted: Set or return whether to mute
  • currentTime: Set or return the current playback position (in seconds)
  • volume: set or return the volume (specifies the current volume of the audio/video. Must be a number between 0.0 and 1.0.)
    1.0 is the highest volume (default); 0.5 is half volume (50%); 0.0 is mute;
  • playbackRate: Set or return the playback speed