首页课程HTML趣味课堂header, nav & footer

header, nav & footer

目录列表

<header> 标签


在HTML4中,我们将定义一个这样的头:

<div id="header">

在HTML5中,我们使用简单的 <header> 标签。

<header> 标签定义了文档的头部区域。

<header> 元素适合在 <body> 标签内部使用。 

实例

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <header>
        <h1>标题 1</h1>
        <h3>标题 3</h3>
      </header>
   </body>
</html>


注意:<header> 与<head> 标签完全不同。



标签内容适合放在哪里?

&lt;footer&gt; 标签

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

文档的页脚:

<footer>
  <p>Posted by: Hege Refsnes</p>
</footer>


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

在HTML5 中,什么标签定义文档的页脚?

&lt;nav&gt; 标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

一个导航链接实例:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>


运行显示结果如下图:


下载 (8).png

拖拉排序以下标签,创建一个通用的 HTML5 页面结构:

  • <nav>
  • <footer>
  • <header>
  • <body>