HTML5浏览器 HTML5简介 HTML5新元素 你可以学会如何使用旧的浏览器正确处理新的HTML5. HTML5 浏览器支持 HTML5 支持所有现代浏览器. 此外,所有的浏览器,旧的和新的,自动处理未被识别的元素作为内联元素. 因为这样,你可以“告诉”的旧的浏览器来处理“未知”的HTML元素. 甚至可以教IE6(XP 2001)如何处理未知的HTML元素. 定义语义元素作为块元素 HTML5定义八个新的语义元素。所有这些都是块级元素。. 在旧浏览器中确保正确的行为,你可设置元素的 display属性为block: header, section, footer, aside, nav, main, article, figure { display: block; } 加入新的元素到HTML 你也能添加新的元素到HTML页面. 这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #dddddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>一个标题</h1> <myHero>我的英雄元素</myHero> </body> </html> 让我试试 JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中. 使用IE8的问题 你可以使用上面描述的解决方案为所有新的HTML5元素. 然而, IE8 (和更早的版本) 不允许未知元素的样式! 幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库,可以使IE9或者更早的版本识别新的HTML5元素。 为了兼容IE9或者更早的版本,你将需要html5shiv. HTML5Shiv 语法 HTML5Shiv 被放在<head> 标签里面. HTML5Shiv 是一个javascript文件,通过<script>标签引用. 当你使用新的HTML5元素,例如: <article>, <section>, <aside>, <nav>, <footer>时,你可以使用HTML5Shiv来兼容旧的IE浏览器。 你可以从github下载最新的HTML5shiv版本或者使用CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js 语法 <head> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <![endif]--> </head> HTML5Shiv 实例 如果你不想下载和存储html5shiv在您的网站上,你可以参考在CDN网站的版本. HTML5Shiv 脚本必须放在<head>元素里面, 样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> <title>编程字典</title> </head> <body> <section> <h1>著名城市</h1> <article> <h2>伦敦</h2> <p>伦敦是英国的首都。它是英国人口最多的城市,拥有超过1300万居民的大都市.</p> </article> <article> <h2>巴黎</h2> <p>巴黎是法国首都和人口最多的城市.</p> </article> <article> <h2>东京</h2> <p>东京是日本的首都,东京大区的中心,也是世界上人口最多的大都市区.</p> </article> </section> </body> </html> 让我试试 HTML5简介 HTML5新元素