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 tag1): The definition of HTML, one of its document declarations <!　　 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>indicates navigation2 <Header>represents a header3 <Footer>represents a footer4 < Section>represents a chunk5 <article>indicates articles such as articles, comments, posts, blogs6 <aside>indicates sidebar, such as the sidebar of an article7 < Figure>A comparison of media content groupings with UL > Li8 <!--the above is commonly used to -9 <Mark>represents markup (with "UI", not very much)Ten <Progress>indicates progress (with "UI", not very much) One < Time>represents a date A <Hgroup>List of headings (said to have been discarded) - <Details> - <BDI> the <Command> - <Summary> - <RP> - <RT> + <Ruby> - <!--try to avoid global use of semantic tags such as headers, footer, aside, and so on.  -

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 Enter email format 3 Tel mobile number 4 URL can only be entered in URL format 5 number can only be entered Number 6 search box 7 Range Ranges8 Color Color Picker9 TimeTen date dates are not absolute One datetime Time Date A Month months -Week Week

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 Placeholder2 Autofocus Get Focus3 multiple file Upload multiple Select or multiple email addresses4 AutoComplete Auto-complete for form elements and also for form itself5 the form specifies which form the table item belongs to, and when dealing with complex forms, you will need6Novalidate off authentication, which can be used to<form>label7 required verification conditions, required fields8 pattern Regular Expression Validation form9Phone Number:<inputtype= "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 of the DOM, to manipulate the 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

<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

Primary knowledge HTML5 (I.)