Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/HTML/Reference/Elements/section below:

<section> - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

Baseline Widely available

HTML <section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

此元素只包含全局属性。

如上所述，<section> 是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。举个例子，一个导航菜单应该被包裹在 <nav> 元素中，但搜索结果列表或地图显示及其控件并没有特定的元素，可以放在 <section> 里面。

注意事项：

• 当该元素的内容可以作为一个独立的作品在多个媒体上发表，使用 <article> 是一个更好的选择。
• 当内容包含代表与主要内容一同展示的有用的切入信息，但不是直接的一部分（如相关链接，作者简历等），请使用 <aside>。
• 当内容代表文档中的主要内容区域，请使用 <main>。
• 将该元素作为一个样式包装时，请使用 <div>。一般来说，<section> 应该出现在文档大纲中。

再次重申，每个 <section> 都应该被标识出来，通常是将标题（<h1>-<h6>元素）作为 <section> 元素的一个子元素。请看下面的例子，你可能会看到没有标题的 <section>。

<div>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</div>

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

使用 <section>> 元素但不包含标题的情况，通常出现在 web 应用或用户界面的部分，而不是传统的文档结构中。在文档中，有独立的内容部分但没有标题来描述其内容，是没有任何意义的。标题对所有的读者都很有用，尤其是对使用屏幕阅读器等辅助技术的用户，同时标题也有利于搜索引擎优化。

在设置二级导航时，全局导航已经被包裹在 <nav> 元素中，此时可以使用 <section> 元素包裹一个上一个/下一个菜单作为二级导航。

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

在设置控制应用程序的按钮栏时，需要将其作为文档中单独存在部分，但此时并不需要设置标题。

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>

没有标题的内容不会出现在文档大纲中。但如果文档大纲中需要包含这样一个 HTML 块，又不希望影响页面效果，可以通过设置隐藏标题来实现

<section>
  <h2 class="hidden">Controls</h2>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>

确保使用一些辅助技术和对屏幕阅读器友好的 CSS 来隐藏它，就像这样。

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

根据内容来包含标题也有助于 SEO，因此，这是一个可以考虑的选择。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4