Note: 2016-06-04

HTML5 1.1 Know HTML5

HTML5 is not just a recent version of the HTML markup Language, but more importantly, it has developed a set of standards for Web application development, becoming the first HTML language to make the Web a platform for application development.

HTML5 defines a series of new elements, such as new semantic tags, smart forms, multimedia tags, etc. that can help developers create rich Internet applications, as well as JavaScript APIs such as geolocation, gravity sensing, hardware access, and so on, to enable native-like applications within the browser. Even with canvas we can develop web version games.

H5 Fan says

HTML + CSS3 + JS 1.1 syntax specification

HTML5 also made a large adjustment in the grammatical specification, removed a lot of redundant content, writing rules more concise, clear.

See Code examples

Features:

1, More concise

2, more relaxed

The actual development should be standardized writing, not recommended too casual!

the Verify Address

https://validator.w3.org/2nd Chapter Semantic Tags

Semantic tags are not unfamiliar to us, such as <p> represents a paragraph, <ul> represents an unordered list

The traditional approach may be to make HTML pages semantically, but not universal, by adding class names such as class= "header", class= "footer".

HTML5 is a new semantic tag to solve this problem, such as

The purpose of this chapter is to understand the purpose of adding semantic tags, as well as the meanings expressed by each semantic tag, and to use labels appropriately in the layout of a Web page. 2.1 Common New Semantic tags

<nav> indicates navigation

<footer> indicates a footer

<section> represent chunks

<article> indicates articles such as articles, comments, posts, blogs

<aside> indicates sidebar, such as the sidebar of the article

<figure> represents media content grouping with UL > Li as a comparison

<mark> token (with "UI", not used)

<progress> indicates progress (with "UI", not very much)

<time> represents the date

<details>

<bdi>

<command>

<summary>

<rp>

<rt>

<ruby>

In essence, the new semantic tags and <div>, <span> no difference, but its ideographic, when used in addition to the HTML structure need to pay attention to, the other and the use of ordinary tags without any difference, can be understood as <div class= "NAV" > Equivalent to <nav>. Don't be curious, it's just a label!

Try to avoid global use of semantic tags such as headers, footer, aside, and so on. 2.2 Compatible processing

In browsers that do not support HTML5 new tags, these new tags are parsed into inline elements, so we only need to convert them to block elements (blocks), but under the IE9 version, these new tags do not parse properly. However, it is possible to identify custom tags created through document.createelement (' tagName '), so our solution is to pass all HTML5 new tags through document.createelement (' TagName ') To create a pass, so that the lower version of IE can also parse HTML5 new tags, in the actual development we use to detect the version of IE browser to load the three-party JS library to solve the compatibility problem.

2.3 Case Exercises

Blog post 3rd Chapter form

With the advent of Internet-rich applications and mobile development, traditional Web forms have become more and more unable to meet the needs of development, so HTML5 has made great improvements in the Web Form direction, such as color picker, date/time components, and so on, making form processing more efficient.

This section aims to learn about the new features of the HTML5 form, as well as the differences between PC and mobile devices, which are poorly compatible. 3.1 input type

Email Input Email format

Tel phone number

URL can only be entered in URL format

Number can only enter numbers

Search box

Range Ranges

Color Color Picker

Time

Date dates are not absolute

DateTime Time Date

Month months

Week Week

Some of the types are for mobile devices and have some compatibility, which can be used selectively in practical applications. 1.1 Form elements (labels)

<datalist> drop-down options

<keygen> generating an encrypted string

<output> cannot be submitted as data?

<meter> represents a metric and is not recommended as a progress bar 1.2 form Properties

Placeholder Placeholder

Autofocus Get focus

Multiple file upload multiple Select or multiple email addresses

AutoComplete Auto-complete for form elements and also for form itself

The form specifies which form the table item belongs to, and when dealing with complex forms, you will need

Novalidate off verification, available for <form> tags

Required verification conditions, required fields

Pattern Regular Expression Validation form

Form overrides are not mentioned, self-validating, and are all included

FormAction, Formenctype, Formtarget, FormMethod, formnovalidate

Applies to the Submit button, such as: <input type= "Submit" formaction= "xxx.php" > 1.3 form Event

Oninput triggered when user input, can be used for mobile input word count

Oninvalid validation does not pass when triggering 1.4 case exercises

Registration form the 2nd Chapter Multimedia

Before HTML5, the common way to play audio/video on a Web page was to play with Flash, but in most cases, not all users ' browsers had flash plugins installed, which made processing audio/video playback very complex, and the mobile device's browser did not support Flash plugins.

This section aims to learn how to play audio/video through HTML5, as well as multi-browser-compatible processing for formats supported by different browsers. 2.1 Audio

HTML5 to solve the problem of audio playback through <audio> tags.

The use is fairly simple, as shown in

You can also control the playback of audio more easily by attaching properties, such as:

AutoPlay Auto Play

Controls whether to display the default playback control

Loop Loop Playback

Preload pre-loading while setting autoplay some properties fail

Due to copyright and other reasons, different browsers can support the format of playback is not the same

scenarios that are supported by multiple browsers, such as

2.2 Video

HTML5 to solve the problem of audio playback through <video> tags.

The same,<video> as audio playback is fairly simple to use, such as

Also, with additional properties, you can control the playback of your video more easily.

AutoPlay Auto Play

Controls whether the default playback controls are displayed

Loop Loop Playback

Preload preloaded with AutoPlay set, this property will fail

Width setting playback window widths

Height set the playback window

Due to copyright and other reasons, different browsers can support the format of playback is not the same

scenarios that are supported by multiple browsers, such as

3rd Dom Extension 3.1 get Element

1. Document.getelementsbyclassname (' class ') gets the element through the class name, in the form of an array of classes.

2. Document.queryselector (' selector ') gets the element through the CSS selector, conforming to the 1th element of the match condition.

3. Document.queryselectorall (' selector ') gets the element through the CSS selector, in the form of an array of classes. 3.2 Class name operations

1, Node.classList.add (' class ') Add Class

2. Node.classList.remove (' class ') to remove class

3, Node.classList.toggle (' class ') switch class, have remove, none add

4. Node.classList.contains (' class ') detects if there is a class

Node refers to a valid DOM node, which is a generic term. 3.3 Custom Properties

In HTML5 we can customize the properties, which are in the following format data-*= "", for example

data-info= "I am a custom attribute", we can get the custom property value by node.dataset[' info '.

Node.dataset is present in the form of an array of classes

When we set the following format, we need to get the hump format correctly.

Data-my-name= "Itcast", get node.dataset[' myName '] 3.4 case exercise

TAB Toggle

1.1 Other

1 , micro-data

Http://kayosite.com/html5-microdata.html

Can be understood as a supplement to the new semantic tags

2 , ARIA

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaRole 2nd New API 2.1 Drag

In the HTML5 specification, we can set whether this element can be dragged by adding draggable= "true" to the element, where the image and link are turned on by default. 2.1.1 Dragging elements

The element with the draggable= "true" property set on the page 2.1.2 the target element

Any element in the page can be a target element 2.1.3 event listener

drag and drop elements

Ondrag is applied to the drag element, the entire drag process is called

The ondragstart is applied to the drag element, which is invoked when the drag is started.

The OnDragLeave is applied to the drag element, which is called when the mouse leaves the dragged element.

The ondragend is applied to the drag element, which is called when the drag is finished.

Target Element

The ondragenter is applied to the target element and is called when the drag element enters

The ondragover is applied to the target element and is called when it stays on the target element.

The OnDrop is applied to the target element and is invoked when the mouse is released on the target element.

The OnDragLeave is applied to the target element and is called when the mouse leaves the target element

Data Transfer

Ev.dataTransfer.setData () Setting data

Ev.dataTransfer.getData () Read Data 2.2 history management

Provide Window.history, objects we can manage the history, can be used for single page application, a application, can change the page content without refresh. 2.2.1 Old version

History.back () fallback

History.forward () Forward

History.go (n) forward/backward N step

History.length History Bar Number 2.2.2 New method

1, pushstate (data, title, URL) append a history record

Data is used to store custom data, usually set to null

Title page header, basically not supported, generally set to empty

URL adds a history based on the current domain and cannot be set across domains

2, Replacestate (data, title, URL) is basically the same as pushstate (), except that replacestate () replaces the current URL and does not increase/decrease the history. 2.2.3 Event Monitoring

The Onpopstate event, which is triggered when the current is in or out, can be read to the stored data through the event object ev.state. 2.3 Geographical location

In the HTML specification, an API is added to get the user's geographic information, which allows us to develop an Internet application based on the user's location-that is, location-based service 2.3.1 access to geographic information

1. IP Address

2, three-dimensional coordinates

GPS (Global Positioning System, positioning systems)

Wi-Fi

Cell Phone Signal

3. User definable data

If the advantages and disadvantages of different access methods are compared, the browser will automatically be the best way to obtain user geographic information.

2.3.2 Privacy

The HTML5 geolocation specification provides a set of mechanisms to protect user privacy. You must obtain explicit permission from the user before you can get the location information of the user. 2.3.3 API Detailed

Navigator.getcurrentposition (Successcallback, Errorcallback, options) Get current Geographic information

Navigator.watchposition (Successcallback, Errorcallback, Options) Repeat to get current geographic information

1. When the geographic information is successfully obtained, Succsscallback is called and returns an object position that contains the location information.

Position.coords.latitude Latitude

Position.coords.longitude Longitude

Position.coords.accuracy Accuracy

Position.coords.altitude altitude

2. When the geographic information fails, the errorcallback is called and an error message is returned.

3, Optional Parameters Options object can adjust the location information data collection method

A) Enablehighaccuracy high accuracy mode

b) Timeout time-out setting in MS

c) Maximumage represents the time interval for the browser to regain location information in MS 2.4 Web Storage

With the rapid development of the Internet, Web-based applications are increasingly common, but also become more and more complex, in order to meet a variety of needs, will often store a large number of local data, The traditional way we use Document.cookie to store, but because of its storage size only about 4k, and the resolution is quite complex, to the development of a lot of inconvenience, HTML5 specifications proposed solutions. 2.4.1 Characteristics

1. Easy to set up and read

2, large capacity, sessionstorage about 5M, localstorage about 20M

4. Only strings can be stored, and the object Json.stringify () is encoded and stored 2.4.2 Window.sessionstorage

1. Close browser window for life cycle

2, under the same window data can be shared 2.4.3 Window.localstorage

1, permanent effect, unless manually deleted

2, can be multi-window sharing 2.4.4 method detailed

SetItem (key, value) to set the storage content

GetItem (key) Read storage content

RemoveItem (key) Delete stored content with key value

Clear () empties all stored content

Key (n) Gets the stored content by index value 2.4.5 other

Websql, Indexdb 2.5 fullscreen

The HTML5 specification allows a user to customize the page to be displayed in full screen.

Requestfullscreen () Turn on full screen display

Canclefullscreen () Turn off full screen display

Different browsers need to add prefixes such as:

Webkitrequestfullscreen, Mozrequestfullscreen

Webkitcanclefullscreen, Mozcanclefullscreen

Detects whether the current is in full screen through Document.fullscreen

Different browsers need to add prefixes

Document.webkitisfullscreen, Document.mozfullscreen

Full-screen pseudo-class

: Full-screen. Box {},:-webkit-full-screen {},: Moz-full-screen {} 2.6 network status

We can use Window.online to detect the current network condition of the user and return a Boolean value

Window.online is called when a user is connected to a network

Window.offline Call 2.7 Application cache when user network is disconnected

HTML5 we can easily build an offline (no network status) app, just create a cache manifest file. 2.7.1 Advantages

1. You can configure the resources that need to be cached

2, the network is not connected to the application is still available

3, local read cache resources, improve access speed, enhance the user experience

4, reduce the request, alleviate the server burden 2.7.2 cache list

A plain text file that lists the resources that the browser should cache for offline access, and recommends using. AppCache as the suffix name, adding MIME types

AddType text/cache-manifest. AppCache

For example, we create a file named Demo.appcache, and then add the attribute manifest= "Demo.appcache" in the root element (HTML) of the page that needs to be applied for caching, and the path is guaranteed to be correct. 2.7.3 manifest file format

1, top line write Cache MANIFEST

2, Cache: newline Specifies the static resources we need to cache, such as. css, image, JS, etc.

3. NETWORK: Line feed Specifies the resources that need to be accessed online, using a wildcard character

4. FALLBACK: Alternate resource When the cached file cannot be found 2.7.4 event listener

Self-access to information 2.7.5 other

1, Cache: Can be omitted, this case will need to cache the resources written in the cache MANIFEST

2. Multiple CACHE:NETWORK:FALLBACK can be specified:, no order limit

3. #表示注释, the cache will only be re-cached if the contents of the Demo.appcache file have changed or if the cache has been manually cleared.

4. Chrome can debug Management app cache 2.8 file reads via chrome://appcache-internals/tool and offline (offline) mode

With the FileReader object we can read locally stored files, and you can use the file object to specify the files or data that you want to read. Where the file object can be a FileList object returned from the user selecting a file on a <input> element, or from a datatransfer 2.8.1 FileList object generated by a drag-and-drop operation

Since we can add the multiple property to the form element in HTML5, we get a FileList object (pseudo-array form) after uploading the file through <input>. 2.8.2 FileReader Object

HTML5 adds built-in objects that can read local file contents.

var reader = new FileReader; An object can be instantiated

instance Method

1, Readasdataurl () read the file in dataurl form

Event Monitoring

OnLoad called when the text read is complete

Properties

Result file Read results

Resources

HTTPS://DEVELOPER.MOZILLA.ORG/ZH-CN/DOCS/WEB/API/FILEREADER#TOC 2.9 Multi-media

Method: Load (), play (), pause ()

Properties: Currentsrc, CurrentTime, duration

Event:

Reference Documents

Http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp 2.10 Applications

1. Custom Video Player

Note: 2016-06-04