HTML5 has a lot of new features and new codes. Very good. Let’s summarize it now. For reference only
1. New Doctype
Although <!DOCTYPE html> is used, even if the browser does not understand this sentence, it will render it in standard mode.
2. Figure element
Use <figure> and <figcaption> to semantically represent pictures with captions
<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 refer to small typography, such as the copyright notice at the bottom of a website
4. Remove the type attribute in the link and script tags
5. With/without parentheses
HTML5 does not strictly require that attributes must be quoted or closed, but it is recommended to add quotes and closing tags.
6. To make your content editable, just add a contenteditable attribute
7. Email Inputs
If we set the input type to email, the browser will verify whether the input is of email type. Of course, we cannot just rely on the front-end verification, the back-end must also have corresponding verification.
8. Placeholders
The meaning of this input attribute is that there is no need to use JavaScript to achieve the placeholder effect.
9. Local Storage
Using Local Storage, you can permanently store large data fragments on the client (unless deleted actively). Most browsers currently support it. You can check whether window.localStorage exists before using it.
10. Semantic header and footer
11. More HTML5 form features
12. IE and HTML5
By default, new HTML5 elements are rendered inline, but you can use the following method to render them
It is rendered in block mode
header, footer, article, section, nav,menu, hgroup {
display: block;
}
Unfortunately IE ignores these styles, you can fix them like this:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
Generally used in the header to group a group of titles together, such as
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want thememory of a lifetime. </h2>
</hgroup>
</header>
14. Required attribute
The required attribute defines whether an input is required. You can declare it like the following
<input type=”text” name=”someInput”required>
or
<input type=”text” name=”someInput” required=”required”>
15. Autofocus attribute
Just like its meaning, it means focusing on the input box.
<input type=”text” name=”someInput”placeholder=”Douglas Quaid” required autofocus>
16. Audio support
HTML5 provides the <audio> tag, and you no longer need to follow third-party plug-ins to render audio. Most modern browsers provide support for HTML5 Audio, but some compatibility processing still needs to be provided, 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>
17. Video support
Much like Audio, the <video> tag provides support for video. Since the HTML5 document does not specify a specific encoding for video, the browser has to decide which encodings to support, resulting in many inconsistencies. Safari and IE support H.264 encoding format, Firefox and Opera support Theora and Vorbis encoding 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>
18. Preload videos
The preload attribute is as simple as it sounds. You need to decide whether you need to preload the video when the page loads.
<video preload>
19. Display video controls
<video preload controls>
20. Regular expressions
Thanks to 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 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go</button>
</form>
21. Detection attribute support
In addition to Modernizr, we can also simply detect whether some attributes are supported through javascript, such as:
<script>
if (!’pattern’ indocument.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark element
Think of the <mark> element as a highlight. When I select a piece of text, the markup effect of JavaScript on HTML should be like this:
<h3> Search Results </h3>
<p> They were interrupted, just afterQuato said, <mark>”Open your Mind”</mark>. </p>
23. When to use <div>
HTML5 has introduced so many elements, so do we still use div? You can use div when there is no better element.
24. Want to use HTML5 immediately?
Don’t wait for 2022, it’s available now, just do it.
25. What is not HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data attribute
<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</h1>
27. Output element
The <output> element is used to display calculation results and also has the same for attribute as label.
28. Use Range Input to create sliders
The range type referenced by HTML5 can create sliders, which accepts min, max, step and value attributes.
You can use css: before and :after to display the min and max values.
<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;}
Several major features of H5 suitable for mobile terminal development:
http://www.cnblogs.com/zhouto/p/4170548.html
(1)Offline cache
(2) Free audio and video embedding
(3)Geographic positioning
(4)Canvas drawing
(5) Richer mobile form elements
(6)Support CSS3 interaction mode
(7)Real-time communication
(8)File and hardware support
(9) Semanticization (improve search efficiency of search engines)
(10) Develop a set of codes for Android and IOS dual platforms (saving costs and easy maintenance)
H5 canvas and geolocation:
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 caching:
http://www.cnblogs.com/xqhppt/p/4157862.html
http://www.codeceo.com/article/html5-cache.html
h5 calls local APP:
http://www.thinksaas.cn/topics/0/491/491730.html
Commonly used mobile frameworks:
ON mobile:
http://m.sui.taobao.org/components/
Bootstrap:
http://www.bootcss.com/
Jquery mobile (recommended to be gradually abandoned), framework7. . . . . .
Javascript library:
10 Top JS Frameworks for Web Mobile Development :
http://www.open-open.com/news/view/64f09b/