<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Title</title><linkhref="css/html5reset.css"rel="stylesheet"/><linkhref="css/style.css"rel="stylesheet"/></head><body><header><hgroup><h1>Header in h1</h1><h2>Subheader in h2</h2></hgroup></header><nav><ul><li><ahref="#">Menu Option 1</a></li><li><ahref="#">Menu Option 2</a></li><li><ahref="#">Menu Option 3</a></li></ul></nav><section><article><header><h1>Article #1</h1></header><section>
This is the first article. This is <mark>highlighted</mark>.
</section></article><article><header><h1>Article #2</h1></header><section>
This is the second article. These articles could be blog posts, etc.
</section></article></section><aside><section><h1>Links</h1><ul><li><ahref="#">Link 1</a></li><li><ahref="#">Link 2</a></li><li><ahref="#">Link 3</a></li></ul></section><figure><imgwidth="85"height="85"src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"alt="Jennifer Marsman"/><figcaption>Jennifer Marsman</figcaption></figure></aside><footer>Footer - Copyright 2011</footer></body></html>
<audiocontrols="controls"><sourcesrc="laughter.mp3"type="audio/mp3"/><sourcesrc="laughter.ogg"type="audio/ogg"/>
Your browser does not support the audio element.
</audio>
<audiocontrols="controls"><sourcesrc="laughter.mp3"type="audio/mp3"/><sourcesrc="laughter.ogg"type="audio/ogg"/>
Your browser does not support the audio element.
</audio>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Title</title><linkhref="css/html5reset.css"rel="stylesheet"/><linkhref="css/style.css"rel="stylesheet"/></head><body><header><hgroup><h1>Header in h1</h1><h2>Subheader in h2</h2></hgroup></header><nav><ul><li><ahref="#">Menu Option 1</a></li><li><ahref="#">Menu Option 2</a></li><li><ahref="#">Menu Option 3</a></li></ul></nav><section><article><header><h1>Article #1</h1></header><section>
This is the first article. This is <mark>highlighted</mark>.
</section></article><article><header><h1>Article #2</h1></header><section>
This is the second article. These articles could be blog posts, etc.
</section></article></section><aside><section><h1>Links</h1><ul><li><ahref="#">Link 1</a></li><li><ahref="#">Link 2</a></li><li><ahref="#">Link 3</a></li></ul></section><figure><imgwidth="85"height="85"src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"alt="Jennifer Marsman"/><figcaption>Jennifer Marsman</figcaption></figure></aside><footer>Footer - Copyright 2011</footer></body></html>
这代码包含了一个新的HTML5元素的数量,不支持在旧浏览器。请记住,在Internet Explorer 9,它看起来像这样: {S9的} 可以使用Internet Explorer的开发工具,看到这看起来像在旧版本的IE浏览器。在Internet Explorer中,按F12访问开发工具。 {S10的} 注意浏览器模式(在顶部的灰色菜单栏)目前设定为IE9的。点击浏览器上的模式,并从产生的下拉菜单,选择的"Internet Explorer 8??(不支持HTML5)。 {的S11} 后我做这一变化,并切换到一个非HTML5的兼容的浏览器,这是什么我的网页看起来像: {的S12}虽然 这看起来像一个怪物要解决的问题,它实际上并不是那么糟糕。 ",这并不奏效的原因是IE8的不承认新的HTML5我使用的元素,所以它不将它们添加到DOM,所以你不能风格他们使用CSS。 然而,刚刚加入Modernizr的参考(未做任何其他代码的变化!)蛮力到DOM中的这些元素。从{A12}下载添加在LT参考; headgt像这样的:{C7-}
我增加了两个脚本引用,一个jQuery和一个Modernizr的。我不知道在这一点上确实需要jQuery的参考,但我们需要为它接下来的脚本,所以我现在加入。这个简单的变化,现在得到我的网站,这个国家在Internet Explorer 8: {S13} 并不完美,但是这是非常接近原来的版本,我们看到Internet Explorer 9的。 Modernizr的补充,这些新的HTML5元素,IE8的不认识到DOM,因为他们在DOM中,我们可以风格他们使用CSS。 但是Modernizr的确实还不止这些!请注意,之一IE8和IE9网页版本之间的差异是,IE9的版本有漂亮的圆角上的两篇文章和图,IE8的版本没有。我们也可以使用Modernizr的解决这个问题。{C8的} 这个脚本,我们检查Modernizr的对象,看看是否有支持"borderradius??(CSS3的功能)。如果没有,我使用jQuery脚本jquery.corner.js(这是可供下载{A13号}需要额外的参考,我更早)到jQuery。然后,我只需拨打我的文章从该脚本的角落方法
数字给他们圆角。 你可以做到这一点的方式略有不同。 Modernizr的有一个可选(不包括)有条件的资源加载器称为Modernizr.load(),根据{A14高速公路}。这可以让你加载唯一的polyfilling脚本,用户需要,它加载的脚本异步并行有时会提供性能提升。为了得到Modernizr.load,你必须包括在自定义的Modernizr的建立
你必须创建{A12};它不包括在开发版本。与Modernizr.load,我们可以写一个这样的脚本: