HTML5 28 new features you need to know

HTML5 has a lot of new features . new Code . very good . now summarize . for reference only

1. the new Doctype

Although using <! DOCTYPE html>, even if the browser does not understand the sentence will be in accordance with the standard mode to render

2. Figure Elements

use <figure> and <figcaption> to semantically represent a picture with a title

<figure>

<img src="path/to/image" alt="about image"/>

<figcaption>

<p>this is an image of somethinginteresting. </p>

</figcaption>

</figure>

3. redefined <small>

<small> has been redefined and is now used to represent small typography, such as the copyright notice at the bottom of the site

4. Remove The type attribute from the link and script tags

5. Add / no parentheses

HTML5 There are no strict requirements attributes must be quoted, closed and not closed, but it is recommended to enclose quotes and closed labels

6. To make your content editable, just add a contenteditable property

7. Email Inputs

If we give Input type is set to e-mail, the browser will verify that the input is the type of email , of course, can not rely solely on the front-end verification, the backend must have a corresponding check

8. Placeholders

The meaning of this input property is that you don't have to do placeholder with JavaScript.

9. Local Storage

Use Local Storage can permanently store large pieces of data on the client (unless actively deleted), most browsers already support it and can detect if window.localstorage exists before use

semantic headers and footer

One. more HTML5 form features

IE and HTML5

default, HTML5 new elements are rendered inline , but you can use the following method to make

it is rendered in block mode

Header, footer, article, section, Nav,menu, Hgroup {

Display:block;

}

Unfortunately, IE ignores these styles and can fix as follows :

Document.createelement ("article");

Document.createelement ("footer");

Document.createelement ("header");

Document.createelement ("hgroup");

Document.createelement ("nav");

Document.createelement ("menu");

Hgroup.

typically used in the header to group a set of headings together, such as

. Required Properties

The required property defines whether an input is required, and you can declare it as follows

<input type="text" name="someinput"required>

Or

<input type="text" name="someinput" required="required " >

The. Autofocus Property

As its meaning is, it's focused on the input box.

<input type="text" name="someinput"placeholder="Douglas Quaid" required autofocus>

. Audio Support

HTML5 provides <audio> tags, you do not need to follow third-party plug-ins to render audio, most modern browsers provide support for HTML5 audio, but there is still a need to provide some compatibility processing, such as

<audio autoplay="AutoPlay " controls="Controls">

<source src="file.ogg" /><! – FF–>

<source src="file.mp3″ /><! – Webkit–>

<a href="file.mp3″>downloadthis file.</a>

</audio>

. Video Support

and the Audio is similar,the <video> tag provides support for video because the HTML5 document does not specify a specific encoding for video, so the Browser to determine which encodings to support, resulting in a lot of inconsistencies. Safari and IE support for the encoded format,Firefox and Opera support Theora and Vorbis encoded format, when using HTML5 video , you must provide:

<video Controls Preload>

<source src="cohagenphonecall.ogv" type="video/ogg;codecs=" Vorbis, Theora ' " />

<source src="cohagenphonecall.mp4″ type="video/mp4; 'codecs='avc1.42e01e,mp4a.40.2 '/>

<p> Your browser is old. <a href="cohagenphonecall.mp4″>downloadthis video instead.</a> </p>

</video>

Pre-load video

The preload property is as simple as its literal meaning, and you need to decide whether you need to preload the video when the page loads

<video preload>

Display Video Control

<video preload controls>

Regular Expressions

because of the pattern attribute, we can use regular expressions directly in your markup.

<form action="" method="post">

<label for="username">create ausername: </label>

<input type="text" name="username" id="username " Placeholder="4 <>″ pattern="[a-za-z]{4,10}" autofocus required>

<button type="submit">Go</button>

</form>

Detection attribute Support

except Outside of Modernizr we can also easily detect whether some properties are supported by JavaScript, such as:

<script>

if (!' ) Pattern' indocument.createelement ('input')) {

Do Client/server side validation

}

</script>

Mark Element

consider the <mark> element as a highlight , and when I select a piece of text,JavaScript markup the HTML The effect should look like this:

<p> They were interrupted, just Afterquato said, <mark>"Open Your Mind"</mark>. </p>

When to use <div>

HTML5 has introduced so many elements, so div do We still need to use it? Div You can use when there are no better elements.

want to use HTML5 now ?

don't wait for 2022 , you can use it now,just do it.

What is not HTML5

1) SVG

2) CSS3

3) geolocation

4) Client Storage

5) Web Sockets

The. Data Property

<div id="mydiv"data-custom-attr="My Value"> Bla bla </div>

used in CSS:

<style>

H1:hover:after {

Content:attr (Data-hover-response);

Color:black;

Position:absolute;

left:0;

}

</style>

<H1 data-hover-response="I said Don't Touch me! "> Don't Touch me

. Output Element

The <output> element is used to display the result of the calculation, and there is a for property that is the same as the label

Create a slider with Range Input

The range type referenced by HTML5 can create a slider that accepts Min,max, step, and value properties

You can use CSS: Before and : After to display the values of min and Max

<input type="range " name="range" min="0″ max="10 ″ step="1″ value=" ">

Input[type=range]:before {content:attr (min); padding-right:5px;

}

Input[type=range]:after {content:attr (max); padding-left:5px;}

H5 Several major features for mobile development:

Http://www.cnblogs.com/zhouto/p/4170548.html

(1) Offline Caching

(2) Audio Video Free embedding

(3) geo-positioning

(4) Canvas Drawing

(5) Richer mobile side table cell

(6) Support CSS3 Interactive mode

(7) Real-time communication

(8) file and hardware support

(9) semantic (Improve search efficiency of search engines)

(10) Android and IOS dual platform to develop a set of code (cost-saving, easy maintenance)

H5 Canvas and location:

Http://jingyan.baidu.com/article/20b68a886db512796cec62a9.html

H5 Local Storage:

Https://www.douban.com/note/510331750/

Http://www.zzfriend.com/edu/201503/00000017.html

HTML5 offline storage and local cache :

Http://www.cnblogs.com/xqhppt/p/4157862.html

Http://www.codeceo.com/article/html5-cache.html

H5 calling the local APP:

Http://www.thinksaas.cn/topics/0/491/491730.html

Common mobile-side frames:

SUI Mobile:

http://m.sui.taobao.org/components/

Bootstrap:

http://www.bootcss.com/

Jquery Mobile(the proposal is gradually abandoned),framework7 ...

Javascript Libraries:

Ten top Web Mobile Development JS framework:

http://www.open-open.com/news/view/64f09b/

Zepto.js"SUI MobileThe framework is based onZepto.jsthisJavascriptLibrary,If you want to use bothJquerythe source file then needs to beJqueryof the$be redefined , such as withJqto replace$to find, otherwise it will conflict "(Zeptois written only for mobile browsers, so it's smaller, more efficient, and more importantly, it's APIcompletely modeledJQuery, so the study cost is also very low. BecauseJqueryThe goal is to be compatible with all major browsers, which means that a lot of its code is useless or inefficient for mobile browsers. Zepto.jsIt 's a lot of use on the mobile side, but there's still no placeJqueryso good, there are some of the following immature places to pay attention to---

http://blog.163.com/[email protected]/blog/static/115979441201421910275988/)

HTML5+CSS3 Video Tutorial:

Http://edu.51cto.com/course/course_id-3148.html

Bootstrap Frame Video tutorial:

Http://edu.51cto.com/course/course_id-3237.html

This article from "Chinese Ya" blog, declined reprint!

HTML5 28 new features you need to know