Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the important new features and content added in html5". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "what are the important new features and content added in html5"!

HTML5 is a collection of artificially defined rules and new APIs. Here are some of the new HTML5 features that are commonly used by developers:

1: canvas label

your browser does not support the canvas tag

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

2: Video tags

your browser does not support the video tag //Text content can be placed between the start and end tags so older browsers can display information that does not support the tag.

The video tag has the following attributes:

1. autoplay: If this attribute appears, the video plays as soon as it is ready

2.controls: If this property is present, controls are displayed to the user, such as a play button

3.height: Set the height of the video player

4.loop: If this attribute appears, it will be repeated.

preload: If this attribute appears, the video is loaded when the page loads and is ready to play. If "autoplay" is used, this attribute is ignored.

6.src: Video address

7.width: Set the video player width

3: localStorage and sessionStorage

Web Storage is similar in concept to cookies, except that it is designed for larger storage capacities. Cookie size is limited, and every time you request a new page cookies will be sent in the past, so invisible waste of bandwidth, in addition to cookies also need to specify the scope, can not be called across domains.

localStorage: Local storage for persistence, where data never expires unless actively deleted.

sessionStorage: Used to store locally the data in a session, which can only be accessed by pages in the same session and destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, but only session-level storage.

Web Storage has setItem,getItem,removeItem,clear and other methods, unlike cookies, which require front-end developers to encapsulate setCookies and getCookies themselves.

sessionStorage.setItem("name", "dream of three billion girls");

console.log(sessionStorage.getItem("name")); //Dream of Three Billion Girls 4: Semantic Tags

Before HTML5 came out, we used div to build pages, but none of these divs made sense. We can only think of giving it some identity by attributes such as id. HTML5 introduces these semantic tags for developer viewing and seo (search engine optimization).

header: A header that represents a "page" or "section."

footer: A footer that stands for "page" or "section" and usually contains some basic information about the section, such as author, links to related documents, copyright information.

hgroup: a title representing a "page" or "section." When an element has multiple levels, the element can contain h2 to h7 elements, such as a combination of the main title and subtitle of an article

nav: The element represents the navigation link area of the page. Used to define the main navigation section of the page.

side: The subsidiary information contained in the article element as the main content, which can be related to the current article, tags, ranking explanations, etc.

Section: stands for "section" or "paragraph" in a document. A "paragraph" can refer to a section of an article by topic; a "section" can refer to a grouping of pages.

Article: It is most easily confused with section and div. In fact, article stands for a self-contained content in a document, page or website, which is intended for independent development or reuse by developers. A forum post, a blog post, a user comment, an interactive widget. (Special section)

Five: New form controls

html5 adds date(date selection), time(time selection), email(email address), url (link) and other form controls, I personally like these additions. For example, email control, before we do not have this control to determine whether the user input is email format can only be judged by js regular expression, but after h6 only in the input type attribute to write email can be, but this is only a basic judgment can not guarantee 100% filtering, for security, the background or to determine the email format.

Six: Remove the type attribute from the script and link tags

After html5, your script and link do not need to add the type attribute, the same can work normally, but in order not to make mistakes, it is best to add.

VII: contenteditable attribute

Any of your dom nodes can be edited by adding contenteditable="true", which is also a great attribute to add, with which you can simulate textarea.

Eight: input added placeholder, required,autofocus,pattern and other attributes 9: Mark the label

Use the mark tag to make your content stand out. From the word mark, I believe you can guess the general purpose of this tag.

Ten: pageInput Create slider

HTML5 references range types that can create sliders that accept min, max, step, and value attributes, and can use css:before and:after to display min and max values, but the display is not very friendly.

input[type=range]:before {

content: attr(min);

padding-right: 5px;

}

input[type=range]:after {

content: attr(max);

padding-left: 5px;}

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.