HTML5结构化元素
2017-02-20 本文已影响0人
骚伦
通过研究WEB页面发现，如果使用一些带有语义性的标记，可以加快浏览器解释页面中元素的速度。
下面案例：将页面分为上，中，下，三部分。上部用于显示导航，中部分又分成为两个部分，左边设置菜单，右边显示文本内容,下部显示页面版权信息。
DEMO
在浏览器中显示结果
上述代码不存在任何错误，还可以在HTML5环境中很好的运行。但该页面结构的很多部分对于浏览器来说都是未知的，这是应为浏览器是通过ID号来定位元素的。试想一下，很多开发者一起开发，设了很多ID号，这必将会造成浏览器不能很好的表明元素在页面中的位置，必然影响解析的速度。
HTML5中新增的元素可以很快地定位某个标记，明确的表示页面中的位置。
新增标签
浏览器输出结果
虽然两段代码不一样，但在浏览器下实现的页面效果相同，从上述两端代码来看，在实际生活中，HTML5新增元素创建的页面更加简单和高效。
由于有些浏览器并不支持HTML5中的新元素，如IE8或更早的版本，其CSS只应用于IE支持的那些元素，因此，为了能新增的HTML5元素应用样式，可以在头部标记<head>中加入如下Javascript代码，这样就可以应用样式了。
<script type="text/javascript">
document.createElement('article');
document.createElement('header');
</script>
