The speed of the Internet technology soon be described as amazing, a too easy, you may not be able to keep up its pace. HTML5 change and update have overwhelmed many people, this article will introduce some basic HTML skills are very necessary.
1. The new document types (Doctype)
| <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
Are you still using the above this is both tedious and difficult to remember the XHTML document type? If still so, now switch to the new HTML5 document type.
|<! DOCTYPE html>|
As long as such a simple 15 characters on it. (Note: Your doctype of Affirming the need to appear in the first line of your html file.)
2. Graph (Figure) elements
Consider the following code to tag pictures?
| <mg src="path/to/image" alt="About image" />
<p> Image of Mars. </ p>
Unfortunately, it can not be simple, rich semantic relationships, the way the title associated with the graphics, because it is only with the paragraph tag and the picture element wrapped the HTML5 element through the introduction of <figure> to improve this. When combined with <figcaption> elements used, we can match the graphics up the title and graphics. Code:
<img src="path/to/image" alt="About image" />
<p> This is an image of something interesting. </ p>
3. Redefinition <small>
So you can use to create and logo <small> elements closely related to the subtitle. However, this usage is now HTML5 modify, <small> element being redefined, or more correctly, it is now used to represent the small print or other side of injection (eg, the site's copyright notice at the bottom).
4. No longer need the script, link type
Most likely you still the same as the following code to your links and script tags to add the type of property.
| <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
In HTML5, this is no longer needed. Means that these two labels represent the style and script. Therefore, we can have them removed the type attribute. Code:
| <link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"> </ script>
5. To use or not use quotation marks
Remember, HTML5 and XHTML different, if you do not like what you do not use quotation marks to attribute wrapped up. However, if you think the use of quotation marks makes you feel more comfortable, of course, there will not be any problems.
At this point, you can decide. If you want a very clear document structure, then stick with the quotes are quite good.
6. So you can edit the content of
HTML5 one of the very powerful feature is the "contenteditable", the name suggests it will allow users to edit the elements (including his sub-elements) contains any text. Its use is very wide, such as a simple list of tasks or based wiki sites are also very practical, in addition, it also has an advantage is to use a local store.
| <! DOCTYPE html>
Alternatively, techniques described in accordance with Article V, you can be the ninth line of code written like this (without quotes):
7. E-mail input
If we apply the "email" type to specify the input form, we can command the browser only allows structural requirements for effective e-mail address string input. Although the built form validation will come very soon, but we can not completely rely on this. Older browsers do not understand this "email" type, they will simply return to the regular text box.
| <! DOCTYPE html>
<button type="submit"> Submit Form </ button>
When it comes to support the browser and do not support the elements and attributes, you need to know all the current browsers are not so reliable. For example, Opera is only when you specify the name attribute to support e-mail authentication. However, it does not support the placeholder attributes (will be mentioned below). Finally, although you can use this form of authentication, but not to place undue reliance on it.
|<input name="email" type="email" placeholder="email@example.com" />|
9. Local storage
Thanks to HTML5's local storage, we can let the advanced browser "remember" the contents of our input, even if the browser was closed or re-refresh will not be affected. Although not all browsers support, but the most critical Internet Explorer 8, Safari 4, Firefox 3.5. Support.
10. Semantics Header and Footer
The above code gone. Divs Fundamentally, there is no semantic structure, even if the application of the ID or so.
In HTML5, we can use <header> and <footer> elements, the above code can be replaced with:
But be careful not to these two elements and sites in the head and feet mixed up. They only represent their containers.
11. IE and HTML5
IE needs to understand the new HTML5 elements of certain fees God, in order to ensure that the new HTML5 elements block-level elements can be displayed correctly, it is necessary to define their style with the following code:
| header, footer, article, section, nav, menu, hgroup (
Even so, IE still do not know what these elements, which will ignore these formats, but also use the following code to solve this problem:
| document.createElement ("article");
12. Group Title (hgroup)
Suppose a site name, subtitled respectively <h1>, <h2> tags to mark, in HTML4 also do not have a relationship between the two can be used to describe a good method of semantic relations, in addition, when using h2 title in other pages displayed when the problem is more in the level of respect. The use of group title hgroup elements, we can use these titles together, without affecting the entire outline of the document.
<h1> Recall Fan Page </ h1>
<h2> Only for people who want the memory of a lifetime. </ h2>
13. Necessary to (Required) property
The necessary form to allow the new property, whether the provisions of a particular input is necessary. You can write code according to their preferences, with the following two different ways to declare this property:
<input type="text" name="someInput" required>
Or, more stringent:
<input type="text" name="someInput" required="required">
The above two lines of code are feasible. With this line of code, and browser support required attribute, then enter a blank form will not be submitted. Here is a simple example, we also added a placeholder attributes:
| <form method="post" action="">
<label for="someInput"> Your Name: </ label>
<input type="text" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit"> Go </ button>
If the input is empty, the form will not submit, highlight the text box.
14. AF (Autofocus) property
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
15. Audio support
We no longer need to rely on a third-party plug-ins to provide audio. HTML5 provides audio elements <audio>. Currently, only the latest browsers support the HTML5 audio. At this point, better to provide some backward compatibility.
| <audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3"> Download this file. </ a>
Said audio format, Mozilla and Webkit have not fully supported. Firefox wants to see a. Ogg file, Webkit browsers only support the most common. Mp3 extension. This means that, at least for now, you should create two versions of the audio. When Safari loads pages, it did not recognize. Ogg format, will skip and move mp3 version. Please note, IE does not support it, Opera 10 or lower version only supports. Wav files.
16. Video support
And audio elements <audio> very much like that in the new browser also supports the HTML5 video. In fact, recently announced a new YouTube video embedded in HTML5. Unfortunately, because the documentation is not for the HTML5 video that a particular encoder, so all depends on the browser to decide. While Safari and IE9 can support H.264 format video, Firefox and Opera are still insists Theora and Vorbis formats. Therefore, the display HTML5 video, you must provide both.
17. Video pre-loaded
You first need to determine the need for the browser to pre-load the video. Is it necessary? Suppose that a visitor to enter a page dedicated to display video, then it is necessary to pre-load this page to save a little time to wait. You can set the preload = "preload" to pre-load the video, or can be added between the preload.
18. Display Controls
You may have noticed that with the above code, then the video will only appear as an image, without any control device. In order to obtain control of these players, we need to specify them in the video element control properties.
<video preload controls>
19. Regular Expression
On the loss properties of the new model, we can insert in the code of a regular expression.
| <form action="" method="post">
<label for="username"> Create a Username: </ label>
<Input type = "text"
name = "username"
id = "username"
placeholder = "4 <> 10"
pattern = "[A-Za-z] (4,10)"
<button type="submit"> Go </ button>
If you're familiar with regular expressions, then you will notice that this new model: [A-Za-z] (4,10) accept only uppercase and lowercase letters. This string must have at least four characters, at most 10 characters.
20. Detect browser support for property
alert ('pattern' in document.createElement ('input')) / / boolean;
In fact, this is to determine the browser compatibility of a very common method. jQuery library use this technique. The above code, we created a new input element, and confirm whether the pattern properties can be identified. If you can identify if the browser supports this feature, or do not support.
if (! 'pattern' in document.createElement ('input')) (
/ / Do client / server side validation
21. Mark element
| <h3> Search Results </ h3>
<p> They were interrupted, just after Quato said, <mark> "Open your Mind" </ mark>. </ p>
22. When to use <div>
Still need to use <div> label? Certainly needed. For example, if you want an element encased in a block of code, particularly for content positioning, <div> will be the ideal choice. However, if the package is not the case but to blog posts, or footer link list, I suggest you use <article> and <nav> elements, respectively.