Article introduction of Wulin.com (www.vevb.com): HTML5 makes computer interaction, and human-network interaction becomes more comfortable and fits users. The previous lack of support for rich media applications and this storage is no longer a pain for browsers. The original intention of the HTML5 revolution is to promote the Web from a content platform to a standardized application platform and unify the standards of each platform camp.
What is HTML5, I don’t need to go into details here. According to my understanding, the innovation of HTML5 can be summarized as a semantic label system, rich media support with simplified traditional Chinese, magical local data storage technology, rich animation (canvas) without plug-ins, and powerful API support. In short, HTML5 makes computer interaction, and human-network interaction becomes more comfortable and fits users. The previous lack of support for rich media applications and this storage is no longer a pain for browsers. The original intention of the HTML5 revolution is to promote the Web from a content platform to a standardized application platform and unify the standards of each platform camp.
In this article, I will introduce one of the innovations of HTML5: a more clear and concise structure.
A standard XHTML header code from the beginning should look like this:
Above is a simple blog page part HTML, consisting of the header, article display area, right side column, and bottom. The encoding is neat and conforms to the semantics of XHTML, which can be performed well even in HTML 5. But for the browser, this is a piece of code that does not distinguish between weights, rather than a tag that allows the machine to understand semantics to define the corresponding block. For example, standard browsers (such as Firefox, Chrome and even the new version of IE9) have a shortcut key that can lead customers to jump directly to the page navigation, but the problem is that all blocks are defined by DIV, and the ID value of the DIV is determined by the developer, so the browser does not know which block should be the block where the navigation link is located. The emergence of new HTML 5 tags just makes up for this shortcoming. Then, if the above code is replaced with HTML 5, you can write it like this:
It turns out that the HTML page structure can be so beautiful that it can be seen at a glance without comments. For browsers, you will no longer be at a loss when you find the corresponding block.
In addition, although HTML5 is not currently supported by all browsers, this header that can save more than 100 bytes (for sites with daily PV levels of one million or more, it can save a lot of traffic). If you have researched on browser resolution mode, you should know that pages will trigger weird mode without defining doctype, and as long as the browser is defined, you can parse pages in standard mode without specifying a certain type of DTD.
New semantic labeling system
Semantic coding is a necessary skill for qualified front-end Developers, but as web pages become increasingly rich, it is obvious that they are unable to do so by simply using the original xhtml tag to desemanate. God said: There must be light! Then there will be light. Therefore, HTML 5 provides a series of new tags and corresponding attributes to reflect the typical semantics of modern websites. Practice to produce truth. Let's write an example:
I don’t need to say which one is more complicated and which one is simple. Yes, the HTML5 header can be so simple that it can be remembered easily! And, the case, quotes and the backslash before the last angle bracket can be ignored.
Why can it be so loose? In fact, if XHTML is sent as text/html, the browser can also parse it well, and the browser does not care about the syntax of the code. So, HTML 5 is metaphysical, it may break some of the original standards, but it can still perform well in the browser.
Of course, for the convenience of team assistance and subsequent maintenance, we should still unify the writing style you like, such as:
Let's take a look at how a standard HTML5 header is: