浅谈HTML5中分节元素

最新推荐文章于 2024-09-13 11:02:21 发布

a821814989

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量481

点赞数

分类专栏： HTML5 文章标签： html5 article 分节元素 aside

本文链接：https://blog.csdn.net/a821814989/article/details/84137227

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、什么是分节元素
HTML5中的分节元素用于帮助Web开发者组织内容，此类元素从逻辑将文档划分为章节，每一个元素通常以heading元素作为开端，以footer元素作为结束。
HTML5中的4个分节元素如下:
1、<article>元素对应一段独立的分节内容，可以将不同的article分节聚合在一起，并由它们构造成页面。article可以是以下内容：
a、一篇杂志或者新闻稿件
b、一篇博客
c、一篇论坛主题
d、一篇博客评论
e、其他独立内容
可以在<article>中放入一个<header>和一个<footer>.大部分article还拥有某种类型的标题。还可以在article中放入<section>标签，或者将article放入section标签中

<article>
  <h1>My Pets</h1>
  <p>I have always loved animals，I have always loved animals</p>
</article>

2、<aside>用于定义与文档主要内容无关或者关系不大的内容，也可以作为Web页面的侧边栏出现，提供于整体网站而不是页面主要内容相关的信息。
<aside>的类型取决于<aside>所在的位置，如<aside>位于<article>标签中，则其作用是定义与article自身相关的内容，例如相关article的词汇表或列表，如果<aside>位于<article>标签之外，则它的作用必然是定义与网站整体相关的内容，并非位于页面article相关的内容，例如博客链接或广告(与页面内容相关)这类侧边栏元素

<article>
  <h1>My Pets</h1>
  <p>I have always loved animals，I have always loved animals</p>
  <aside>
    <h1>Photos of my Pets</h1>
    <ul>
      <li><a href="#">A</a> </li>
      <li><a href="#">B</a> </li>
    </ul>
  </aside>
</article>

如上代码所示，<aside>位于<article>标签里，因此它与页面主要内容相关

<body>
  <article>
    <h1>My Pets</h1>
    <p>I have always loved animals，I have always loved animals</p>
  </article>
  <aside>
    <h1>Photos of my Pets</h1>
    <ul>
      <li><a href="#">A</a> </li>
      <li><a href="#">B</a> </li>
    </ul>
  </aside>
</body>

上面代码所示，<aside>位于<article>外部，因此它与网站的整体相关，而不是与特定内容相关。
3、<nav>：将一段内容定义为到其他页面或网站其他区域的连接，无需将页面所有链接列表都囊括在<nav>元素中，该元素仅对应页面的主要导航
大部分Web设计者其实已经变相的在使用<nav>元素——为<div>或<ul>赋予"nav"或"navigation"的ID

<ul id="nav">
  <li><a href="#">A</a> </li>
  <li><a href="#">B</a> </li>
</ul>

其实若web页面拥有类似分节，应将其放入<nav>元素中

<nav>
  <h1>Navigation</h1>
  <ul id="nav">
    <li><a href="#">A</a> </li>
    <li><a href="#">B</a> </li>
  </ul>
</nav>

4、<section>:不仅仅是一个普通的容器元素。当一个元素只是为了样式化或者方便脚本使用时，应该使用div元素，
下面是几个确定是否使用<section>元素的一些依据
a、该分节是否有自己标题？如果没有，则不应该使用<section>元素
b、该分节是否为页面大纲中的一个部分？如果不是，就不应该使用<section>
c、进行这个分节除了样式化是否还有别的目的？如果仅将一个<section>标签用作样式化的钩子，就应当用<div>元素来代替它
d、该分节内容是否符合<article>、<aside>或<nav>的标准？如果可以合并该内容，应当使用<article>；如果该内容与网站或者文章相关，则应该使用<aside>；如果该内容为导航，则应该使用<nav>。
可以在博客的<aside>中放入<section>元素。大部分博客都有一个带友情链接、最新博文、目录之类的<aside>，而上面的每一项都可以成为一个<section>

<aside>
  <section>
    <h1>Blogroll</h1>
    <ul>
      <li><a href="#">友情链接1</a> </li>
      <li><a href="#">友情链接2</a> </li>
    </ul>
  </section>
  <section>
    <h1>Catefories</h1>
    <ul>
      <li><a href="#">友情链接3</a> </li>
      <li><a href="#">友情链接4</a> </li>
    </ul>
  </section>
</aside>

另外还有两个新元素，虽然并没有明确说明其为分节元素，但它们却是分节的根元素
5、<details>:用于隐藏或者显示与内容相关的附加信息。与它相关的新元素为<summary>，<summary>是<details>元素的备选元素，它为<details>元素提供说明或总结

<input id="phone-number" type="phone">
<details>
  <summary>Format</summary>
  <p>1234dfdsf</p>
</details>

6、<figure>:用来定义内容中自成体系的单元，常见的figure为图形，但也可以是任意类型的独立内容，相关元素<figcaption>为figure提供图例或说明。
常见的figure包括以下内容：
a、图片或图片组
b、代码段
c、诗歌或引用
d、图形或图表
在确定是否要把内容放进<figure>时，需要先判断该内容是否为页面主体不可缺少的，如果是，并且内容的确切位置并不重要，则应使用<figure>元素。

<figure>
  <img src="icon.png" alt="Shasta">
  <figcaption>
    <p>A photo of my dog Shasta</p>
  </figcaption>
</figure>

另外还有几个可以被认为是分节元素的新元素，这些新元素与分节元素和分节根一起使用
7、<header>：可以包含一个分节标题和关于这个分节的介绍信息，例如内容表格、日期和相关图标。需要强调的是，尽管大部分情况下<header>元素都出现在文档开头，但它也可以出现在任意分节元素的开端，例如<article>、<aside>、<nav>

8、<footer>：提供与该分节相关的信息，例如作者、版权信息和相关链接，可以在任意分节元素中加入<footer>，它并不会形成一个新的分节