Thanks : Articles from Zhihu , Script House , Jianshu: GarenWang , Big Front-End .
Semantic Benefits
Removing styles can make the structure of the page clearer.Easy to read by ordinary people
Screen readers will "read" your web page by the markup.Easy to read screen
Good for SEO.crawlers are easy to read
It is convenient for team development and maintenance.Programmers are easy to read
What is H5?
- H5 refers to a series of mobile terminal ppt made by technology, the main technologies are:
- 1. Page material loading technology, use preloadJS (ready-made library) in createJS
- 2. Music loading and playing technology, there is also soundJS in createJS (it is it again)
- 3. A page that can be slid, isn't this ppt? I used swiper.js, a Jquery plugin (again a library)
- 4. You can smear and modify at will, use canvas overlay, canvas is a label in the HTML5 standard. Isn't this a ppt?
- 5. There are dynamic text and pictures, the common ones are using css3 or directly using js animation, isn't this ppt?
- 6. You can fill in the form to register, using the most basic form
- 7. Can support sharing custom copy and pictures
What is HTML5?
- HTML5 is a series of HTML standards
doctype declaration
<!DOCTYPE html>
Common Structural Labels
article: on the page and independent of content
结构完整e.g. article aside
: non-text content, e.g. advertisement section: a section in a document侧边栏
, e.g. a chapter in a novel foot nav: define display canvas: canvas video: video stream audio: audio stream source: define media resources (video, audio) progress: progress bar, max progress maximum value, value is the current value details: describe the details of a certain part of the document, you can Collapse summary: the title of the details element displayed by default, mark: mark required引导导航导航链接details包含summary
highlighttext, markdown can also be used.
command: Command buttons, such as radio buttons, checkboxes, buttons.
localStorage
- The localStorage object can store data on the client for a long time unless it is cleared manually.
- 1. Storage: localStorage.setItem(key, value) If the key exists, update the value
- 2. Get localStorage.getItem(key) if the key does not exist, return null
- 3. Delete localStorage.removeItem(key) Once deleted, all the data corresponding to the key will be deleted
- 4. Clear all It is too troublesome to
localStorage.clear()use removeItem to delete one by one, you can use clear, the consequence of execution is to clear all the data saved by the localStorage object注意: The data stored in localStorage is不能跨浏览器shared, a browser can only read the data of its own browser, and the storage space is 5M.
Compatible with lower versions of IE
- Using html5shiv can solve the problem of incompatibility of low versions of IE, just add it in the head, when the version is lower than IE9, the browser will load the html5.js script, making it support the new functions of html5.
一定要是head部分Because IE must know this element before the element is parsed, this js file cannot be called in other places, otherwise it will fail).
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--> </head>
new member of input
color,date,month,tel,time,week
email is used to detect whether it is in email format
number is used for input fields that should contain numerical values, you can set a limited
range for the input value is used to define a sliding bar, indicating the range min, max , step
search is used for search, such as site search or Google search
url Enter the URL
form new properties
placeholder: input box prompt information
autofocus: specify the form to obtain input focus
required: required field
pattern: regular verification
form: specifies one or more forms to which the input field belongs (the form attribute uses the id of the form)
formaction: rewrites the action attribute of the form
formmethod: rewrites the method attribute of the form
autocomplete: on/off, whether to automatically complete the previously submitted data for the next input suggestion
Add form validation
novalidate: form cancel validation
formnovalidate: submit element cancel validation
setCustomValidity: custom validation information