您可能已经注意到，网站可能看起来完全不同，但结构相似。开发人员通过定位各种 HTML 布局元素来为所有用户阅读和扫描页面提供最舒适和直观的布局来实现这一点。
此外，当 HTML 结构和格式与显示的内容一致时，有利于网站在搜索引擎中的排名。在本文中将介绍最基本的布局元素以及如何正确使用它们。
布局元素
与任何其他语言一样，HTML 包含具有某种意义并构成内容的元素，以及没有意义但仅用于组织内容的元素。第一组是指语义元素，如<form>、<table>和<article>，而第二组包含非语义元素，如<div>和<span>。
<header>, <nav>, <section>, <article>,<aside>等语义元素<footer>定义了最典型的网站布局。从可访问性的角度来看，尊重语义并为正确的工作使用正确的元素至关重要。它有助于屏幕阅读器等辅助技术识别部分元素，并将有视觉或运动障碍的用户导航到他们需要的位置，如主导航或页脚。
<header> 标签
该<header>元素位于网站的“头部”，代表介绍性内容或一组导航链接。通常，标题元素包括：
• 一个或多个标题( <h1>- <h6>)。
• 徽标或图标
• 作者信息
请记住，该<header>元素需要开始和结束标记。HTML 页面可能包含多个元素，<header>但不能位于<footer>、<address>或其他<header>元素中。
<nav> 标签
HTML<nav>标记代表导航并提供导航链接，可以在当前文档中或到其他页面。通常，该<nav>元素包括菜单、目录和索引。与 一样<header>，<nav>需要开始和结束标签。
该<nav>元素不应包含网页中的所有链接，仅包含主导航。例如，<footer>有自己的一组链接，不需要在<nav>元素中。
<section> 标签
该<section>元素代表一个主题组，通常带有一个标题。开发人员使用此标签来“转储”不适合任何其他语义元素的内容。例如，如果内容表示为主要内容提供一些额外细节的有用信息，例如相关链接或作者简介，请改用该<aside>元素。元素的开始标签和结束标签都是必需的<section>。
<article> 标签
HTML<article>元素代表了一个自给自足的独立部分，它本身就有意义，因此用户可以独立于网站的其余部分共享它。示例包括：
• 论坛帖子
• 博客文章
• 报纸或杂志文章
• 产品卡片
• 文章或帖子下方的用户评论
HTML 页面可以包含多个<article>元素，其中包含一个或多个<section>标签。
元素的开始和结束标记都是必需的<article>。
<aside> 标签
开发人员将该<aside>元素用于应包含的附件信息，而不会分散用户对主要内容的注意力。最常见的示例包括侧边栏或内联菜单。不出所料，该<aside>元素像其他语义元素一样需要开始和结束标签。
<footer> 标签
该<footer>元素代表，好吧，页脚。它通常位于网页的底部，包含版权信息、一些导航链接、联系人链接和外部社交媒体参考。
该<footer>元素在 中的任何位置<body>，但您不能将它放在 an <address>（提供联系信息）<header>或其他<footer>元素中。
<详细信息> 标签
该<details>元素包括用户可以按需查看或隐藏的额外信息。将手风琴或工具提示视为<details>元素最熟悉的示例。这些元素使开发人员和设计人员能够节省空间，同时避免让用户不堪重负的数据。
要指定详细信息应该对用户可见（默认情况下，它们是隐藏的），您应该使用该open属性。语法流程如下：<details open>...</details>
<summary> 标签
该元素与标签<summary>串联。<details>它引用了用户应单击或点击以查看详细信息的标题。例如，手风琴控件表示一堆折叠的部分。<summary>标签定义了一个标题，而标签<details>指定了在用户单击之前保持不可见的部分内容。
<figure> 标签
如果您参加了我们的 HTML 图片课程，您就会知道在页面上添加图片时，我们使用<img>标签。<figure>元素是干什么用的？开发人员使用该<figure>元素来指定独立的内容，例如插图、图表、照片或代码片段。
这个标签向浏览器解释图像是主流的一部分，但它的位置是独立的。如果您决定删除此图像，它不会影响布局。如果您查看语法，您会发现<img>标签是元素的子<figure>元素。
<main> 标签
元素定义了页面中最<main>重要和唯一的内容。它不能包含用户可以在整个网站中遇到的重复元素，例如导航链接、菜单、网站徽标和搜索表单。
从可访问性的角度来看，该<main>元素是一个突出的地标。简单地说，这个标签向屏幕阅读器用户指示页面中最大和最关键的部分，这样他们就可以跳过导航部分并直接跳转到内容中。
HTML 页面只能包含一个<main>元素，并且不能是<article>、<aside>、<footer>、<header>或元素的子<nav>元素。
以上内容为转载
网友评论