记不住就存下来---- HTML 5 新增常用属性之文档结构元素

最新推荐文章于 2025-04-02 17:32:29 发布

原创最新推荐文章于 2025-04-02 17:32:29 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML 5 新增常用属性 #文档结构元素

HTML 学习专栏收录该内容

80 篇文章

订阅专栏

本文详细介绍了HTML5中用于构建文档结构的关键元素，包括article、section、nav、aside等，解释了它们的作用及如何正确使用。

文档结构元素

元素名称	元素属性
article	该元素用于代表页面上独立,完整的一篇”文章”,该元素表示的内容可以是一篇独立的文章,一个帖子等.总之,只要是一篇独立的文档内容,就应该使用<article../>元素表示,规则如下: (1).元素内部可以使用<header../>定义文章 “标题” 部分. (2).元素内部可以使用<footer../>定义文章 “脚注” 部分. (3).元素内部可以使用多个<section../>把文章内容分成几个”段落”. (4).元素内部可以嵌套多个< article../>作为它的附属文章,如一篇文章下面可以有多篇回复文章.
section	该元素用于对页面的内容进行分块.<section../>元素通常也可以由标题和内容组成,元素的简单规则如下: (1).通常建议 section 元素包含一个标题.(<h1../>至<h6../>的标题) (2).元素可以包含多个<article../>元素,表示该分块内部包含多篇文章. (3).<section../>元素可以嵌套<section../>元素,用于表示该”分块”包含多个子分块.
nav	该元素专门用于定义页面上的”导航条”,包括页面上方的”主导航条”,侧边栏的”边栏导航条”,页面内部的”页面导航”,页面下方的”底部导航”等, HTML 5 推荐这些导航链接分别放在相应的 <nav../>元素中进行管理.
aside	该元素专门用于定义当前页面或当前文章的附属信息,通常来说,推荐<aside../>元素使用 CSS 渲染成侧边栏.
header	该元素主要用于为<article../>元素定义文章”头部”信息.该元素内部既可以包含多个 <h1../> ~ <h6../>这样的标题元素,也可以包含<hgroup../>元素,还可以包含普通的<p../>,<span../>等元素.
hgroup	该元素主要用于组织多个<h1../>~<h6../>这样的标题元素,当<header../>需要包含多个标题元素时,可以考虑使用<hgroup../>把他们组成一组.
footer	该元素主要用于为<article../>元素定义”脚注”部分,包括该文章的版权信息,作者授权信息等.
figure	该元素用于表示一块独立的”图片区域”,该元素内部可以包含一个或多个<img../>元素所代表的图片.除此之外,该元素内部区域还可以包括一个 <figcaption../>元素,用于定义该”图片区域”的标题.
figcaption	该元素通常放在<figure../>内部,用于定义图片区域的标题.

注释:

<article../>和<section../>两个元素非常容易搞混,因为他们都可以包含很多子元素,而且可以互相嵌套,但是<article../>和<section../>得侧重点不同;

<article../> :侧重于表达一篇独立的,完整的文章,

<section../>:侧重于对页面内容进行分块.

代码:

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文档结构元素</title>
</head>
<body>
  <article>
    <!--文章的头部-->
    <header>
      <h1>page_header</h1>
      <div>author:LP</div>
    </header>
    <p>
      Yesterday's graphic designers are today's UX designers. Will tomorrow's UX designers will be avatar programmers, fusionists, and artificial organ designers? Yes, according to the illustrious roster of design leaders we spoke with here.
    </p>
    <!--帖子的"回复"部分,用 section 元素表示-->
    <section>
      <!--每一个 article 代表一个回复-->
      <article>
        <!--回复的头部-->
        <header>
          <h2>page_header_2</h2>
          <div>author:lp</div>
        </header>
        <p>
          Design has matured from a largely stylistic endeavor to a field tasked with solving thorny technological and social problems, an evolution that will accelerate as companies enlist designers for increasingly complex opportunities, from self-driving cars to human biology.
        </p>
      </article>

      <!--每一个 article 代表一个回复-->
      <article>
        <!--回复的头部-->
        <header>
          <h2>page_header_2</h2>
          <div>author:lp</div>
        </header>
        <p>
        "Over the next five years, design as a profession will continue to evolve into a hybrid industry that is considered as much technical as it is creative," says Dave Miller, a recruiter at the design consultancy Artefact. "A new wave of designers formally educated in human-centered design—taught to weave together research, interaction, visual and code to solve incredibly gnarly 21st-century problems—will move into leadership positions. They will push the industry to new heights of sophistication."
        </p>
      </article>
    </section>
    <!--帖子的"脚注"-->
    <footer>
      2333333333333333333333
    </footer>
  </article>
</body>
</html></span>

效果: