Web technology is developing too fast, and if you don’t keep pace with the times, you will be eliminated. Therefore, in order to deal with the upcoming HTML5, this article summarizes 22 basic skills of HTML5, and hope it will be helpful for you to further learn HTML5.
1. New Doctype statement The XHTML statement is too long, and I believe there are few front-end developers who can hand-written this Doctype statement.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The Doctype statement of HTML5 is very short. I believe you can remember it immediately after seeing this statement. You don’t have to waste brain cells to remember the slightly perverted Doctype statement of XHTML.
<!DOCTYPE html>
The brief DOCTYPE statement of HTML5 is to allow modern browsers such as Firefox and Chrome and browsers such as IE6/7/8 to enter (quasi-) standard mode. You may wonder that IE6/7 can also support HTML5 Doctype. In fact, IE will enter the standard mode as long as the doctype complies with this format.
2. <figure> tagTake a look at the following simple code:
<img src="path/to/image">
<h6>image of Mars.</h6>
Unfortunately, the h6 tag here seems to have nothing to do with the img tag, and the semantics are not clear enough. HTML5 realized this and adopted the <figure> tag. When the <figure> combined with the <figcaption> tag, the h6 tag and the img tag can be combined, and the code will be more semantic.
<figure>
<img src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>
3. Redefine <small> Not long ago, I used the <small> tag to create subtitles related to the logo. However, the <small> tag is redefined in HTML5 to make it more semantic, and the font size of <small> will become smaller. Think about it, it is still a good idea to use this tag for copyright information at the bottom of the website. 4. Removed the type attributes of Javascript and CSS tags Usually you will add type attributes to <link> and <script>:<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 this seems a bit redundant, and it can make the code more concise after it is removed.
<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>
5. Whether to use double quotes This is a bit confusing, HTML5 is not XTHML, you can save the double quotes in the tags. I believe most comrades, including me, are used to adding double quotes, because this makes the code look more standard. However, this can be determined based on your personal preferences whether to use double quotes.<h6 id="someid"> start the reactor. </h6>
6. Make the web content editable 7. Email input boxA new email attribute of an input box has been added to HMTL5, which can detect whether the input content meets the writing format of the email. The function is getting more and more powerful. Before HTML5, you can only rely on JS to detect it. Although the built-in form verification function will soon become a reality, many browsers do not support this property and will only be treated as a normal text input box.
<form method=get>
<label for="email">email:</label>
<input id="email" type="email" name="email">
<button type="submit"> submit form </button>
</form>
So far, this attribute is not supported, including modern browsers, so this attribute is still unreliable for the time being.
8. PlaceholderThe placeholder in the text box (see this blog's search box effect) is conducive to improving the user experience. Before, we could only rely on JS to achieve the effect of placeholders, and added a placeholder attribute placeholder in HTML5.
<input type="email" name="email" placeholder="[email protected]">
Similarly, current mainstream modern browsers do not support this property very well. For the time being, only Chrome and Safari support this property, and Firefox and Opera do not support this property.
9. Local storageHTML5's local storage function allows modern browsers to remember what we typed, and 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 header and footerThe following code will no longer exist in HTML5
<div id=header>
...
</div>
<div id=footer>
...
</div>
Usually we define a div for header and footer and then add an id, but in HTML5 you can use the <header> and <footer> tags directly, so the above code can be rewritten as:
<header>
...
</header>
<footer>
...
</footer>
Be careful not to confuse these two tags with the header and footer of the website, they are just containers that represent them.
11. IE support for HTML5IE browser currently does not support HTML5, which is also a big stumbling blocking the faster popularization of HTML5. However, IE9's support for HTML5 is still very good.
IE parses all the newly added tags of HTML5 into inline elements, but in fact they are block-level elements, so it is necessary to define a style for them:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
Despite this, IE still cannot parse these newly added HTML5 tags. At this time, Javascript needs to be used to solve this problem:
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 better parse HTML5
<script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12. Title Group (hgroup) This is similar to the second trick. If the h1 and h2 tags are used to represent the name and subtitle of the website, it will not relate to the two titles that are closely related in their original meaning. At this time, you can use the <hgroup> tag to combine them, so that the code will be more semantic.<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
13. Required attributesFront-end personnel must have done many form verification projects. One of the important points is that some input boxes must be filled in, so Javascript is needed to be checked here. In HTML5, a new attribute that must be filled in is added: required. There are two ways to use the required attribute. The second method appears more structural, while the first method is simpler.
<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">
With this property, it makes the form submission verification easier, take a look at the following simple example:
<form 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 empty, the form will not be submitted successfully.
14. Automatically obtain focusSimilarly, HTML5 no longer needs Javascript to solve the automatic focus acquisition of input boxes. If an input box should be selected or the input focus is obtained, HTML5 has added the automatic focus acquisition property autofocus:
<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 preference.
15. Audio playback supportHTML5 provides a <audio> tag, which solves the problem that in the past, you had to rely on third-party plug-ins to play audio files. So far, only a few latest browsers support this tag.
<audio controls="controls" autoplay="autoplay">
<source src="file.ogg" _fcksavedurl=""file.ogg"" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
Why are there two formats of audio files? Because there are differences in the formats supported by Firefox and Webkit browsers, Firefox can only support .ogg files, while Webkit only supports .mp3 files. The solution is to create two versions of audio files, so that it can be compatible with Firefox and Webkit browsers. It should be noted that IE does not support this tag.
16. Video playback support Like the <audio> tag, HTML5 also provides support for playing video files by the <video> tag. YouTube has also announced a new HTML5 video embed. But it's a bit regrettable that the HTML5 specification does not specify a specific video decoder, but lets the browser decide for itself. This creates a browser compatibility problem. Although Safari and IE9 both support H.264 videos (Flash players can play), Firefox and Opera support the open source Theora and Vorbis formats. Therefore, when displaying HTML5 videos, you must also prepare two formats.<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<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 added, the browser can parse the video file faster and accurately. Not all browsers support HTML5 videos, so you have to use the Flash version instead. Of course, the decision lies with you.
17. Preload videoPreload attribute: preload, first of all, you need to determine whether the video needs to be preloaded. If a visitor is visiting a page with many videos, it is necessary to preload a video, which can save the visitors' waiting time and improve the user experience. You can add a preload property to the <video> tag to implement preloading functions.
<video preload=preload>
...
</video>
[/code]
18. Display controls The display control properties can add a playback pause control to the video. It should be noted that the effect displayed by each browser may be somewhat different.<video controls="controls" preload="preload">
...
</video>
19. Using regular expressionsIn HTML5, we can use regular expressions directly.
<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. Detect browser support for HTML5 attributesSince each browser has different support for HTML5 attributes, this creates some compatibility issues. However, methods can be used to detect whether the browser supports these properties. If the code in the above example wants to detect whether the pattern attribute is recognized by the browser, it can be used to detect it using Javascript code.
alert( 'pattern' in document.createElement('input') ) // boolean;
In fact, this is a commonly used method to determine browser compatibility, and the jQuery library often uses this method. An input tag is created in the above code and checks whether the pattern attribute is supported by the browser. If it can be supported, the browser will support this function, otherwise it will not be supported.
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
21. Mark Tags The <mark> tag is used to highlight text that needs to visually highlight its importance to the user. The string wrapped in this tag must be related to the user's current behavior. For example, if I search for Open your Mind in some blogs, I can wrap each action using JavaScript in the <mark> tag.<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>
22. How to use the div tag correctlySome people may have questions. With tags such as <header> and <footer>, will the <div> tag still work in HTML5? The answer is yes. For example, if you want to create a container that can wrap special content, the free and flexible <div> is definitely the first choice. If you want to create an article or a navigation menu, it is recommended that you use more semantic <article> and <nav> tags.
Many people think that HTML5 may still be a long time, so they ignore it directly. In fact, many websites have started to use HTML5 now. In fact, some new attributes and functions of HTML5 are to make the code more concise. This is always a good thing and should be worthy of our praise. Finally, thank you for reading this entry-level article on HTML5, hoping to provide some help for you to further learn HTML5.