HTML 页眉、页脚标签的学习（样式/节）

header标签

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

复制
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

举例：

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页眉标签</title>
</head>
<body>
 
<!-- <article> 标签定义一个文章区域 -->
<article>
    <!-- <header> 标签定义文档或者文档的一部分区域的页眉。 -->
    <header>
        <h1>Google Chrome</h1>
        <p><time pubdate datetime="2020-02-22"></time></p>
    </header>
 
    <p>Google Chrome是由Google开发的免费网页浏览器。Chrome是化学元素“铬”的英文名称，过去也用Chrome称呼浏览器的外框。
        Chrome相应的开放源代码计划名为Chromium，而Google Chrome本身是非自由软件，未开放全部源代码。</p>
</article>
 
 
</body>
</html>

Google浏览器打开：

img

footer标签

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包含它所包含的元素的信息。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 <footer> 元素。

复制
提示：假如您使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address> 标签。

举例：

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚标签</title>
</head>
<body>
 
<!-- <footer> 标签定义文档或者文档的一部分区域的页脚。 -->
<footer>
    <p>摘自: 百度百科</p>
    <p><time 发布日期时间="2020-02-22"></time></p>
</footer>
 
</body>
</html>

Google浏览器打开：

img

案例

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页眉页脚</title>
</head>
<body>
 
<!-- <article> 标签定义一个文章区域 -->
<article>
    <!-- <header> 标签定义文档或者文档的一部分区域的页眉。 -->
    <header>
        <h1>Google Chrome</h1>
        <p><time pubdate datetime="2020-02-22"></time></p>
    </header>
 
    <p>Google Chrome是由Google开发的免费网页浏览器。Chrome是化学元素“铬”的英文名称，过去也用Chrome称呼浏览器的外框。
        Chrome相应的开放源代码计划名为Chromium，而Google Chrome本身是非自由软件，未开放全部源代码。</p>
</article>
 
<!-- <footer> 标签定义文档或者文档的一部分区域的页脚。 -->
<footer>
    <p>摘自: 百度百科</p>
    <p><time 发布日期时间="2020-02-22"></time></p>
</footer>
 
 
</body>
</html>

Google浏览器打开：

img

posted @   LeeHua  阅读(13462)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛