HTML5 appear also not short, many web pages have been revised, in order to reduce the amount of code (do not need to play too much class name), improve loading speed, improve the semantics of the label, therefore, in the Web page used a lot of section,article, Header and other HTML5 tags. I recently used the header and other tags when writing the example of a responsive layout. Or want to be compatible with the lower version of the browser, again and share with you, how to let the old browser support HTML5 new tags.
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8" />5 <title>Allow legacy browsers to support HTML5 new tags</title>6 <styletype= "Text/css">7 Beimeng{Color:#F00;}8 </style>9 <Scripttype= "Text/javascript">Ten </Script> One </Head> A <Body> - <Beimeng>Hello world!</Beimeng> - <Header>Top of content</Header> the <nav>Navigating content</nav> - <article>Article content</article> - <Footer>Bottom content</Footer> - </Body> + </HTML>
In fact, let the old browser support HTML5 new tags, it sounds difficult, the operation is very simple, only need you to understand the DOM operation. First we use JS for tag creation, creating the HTML5 tags we need for the HTML file.
1 <script type= "Text/javascript" >2 document.createelement (' Beimeng '); 3 Document.createelement (' header '); 4 Document.createelement (' nav '); 5 Document.createelement (' article '); 6 Document.createelement (' footer '); 7 </script>
Next, we need to use CSS to do the style control of these several HTML5 tags, because the new label created by this method is the inline element by default, so you need to add the following code:
1 <style type= "Text/css" >2 beimeng{color:#F00;} 3 article, aside, canvas, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section, Summary,beimeng {Display: block;} 4 </style>
For the code location, we need to note that to put the script tag in the head, rather than body behind, this is because the browser from top to bottom for code execution and parsing, after the rendering has been rendered in the execution of JS there is no value and meaning. All code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8" />5 <title>Allow legacy browsers to support HTML5 new tags</title>6 <styletype= "Text/css">7 Beimeng{Color:#F00;}8 article, aside, canvas, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section, summary,beimeng
{9 Display:Block;Ten } One </style> A <Scripttype= "Text/javascript"> - Document.createelement ('Beimeng'); - Document.createelement ('Header'); the Document.createelement ('nav'); - Document.createelement ('article'); - Document.createelement ('Footer'); - </Script> + </Head> - <Body> + <Beimeng>Hello world!</Beimeng> A <Header>Top of content</Header> at <nav>Navigating content</nav> - <article>Article content</article> - <Footer>Bottom content</Footer> - </Body> - </HTML>
How to make old browsers support HTML5 new tags