结构元素✅

HTML5 语义化结构元素有哪些，如何使用？

答案

核心概念:

HTML5 引入的语义化结构元素用于明确页面结构：

<header> - 页面或区块的头部信息，包含导航、标题等
<main> - 页面主要内容区域，每页只能有一个
<nav> - 导航链接区域，主要导航菜单
<section> - 独立的内容区块，通常有标题
<article> - 独立的文章内容，可复用的内容单元
<aside> - 侧边栏内容，与主内容相关但独立
<footer> - 页面或区块的底部信息，版权、联系方式等

示例说明:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 语义化结构元素示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* 页面布局结构 */
        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            min-height: 100vh;
            display: grid;
            grid-template-areas: 
                "header header"
                "nav nav"
                "main aside"
                "footer footer";
            grid-template-rows: auto auto 1fr auto;
            grid-template-columns: 2fr 1fr;
            gap: 0;
        }

        /* Header 样式 */
        header {
            grid-area: header;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            text-align: center;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Navigation 样式 */
        nav {
            grid-area: nav;
            background: #2c3e50;
            padding: 0;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        nav li {
            margin: 0;
        }

        nav a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 1rem 2rem;
            transition: background-color 0.3s;
            border-right: 1px solid #34495e;
        }

        nav a:hover {
            background-color: #34495e;
        }

        nav a:last-child {
            border-right: none;
        }

        /* Main 内容区样式 */
        main {
            grid-area: main;
            padding: 2rem;
        }

        main h2 {
            color: #2c3e50;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #3498db;
        }

        /* Section 样式 */
        section {
            margin-bottom: 3rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }

        section h3 {
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        section p {
            margin-bottom: 1rem;
            text-align: justify;
        }

        /* Article 样式 */
        article {
            background: white;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-left: 4px solid #e74c3c;
        }

        article h3 {
            color: #e74c3c;
            margin-bottom: 1rem;
        }

        article .meta {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        /* Aside 侧边栏样式 */
        aside {
            grid-area: aside;
            background: #ecf0f1;
            padding: 2rem;
            border-left: 1px solid #bdc3c7;
        }

        aside h3 {
            color: #2c3e50;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        aside .widget {
            background: white;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        aside .widget h4 {
            margin-bottom: 1rem;
            color: #34495e;
        }

        aside ul {
            list-style: none;
        }

        aside li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #ecf0f1;
        }

        aside li:last-child {
            border-bottom: none;
        }

        aside a {
            color: #3498db;
            text-decoration: none;
        }

        aside a:hover {
            text-decoration: underline;
        }

        /* Footer 样式 */
        footer {
            grid-area: footer;
            background: #2c3e50;
            color: white;
            padding: 2rem;
            text-align: center;
        }

        footer .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            text-align: left;
            margin-bottom: 1rem;
        }

        footer h4 {
            margin-bottom: 1rem;
            color: #3498db;
        }

        footer ul {
            list-style: none;
        }

        footer li {
            padding: 0.25rem 0;
        }

        footer a {
            color: #ecf0f1;
            text-decoration: none;
        }

        footer a:hover {
            color: #3498db;
        }

        .copyright {
            border-top: 1px solid #34495e;
            padding-top: 1rem;
            margin-top: 1rem;
            text-align: center;
        }

        /* 结构指示样式 */
        .structure-indicator {
            position: relative;
        }

        .structure-indicator::before {
            content: attr(data-element);
            position: absolute;
            top: -10px;
            left: 0;
            background: #e74c3c;
            color: white;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 3px;
            font-weight: bold;
            z-index: 10;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .page-container {
                grid-template-areas: 
                    "header"
                    "nav"
                    "main"
                    "aside"
                    "footer";
                grid-template-columns: 1fr;
            }

            nav ul {
                flex-direction: column;
            }

            nav a {
                border-right: none;
                border-bottom: 1px solid #34495e;
            }

            header h1 {
                font-size: 2rem;
            }

            main, aside {
                padding: 1rem;
            }
        }

        /* 辅助说明样式 */
        .help-box {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .help-box h4 {
            color: #856404;
            margin-bottom: 0.5rem;
        }

        .help-box p {
            color: #856404;
            margin: 0;
            font-size: 0.9rem;
        }

        /* 代码展示 */
        .code-example {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <!-- 页面头部 -->
        <header class="structure-indicator" data-element="HEADER">
            <h1>现代网站设计</h1>
            <p>探索HTML5语义化结构的强大功能</p>
        </header>

        <!-- 主导航 -->
        <nav class="structure-indicator" data-element="NAV">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="structure-indicator" data-element="MAIN">
            <h2>主要内容区域</h2>
            
            <div class="help-box">
                <h4>💡 语义化结构说明</h4>
                <p>每个彩色标签显示了对应的HTML5语义化元素。这些元素不仅提供了清晰的文档结构，还有助于SEO优化和无障碍访问。</p>
            </div>

            <!-- 内容节区 -->
            <section class="structure-indicator" data-element="SECTION">
                <h3>什么是语义化HTML？</h3>
                <p>语义化HTML是指使用恰当的HTML标签来表达内容的含义和结构。HTML5引入了许多新的语义化元素，使网页结构更加清晰和有意义。</p>
                <p>这些元素不仅让开发者更容易理解和维护代码，还为搜索引擎和辅助技术提供了重要的结构信息。</p>
            </section>

            <!-- 文章内容 -->
            <article class="structure-indicator" data-element="ARTICLE">
                <h3>HTML5语义化元素的优势</h3>
                <div class="meta">发布时间: 2024年1月 | 作者: 前端开发团队</div>
                <p>使用HTML5语义化元素带来了诸多好处：</p>
                <ul>
                    <li><strong>更好的SEO</strong>：搜索引擎能更好地理解页面结构</li>
                    <li><strong>提升可访问性</strong>：屏幕阅读器能准确解读页面内容</li>
                    <li><strong>代码可维护性</strong>：结构清晰，便于团队协作</li>
                    <li><strong>未来兼容性</strong>：符合Web标准，面向未来</li>
                </ul>
            </article>

            <section class="structure-indicator" data-element="SECTION">
                <h3>元素使用规则</h3>
                <div class="code-example">
&lt;!-- 正确的语义化结构 --&gt;
&lt;header&gt;页面头部信息&lt;/header&gt;
&lt;nav&gt;主导航菜单&lt;/nav&gt;
&lt;main&gt;
  &lt;section&gt;
    &lt;h2&gt;章节标题&lt;/h2&gt;
    &lt;article&gt;独立的文章内容&lt;/article&gt;
  &lt;/section&gt;
&lt;/main&gt;
&lt;aside&gt;侧边栏内容&lt;/aside&gt;
&lt;footer&gt;页面底部信息&lt;/footer&gt;
                </div>
                <p>注意：每个页面只能有一个 &lt;main&gt; 元素，它包含页面的主要内容。</p>
            </section>

            <article class="structure-indicator" data-element="ARTICLE">
                <h3>Section vs Article 的区别</h3>
                <div class="meta">更新时间: 2024年1月</div>
                <p><strong>&lt;section&gt;</strong>: 表示文档中的一个独立部分，通常有自己的标题。它是内容的主题分组。</p>
                <p><strong>&lt;article&gt;</strong>: 表示独立的、完整的内容单元，可以独立分发或重用，如新闻文章、博客帖子等。</p>
                <p>简单记忆：如果内容可以单独拿出来发布到其他地方仍然有意义，使用 &lt;article&gt;；否则使用 &lt;section&gt;。</p>
            </article>
        </main>

        <!-- 侧边栏 -->
        <aside class="structure-indicator" data-element="ASIDE">
            <h3>相关信息</h3>
            
            <div class="widget">
                <h4>最新文章</h4>
                <ul>
                    <li><a href="#">CSS Grid 布局完全指南</a></li>
                    <li><a href="#">JavaScript ES2024 新特性</a></li>
                    <li><a href="#">Web性能优化实践</a></li>
                    <li><a href="#">无障碍设计原则</a></li>
                </ul>
            </div>

            <div class="widget">
                <h4>标签云</h4>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <span style="background: #3498db; color: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.8rem;">HTML5</span>
                    <span style="background: #e74c3c; color: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.8rem;">CSS3</span>
                    <span style="background: #f39c12; color: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.8rem;">JavaScript</span>
                    <span style="background: #27ae60; color: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.8rem;">响应式</span>
                </div>
            </div>

            <div class="widget">
                <h4>工具推荐</h4>
                <ul>
                    <li><a href="#">HTML5 验证器</a></li>
                    <li><a href="#">可访问性检查工具</a></li>
                    <li><a href="#">SEO分析工具</a></li>
                </ul>
            </div>
        </aside>

        <!-- 页面底部 -->
        <footer class="structure-indicator" data-element="FOOTER">
            <div class="footer-content">
                <div>
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="#">公司介绍</a></li>
                        <li><a href="#">团队成员</a></li>
                        <li><a href="#">发展历程</a></li>
                        <li><a href="#">招聘信息</a></li>
                    </ul>
                </div>
                <div>
                    <h4>服务项目</h4>
                    <ul>
                        <li><a href="#">网站设计</a></li>
                        <li><a href="#">前端开发</a></li>
                        <li><a href="#">性能优化</a></li>
                        <li><a href="#">技术咨询</a></li>
                    </ul>
                </div>
                <div>
                    <h4>联系方式</h4>
                    <ul>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                        <li><a href="tel:+86-138-0000-0000">138-0000-0000</a></li>
                        <li><a href="#">在线客服</a></li>
                        <li><a href="#">意见反馈</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2024 现代网站设计. 保留所有权利. | <a href="#">隐私政策</a> | <a href="#">使用条款</a></p>
            </div>
        </footer>
    </div>

    <script>
        // 结构分析工具
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== HTML5 语义化结构分析 ===');
            
            // 统计各种语义化元素
            const semanticElements = ['header', 'nav', 'main', 'section', 'article', 'aside', 'footer'];
            const elementCount = {};
            
            semanticElements.forEach(element => {
                const count = document.querySelectorAll(element).length;
                elementCount[element] = count;
                console.log(`${element.toUpperCase()}: ${count} 个`);
            });
            
            // 检查页面结构合规性
            console.log('\n=== 结构合规性检查 ===');
            
            // 检查main元素唯一性
            const mainElements = document.querySelectorAll('main');
            if (mainElements.length === 1) {
                console.log('✅ main元素唯一性: 通过');
            } else {
                console.log(`❌ main元素唯一性: 失败 (发现${mainElements.length}个)`);
            }
            
            // 检查heading层级
            const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
            console.log(`📝 标题元素: 共${headings.length}个`);
            
            // 检查article中是否有标题
            const articles = document.querySelectorAll('article');
            articles.forEach((article, index) => {
                const hasHeading = article.querySelector('h1, h2, h3, h4, h5, h6');
                console.log(`📰 Article ${index + 1}: ${hasHeading ? '有标题 ✅' : '缺少标题 ❌'}`);
            });
            
            // 检查section中是否有标题
            const sections = document.querySelectorAll('section');
            sections.forEach((section, index) => {
                const hasHeading = section.querySelector('h1, h2, h3, h4, h5, h6');
                console.log(`📑 Section ${index + 1}: ${hasHeading ? '有标题 ✅' : '缺少标题 ❌'}`);
            });
            
            console.log('\n💡 提示: 打开浏览器开发者工具查看完整的结构分析报告');
        });

        // 简单的交互功能
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                console.log(`导航点击: ${this.textContent}`);
                
                // 模拟页面跳转效果
                document.querySelectorAll('nav a').forEach(a => a.style.background = '');
                this.style.background = '#34495e';
            });
        });
    </script>
</body>
</html>

Open Sandbox

面试官视角:

要点清单：

能说出7个主要语义化结构元素及其用途
理解section与article的区别和使用场景
知道main元素的唯一性要求

加分项：

了解语义化对SEO和可访问性的益处
知道如何在旧浏览器中使用这些元素
理解结构元素的嵌套规则

常见失误：

把section当作div的替代品使用
在一个页面中使用多个main元素
忽略语义化元素对屏幕阅读器的重要性

延伸阅读:

Semantic HTML - MDN — 语义化HTML完整指南
HTML5 Sectioning Elements - HTML Standard — WHATWG规范中的分段元素
Using HTML sections and outlines — 文档大纲最佳实践

如何选择合适的内容分组元素？

答案

核心概念:

内容分组元素用于组织页面内容的逻辑结构：

<div> - 通用容器，无语义意义，用于样式和脚本
<p> - 段落文本，是最基本的文本容器
<blockquote> - 引用内容，来自其他来源的大段引用
<figure> - 独立内容单元，图片、图表、代码等
<figcaption> - figure的标题或说明文字
<hr> - 主题分隔线，表示内容主题的转换
<pre> - 预格式化文本，保持空格和换行

示例说明:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容分组元素使用示例</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
        }

        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 3px solid #3498db;
        }

        /* 示例区块样式 */
        .example-section {
            margin: 40px 0;
            padding: 25px;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            background: #f8f9fa;
        }

        .example-section h2 {
            color: #e74c3c;
            margin-bottom: 20px;
            padding-left: 15px;
            border-left: 4px solid #e74c3c;
        }

        .demo-box {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border-radius: 6px;
            border-left: 3px solid #3498db;
            position: relative;
        }

        /* 元素标签指示器 */
        .element-tag {
            position: absolute;
            top: -10px;
            right: 10px;
            background: #e74c3c;
            color: white;
            padding: 2px 8px;
            font-size: 11px;
            border-radius: 3px;
            font-weight: bold;
        }

        /* DIV 示例 */
        .div-example {
            border: 2px dashed #95a5a6;
            padding: 15px;
            margin: 10px 0;
            background: #ecf0f1;
        }

        .div-example p {
            margin: 0;
            color: #7f8c8d;
            font-style: italic;
        }

        /* 段落样式 */
        .paragraph-example p {
            background: #fff3cd;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #ffc107;
            border-radius: 4px;
        }

        /* 引用样式 */
        blockquote {
            background: #f8f9fa;
            border-left: 5px solid #6c757d;
            margin: 20px 0;
            padding: 20px;
            font-style: italic;
            position: relative;
        }

        blockquote::before {
            content: '"';
            font-size: 4em;
            color: #dee2e6;
            position: absolute;
            top: -10px;
            left: 10px;
            font-family: serif;
        }

        blockquote p {
            margin: 0 0 10px 0;
            padding-left: 30px;
        }

        blockquote cite {
            display: block;
            text-align: right;
            color: #6c757d;
            font-size: 0.9em;
            margin-top: 15px;
        }

        blockquote cite::before {
            content: '— ';
        }

        /* Figure 样式 */
        figure {
            margin: 25px 0;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        figure img {
            max-width: 100%;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        figcaption {
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            color: #495057;
            font-style: italic;
            border-radius: 4px;
            font-size: 0.9em;
        }

        /* 代码figure */
        .code-figure {
            background: #263238;
            color: #eeffff;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
        }

        .code-figure pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.4;
        }

        .code-figure figcaption {
            background: #37474f;
            color: #b0bec5;
            margin-top: 15px;
            margin-bottom: -20px;
            margin-left: -20px;
            margin-right: -20px;
            padding: 10px 20px;
            border-radius: 0 0 8px 8px;
        }

        /* HR 分隔线样式 */
        hr.fancy {
            border: none;
            height: 2px;
            background: linear-gradient(to right, transparent, #3498db, transparent);
            margin: 30px 0;
        }

        hr.dots {
            border: none;
            height: 20px;
            background: radial-gradient(circle, #3498db 2px, transparent 2px);
            background-size: 20px 20px;
            background-position: center;
            margin: 30px 0;
        }

        /* PRE 预格式化文本 */
        .pre-example {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
        }

        .pre-example pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #495057;
        }

        /* 地址样式 */
        address {
            background: #e8f4f8;
            border: 1px solid #bee5eb;
            border-radius: 6px;
            padding: 15px;
            font-style: normal;
            margin: 15px 0;
        }

        address strong {
            color: #0c5460;
            display: block;
            margin-bottom: 5px;
        }

        /* 时间元素 */
        time {
            background: #fff3cd;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: 500;
            color: #856404;
        }

        /* 比较表格 */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
        }

        .comparison-table th,
        .comparison-table td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }

        .comparison-table th {
            background: #e9ecef;
            font-weight: 600;
            color: #495057;
        }

        .comparison-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* 提示框 */
        .tip-box {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            border-radius: 6px;
            padding: 15px;
            margin: 20px 0;
        }

        .tip-box strong {
            color: #0c5460;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .example-section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 内容分组元素使用指南</h1>

        <!-- DIV 元素示例 -->
        <div class="example-section">
            <h2>1. &lt;div&gt; 通用容器</h2>
            <p><strong>用途：</strong>当没有更合适的语义化元素时使用，主要用于样式和脚本目的。</p>
            
            <div class="demo-box">
                <span class="element-tag">DIV</span>
                <p>这是一个普通的div容器，用于布局和样式控制。</p>
                <div class="div-example">
                    <p>嵌套的div，通常用于创建复杂的布局结构</p>
                </div>
                <p><strong>何时使用：</strong>当需要分组元素进行样式控制，但内容没有特殊语义时。</p>
            </div>
        </div>

        <!-- 段落元素示例 -->
        <div class="example-section">
            <h2>2. &lt;p&gt; 段落元素</h2>
            <p><strong>用途：</strong>表示文本段落，是最基本的文本容器。</p>
            
            <div class="demo-box paragraph-example">
                <span class="element-tag">P</span>
                <p>这是第一个段落，包含一些示例文本。段落元素会自动在前后添加间距。</p>
                <p>这是第二个段落。每个p元素都代表一个独立的段落，浏览器会自动添加适当的间距。</p>
                <p>段落可以包含<strong>粗体文本</strong>、<em>斜体文本</em>和<a href="#">链接</a>等内联元素。</p>
            </div>
        </div>

        <!-- 引用元素示例 -->
        <div class="example-section">
            <h2>3. &lt;blockquote&gt; 块引用</h2>
            <p><strong>用途：</strong>表示来自其他来源的长段引用内容。</p>
            
            <div class="demo-box">
                <span class="element-tag">BLOCKQUOTE</span>
                <p>以下是一个著名的引用：</p>
                
                <blockquote cite="https://en.wikipedia.org/wiki/Tim_Berners-Lee">
                    <p>网络的原始设计和理念是为了让它成为一个协作的媒体，一个我们可以读写的地方。</p>
                    <cite>蒂姆·伯纳斯-李 (Tim Berners-Lee)</cite>
                </blockquote>
                
                <p><strong>注意：</strong>cite属性用于指定引用来源的URL，cite元素用于标注作者或来源。</p>
            </div>
        </div>

        <!-- Figure 和 Figcaption 示例 -->
        <div class="example-section">
            <h2>4. &lt;figure&gt; 和 &lt;figcaption&gt;</h2>
            <p><strong>用途：</strong>figure表示独立的内容单元（图片、图表、代码等），figcaption提供说明。</p>
            
            <div class="demo-box">
                <span class="element-tag">FIGURE</span>
                
                <!-- 图片示例 -->
                <figure>
                    <svg width="200" height="120" style="background: #3498db; border-radius: 6px;">
                        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="white" font-size="16">示例图片</text>
                    </svg>
                    <figcaption>图1: 这是一个示例图片的说明文字</figcaption>
                </figure>

                <!-- 代码示例 -->
                <figure class="code-figure">
                    <pre><code>function greetUser(name) {
    return `Hello, ${name}! Welcome to our website.`;
}

console.log(greetUser('Alice'));</code></pre>
                    <figcaption>代码示例: JavaScript 问候函数</figcaption>
                </figure>
            </div>
        </div>

        <!-- HR 分隔线示例 -->
        <div class="example-section">
            <h2>5. &lt;hr&gt; 主题分隔线</h2>
            <p><strong>用途：</strong>表示段落级元素之间的主题转换。</p>
            
            <div class="demo-box">
                <span class="element-tag">HR</span>
                <p>这是第一个主题的内容。</p>
                
                <hr class="fancy">
                
                <p>这是第二个主题的内容，与上面的内容有明显的主题差异。</p>
                
                <hr class="dots">
                
                <p>第三个主题，展示不同样式的分隔线。</p>
            </div>
        </div>

        <!-- PRE 预格式化文本示例 -->
        <div class="example-section">
            <h2>6. &lt;pre&gt; 预格式化文本</h2>
            <p><strong>用途：</strong>保持文本的空格、换行和缩进，常用于代码展示。</p>
            
            <div class="demo-box">
                <span class="element-tag">PRE</span>
                <p>以下是一首诗的格式：</p>
                
                <div class="pre-example">
                    <pre>春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。</pre>
                </div>
                
                <p>注意空格和换行都被完整保留。</p>
            </div>
        </div>

        <!-- 其他语义元素示例 -->
        <div class="example-section">
            <h2>7. 其他语义元素</h2>
            
            <div class="demo-box">
                <span class="element-tag">ADDRESS</span>
                <h3>&lt;address&gt; 联系信息</h3>
                <address>
                    <strong>联系我们</strong><br>
                    地址: 北京市朝阳区创新大厦 808室<br>
                    电话: <a href="tel:+86-138-0000-0000">138-0000-0000</a><br>
                    邮箱: <a href="mailto:contact@example.com">contact@example.com</a>
                </address>
            </div>

            <div class="demo-box">
                <span class="element-tag">TIME</span>
                <h3>&lt;time&gt; 时间信息</h3>
                <p>文章发布时间: <time datetime="2024-01-15T14:30:00Z">2024年1月15日 下午2:30</time></p>
                <p>会议安排在 <time datetime="2024-02-01">2月1日</time> 举行。</p>
            </div>
        </div>

        <!-- 元素选择指南 -->
        <div class="example-section">
            <h2>8. 元素选择指南</h2>
            
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>元素</th>
                        <th>使用场景</th>
                        <th>语义意义</th>
                        <th>常见错误</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>&lt;div&gt;</code></td>
                        <td>布局容器、样式分组</td>
                        <td>无特殊语义</td>
                        <td>过度使用替代语义元素</td>
                    </tr>
                    <tr>
                        <td><code>&lt;p&gt;</code></td>
                        <td>文本段落</td>
                        <td>段落文本</td>
                        <td>包装非段落内容</td>
                    </tr>
                    <tr>
                        <td><code>&lt;blockquote&gt;</code></td>
                        <td>长段引用</td>
                        <td>来源引用</td>
                        <td>装饰性使用</td>
                    </tr>
                    <tr>
                        <td><code>&lt;figure&gt;</code></td>
                        <td>独立内容单元</td>
                        <td>可移动的内容</td>
                        <td>所有图片都用figure</td>
                    </tr>
                    <tr>
                        <td><code>&lt;hr&gt;</code></td>
                        <td>主题转换</td>
                        <td>内容分隔</td>
                        <td>纯装饰用途</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="tip-box">
            <strong>💡 最佳实践提示：</strong>
            <ul>
                <li>优先选择有语义意义的元素，最后考虑div</li>
                <li>figure适用于可以移动到文档其他位置的内容</li>
                <li>blockquote应包含cite属性指明来源</li>
                <li>time元素的datetime属性使用ISO格式</li>
                <li>address元素只用于联系信息，不是所有地址</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== 内容分组元素统计 ===');
            
            const elements = ['div', 'p', 'blockquote', 'figure', 'figcaption', 'hr', 'pre', 'address', 'time'];
            
            elements.forEach(element => {
                const count = document.querySelectorAll(element).length;
                console.log(`${element.toUpperCase()}: ${count} 个`);
            });
            
            // 检查figure和figcaption的配对
            const figures = document.querySelectorAll('figure');
            console.log('\n=== Figure元素检查 ===');
            figures.forEach((figure, index) => {
                const hasCaption = figure.querySelector('figcaption');
                console.log(`Figure ${index + 1}: ${hasCaption ? '有说明文字 ✅' : '无说明文字 ⚠️'}`);
            });
            
            // 检查blockquote的cite属性
            const blockquotes = document.querySelectorAll('blockquote');
            console.log('\n=== Blockquote元素检查 ===');
            blockquotes.forEach((bq, index) => {
                const hasCite = bq.hasAttribute('cite');
                const hasCiteElement = bq.querySelector('cite');
                console.log(`Blockquote ${index + 1}: cite属性=${hasCite ? '✅' : '❌'}, cite元素=${hasCiteElement ? '✅' : '❌'}`);
            });
            
            // 检查time元素的datetime属性
            const timeElements = document.querySelectorAll('time');
            console.log('\n=== Time元素检查 ===');
            timeElements.forEach((time, index) => {
                const hasDatetime = time.hasAttribute('datetime');
                console.log(`Time ${index + 1}: datetime属性=${hasDatetime ? '✅' : '❌'}`);
            });
        });
    </script>
</body>
</html>

Open Sandbox

面试官视角:

要点清单：

理解何时使用div vs 语义化元素
知道figure和figcaption的正确搭配使用
了解blockquote的cite属性用法

加分项：

提及address元素的特殊用途
了解time元素的语义价值
知道如何处理复杂的内容层次

常见失误：

滥用div元素忽略语义化
图片没有使用figure包装
blockquote缺少引用来源信息

延伸阅读:

Grouping Content - MDN — 内容分组元素参考
The figure element — figure元素规范说明
Citation and Quotation — 引用元素国际化指南

列表元素的使用场景和可访问性实践？

答案

核心概念:

HTML提供三种列表类型，各有特定的语义和用途：

<ul> - 无序列表，项目顺序不重要
<ol> - 有序列表，项目有明确的顺序或层次
<dl> - 描述列表，术语和定义的键值对关系
<li> - 列表项，用于ul和ol中
<dt> - 描述术语，dl中的术语项
<dd> - 描述定义，dl中的定义项
支持嵌套列表和自定义样式

示例说明:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表元素使用与可访问性示例</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
        }

        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 3px solid #3498db;
        }

        .demo-section {
            margin: 40px 0;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }

        .demo-section h2 {
            color: #e74c3c;
            margin-bottom: 20px;
        }

        .list-demo {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: relative;
        }

        .element-tag {
            position: absolute;
            top: -10px;
            right: 10px;
            background: #e74c3c;
            color: white;
            padding: 2px 8px;
            font-size: 11px;
            border-radius: 3px;
            font-weight: bold;
        }

        /* 无序列表样式示例 */
        .ul-basic {
            list-style-type: disc;
        }

        .ul-custom {
            list-style-type: none;
            padding-left: 0;
        }

        .ul-custom li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
        }

        .ul-custom li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #27ae60;
            font-weight: bold;
        }

        .ul-icons {
            list-style-type: none;
            padding-left: 0;
        }

        .ul-icons li {
            padding: 8px 0 8px 30px;
            position: relative;
        }

        .ul-icons .feature::before { content: "🚀"; position: absolute; left: 0; }
        .ul-icons .benefit::before { content: "💡"; position: absolute; left: 0; }
        .ul-icons .tip::before { content: "💰"; position: absolute; left: 0; }

        /* 有序列表样式示例 */
        .ol-numbers {
            list-style-type: decimal;
        }

        .ol-roman {
            list-style-type: upper-roman;
        }

        .ol-alpha {
            list-style-type: lower-alpha;
        }

        .ol-custom {
            list-style-type: none;
            counter-reset: custom-counter;
            padding-left: 0;
        }

        .ol-custom li {
            counter-increment: custom-counter;
            position: relative;
            padding-left: 40px;
            margin-bottom: 10px;
        }

        .ol-custom li::before {
            content: counter(custom-counter);
            position: absolute;
            left: 0;
            top: 0;
            background: #3498db;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
        }

        /* 描述列表样式 */
        .dl-basic dt {
            font-weight: bold;
            color: #2c3e50;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .dl-basic dd {
            margin-left: 20px;
            margin-bottom: 10px;
            color: #555;
        }

        .dl-horizontal {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 10px 20px;
            align-items: start;
        }

        .dl-horizontal dt {
            font-weight: bold;
            color: #2c3e50;
            text-align: right;
        }

        .dl-horizontal dd {
            margin: 0;
            color: #555;
        }

        .dl-card {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
        }

        .dl-card dt {
            font-weight: bold;
            color: #e74c3c;
            font-size: 1.1em;
            margin-bottom: 8px;
        }

        .dl-card dd {
            margin: 0;
            color: #666;
        }

        /* 嵌套列表样式 */
        .nested-list {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
        }

        .nested-list ul {
            margin: 10px 0;
        }

        .nested-list > ul {
            border-left: 2px solid #3498db;
            padding-left: 20px;
        }

        .nested-list ul ul {
            border-left: 2px solid #e74c3c;
            margin-top: 5px;
        }

        .nested-list ul ul ul {
            border-left: 2px solid #f39c12;
        }

        /* 导航列表样式 */
        .nav-list {
            list-style: none;
            padding: 0;
            background: #2c3e50;
            border-radius: 6px;
            overflow: hidden;
        }

        .nav-list li {
            border-bottom: 1px solid #34495e;
        }

        .nav-list li:last-child {
            border-bottom: none;
        }

        .nav-list a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 12px 20px;
            transition: background-color 0.3s;
        }

        .nav-list a:hover {
            background-color: #34495e;
        }

        .nav-list a:focus {
            background-color: #3498db;
            outline: 2px solid #fff;
            outline-offset: -2px;
        }

        /* 面包屑导航 */
        .breadcrumb {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            background: #e9ecef;
            border-radius: 6px;
            padding: 10px 15px;
        }

        .breadcrumb li + li::before {
            content: ">";
            margin: 0 10px;
            color: #6c757d;
        }

        .breadcrumb a {
            color: #0066cc;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .breadcrumb .current {
            color: #6c757d;
            font-weight: 500;
        }

        /* 标签列表 */
        .tag-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0;
        }

        .tag-list li {
            background: #e9ecef;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.85em;
            color: #495057;
        }

        .tag-list .primary { background: #cce5ff; color: #004085; }
        .tag-list .success { background: #d4edda; color: #155724; }
        .tag-list .warning { background: #fff3cd; color: #856404; }
        .tag-list .danger { background: #f8d7da; color: #721c24; }

        /* 可访问性增强 */
        .accessible-list {
            border: 2px solid #28a745;
            padding: 20px;
            border-radius: 8px;
            background: #f8fff9;
        }

        .accessible-list h3 {
            color: #28a745;
            margin-top: 0;
        }

        /* 比较表格 */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .comparison-table th,
        .comparison-table td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }

        .comparison-table th {
            background: #e9ecef;
            font-weight: 600;
        }

        .comparison-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* 提示框 */
        .info-box {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            border-radius: 6px;
            padding: 15px;
            margin: 20px 0;
        }

        .info-box strong {
            color: #0c5460;
        }

        /* 代码示例 */
        .code-example {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .dl-horizontal {
                grid-template-columns: 1fr;
                gap: 5px;
            }
            
            .dl-horizontal dt {
                text-align: left;
                font-weight: bold;
            }
            
            .breadcrumb {
                flex-direction: column;
            }
            
            .breadcrumb li + li::before {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 列表元素使用与可访问性指南</h1>

        <!-- 无序列表示例 -->
        <div class="demo-section">
            <h2>1. 无序列表 (Unordered List)</h2>
            <p><strong>使用场景：</strong>项目顺序不重要，如功能清单、特性介绍等。</p>

            <div class="list-demo">
                <span class="element-tag">UL</span>
                <h3>基础无序列表</h3>
                <ul class="ul-basic">
                    <li>HTML 语义化标记</li>
                    <li>CSS 样式和布局</li>
                    <li>JavaScript 交互逻辑</li>
                    <li>响应式设计原则</li>
                </ul>
            </div>

            <div class="list-demo">
                <span class="element-tag">UL</span>
                <h3>自定义样式列表</h3>
                <ul class="ul-custom">
                    <li>代码质量保证</li>
                    <li>性能优化实践</li>
                    <li>用户体验设计</li>
                    <li>可访问性支持</li>
                </ul>
            </div>

            <div class="list-demo">
                <span class="element-tag">UL</span>
                <h3>图标列表</h3>
                <ul class="ul-icons">
                    <li class="feature">现代化框架支持</li>
                    <li class="benefit">提升开发效率</li>
                    <li class="tip">降低维护成本</li>
                </ul>
            </div>
        </div>

        <!-- 有序列表示例 -->
        <div class="demo-section">
            <h2>2. 有序列表 (Ordered List)</h2>
            <p><strong>使用场景：</strong>项目有明确顺序或步骤，如教程、流程等。</p>

            <div class="list-demo">
                <span class="element-tag">OL</span>
                <h3>项目开发流程</h3>
                <ol class="ol-numbers">
                    <li>需求分析和规划</li>
                    <li>UI/UX 设计确认</li>
                    <li>前端页面开发</li>
                    <li>后端接口对接</li>
                    <li>测试和优化</li>
                    <li>部署和上线</li>
                </ol>
            </div>

            <div class="list-demo">
                <span class="element-tag">OL</span>
                <h3>不同编号样式</h3>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <h4>罗马数字</h4>
                        <ol class="ol-roman">
                            <li>第一章</li>
                            <li>第二章</li>
                            <li>第三章</li>
                        </ol>
                    </div>
                    <div>
                        <h4>字母编号</h4>
                        <ol class="ol-alpha">
                            <li>选项 A</li>
                            <li>选项 B</li>
                            <li>选项 C</li>
                        </ol>
                    </div>
                </div>
            </div>

            <div class="list-demo">
                <span class="element-tag">OL</span>
                <h3>自定义编号样式</h3>
                <ol class="ol-custom">
                    <li>创建项目结构</li>
                    <li>安装依赖包</li>
                    <li>配置开发环境</li>
                    <li>编写核心代码</li>
                    <li>测试功能实现</li>
                </ol>
            </div>
        </div>

        <!-- 描述列表示例 -->
        <div class="demo-section">
            <h2>3. 描述列表 (Description List)</h2>
            <p><strong>使用场景：</strong>术语和定义的键值对关系，如词汇表、属性说明等。</p>

            <div class="list-demo">
                <span class="element-tag">DL</span>
                <h3>HTML5 术语词汇表</h3>
                <dl class="dl-basic">
                    <dt>语义化 (Semantic)</dt>
                    <dd>使用恰当的HTML标签来表达内容的含义和结构，让代码更具可读性和可维护性。</dd>

                    <dt>可访问性 (Accessibility)</dt>
                    <dd>确保网站能被所有用户使用，包括使用辅助技术的残障用户。</dd>

                    <dt>响应式设计 (Responsive Design)</dt>
                    <dd>网站能够在不同设备和屏幕尺寸上提供良好的用户体验。</dd>

                    <dt>渐进增强 (Progressive Enhancement)</dt>
                    <dd>从基础功能开始，逐步添加更高级的功能和样式。</dd>
                </dl>
            </div>

            <div class="list-demo">
                <span class="element-tag">DL</span>
                <h3>水平布局描述列表</h3>
                <dl class="dl-horizontal">
                    <dt>HTML版本</dt>
                    <dd>HTML5</dd>

                    <dt>CSS版本</dt>
                    <dd>CSS3</dd>

                    <dt>JavaScript版本</dt>
                    <dd>ES2024</dd>

                    <dt>浏览器支持</dt>
                    <dd>Chrome 90+, Firefox 88+, Safari 14+</dd>
                </dl>
            </div>

            <div class="list-demo">
                <span class="element-tag">DL</span>
                <h3>卡片式描述列表</h3>
                <dl>
                    <div class="dl-card">
                        <dt>前端框架</dt>
                        <dd>React、Vue、Angular等现代JavaScript框架，用于构建用户界面。</dd>
                    </div>
                    <div class="dl-card">
                        <dt>构建工具</dt>
                        <dd>Webpack、Vite、Rollup等，用于代码打包和优化。</dd>
                    </div>
                    <div class="dl-card">
                        <dt>CSS预处理器</dt>
                        <dd>Sass、Less、Stylus等，提供变量、嵌套等高级功能。</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- 嵌套列表示例 -->
        <div class="demo-section">
            <h2>4. 嵌套列表</h2>
            <p><strong>使用场景：</strong>层级结构信息，如目录大纲、分类菜单等。</p>

            <div class="list-demo">
                <span class="element-tag">NESTED</span>
                <h3>前端技术知识树</h3>
                <div class="nested-list">
                    <ul>
                        <li>基础技术
                            <ul>
                                <li>HTML
                                    <ul>
                                        <li>语义化标签</li>
                                        <li>表单元素</li>
                                        <li>多媒体元素</li>
                                    </ul>
                                </li>
                                <li>CSS
                                    <ul>
                                        <li>布局方式</li>
                                        <li>响应式设计</li>
                                        <li>动画效果</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>高级技术
                            <ul>
                                <li>JavaScript框架</li>
                                <li>构建工具</li>
                                <li>测试工具</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 实用列表样式 -->
        <div class="demo-section">
            <h2>5. 实用列表样式</h2>

            <div class="list-demo">
                <span class="element-tag">NAV</span>
                <h3>导航菜单列表</h3>
                <ul class="nav-list">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#products">产品中心</a></li>
                    <li><a href="#services">服务支持</a></li>
                    <li><a href="#about">关于我们</a></li>
                    <li><a href="#contact">联系方式</a></li>
                </ul>
            </div>

            <div class="list-demo">
                <span class="element-tag">BREADCRUMB</span>
                <h3>面包屑导航</h3>
                <ol class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品中心</a></li>
                    <li><a href="#">Web开发</a></li>
                    <li class="current">前端框架</li>
                </ol>
            </div>

            <div class="list-demo">
                <span class="element-tag">TAGS</span>
                <h3>标签列表</h3>
                <ul class="tag-list">
                    <li class="primary">HTML5</li>
                    <li class="success">CSS3</li>
                    <li class="warning">JavaScript</li>
                    <li class="danger">TypeScript</li>
                    <li>React</li>
                    <li>Vue</li>
                    <li>Angular</li>
                </ul>
            </div>
        </div>

        <!-- 可访问性最佳实践 -->
        <div class="demo-section">
            <h2>6. 可访问性最佳实践</h2>

            <div class="list-demo accessible-list">
                <span class="element-tag">A11Y</span>
                <h3>无障碍访问增强</h3>
                <ul role="list">
                    <li role="listitem">
                        <strong>屏幕阅读器支持：</strong>列表元素会被正确识别和朗读
                    </li>
                    <li role="listitem">
                        <strong>键盘导航：</strong>支持Tab键在列表项之间导航
                    </li>
                    <li role="listitem">
                        <strong>语义信息：</strong>自动提供列表项数量和位置信息
                    </li>
                </ul>

                <p><strong>ARIA增强示例：</strong></p>
                <ul aria-label="技术栈列表" aria-describedby="tech-description">
                    <li>前端开发技术</li>
                    <li>后端开发技术</li>
                    <li>数据库技术</li>
                </ul>
                <div id="tech-description">这个列表包含了全栈开发需要掌握的主要技术分类</div>
            </div>
        </div>

        <!-- 列表元素对比 -->
        <div class="demo-section">
            <h2>7. 列表元素选择指南</h2>

            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>列表类型</th>
                        <th>HTML标签</th>
                        <th>使用场景</th>
                        <th>语义特点</th>
                        <th>常见错误</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>无序列表</td>
                        <td><code>&lt;ul&gt;&lt;li&gt;</code></td>
                        <td>项目顺序不重要</td>
                        <td>并列关系</td>
                        <td>强行排序使用</td>
                    </tr>
                    <tr>
                        <td>有序列表</td>
                        <td><code>&lt;ol&gt;&lt;li&gt;</code></td>
                        <td>有明确顺序/步骤</td>
                        <td>有序关系</td>
                        <td>仅为样式使用</td>
                    </tr>
                    <tr>
                        <td>描述列表</td>
                        <td><code>&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;</code></td>
                        <td>术语和定义</td>
                        <td>键值对关系</td>
                        <td>混用li元素</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="info-box">
            <strong>💡 列表可访问性要点：</strong>
            <ul>
                <li>为复杂列表提供aria-label或aria-describedby</li>
                <li>避免仅为视觉效果而破坏列表语义</li>
                <li>确保列表项之间的逻辑关系清晰</li>
                <li>在描述列表中，一个dt可以对应多个dd</li>
                <li>使用CSS而非HTML来控制列表的视觉样式</li>
            </ul>
        </div>

        <div class="code-example">
<!-- 可访问性增强示例 -->
&lt;ul aria-label="产品特性列表"&gt;
  &lt;li&gt;响应式设计&lt;/li&gt;
  &lt;li&gt;跨浏览器兼容&lt;/li&gt;
  &lt;li&gt;无障碍访问支持&lt;/li&gt;
&lt;/ul&gt;

&lt;ol aria-describedby="steps-description"&gt;
  &lt;li&gt;注册账户&lt;/li&gt;
  &lt;li&gt;验证邮箱&lt;/li&gt;
  &lt;li&gt;完善信息&lt;/li&gt;
&lt;/ol&gt;
&lt;div id="steps-description"&gt;请按照以下步骤完成注册流程&lt;/div&gt;
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== 列表元素统计分析 ===');
            
            // 统计各类列表元素
            const lists = {
                'ul': document.querySelectorAll('ul').length,
                'ol': document.querySelectorAll('ol').length,
                'dl': document.querySelectorAll('dl').length,
                'li': document.querySelectorAll('li').length,
                'dt': document.querySelectorAll('dt').length,
                'dd': document.querySelectorAll('dd').length
            };
            
            Object.entries(lists).forEach(([element, count]) => {
                console.log(`${element.toUpperCase()}: ${count} 个`);
            });
            
            // 分析列表嵌套层级
            console.log('\n=== 列表嵌套层级分析 ===');
            const nestedLists = document.querySelectorAll('ul ul, ol ol, ul ol, ol ul');
            console.log(`嵌套列表数量: ${nestedLists.length}`);
            
            // 检查列表的可访问性属性
            console.log('\n=== 可访问性属性检查 ===');
            const listsWithAria = document.querySelectorAll('[aria-label], [aria-describedby], [role="list"]');
            console.log(`带有ARIA属性的列表: ${listsWithAria.length}`);
            
            // 检查描述列表的结构
            console.log('\n=== 描述列表结构检查 ===');
            const dls = document.querySelectorAll('dl');
            dls.forEach((dl, index) => {
                const dts = dl.querySelectorAll('dt').length;
                const dds = dl.querySelectorAll('dd').length;
                console.log(`DL ${index + 1}: ${dts} 个术语, ${dds} 个定义`);
            });
            
            // 分析ol列表的start属性和type属性
            console.log('\n=== 有序列表属性检查 ===');
            const ols = document.querySelectorAll('ol');
            ols.forEach((ol, index) => {
                const start = ol.getAttribute('start') || '1';
                const type = ol.getAttribute('type') || 'default';
                const items = ol.querySelectorAll('li').length;
                console.log(`OL ${index + 1}: start=${start}, type=${type}, items=${items}`);
            });
            
            // 键盘导航演示
            const navList = document.querySelector('.nav-list');
            if (navList) {
                const navLinks = navList.querySelectorAll('a');
                navLinks.forEach(link => {
                    link.addEventListener('focus', function() {
                        console.log(`导航项获得焦点: ${this.textContent}`);
                    });
                });
            }
            
            console.log('\n💡 提示: 使用Tab键测试列表的键盘导航功能');
        });
    </script>
</body>
</html>

Open Sandbox

面试官视角:

要点清单：

能区分ul、ol、dl的使用场景
了解列表的嵌套规则和语义
知道如何通过CSS自定义列表样式

加分项：

理解列表对屏幕阅读器的重要性
了解start、reversed等ol属性
知道如何创建无样式的语义列表

常见失误：

仅为了样式而选择列表类型
在dl中错误使用li元素
破坏列表的语义结构

延伸阅读:

HTML Lists - MDN — 列表元素完整参考
Lists - HTML Standard — WHATWG规范中的列表定义
Accessible Lists — 列表可访问性指南

HTML5 语义化结构元素有哪些，如何使用？​

如何选择合适的内容分组元素？​

列表元素的使用场景和可访问性实践？​

HTML5 语义化结构元素有哪些，如何使用？

如何选择合适的内容分组元素？

列表元素的使用场景和可访问性实践？