美文网首页
HTML5结构化元素

HTML5结构化元素

作者: 骚伦 | 来源:发表于2017-02-20 01:18 被阅读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>

相关文章

  • HTML5结构化元素

    通过研究WEB页面发现,如果使用一些带有语义性的标记,可以加快浏览器解释页面中元素的速度。 下面案例:将页面分为上...

  • HTML学习笔记(三)

    HTML5新增的元素和废除的元素 HTML5的结构 HTML5新增的元素和废除的元素

  • HTML5 新元素

    HTML5中的新元素 下面列出的HTML5的新元素,以及他们的描述。 新的语义/结构元素 HTML5提供的新元素可...

  • HTML5 表单元素

    HTML5 新的表单元素HTML5有以下新的表单元素 ?:不是所有的浏览器都支持HTML5新的表单元素,但是你...

  • HTML5 浏览器支持

    将 HTML5 元素定义为块元素HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元...

  • HTML5权威指南 | 第二部分 HTML篇

    六、HTML5元素的背景知识 搞懂如何使用这些HTML5元素,和理解这些元素的含义同等重要。HTML5中的一大主要...

  • HTML 所有标签列表

    这里列出了所有的标准化的HTML5元素,该页只列出有效的 HTML5 元素 根元素 ElementDescript...

  • HTML5 新元素

    新的语义/结构元素 HTML5提供的新的元素可以构建更好的文档结构: 新的表单元素 新的输入类型 HTML5 - ...

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • HTML5元素分类

    HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先等级定义为结构性元素、级...

网友评论

      本文标题:HTML5结构化元素

      本文链接:https://www.haomeiwen.com/subject/wfgdwttx.html