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浏览器打开:
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浏览器打开:
案例
<!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浏览器打开: