HTML5 browser support
You can make some older browsers (that do not support HTML5) support HTML5.
HTML5 browser support
Modern browsers support HTML5.
In addition, all browsers, both old and recent, will automatically handle unrecognized elements as inline elements.
Because of this, you can "teach" the browser to handle "unknown" HTML elements.
 | You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements . |
|---|
Defines HTML5 elements as block elements
HTML5 defines 8 new HTML semantic elements . All of these elements are block-level elements.
To allow older versions of browsers to display these elements correctly, you can set the display property value of CSS to block:
Example
display: block;
}
Add new elements to HTML
You can add new elements to HTML.
This example adds a new element to HTML and defines a style for the element. The element name is <myHero>:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
JavaScript statementdocument.createElement(" myHero") is to add new elements to IE browser.
Internet Explorer browser problem
You can use the above method to add HTML5 elements for IE browser, but:
| Internet Explorer 8 and earlier IE versions do not support the above method. |
|---|
We can use "HTML5 Enabling JavaScript", " shiv" created by Sjoerd Visscher to solve this problem:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The above code is a comment, which is used to read the html5.js file and parse it when the IE browser version is smaller than IE9.
Note: Domestic users please use Baidu static resource library (Google resource library is unstable in China):
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->
html5shiv is a better solution for IE browser. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.
Perfect Shiv Solution
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>我的第一篇文章</h1> <article> php中文网 —— php中文网！！ </article> </body> </html>
Run Example»
Click "Run Example" button to view the online example
html5shiv.js reference code must be placed in the <head> element, because the IE browser needs to load the file first when parsing new HTML5 elements.
