HTML semantics: New tags for HTML5 and partial compatibility schemes for IE5.5~9

First, preface

This article will introduce the new semantic tags in HTML5 and support the compatibility of these tags in ie5.5~9 (IE9 has started to support some HTML5 new tags).

Directory One lump:

Second, semantic tags: article, aside, time, Mark, section, header, footer, Hgroup, progress, figure, figcaption, nav, meter, output, Details, summary, Ruby, and main

Third, let Ie5.5~9 support HTML5 new label

1. Under Ie5.5~8, the following issues are encountered for unsupported tags

2. Solution

2.1. html5-els.js--the simplest solution

Conditional compilation under IE

2.2. html5shiv.js--more comprehensive Solutions

Second, the semantic label

1. Article label

Draft of the Consortium:

The article element represents a section of content a document or site; for example. A magazine or newspaper article, or a blog entry. Specification

Semantic <article> elements: used to represent external content, such as magazines, newspapers, or blogs, that are not associated with the current document or page.

2. Aside label

Draft of the Consortium:

The aside element represents content that's tangentially related to the content that forms the main textual flow of a Document. Specification

Semantic <aside> elements: represents content that is not related to the content of the body. Content such as sidebar content, annotations, or footers.

3. Time Label

Draft of the Consortium:

The time element represents a date and/or time. Specification

Semantic <time> elements: Represents a content date/time, or a DateTime attribute that identifies the date/time that the content is associated with. The datetime attribute format is as follows:

yyyy-mm--10 The time zone identifier (Z denotes Zulu, also known asGMT)   

4. Mark Tag

Draft of the Consortium:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its rel Evance in another context. Specification

Semantic <mark> elements: Highlight the content associated with a particular topic (context).

5. Section label

Draft of the Consortium:

the section element represents a section of a document, typically with a title or heading. Specification

Semantic <section> elements: Defines sections (section, sections) in a document, usually with a title or header.

6. Header Label

Draft of the Consortium:

The header element represents the header of a section. Specification

Semantic

7. Footer Label

Draft of the Consortium:

The footer element represents the footer for the sections it applies to. Specification

Semantic <footer> elements: Defines the footer of a section or document. Typically, it contains the creator's name, the date the document was created, and/or contact information.

8. Hgroup Label

Draft of the Consortium:

The hgroup element represents a group of headings. Specification

Semantic

<section>       <p>   ........ ....... </p></section>

9. Progress label

Draft of the Consortium:

The progress element represents the completion progress of a task. Specification

Semantic <progress> elements: represents the progress of the execution of a task, setting the value of the task completion with the Max attribute and setting the current execution progress of the task through the value attribute. The style effect is a progress bar.

Figure tags

Draft of the Consortium:

The figure element represents a unit of content, optionally with a caption, which is self-contained, which is typically Referenced as a single unit from the main flow of the document, and so can be moved away from the main flow of the Docum ENT without affecting the document ' s meaning. Specification

Semantic <figure> elements: Represents a self-contained content unit (with an optional title), with the emphasis that even removing the content does not affect the overall meaning of the document.

One-figcaption label

Draft of the Consortium:

The figcaption element represents a caption or legend for a figure. Specification

Semantic <figcaption> elements: Represents the caption of a figure element as a child of a figure element.

Nav Label

Draft of the Consortium:

The nav element represents a section of a document, links to other documents, or to parts within the document Itsel F That's, a section of navigation links. Specification

Semantic <nav> elements: represents the navigation bar. Example:

<nav><a href="index.asp">home</a><a href="html5_ meter.asp">previous</a><a href="html5_noscript.asp"> Next</a></nav>

Meter Label

Draft of the Consortium:

the meter element represents a scalar gauge providing a measurement within a known range, or a fractional value. Specification

Semantic <meter> elements: defines scalar measurements within known ranges or sub-values, also known as gauge (scales). such as disk usage, rather than defining task execution progress, although the style is also the form of a progress bar. The label includes the following features:

Form    form_id     One or more forms that the <meter> element belongs to.    The high number specifies the range of values that are considered higher. The    low number specifies the range of values that are considered lower. Max    number specifies the maximum value for the range. Min    number Specifies the minimum value for the range. Optimum    number specifies the optimized value for the metric. Value number is    required. Specifies the current value of the measure. 

. Output label

Draft of the Consortium:

The output element represents the result of a calculation. Specification

Semantic <output> elements: Define content as the result of the calculation and send its content to the server when the form element commits. The for attribute is used to set the table cell ID associated with the result of the calculation, with multiple IDs separated by spaces. Example:

<form oninput="x.value=parseint (A.value) +parseint (b.value)">0<input type="Range"Id="a"Value=" -"> -+<input type=" Number"Id="b"Value=" -"> =<output name="x"  for="a B"></output></form>

. Details tab

Draft of the Consortium:

The details element represents a control from which the user can obtain additional information or controls On-demand. Specification

Semantic <details> elements: tags are used to describe the details of a document or part of a document. Details are not displayed by default and can be modified to show details by using the Open attribute. The effect of expanding/shrinking details can be achieved by clicking on the title. Combine the <summary> elements to customize the contents of the title.

Summary Label

Draft of the Consortium:

The summary element represents a summary, caption, or legend for a details element. Specification

Semantic <summary> elements: As a summary, title for the Details tab.

. Ruby Tags

Draft of the Consortium:

The Ruby element allows spans of phrasing content to being marked with ruby annotations. Specification

Semantic <ruby> elements: the pronunciation of East Asian characters is displayed. Need to combine <rt> elements and optional <rp> elements to use. Example:

<ruby> <rt>ㄏㄢˋ</rt><rp> (ㄏㄢˋ) </rp></ruby>

The effect in a browser that supports Ruby elements is that the effect is Han (ㄏㄢˋ) in an unsupported browser. The <rt> element identifies phonetic notation and displays the;<rp> element only when the browser supports it to identify what is displayed when the browser is not supported.

main label (specification)

Semantic <main> elements: represents the main content of a document, a document can only have one <main> element, and cannot be a descendant of the following elements:<article>, <aside>, <footer >,

Third, let ie5.5~9 support HTML5 's new label

1. Under Ie5.5~8, the following issues are encountered for unsupported tags

①. The element selector cannot be selected to match the corresponding label and the style rule is applied;

②. matches the corresponding label by ID, class name, and applies style rules, or embeds style rules with the style attribute, all valid. But the effect is far apart from the normal effect;

③. The default style of the label differs from the draft.

④. For elements such as <progress>, <meter>, <details>, and <canvas> with their own specific UI form and programming interface APIs, Cannot render the same UI form and provide programming interface APIs outward;

⑤. No support for APIs such as <output>, <keygen> that point to the owning form element through the form attribute.

Attention:

①. ie5.5~ 8 use methods such as document.getElementsByTagName or document.getElementById to get all the label elements in the DOM tree, even if the browser does not support these tag elements (by Object.prototype.toString.ca ll method gets the unsupported tag element type and gets the result as [object Htmlunknownelement])

②. IE9 and other modern browsers for unsupported tags, you can also use the element selector to match the corresponding label, while the application of style rules is the same as normal.

2. Solution

Note that the solution here only addresses the ①, ②, and ③ of the issues listed in the previous section.

2.1. html5-el.js--the simplest solution
   Place the following JS and CSS in the head element and before all style elements.

/*  @cc_on ' abbr article aside audio BDI canvas data DataList details figcaption Figure footer Header hgroup Mark Meter Nav Output Progress section summary subline time Video '. Replace (/\w+/g,function (n) {document.createelement (n)}) @  */

/* HTML5 */ Article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Do you think this piece of code is a bit strange? (Do you think it was not commented out by the whole paragraph at the beginning?) In fact, the conditional compilation (Conditional Compile) feature supported in IE5.5~10 is used here.

Conditional compilation is not a new word for C # engineers, but it is used in code testing and as a feature switch by # define, #if ... #endif等关键字来让编译器根据条件编译代码. And JS under the conditional compilation and what is the use of it? After all, the current JS or analytic language (in Typescript, Coffeescript, Clojurescript and other JS superset of use is also excusable), Microsoft's explanation is: "Using conditional compilation, you can use the new JavaScript language features, It also preserves compatibility with older versions that do not support these features. , that is, conditional compilation is actually executed according to the conditions of the code, so we can use the JS syntax in the job control flow (if, while, etc.) to achieve the same function, so the nature of the IE under the no-No. When we think we can use this feature to identify whether the current browser is ie5.5~10. Let's take a look at how to use it!

syntax Format: / * content @* /

Key Words: @cc_on , @if () [email protected] @end and @set

built-in properties: @_jscript_version --jscript version number, @_win32 , and @_win16 -the number of system bits

Example:

/* @cc_on @ */ /* @if (@_jscript_version >= 4)    alert ("JavaScript version 4 or better");    @else @*    /alert ("Conditional compilation not supported by this scripting Engine. " ); /* @end @ */

The above content will treat conditional compilation as a multiline comment for IE11 and other browsers. If you intend to use conditional compilation attributes to qualify code for execution only under IE5.5~10, it is recommended that you use the following form:

/* @cc_on code that needs to be executed @ */ /* @cc_on   code that needs to be executed @* /

Now we should understand what the code in Html5-els.js means! Of course, we can use this sentence to determine the current browser version: var isLteIE10 =/ *@[email protected]*/0

2.2. html5shiv--a more comprehensive solution ([email protected])
  2.1. The solution in does not solve the problem of setting the HTML5 label through the innerHTML property, and Html5shiv is perfectly solved! Example:

 //  ie5.5~8 under  Document.body.innerHTML =   <section> Test</section>   " console.log ( Document.body.innerHTML)  //  show test< /section>  console.log (document.body.innerHTML.childNodes.length) //    //  ie9+  Console.log (document.body.innerHTML) //  show <section>test</section>  Console.log (  document.body.innerHTML.childNodes.length) //  

jQuery1.7 began to increase the compatibility of HTML5 tags, and MODERNIZR also provide support (with the Html5shiv project with a group of people to do it! ）。

Iv. Summary

Because dialog, template, video, canvas and other label content more, this article did not continue to record them, and later learn and record it! In addition, the realization of Html5shiv is full of fun, but also have to read the impulse. After the source code analysis!

Respect the original, reprint please specify from: http://www.cnblogs.com/fsjohnhuang/p/4174812.html ^_^ fat son John

V. References

Http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html

Http://www.daqianduan.com/2831.html

HTML semantics: New tags for HTML5 and partial compatibility schemes for IE5.5~9