将HTML5元素定义为块元素
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:
header
,
section
,
footer
,
aside
,
nav
,
main
,
article
,
figure
{
display:
block
;
}
为HTML添加新元素
你可以为HTML添加新的元素。下面的实例向HTML添了新的元素,并为该元素定义样式,元素名为<myHero>:
<!DOCTYPE HTML> <html> <head> <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>
JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。
完美的 Shiv 解决方案
<
!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
charset
=
"
utf-8
"
>
<
title
>
渲染 HTML5
</
title
>
<!--
[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]
-->
</
head
>
<
body
>
<
h1
>
我的第一篇文章
</
h1
>
<
article
>
菜鸟教程 —— 学的不仅是技术,更是梦想!!!
</
article
>
</
body
>
</
html
>