零基础学习HTML(23)——section标签、article标签、details标签、summary标签

Dragon水魅

发布于 2026-01-23 14:45:16

850

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

section标签：https://man.ilovefishc.com/pageHTML5/section.html article标签：https://man.ilovefishc.com/pageHTML5/article.html details标签：https://man.ilovefishc.com/pageHTML5/details.html summary标签：https://man.ilovefishc.com/pageHTML5/summary.html

section 标签用于定义文档中的节（嵌套时可以自动识别）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多个section嵌套</title>
    <style>
        header {
            background-color: #429296;
            color: white;
            text-align: center;
            padding: 5px;
        }
        aside {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 15px;          
        }
        section {
            width: 600px;
            float: left;
            padding: 10px;        
        }
        footer {
            background-color: #429296;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;      
        }
    </style>
</head>
<body>
    <header>
        <h1>《零基础入门学习Web开发》（HTML5 & CSS3）</h1>
    </header>

    <aside>
        <p><a href="https://www.bilibili.com/video/av21786264/" target="_blank">在线学习</a></p>
        <p><a href="https://fishc.com.cn/forum.php?mod=forumdisplay&fid=354&filter=typeid&typeid=730" target="_blank">课后作业</a></p>
        <p><a href="https://ilovefishc.com/html5/" target="_blank">课件案例</a></p>
        <p><a href="https://fishc.taobao.com/" target="_blank">资源打包</a></p>
    </aside>

    <!-- 尝试嵌套多个section元素 -->
    <section>
        <h1>第一个section的h1</h1>
        <p>很多同学可能还不明白，Web开发是什么？</p>
        <p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的，或显示变化的信息。编写交互式服务器页面略微复杂一些，但却可以实现更丰富的网站。如今的大多数页面都是交互式的，并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
        <section>
            <h1>第二个section的h1</h1>
            <p>很多同学可能还不明白，Web开发是什么？</p>
            <p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的，或显示变化的信息。编写交互式服务器页面略微复杂一些，但却可以实现更丰富的网站。如今的大多数页面都是交互式的，并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
            <section>
                <h1>第三个section的h1</h1>
                <p>很多同学可能还不明白，Web开发是什么？</p>
                <p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的，或显示变化的信息。编写交互式服务器页面略微复杂一些，但却可以实现更丰富的网站。如今的大多数页面都是交互式的，并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
            </section>
        </section>
    </section>

    <footer>
        Copyright © 鱼C工作室
    </footer>
</body>
</html>

article 标签用于定义一篇文章，与页面其它部分无关：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多个section嵌套</title>
</head>
<body>
    <!-- atricle 定义文章内容 -->
    <article>
        <h1>使用article标签定义</h1>
        <p>很多同学可能还不明白，Web开发是什么？</p>
        <p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的，或显示变化的信息。编写交互式服务器页面略微复杂一些，但却可以实现更丰富的网站。如今的大多数页面都是交互式的，并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
    </article>
</body>
</html>

details 标签用于定义用户可见的或者隐藏的需求的补充细节：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>details和summary元素</title>
    <style>
        header {
            background-color: #429296;
            color: white;
            text-align: center;
            padding: 5px;
        }
        aside {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 15px;          
        }
        section {
            width: 600px;
            float: left;
            padding: 10px;        
        }
        footer {
            background-color: #429296;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;      
        }
    </style>
</head>
<body>
    <header>
        <h1>《零基础入门学习Web开发》（HTML5 & CSS3）</h1>
    </header>

    <aside>
        <p><a href="https://www.bilibili.com/video/av21786264/" target="_blank">在线学习</a></p>
        <p><a href="https://fishc.com.cn/forum.php?mod=forumdisplay&fid=354&filter=typeid&typeid=730" target="_blank">课后作业</a></p>
        <p><a href="https://ilovefishc.com/html5/" target="_blank">课件案例</a></p>
        <p><a href="https://fishc.taobao.com/" target="_blank">资源打包</a></p>
    </aside>
    
    <section>
        <!-- 使用details元素实现隐藏 -->
        <!-- <details open> 可实现内容展示 -->
        <details>
            <summary>Web开发是什么</summary>
            <p>很多同学可能还不明白，Web开发是什么？</p>
            <p>Web开发是一个指代网页或网站编写过程的广义术语。网页使用HTML、CSS和JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的，或显示变化的信息。编写交互式服务器页面略微复杂一些，但却可以实现更丰富的网站。如今的大多数页面都是交互式的，并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。</p>
        </details>
    </section>

    <footer>
        Copyright © 鱼C工作室
    </footer>
</body>
</html>