zoukankan      html  css  js  c++  java
  • HTML5文档结构语义:页眉的header和hgroup标签使用

    HTML5提供了新的结构元素——例如headerhgroup、article、section、footer、nav等来定义网页,将使网页结构更加简洁严谨,语义更加结构化,而不用迂回通过class或id来为结构命名。

    这里就先来了解一下HTML5页眉的header和hgroup标签使用。

    header标签在语法规范中包含标题、标题介绍和标题导航。header并不仅仅只能出现在页面顶部作为页眉使用,也可以出现在文档的其他位置。但header不允许嵌套,也不允许出现在地址或者footer元素内。

    先来看一个示例

    <header>
       <img src="" alt=""/>
       <hgroup>
            <h1>标题</h1>
            <h2>副标题</h2>
       </hgroup>
    </header>

    在上面的示例中,header由一个作为logo的img元素,以及包含在hgroup元素中的两行标题h1(主标题) 和 h2(副标题)组成。

    在以往的常规做法中是直接书写h1和h2标签,并通过位置的先后来决定主标题和副标题;但是在HTML5中不再允许这种写法了,我们用hgroup标签来组织这些元素。hgroup的位置取决于首个标题出现的位置。虽然hgroup中可以出现其它元素,但是为了语义规范,通过只使用h1-h6这些标签。

    这里有朋友可能就要问了,现在的浏览器并不完全支持html5,应该怎么处理呢,这个问题主要集中在IE8及以下浏览器,我们可以使用一段代码来实现。

    <!--[if lt IE 9]>
    <script>
    document.createElement("<header>");
    </script>
    <style>
    </style>
    <!-- [endif]-->
  • 相关阅读:
    url中特殊字符被转义成编码后处理
    使用axios解决$.ajax不能下载文件问题
    ES6学习-封装一个分页插件
    input输入框延时防抖
    ES6学习-封装tab选项卡
    JS的forEach()map()遍历和jQuery的$.each()$.map()遍历
    JavaScript正则表达式实现批量替换实际案例
    点击页面出现爱心效果
    vue父子组件传值
    Vue——实现简易计算器
  • 原文地址:https://www.cnblogs.com/manongxiaobing/p/4682606.html
Copyright © 2011-2022 走看看