Article introduction of Wulin.com (www.vevb.com): A detailed explanation of the new elements added to HTML 5.
For HTML rendering, the browser has been stuck at the 1999 level. To this end, HTML 5 is a pragmatic solution, which not only continues to deal with HTML scattered in every corner of the world over the years, but also makes it easier for browser manufacturers to add new features. This is called degrade gracefully. Let's take a look at some new elements added to HTML 5.
HTML 5 Structural Elements
This is really awesome. At present, we can only define a structure through a universal div, trying to express the head, bottom or sidebar respectively by setting the value of its characteristic id such as header, footer, sidebar, etc. With them, code writers no longer need to spend time naming ids, which is more semantic for mobile phones, readers and other devices. HTML 5 adds new structural elements to express these most commonly used structures:
◆section: This can express a part or a chapter of the book, or a section within a chapter.
◆Header: The header on the main body of the page. Not the head element
◆footer: The bottom of the page (footer), which can be the location of an email signature
◆nav: Collection of links to other pages
◆article: An independent record such as blog, magazine, outline, etc.
For example, if the homepage of a blog is written in HTML 5, it can be like this (omitted):
HTML also adds the following three block-level elements:
◆aside
◆Figure/code>
◆dialog
aside can be used to express notes, tips, sidebars, summary, inserted quotes, etc., such as content as supplementary subjects. For example, the sidebar expressing the blog like this:
The figure element represents a block-level image with description. for example:
<figure> <legend>This is an illustration of the picture</legend> <img alt=image replacement text src=/path/to/img.png mce_src=/path/to/img.png /> </figure>dialog element is used to express conversations between people. In HTML 5, dt is used to represent the speaker, while dd is used to represent the speaker's content. like:
I now need to click the empty...semantic element inline, and the m element is used to mark some text that is not so important. There is still controversy now and it may eventually be changed to mark.
The time element, as its name, is used to express time. It requires a datetime feature to indicate the time the machine can recognize, such as:
<time datetime=2008-08-08T20:08:08>August 8, 2008 at 8:8:8 pm</tiem>meter element expresses values within a specific range. Can be used for salary, percentage, score, etc. for example:
I regret to tell you that I only have <meter>150cm</meter> and it has 6 characteristics to express all the meanings, such as:
There is also a progress, which is also the name of the word, to express progress:
Target completion degree: <progress value=40 max=100>40%</progress>Embed into multimedia
Added video and audio elements. As the name implies, they are used to insert video and sound respectively. As for the format, it is implemented by the browser, and HTML no longer needs special code to play a specific format. Just like img, it can be displayed whether it is png, jpg or gif. It is worth noting that they can contain content. For example, you can put the lyrics into a certain song:
Interactive
HTML 5 is also called Web Applications 1.0, so it further develops interactive capabilities. These tags are created to improve the interactive experience of the page:
details
datagrid
menu
Command
details are used to represent a specific piece of content, but the content may not be displayed by default, and will only be displayed by interacting with legend through some means (such as clicks). This is somewhat similar to the current practice of hiding a piece of content through JavaScript and displaying it after clicking. for example:
Record every detail in life in one sentence. <details> <legend>More</legend> <p>Communicate and share, bring you and friends closer, and support MSN/GTalk/QQ, SMS, and mobile phone WAP</p> </details> It can have an open feature to show details or not.
Datagrid is used to control data and can be updated by users or scripts.
menuHTML 2 exists, but HTML 4 is abandoned. HTML 5 waste utilization and add command elements during the period.