First knowledge of HTML5

Primary knowledge HTML5 (I.)

H5 is actually an enhanced version of H4, which makes it easier to construct Web pages using H5, which is more concise and straightforward. First, we want to understand HTML4, which is the basic application of HTML markup +css2+javascript, in short, api+ syntax, and H5 is nothing more than the original foundation to provide some new features.

1, H5 of the semantic tag 1): The definition of HTML, it's a document declaration <!　　 DOCTYPE html> syntax is similar to HTML4, which provides a Web site that can be used to detect HTML syntax. HTTPS://VALIDATOR.W3.ORG/2) HTML semantic tags, many new semantic tags. These tags are similar to div and span.

1 <nav> means navigation 2 
3) Compatible processing
① in browsers that do not support HTML5 new tags, these new tags will be parsed into the inline element (inline), converted to block elements (blocks), ② below the IE9 version, and cannot parse these new tags properly. However, it is possible to identify custom tags created through document.createlement (' tagName ') ③ actual development, we use to detect the version of IE browser to load the three-party JS library to solve the compatibility problem.
<!--[If LTE IE 8]>    <script src= "./js/html5shiv.min.js" ></script><![ Endif]-->
"Note" <footer></footer> this is the HTML5 inside of the tag, the equivalent of a div, but there is semantics, and then put in the IE6, it will be this footer this does not know the mark as a inline element to deal with , so we need to block compatibility, this time we need to import a JS library.
Html5shiv.min.js
2. Forms
--form is used to declare a form. Input is used to represent form items, and type is used to control the types of form items. (HTML5 some enhancements on the form)
1) input type (form type, form element, form attribute, form event)
1 <input type= "text"/> 2 email    Input Email Format 3 Tel    mobile number 4 URL    can only enter the URL format 5    number can only enter the numbers 6 search    Search Box 7 range    8 color    Color Picker 9    time    The date is not an absolute datetime    date    month months week    weeks
Some of the types are for mobile devices, and have some compatibility, in practical applications can be used selectively
2) added a few tags
① Data list: <datalist></datalist>
② security:<keygen></keygen> for secure form submission data transfer
③ is used to measure: <meter></meter>
④ want to output in the form, nothing useful:<outputer><outputer>
3) Some new properties are added:
1 Placeholder Placeholder 2 Autofocus Get focus 3 multiple File upload multi-Select or multiple mailbox address 4 AutoComplete auto complete for form elements, also available for form itself 5 form specifies which form the table item belongs to. 6 Novalidate off validation is required for complex forms, available for <form> 7 required validation conditions, required 8 pattern Regular expression Validation form 9 phone number: <input type= "Tel" name= "tel "required=" required "       pattern=" ^ (\+86)? 1[3,5,8] (\d{9}) $ ">
"PS" We use the new properties, we can do before we have to use JS to achieve the effect.
4) events inside the form
① input to listen for data from a text box: Oninput Event
② trigger when validation does not pass: oninvalid
③ Progress This mark, we use progress
3. Multimedia
1) Early on We do web player
① we are using JS to invoke a player in windows that comes with the media Player operating system bundle
②adobe such a flash, basically on each user's computer above will be installed.
③ later we appeared a thing, each computer can be installed on a fast broadcast, JS call fast broadcast.
"JavaScript content" JavaScript is divided into three parts:
①ecmascript
(defines JS syntax, variables, statements)
②bom Browser Object Model
(We can use the browser's own some of the objects that can bring up the browser's functionality.)
③dom Document Object Model
I first have an HTML file, I open the HTML file through the browser, the browser will parse the HTML file, the file is parsed and placed in a Document object, I will manipulate the contents of the HTML, I will directly manipulate the document can be
1       //(Operation Dom is a skilled DOM   API) 2         //    (Operation Dom must first get DOM) 3              document.getElementById (""); 4              document.getElementsByTagName ("");
2) HTML5 can provide some tags to complete the playback.
We do this audio file, as well as video files, the most troublesome place is to decode "audio files, as well as video files, all formatted in a variety of formats"
1: Suppose your website's video resources are generated by yourself
2: Assuming that the site's resources are uploaded by the user, we need to transcode the resource when the user uploads it.
The h5 of "H5" is expanded on this basis, providing some more powerful methods.
According to the value of class to get             Document.getelementbyclassname ("")//This inside support CSS inside the selector//here is the first element             returned: Document.queryselector (". Username")//gets all of the returned is a collection.             Document.queryselectorall (". Username>li");
"Summary of Forms" I now have a form that defines properties, when ID, what is the time to use name, when to use class
① I for an element plus the purpose of ID, in order to JS convenient to get this element
②name: If I want to interact with the server, the server will have to get the data submitted by the client form. It is based on the value of name to get
<input type= "text" name= "username" value= "Zhangsan" >//Username=zhangsan
③class generally, if I want to use styles to control elements in bulk, I'll add the class attribute to the element.
We will do the case: the first step, I want to make the basic layout of the page (HTML,CSS)
The second step: analysis function, according to the function to find the corresponding event
Step three: The event came out, and the method came out.
"PS" I see what function to complete, generally we are operating the DOM, get the DOM, manipulate the DOM (API operation); even if the debugging, a case, is the tune out
"Summary" HTML5 concept: is an enhanced version above the HTML4. In the label, Css,js above an enhancement.
Tags: There have been some new and more disruptive tags.
1:HTML5 's statement
2: Semantic tags (you can understand them as div, or span.)
3: Compatibility processing, need to import a JS library.
4: Forms, our traditional forms, difficult to complete more complex page applications
4.1: Added some types of type= ""
4.2: Added a few tags DataList
4.3: New Attribute (document)
4.4: Event Oninput
Small case: Student files, cases.
Multimedia processing:
Audio for MP3
Video-specific
Do not handle the client.
Processing of the DOM
New APIs have been added to allow us to get the content on the page.
Document.getelementbytagname
Document.queryselector ();
Document.queryselectorall ();
Added property actions:
document.getElementById (""). Classlist.add ();
document.getElementById (""). Classlist.remove ();
document.getElementById (""). Classlist.toggle ();
document.getElementById (""). Classlist.contains ();
Custom properties:
I can customize the properties for the element we are adding Data-itcast-name= "" to the element above;
Obey the rules of hump naming
Tabs tab switch. (which is the property API)
4, the difference between CSS3 and JS
1) CSS: CSS3 appears, support 3d effect.
JS: Positioning (directly inside the site can be embedded map.), Gravity sensing
2) CSS3 can certainly make the page display more rich effect
JavaScript added some API, positioning (Baidu map), Gravity sensor js some of the objects
First knowledge of HTML5