9.1 header 元素

这节主要讲解新增的非主体结构元素。在 HTML5 中还增加了一些用来表示逻辑结构,或者是附加信息的非主体结构元素。

header 元素

header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面里的一个内容区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的 logo 图片。关于 header 我们见的并不少,只是以前的写法和现在的并不太相通,以前是通过一个 div 包裹,然后设定 idclass 指定为 header 用来包含整个页面或其中某个区块的标题。

需要注意的是 header 元素可以出现很多次,无论是整个页面中表示标题或一个区块中表示标题,都是可以的。

下面看下实例:

<body>
    <!-- 在以往的使用中往往是这样 -->
    <div class="header"></div>
    <!-- 使用新标签 header -->
    <header>
        <h1>页面标题</h1>
    </header>
    <article>
        <!-- header 也可以表示一个区块中的头部内容 -->
        <header>
            <h1>hello</h1>
        </header>
    </article>
</body>

除此之外 header 中可以包含的内容还有很多,下面做一个相对完整的例子:

<header>
        <h1>IT 最新技术</h1>
        <a href="https://www.nowcoder.com">牛客网</a>
        <nav>
            <ul>
                <li><a href="#">学习</a></li>
                <li><a href="#">技术</a></li>
                <li><a href="#">极客</a></li>
            </ul>
        </nav>
    </header>

关于 header 就介绍到这里。

全部评论

相关推荐

LB21:之前问她好像还什么试岗,你别逗我笑了西电✌️ 这种公司是我这种水平去的
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务