Bootstrap

16_HTML5 语义元素 --[HTML5 API 学习之旅]

HTML5 引入了许多新的语义元素，这些元素有助于创建结构更清晰、更具描述性的网页。语义化 HTML 不仅改善了代码的可读性，还增强了搜索引擎优化（SEO），提高了无障碍访问性，并使得开发者更容易理解和维护代码。以下是 HTML5 中一些重要的语义元素及其用途：

1. <article>

下面是一个使用 <article> 元素的 HTML5 示例。这个例子展示了一个典型的博客文章结构，包括标题、作者信息、发布日期和文章内容。<article> 元素用于定义独立的内容块，该内容可以在页面上独立存在或被分发到其他地方。

示例：博客文章

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>博客文章示例</title>
    <style>
        article {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
        }
        footer {
            font-size: 0.8em;
            color: gray;
        }
    </style>
</head>
<body>

<article>
    <header>
        <h2>如何学习编程</h2>
        <p>作者：<a href="#">张三</a></p>
        <time datetime="2024-12-24">2024年12月24日</time>
    </header>
    
    <section>
        <h3>简介</h3>
        <p>编程是一项非常有价值的技能，它不仅可以帮助你解决问题，还可以为你打开新的职业大门。在这篇文章中，我们将探讨一些有效的学习编程的方法。</p>
    </section>
    
    <section>
        <h3>选择合适的语言</h3>
        <p>对于初学者来说，选择一门容易入门的语言非常重要。Python 是一个不错的选择，因为它语法简单且功能强大。此外，JavaScript 也非常流行，特别是在网页开发领域。</p>
    </section>
    
    <section>
        <h3>实践是关键</h3>
        <p>无论你选择了哪种编程语言，最重要的是多做练习。尝试解决实际问题，构建小项目，参加在线编码挑战，这些都是提高编程技能的好方法。</p>
    </section>
    
    <footer>
        <p>标签：<a href="#">编程</a>, <a href="#">学习</a>, <a href="#">教程</a></p>
        <p>评论：<a href="#">查看所有评论</a> | <a href="#">添加评论</a></p>
    </footer>
</article>

</body>
</html>

在这里插入图片描述

解释

  • <article>：整个博客文章被包裹在一个 <article> 标签内，表明这是一个独立的内容块。
  • <header>：包含文章的标题、作者信息和发布时间。
  • <time>：用于定义日期或时间，并通过 datetime 属性提供机器可读的格式。
  • <section>：用来划分文章的不同部分（如简介、选择语言、实践等），每个部分都有自己的标题。
  • <footer>：包含了与文章相关的元数据，比如标签和评论链接。

这种结构不仅使文档更具语义性，也使得浏览器、搜索引擎和其他辅助技术能够更好地理解和处理你的内容。此外，良好的语义化 HTML 对 SEO（搜索引擎优化）也有积极的影响。

2. <section>

下面是一个使用 <section> 元素的 HTML5 示例。这个例子展示了一个典型的网页结构，其中 <section> 元素用于划分文档的不同部分，每个部分都有其特定的主题或内容类型。

示例：公司简介页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>公司简介 - 我们的使命与愿景</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }
        section {
            margin-bottom: 40px;
        }
        header, footer {
            background: #f4f4f4;
            padding: 10px 20px;
            text-align: center;
        }
        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        h2 {
            color: #333;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我们的公司</h1>
    <p>了解我们的使命、价值观和未来愿景</p>
</header>

<section>
    <h2>我们的使命</h2>
    <p>我们致力于通过创新和技术改善人们的生活质量。每一天，我们都努力为客户提供最优质的产品和服务，同时推动社会进步。</p>
</section>

<section>
    <h2>我们的价值观</h2>
    <p>诚信、透明、团队合作是我们公司的核心价值观。我们相信，只有在信任的基础上，才能建立长久的合作关系，并共同实现目标。</p>
</section>

<section>
    <h2>未来愿景</h2>
    <p>展望未来，我们希望成为行业领导者，不断探索新技术，开拓新市场。我们期待与更多志同道合的人一起成长，共创美好明天。</p>
</section>

<footer>
    <p>&copy; 2024 我们的公司. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <section>：每个 <section> 标签定义了文档中的一个独立部分，通常会有一个标题（如 <h2>）。在这个例子中，我们有三个主要部分：“我们的使命”、“我们的价值观”和“未来愿景”。每个部分都包含相关的描述性内容。

  • <header>：位于文档顶部，包含了网站或页面的主要标题和简短介绍。

  • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

  • 样式：为了更好地展示布局，添加了一些基本的 CSS 样式。section 元素之间设置了间距，使得各部分内容更加清晰地分隔开。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <section> 元素来组织内容，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。

3. <nav>

下面是一个使用 <nav> 元素的 HTML5 示例。这个例子展示了一个典型的网页导航栏结构，<nav> 元素用于定义页面的主要导航链接。这有助于提高网页的语义性，并为搜索引擎和辅助技术提供更好的支持。

示例：带有导航栏的公司网站

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>公司网站 - 导航示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            background-color: #333;
            overflow: hidden;
        }
        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 10px 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我们的公司</h1>
</header>

<nav>
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
    <a href="#contact">联系我们</a>
    <a href="#blog">博客</a>
</nav>

<main>
    <section id="home">
        <h2>首页</h2>
        <p>欢迎访问我们的主页，这里是你了解我们公司的起点。</p>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>了解更多关于我们的历史、使命和团队的信息。</p>
    </section>

    <section id="services">
        <h2>服务</h2>
        <p>查看我们提供的各种专业服务。</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>有任何问题或合作意向，请通过此页面联系我们。</p>
    </section>

    <section id="blog">
        <h2>博客</h2>
        <p>阅读最新的行业动态和技术文章。</p>
    </section>
</main>

<footer>
    <p>&copy; 2024 我们的公司. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <nav>：定义了页面的主要导航部分。在这个例子中，<nav> 包含了一系列指向不同页面部分（如首页、关于我们、服务等）的链接。每个链接都是一个 <a> 标签，它们都被设置为浮动在左侧，形成了一个水平排列的导航栏。

  • 样式：

    • nav 元素设置了背景颜色和溢出属性，以确保内容不会超出其容器。
    • nav a 样式定义了链接的颜色、对齐方式、内边距和文本装饰。
    • nav a:hover 样式指定了当用户将鼠标悬停在链接上时的背景颜色和文字颜色变化，增强了用户体验。

  • 其他元素：

    • <header>：位于文档顶部，包含了网站或页面的主要标题。
    • <main>：包含了页面的主要内容，分为多个部分（由 <section> 定义），每个部分都有自己的 ID 和内容。
    • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <nav> 元素来组织导航链接，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。

4. <aside>

下面是一个使用 <aside> 元素的 HTML5 示例。<aside> 用于定义页面中与主要内容相关但不是核心部分的信息，例如侧边栏、注释或补充信息。这个例子展示了一个典型的博客文章页面，其中包含一个侧边栏，用来提供额外的相关链接和广告。

示例：博客文章页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义元素示例 - 博客文章</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        header, footer {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        main {
            flex: 1;
            display: flex;
            padding: 20px;
        }
        article {
            flex: 3;
            margin-right: 20px;
        }
        aside {
            flex: 1;
            background-color: #f4f4f4;
            padding: 1rem;
        }
        nav a {
            display: block;
            margin: 0.5rem 0;
            text-decoration: none;
            color: #333;
        }
        nav a:hover {
            color: #4CAF50;
        }
        footer {
            margin-top: auto;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的博客</h1>
</header>

<main>
    <article>
        <h2>如何学习编程</h2>
        <p>作者：<a href="#">张三</a></p>
        <time datetime="2024-12-24">2024年12月24日</time>
        
        <section>
            <h3>简介</h3>
            <p>编程是一项非常有价值的技能，它不仅可以帮助你解决问题，还可以为你打开新的职业大门。在这篇文章中，我们将探讨一些有效的学习编程的方法。</p>
        </section>
        
        <section>
            <h3>选择合适的语言</h3>
            <p>对于初学者来说，选择一门容易入门的语言非常重要。Python 是一个不错的选择，因为它语法简单且功能强大。此外，JavaScript 也非常流行，特别是在网页开发领域。</p>
        </section>
        
        <section>
            <h3>实践是关键</h3>
            <p>无论你选择了哪种编程语言，最重要的是多做练习。尝试解决实际问题，构建小项目，参加在线编码挑战，这些都是提高编程技能的好方法。</p>
        </section>
    </article>

    <aside>
        <h3>相关文章</h3>
        <nav>
            <a href="#">如何成为一名优秀的程序员</a>
            <a href="#">编程新手常犯的错误及解决方案</a>
            <a href="#">掌握数据结构和算法的最佳资源</a>
        </nav>

        <h3>关于我们</h3>
        <p>我们致力于分享编程知识和技术教程，帮助更多的人进入编程的世界。</p>

        <h3>广告</h3>
        <p>这里可以放置广告内容...</p>
    </aside>
</main>

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <aside>：在 main 容器内，<aside> 元素被用来定义页面的侧边栏。在这个例子中，侧边栏包含了三个部分：

    • 相关文章：提供了一些与当前文章主题相关的其他文章链接。
    • 关于我们：简短介绍了网站的背景信息。
    • 广告：可以放置广告或其他推广内容。

  • 布局：

    • 使用了 CSS Flexbox 来创建一个两列布局，其中 article 占据大部分宽度（flex: 3），而 aside 则占据较小的空间（flex: 1）。
    • aside 的背景颜色设置为浅灰色，以区别于主要内容区域，并添加了一定的内边距来改善可读性。

  • 样式：

    • nav a 样式设置了链接的外观，包括文本装饰和颜色。
    • nav a:hover 样式指定了当用户将鼠标悬停在链接上时的颜色变化，增强了用户体验。

  • 其他元素：

    • <header>：位于文档顶部，包含了网站或页面的主要标题。
    • <main>：包含了页面的主要内容，分为 article 和 aside 两个部分。
    • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <aside> 元素来组织非核心但相关的内容，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。

5. <header>

下面是一个使用 <header> 元素的 HTML5 示例。<header> 元素用于定义文档或节（section）的头部信息，通常包含标题、导航链接、标志（logo）、搜索框等元素。这个例子展示了一个典型的网页结构，其中 <header> 用于页面顶部的内容。

示例：公司网站主页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义元素示例 - 公司主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        header h1 {
            margin: 0;
        }
        header nav {
            margin-top: 1rem;
        }
        header nav a {
            color: white;
            text-decoration: none;
            margin: 0 1rem;
            font-weight: bold;
        }
        header nav a:hover {
            color: #ddd;
        }
        main {
            padding: 2rem;
        }
        footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我们的公司</h1>
    <p>创新与卓越，驱动未来</p>
    
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
        <a href="#services">服务</a>
        <a href="#contact">联系我们</a>
        <a href="#blog">博客</a>
    </nav>
</header>

<main>
    <section id="home">
        <h2>首页</h2>
        <p>欢迎访问我们的主页，这里是你了解我们公司的起点。</p>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>了解更多关于我们的历史、使命和团队的信息。</p>
    </section>

    <section id="services">
        <h2>服务</h2>
        <p>查看我们提供的各种专业服务。</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>有任何问题或合作意向，请通过此页面联系我们。</p>
    </section>

    <section id="blog">
        <h2>博客</h2>
        <p>阅读最新的行业动态和技术文章。</p>
    </section>
</main>

<footer>
    <p>&copy; 2024 我们的公司. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <header>：

    • 定义了页面的头部区域，包含了公司名称或标志、标语以及主要的导航链接。
    • 使用了背景颜色和文本颜色来创建一个视觉上突出的头部区域。
    • 包含一个 <h1> 标题和一段简短的描述性文字，用来介绍公司或页面的主题。
    • 内嵌的 <nav> 元素提供了指向不同页面部分的链接，这些链接在用户将鼠标悬停时会改变颜色，以提供更好的交互体验。

  • 样式：

    • header 的背景颜色设置为绿色 (#4CAF50)，文本颜色为白色 (white)，使得内容清晰可见。
    • header nav a 设置了链接的颜色、边距和字体加粗，确保它们在头部区域内整齐排列，并且易于点击。
    • header nav a:hover 改变了悬停时的链接颜色，增强了用户体验。

  • 其他元素：

    • <main>：包含了页面的主要内容，分为多个部分（由 <section> 定义），每个部分都有自己的 ID 和内容。
    • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <header> 元素来组织页面顶部的内容，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。

6. <footer>

定义文档或部分的页脚，通常包含版权信息、联系方式、法律声明等内容。

<footer>
  <p>&copy; 2024 My Company. All rights reserved.</p>
  <address>
    Contact us at <a href="mailto:[email protected]">[email protected]</a>.
  </address>
</footer>

7. <main>

当然，下面是一个使用 <main> 元素的 HTML5 示例。<main> 元素用于定义文档的主要内容区域，该区域应该包含页面的核心内容，且每个页面通常只有一个 <main> 元素。这个例子展示了一个典型的博客文章页面，其中 <main> 包含了文章的内容、评论区和其他相关部分。

示例：博客文章页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义元素示例 - 博客文章</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        header, footer {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 1rem;
        }
        main {
            flex: 1;
            padding: 2rem;
            background-color: #f9f9f9;
        }
        article {
            background-color: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        section {
            margin-top: 2rem;
        }
        footer {
            margin-top: auto;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的博客</h1>
    <p>分享编程知识和技术教程</p>
</header>

<main>
    <article>
        <h2>如何学习编程</h2>
        <p>作者：<a href="#">张三</a></p>
        <time datetime="2024-12-24">2024年12月24日</time>
        
        <section>
            <h3>简介</h3>
            <p>编程是一项非常有价值的技能，它不仅可以帮助你解决问题，还可以为你打开新的职业大门。在这篇文章中，我们将探讨一些有效的学习编程的方法。</p>
        </section>
        
        <section>
            <h3>选择合适的语言</h3>
            <p>对于初学者来说，选择一门容易入门的语言非常重要。Python 是一个不错的选择，因为它语法简单且功能强大。此外，JavaScript 也非常流行，特别是在网页开发领域。</p>
        </section>
        
        <section>
            <h3>实践是关键</h3>
            <p>无论你选择了哪种编程语言，最重要的是多做练习。尝试解决实际问题，构建小项目，参加在线编码挑战，这些都是提高编程技能的好方法。</p>
        </section>
    </article>

    <section id="comments">
        <h2>读者评论</h2>
        <div class="comment">
            <p><strong>李四：</strong>这篇文章真的很有帮助！谢谢分享。</p>
        </div>
        <div class="comment">
            <p><strong>王五：</strong>我已经开始学习 Python 了，期待更多的教程。</p>
        </div>
    </section>

    <section id="related-articles">
        <h2>相关文章</h2>
        <ul>
            <li><a href="#">如何成为一名优秀的程序员</a></li>
            <li><a href="#">编程新手常犯的错误及解决方案</a></li>
            <li><a href="#">掌握数据结构和算法的最佳资源</a></li>
        </ul>
    </section>
</main>

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <main>：

    • 定义了页面的主要内容区域，包含了博客文章（由 <article> 标签包裹）、读者评论区（#comments）以及相关文章推荐（#related-articles）。
    • 使用 flex: 1 确保 <main> 占据页面的大部分垂直空间，并在页面底部有固定位置的页脚时，确保主要内容不会被遮挡。
    • 设置了背景颜色、内边距和圆角样式，使得主要内容区域更加突出，易于阅读。

  • <article>：

    • 包含了博客文章的具体内容，包括标题、作者信息、发布日期和各个章节。
    • 使用了背景颜色、内边距和阴影效果，使文章看起来更整洁，与页面其他部分有所区分。

  • <section>：

    • 在 <article> 内部使用 <section> 来划分文章的不同部分（如简介、选择语言、实践等），每个部分都有自己的标题和内容。
    • 文章之外也使用了 <section> 来组织读者评论区和相关文章推荐，保持了一致的结构化方式。

  • 样式：

    • main 的背景颜色设置为浅灰色 (#f9f9f9)，以区别于其他部分，并提供了良好的对比度。
    • article 和其他部分的样式（如内边距、边框半径和阴影）增强了视觉层次感，使得页面更加美观易读。

  • 其他元素：

    • <header>：位于文档顶部，包含了网站或页面的主要标题和简短介绍。
    • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <main> 元素来组织页面的核心内容，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。

8. <figure> 和 <figcaption>

<figure> 用于对自成一体的流内容进行分组（如图片、图表、照片、代码片段等），而 <figcaption> 可以为其提供标题或解释文本。

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>A caption for the above image.</figcaption>
</figure>

9. <time>

用于定义日期或时间。可以使用 datetime 属性来指定 ISO 格式的日期和时间。

<p>The event will take place on <time datetime="2024-12-25">Christmas Day</time>.</p>

10. <mark>

高亮显示文本的一部分，适用于需要强调或标记的内容。

<p>Search results for "HTML5": The term <mark>HTML5</mark> refers to the latest version of HTML...</p>

11. <details> 和 <summary>

当然，<details> 和 <summary> 是 HTML5 中非常有用的语义元素，用于创建用户可以展开或折叠的详细信息部分。<summary> 元素通常作为 <details> 的第一个子元素，提供了一个简短的摘要或标题，点击它可以显示或隐藏详细内容。

下面是一个使用 <details> 和 <summary> 的示例，展示了一个产品详情页面中如何利用这两个元素来提供可折叠的产品描述和规格信息。

示例：产品详情页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义元素示例 - 产品详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        main {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        details {
            margin-bottom: 1rem;
            border-bottom: 1px solid #ddd;
        }
        summary {
            font-weight: bold;
            cursor: pointer;
            outline: none;
        }
        details p {
            margin-left: 1rem;
        }
        footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我们的在线商店</h1>
</header>

<main>
    <h2>智能手表</h2>
    <p>这款智能手表具备多种功能，如健康监测、通知提醒等。</p>

    <details open>
        <summary>产品描述</summary>
        <p>这款智能手表采用最新的技术，拥有高清显示屏和长续航电池。它不仅可以追踪您的日常活动，还能接收来自手机的通知，帮助您保持联系。</p>
    </details>

    <details>
        <summary>规格参数</summary>
        <ul>
            <li><strong>屏幕尺寸：</strong>1.3 英寸</li>
            <li><strong>分辨率：</strong>360x360 像素</li>
            <li><strong>电池容量：</strong>300mAh</li>
            <li><strong>防水等级：</strong>5ATM</li>
            <li><strong>操作系统：</strong>Wear OS</li>
        </ul>
    </details>

    <details>
        <summary>客户评价</summary>
        <div class="review">
            <p><strong>张三：</strong>这款手表真的很好用！特别喜欢它的健康监测功能。</p>
        </div>
        <div class="review">
            <p><strong>李四：</strong>外观时尚，功能齐全，推荐购买。</p>
        </div>
    </details>
</main>

<footer>
    <p>&copy; 2024 我们的在线商店. 保留所有权利.</p>
</footer>

</body>
</html>

在这里插入图片描述

解释

  • <details>：

    • 定义了用户可以展开或折叠的详细信息部分。
    • 每个 <details> 元素包含一个或多个子元素，这些子元素在默认情况下是隐藏的，除非用户点击了 <summary> 或者设置了 open 属性。

  • <summary>：

    • 必须是 <details> 的第一个子元素，提供了对详细信息的简短描述或标题。
    • 点击 <summary> 可以切换 <details> 内容的可见性。
    • 设置了字体加粗和指针样式 (cursor: pointer) 来提示用户这是一个可交互的元素，并移除了默认的轮廓线 (outline: none) 以改善视觉效果。

  • 样式：

    • details 和 summary 样式确保了良好的视觉层次感和用户体验。details 元素之间添加了边距和底部边框，使它们更加清晰地分隔开。
    • summary 元素被设置为加粗字体和指针光标，提示用户它是可点击的。
    • details p 设置了左侧内边距，使得详细内容与标题有所区分，提高了可读性。

  • 其他元素：

    • <header>：位于文档顶部，包含了网站或页面的主要标题。
    • <main>：定义了页面的主要内容区域，包括产品标题、简短描述以及多个 <details> 部分。
    • <footer>：位于文档底部，提供了版权信息和其他页脚元素。

这种结构不仅使文档更具语义化，还提高了代码的可读性和维护性。使用 <details> 和 <summary> 元素来组织可折叠的内容，可以帮助搜索引擎更好地理解页面结构，同时也方便辅助技术（如屏幕阅读器）为用户提供更好的浏览体验。此外，这样的设计还可以提升用户体验，让用户更方便地查看他们感兴趣的信息。

通过合理使用这些语义化的 HTML5 元素，你可以构建出结构更加清晰、易于理解的网页，同时也为搜索引擎和辅助技术提供了更好的支持。

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
AI赋能安全运营 | 赛宁网安深度参与四川省网络安全沙龙
2023年6月雨课堂工程项目管理（90分保底）
【书生·浦语大模型实战营】学习笔记2
2022年第五届中青杯赛题浅评
【企业级监控】源码部署Zabbix与监控主机
mysql 联合主键自增_mysql auto_increment 与 联合主键冲突问题
Cisco网络优化、监测和故障排除考试答案
17-【go】go编译报错：running gcc failed: exit status 1
什么是大事务？
K8s源码分析（一）-K8s调度框架及调度器初始化介绍
;