Basic html5 tutorials

Comments: Some newly added attributes and functions of HTML5 make the code more concise. This is always a good thing and should be worthy of our respect. I hope this HTML5 article will be helpful to you.1. New Doctype statement

The XHTML statement is too long. I believe few front-end developers can write this Doctype Statement by hand.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The HTML5 Doctype Declaration is very short. I believe you will be able to remember this declaration immediately. You don't have to waste brain cells to remember the long, abnormal XHTML Doctype declaration.

<! DOCTYPE html>

The brief DOCTYPE Statement of HTML5 enables modern browsers such as Firefox and Chrome and IE6/7/8 to enter the standard mode, you may wonder that IE6/7 can also support HTML5 Doctype. In fact, IE enters the standard mode as long as the doctype complies with this format.
2. <figure> label

The Code is as follows:

<H6> Image of Mars.
Take a look at the following simple code:

Unfortunately, the h6 label and the img label seem to have nothing to do with it, and the semantics is not clear enough. HTML5 realized this, so it adopted the <figure> tag. When the <figure> combined with the <figcaption> label is used, the h6 label and the img label can be combined to make the code more semantic.

The Code is as follows:
<Figure>

<Figcaption>
<H6> This is an image of something interesting. </Figcaption>
</Figure>

3. Redefinition <small>
Not long ago, I used the <small> label to create a subtitle related to the logo. However, the <small> label is redefined in HTML5 to make it more semantic, And the font size of <small> will decrease, think about it if this tag is used for the copyright information at the bottom of the website.

4. removed the type attribute of the Javascript and CSS labels.
Generally, you add the type attribute to <link> and <script>:

The Code is as follows:
<Link rel = stylesheet type = text/css href = "path/to/stylesheet.css">
<Script type = text/javascript src = "path/to/script. js"> </script>

In HTML5, the type attribute is no longer needed, because it is a bit redundant. after removal, the code can be simpler.

The Code is as follows:
<Link href = "path/to/stylesheet.css">
<Script src = "path/to/script. js"> </script>

5. Whether double quotation marks are used
This is a bit confusing. HTML5 is not XTHML. You can save double quotation marks in tags. I believe that most of the comrades, including those I am used to adding double quotation marks, make the Code look more standard. However, you can decide whether to use double quotation marks based on your personal preferences.

The Code is as follows:
<H6 id = someId class = myClass> Start the reactor.
6. Make the webpage content editable
 

The Code is as follows:
<H2> To-D0 List <Ul contenteditable>
<Li> Break mechanical cab driver </li>
<Li> Drive to abandoned factory </li>
<Li> Watc </li>
</Ul>

7. Email input box
The email attribute of an input box is added to HMTL5 to check whether the input content conforms to the email writing format. The function becomes more and more powerful. javascript can only be used for detecting the input content before HTML 5. Although the built-in form verification function will soon become a reality, this attribute is not supported by many browsers and will only be processed as a common text input box.
 

The Code is as follows:
<FORM method = get>
<LABEL for = email> Email: </LABEL>
<INPUT id = email type = email name = email>
<BUTTON type = submit> Submit Form </BUTTON>
</FORM>

This attribute is not supported so far, including modern browsers, so it is still unreliable for the time being.
8. placeholders
Placeholders in the text box (look at the effect of the search box in this blog) are conducive to improving the user experience. Previously, we had to rely on JS to achieve the placeholder effect, and added the placeholder attribute placeholder in html5, for details about this attribute, click here: HTML5 form placeholder attribute.

<INPUT type = email name = email placeholder = "doug@givethesepeopleair.com">

Similarly, the current mainstream modern browsers do not support this attribute well. Currently, only Chrome and Safari support this attribute. Firefox and Opera do not support this attribute.
 
9. Local Storage
The local storage function of HTML5 enables modern browsers to "remember" What we input, even if the browser is closed and refreshed, it will not be affected. Although some browsers do not support this function, IE8, Safari 4, and Firefox 3.5 still support this function. You can test it.
 
10. More semantic headers and footer
The following code will no longer exist in HTML5

<DIV id = header>

...

</DIV>

<DIV id = footer>

...

</DIV

We usually define a div for the header and footer, and then add an id. However, in HTML5, you can directly use the
<HEADER>

...

</HEADER>

<FOOTER>

...

</FOOTER>

Be sure not to confuse the two labels with the header and footer of the website. They only represent their containers.
11. Support for HTML5 by IE
Currently, Internet Explorer does not provide good support for HTML5, which is also a major obstacle to the faster popularization of HTML5. However, IE9 supports HTML5 well.

IE parses all the tags added to HTML5 into inline elements, but they are actually block-level elements, so it is necessary to define a style for them:

The Code is as follows:
Header, footer, article, section, nav, menu, hgroup {
Display: block;
}

However, IE still cannot parse the newly added HTML5 tags. At this time, Javascript is needed to solve this problem:

The Code is as follows:
Document. createElement ("article ");
Document. createElement ("footer ");
Document. createElement ("header ");
Document. createElement ("hgroup ");
Document. createElement ("nav ");
Document. createElement ("menu ");

You can use this Javascript code to fix IE's better parsing of HTML5

The Code is as follows:
<SCRIPT mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </SCRIPT> _ fcksavedurl = "" http://html5shim.googlecode.com/svn/trunk/html5.js "> </SCRIPT>" _ fcksavedurl = "" http://html5shim.googlecode.com/svn/trunk/html5.js "> </SCRIPT>"

12. Title Group)
This is similar to the second tip. If the h1 and h2 tags are used to indicate the website name and Subtitle respectively, this will not associate the two closely related headers. In this case, you can use the
The Code is as follows:
<HEADER>
<HGROUP>
<H1> Recall Fan Page </H1>
<H2> Only for people who want the memory of a lifetime. </H2>
</HGROUP>
</HEADER>

13. Required Properties
The front-end personnel must have done a lot of Form Verification projects. One of the most important aspects is that some input boxes must be filled in. Javascript should be used to check the content here. In HTML5, a "mandatory" attribute is added: required. The required attribute can be used in two ways. The second method is more structured, while the first method is more concise.

The Code is as follows:
<Input type = "text" name = "someInput" required>
<Input type = "text" name = "someInput" required = "required">

With this attribute, it is easier to submit and verify the form. Let's take a look at the following simple example:

The Code is as follows:
<From method = post>
<Label for = someInput> Your Name: </label>
<Input id = someInput type = text name = someInput placeholder = "Douglas Quaid" required = "required">
<Button type = submit> Go </button>
</Form>

 
If the input box is blank, the form cannot be submitted successfully.
14. automatically retrieve focus
Similarly, HTML5 does not require Javascript to automatically obtain the focus of the input box. If an input box should be selected or get the input focus, HTML5 adds the autofocus attribute:

The Code is as follows:
<INPUT type = text name = someInput placeholder = "Douglas Quaid" required = "required" autofocus = "autofocus">

Autofocus can also be written as "autofocus = autofocus", which looks more standard, depending on your personal preferences.
15. Audio Playback support
The <audio> tag is provided in HTML5 to solve the problem that in the past, you must rely on a third-party plug-in to play audio files. So far, only a few of the latest browsers support this tag.

The Code is as follows:
<Audio controls = "controls" autoplay = "autoplay">
<Source src = "file.ogg" _ fcksavedurl = "" file.ogg "" _ fcksavedurl = "" file.ogg ""/>
<Source src = "filepath"/>
<A href = "filepath"> Download this file. </a>
</Audio>

Why are there two formats of audio files? Due to the difference in the format supported by firefoxand webkitviewer, firefoxonly supports .ogg files, while webkitonly supports ghost files. The solution is to create two versions of audio files so that they can be compatible with Firefox and Webkit browsers. Note that IE does not support this label.
16. Video Playback support
Like the <audio> tag, HTML5 also supports the <video> tag to play video files. YouTube also announced a new HTML5 video embedding. However, unfortunately, the HTML5 specification does not specify a specific video player, but allows the browser to decide on its own. This causes a browser compatibility problem, although both Safari and IE9 support H. 264 format video (Flash players can play), Firefox and Opera support open-source Theora and Vorbis formats. Therefore, you must prepare two formats when displaying HTML5 videos.

The Code is as follows:
<Video controls preload>
<Source src = "cohagenPhoneCall. ogv" type = "video/ogg; codecs = 'vorbis, theora '"/>
<Source src = "cohagenPhoneCall.mp4" type = "video/mp4; 'codecs = 'avc1. 42E01E, mp4a. 100'"/>
<Div>
Your browser is old.
<A href = "cohagenPhoneCall.mp4">
Download this video instead.
</A>
</Div>
...
</Video>

It should be noted that although the type attribute can be omitted, if it is added, the browser can parse the video file more quickly and accurately. Not all browsers support HTML5 videos, so you must use the Flash version instead. Of course, this is your decision.
17. Pre-load video
Preload attributes: preload. First, determine whether to preload the video. If a visitor accesses a page with many videos displayed, it is necessary to preload a video, this can save the visitor's waiting time and improve the user experience. You can add a preload attribute to the <video> label to implement the preload function.

The Code is as follows:
<Video preload = "preload">
...
</Video>

18. display controls
The display control attribute allows you to add a pause control to a video. Note that the display effect of each browser may be different.

The Code is as follows:
<Video controls = "controls" preload = "preload">
...
</Video>

19. Use Regular Expressions
In HTML5, we can directly use regular expressions.

The Code is as follows:
<Form method = post action = "">
<Label for = username> Create a Username: </label>
<Input id = username type = text name = username placeholder = "4 <> 10" required = "required" autofocus = "autofocus" pattern = "[A-Za-z] {4,10} ">
<Button type = submit> Go </button>
</Form>

20. Check the browser's support for HTML5 attributes
Different browsers have different support for HTML5 attributes, which causes some compatibility problems. However, you can use the method to check whether the browser supports these attributes. If the code in the previous example is to check whether the pattern attribute is recognized by the browser, you can use Javascript code to check the pattern attribute.

The Code is as follows:
Alert ('pattern' in document. createElement ('input') // boolean;

In fact, this is a common method for determining browser compatibility. This method is often used by the jQuery library. The above Code creates an input tag and checks whether the pattern attribute is supported by the browser. If it is supported, the browser supports this function; otherwise, it does not.


The Code is as follows:
<Script>
If (! 'Pattern' in document. createElement ('input ')){
// Do client/server side validation
}
</Script>

21. Mark tag
<Mark> A tag is used to highlight the text that needs to highlight its importance to the user visually. The strings enclosed in the tag must be related to the user's current behavior.

For example, if I search "Open your Mind" in some blogs, I can use JavaScript in the <mark> label to wrap each action.

The Code is as follows:
<H3> Search Results <H6> They were interrupted, just after Quato said, <mark> "Open your Mind" </mark>.
22. How to correctly use the div tag
Some people may have doubts. DO <div> tags still be used in HTML5 with
Many people think that HTML5 may still be far away, so they simply ignore it. In fact, many websites are now using HTML5. In fact, some new HTML5 attributes and functions make the code more concise, which is always a good thing and deserves our praise. Finally, thank you for reading this HTML5 article. I hope this article will be helpful to you.