HTML文档的基本组成部分

一个HTML文档包括 <head> 部分和 <body> 部分:

<!DOCTYPE html>
<html>
    <head>
        ......
    </head>
    <body>
        ......
    </body>
</html>

其中 <head> 元素的内容是不可见的,所有可见的内容都定义在 <body> 元素中。

<body> 元素又可以细分出一些基本组成部分,这些组成部分都有对应的标签,包括页眉 <header> 、导航栏 <nav> 、主内容 <main> 、页脚 <footer> ,主内容中还可以有各种子内容区段,比如文章 <article> 、边栏 <aside> ,如下图所示:

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <title>测试页面</title>
    </head>
    <body>
        <header>
            <h1>这是一个测试页面!</h1>
        </header>
        <nav> <!-- 本站统一的导航栏 -->
            <ul>
                <li><a href="#">主页</a></li>
                <!-- 共 n 个导航栏项目,省略…… -->
            </ul>

            <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
                <input type="search" name="q" placeholder="要搜索的内容">
                <input type="submit" value="搜索">
            </form>
        </nav>
        <main> <!-- 网页主体内容 -->
            <article>
            <!-- 此处包含一个 article(一篇文章),内容略…… -->
            </article>

            <aside> <!-- 侧边栏在主内容右侧 -->
                <h2>相关链接</h2>
                <ul>
                    <li><a href="#">这是一个超链接</a></li>
                    <!-- 侧边栏有 n 个超链接,略略略…… -->
                </ul>
            </aside>
        </main>
        <footer> <!-- 本站所有网页的统一页脚 -->
            <p>© 2050 某某保留所有权利</p>
        </footer>
    </body>
</html>

注意事项:

  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>,且直接位于 <body> 中。最好不要把它嵌套进其它元素。
  • <article> 包围的内容即一篇文章,与页面其它部分无关(比如一篇博文)。
  • <section> 与 <article> 类似,但 <section> 更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中,也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中,取决于上下文。
  • <aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。
  • <header> 是简介形式的内容。如果它是 <body> 的子元素,那么就是网站的全局页眉。如果它是 <article> 或 <section> 的子元素,那么它是这些部分特有的页眉(此 <header> 非彼 标题)。
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。