如何在HTML中使用截面元素

html是大多数网页的基础。这就是浏览器知道将内容构造成标题，段落，图像，表单和其他我们希望在网站上看到的元素的方式。

一些HTML元素仅告诉浏览器元素应如何显示。其他HTML元素告诉浏览器应如何出现以及它们的作用。后者被称为语义HTML。

语义HTML元素的一个示例是截面元素。在这篇文章中，我们将介绍此元素是什么，它与其他容器元素的不同以及如何使用和隐藏它。

HTML的部分是什么？

在HTML中，一个部分是用于在网页中创建独立部分的语义元素。这些部分应由相关内容组成，例如联系信息。

仅当没有更具体的元素来表示相关内容时，才应使用截面元素。例如，您不会使用截面元素将导航链接组合在一起 - 您将使用NAV元素。但是，您将使用“部分”元素来划分一页网站或冗长条款和条件协议。

为了更好地了解何时使用该部分元素，让我们将其与另一个语义元素进行比较：文章。

HTML5中的文章和部分有什么区别？

文章和部分元素都是语义元素HTML5。这意味着它们都传达了所包含的元素的含义。这有助于搜索引擎，浏览器，辅助技术和其他开发人员了解网页的不同部分。那么，在截面元素上使用文章时什么时候有意义？

应使用文章来代表网页上的内容单位，该网页原则上可以单独存在或重复使用。例如，应标记文章元素的博客文章，论坛帖子或杂志或报纸文章。bob官网官方网站

另一方面，应使用一节代表与同一主题相关但不可独立分发或可重复使用的文档的一部分。例如，有关首页的介绍，新闻项目和联系bob官网官方网站信息应标记为部分元素。

现在，让我们仔细看看html中的部分和另一个容器元素之间的区别：div。

HTML5中的DIV和部分有什么区别？

DIV和部分元素都用于将网页分为部分。但是DIV是语义中性元素，而截面元素不是。

那是什么意思？基本上，DIV不描述其包含的内容。其他元素，例如文章，导航，标题和页脚，清楚地描述了它们所包含的内容，称为语义元素。部分元素也被认为是语义元素，因为它代表了与同一一般概念相关的文档的一部分。

由于DIV没有语义含义，因此称为通用容器元素，仅应将其用于将元素组合在一起，以进行样式或呈现目的。否则，您应该使用部分或其他语义元素来解释页面的那部分即将搜索引擎，浏览器，辅助技术和其他开发人员。这将使您的代码更容易访问更容易维护。

如何在HTML中使用部分

要在HTML中使用部分，请将您要在节标签中组合在一起的相关元素。大多数部分应包含标题。

让我们看看下面的一些常见示例。

主页示例

在下面的示例中，HTML DOC的主体分为两个部分。每个都包含标题和段落。

看到笔部分元素示例克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

嵌套部分的文章示例

在下面的示例中，文章元素包含三个嵌套部分。每个部分都包含标题和段落。

看到笔克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

如何在html中隐藏一个部分

您可能有兴趣将其隐藏起来，而不是永久删除网站上的部分。这样，如果您改变主意，则不必从头开始重新创建它。

HTML中隐藏一个部分（或任何元素）有两个选择。如果您希望该页面像没有截面元素一样显示，请使用显示属性并将其设置为“无”。这是一个例子：

看到笔克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

如果您想隐藏该部分，但请在布局中占用相同的空间，请使用可见性属性并将其设置为“隐藏”。这是一个例子：

看到笔克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

分割您的HTML

该部分元素可用于将网页分为相关内容的独立部分。在诸如DIV之类的通用容器元素上使用“截面元素”可以帮助您的代码更容易访问和可理解，以搜索引擎，浏览器，辅助技术和其他开发人员。