程序猿指南
Search K

Appearance

5.3 内容语义标签 ​

关键词: HTML5内容语义标签, time标签, mark标签, details标签, summary标签, progress标签, meter标签, address标签, 内容语义

学习目标 ​

  • 掌握HTML5内容语义标签的使用方法
  • 理解每个语义标签的具体含义和适用场景
  • 学会在实际项目中合理使用内容语义标签
  • 了解语义标签对SEO和可访问性的积极影响
  • 掌握与JavaScript交互的实现方法

5.3.1 内容语义标签概览 ​

HTML5提供了一系列内容语义标签，用于标记具有特定语义含义的内容，使网页更具语义化和可访问性。

核心内容语义标签 ​

html
<!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>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .semantic-container {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 25px;
        }
        
        .semantic-container h3 {
            color: #333;
            margin-bottom: 20px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        
        .element-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .showcase-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            background: #f8f9fa;
            transition: transform 0.3s ease;
        }
        
        .showcase-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }
        
        .showcase-item h4 {
            margin-top: 0;
            color: #495057;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .element-icon {
            font-size: 1.5em;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .time-icon { background-color: #007bff; }
        .mark-icon { background-color: #ffc107; }
        .details-icon { background-color: #28a745; }
        .progress-icon { background-color: #17a2b8; }
        .meter-icon { background-color: #fd7e14; }
        .address-icon { background-color: #6f42c1; }
        
        .code-demo {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        
        .live-demo {
            background-color: #e9ecef;
            border: 2px solid #007bff;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
        }
        
        .live-demo h5 {
            margin-top: 0;
            color: #007bff;
        }
        
        .interactive-demo {
            border: 2px solid #007bff;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            background: white;
        }
        
        .demo-controls {
            margin-bottom: 20px;
        }
        
        .demo-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;
        }
        
        .demo-button:hover {
            background-color: #0056b3;
        }
        
        .demo-button.active {
            background-color: #28a745;
        }
        
        .time-display {
            font-size: 18px;
            font-weight: bold;
            color: #007bff;
            margin: 10px 0;
        }
        
        .mark-highlight {
            background-color: #ffeb3b;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .custom-mark {
            background-color: #ff5722;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
        }
        
        .details-example {
            margin: 15px 0;
        }
        
        .details-example summary {
            cursor: pointer;
            font-weight: bold;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            margin-bottom: 10px;
            user-select: none;
        }
        
        .details-example summary:hover {
            background-color: #e9ecef;
        }
        
        .details-content {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            margin-top: 10px;
        }
        
        .progress-demo {
            margin: 15px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #007bff;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        .meter-demo {
            margin: 15px 0;
        }
        
        .meter-display {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        
        .meter-bar {
            width: 200px;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .meter-fill {
            height: 100%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        .meter-low { background-color: #dc3545; }
        .meter-medium { background-color: #ffc107; }
        .meter-high { background-color: #28a745; }
        
        .address-card {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
        }
        
        .address-card h5 {
            margin-top: 0;
            color: #495057;
        }
        
        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .contact-item i {
            font-size: 1.2em;
            color: #007bff;
        }
        
        .real-world-example {
            background-color: #e3f2fd;
            border: 1px solid #bbdefb;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .real-world-example h4 {
            margin-top: 0;
            color: #1976d2;
        }
        
        .best-practices {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .avoid-practices {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .seo-benefits {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .accessibility-benefits {
            background-color: #cff4fc;
            border: 1px solid #9eeaf9;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .feature-comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .comparison-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: white;
        }
        
        .comparison-item h4 {
            margin-top: 0;
            color: #333;
        }
        
        @media (max-width: 768px) {
            .element-showcase {
                grid-template-columns: 1fr;
            }
            
            .feature-comparison {
                grid-template-columns: 1fr;
            }
            
            .contact-info {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>HTML5 内容语义标签详解</h1>
    
    <!-- 内容语义标签概览 -->
    <div class="semantic-container">
        <h3>1. 内容语义标签概览</h3>
        <div class="element-showcase">
            <div class="showcase-item">
                <h4>
                    <span class="element-icon time-icon">⏰</span>
                    &lt;time&gt;
                </h4>
                <p>表示时间或日期，支持机器可读格式</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <time datetime="2024-01-01T10:00:00">2024年1月1日上午10点</time>
                </div>
            </div>
            
            <div class="showcase-item">
                <h4>
                    <span class="element-icon mark-icon">✏️</span>
                    &lt;mark&gt;
                </h4>
                <p>标记需要突出显示的文本内容</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <p>这是一段普通文本，<mark>这部分被标记了</mark>。</p>
                </div>
            </div>
            
            <div class="showcase-item">
                <h4>
                    <span class="element-icon details-icon">📋</span>
                    &lt;details&gt;
                </h4>
                <p>创建可折叠的详细信息区域</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <details>
                        <summary>点击查看详情</summary>
                        <p>这是隐藏的详细信息内容。</p>
                    </details>
                </div>
            </div>
            
            <div class="showcase-item">
                <h4>
                    <span class="element-icon progress-icon">📊</span>
                    &lt;progress&gt;
                </h4>
                <p>显示任务的完成进度</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <progress value="70" max="100">70%</progress>
                    <p>进度：70%</p>
                </div>
            </div>
            
            <div class="showcase-item">
                <h4>
                    <span class="element-icon meter-icon">📈</span>
                    &lt;meter&gt;
                </h4>
                <p>显示标量值在指定范围内的量度</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <meter value="6" min="0" max="10">6 out of 10</meter>
                    <p>评分：6/10</p>
                </div>
            </div>
            
            <div class="showcase-item">
                <h4>
                    <span class="element-icon address-icon">📍</span>
                    &lt;address&gt;
                </h4>
                <p>标识联系信息或地址</p>
                <div class="live-demo">
                    <h5>实时演示</h5>
                    <address>
                        联系邮箱：<a href="mailto:info@example.com">info@example.com</a><br>
                        电话：010-12345678
                    </address>
                </div>
            </div>
        </div>
    </div>
    
    <!-- time元素详解 -->
    <div class="semantic-container">
        <h3>2. &lt;time&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>日期表示</h4>
                <div class="code-demo">
&lt;time datetime="2024-01-01"&gt;2024年1月1日&lt;/time&gt;
&lt;time datetime="2024-12-25"&gt;圣诞节&lt;/time&gt;
&lt;time datetime="2024-02-14"&gt;情人节&lt;/time&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>发布日期：<time datetime="2024-01-01">2024年1月1日</time></p>
                    <p>节日：<time datetime="2024-12-25">圣诞节</time></p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>时间表示</h4>
                <div class="code-demo">
&lt;time datetime="10:30"&gt;上午10点30分&lt;/time&gt;
&lt;time datetime="14:45"&gt;下午2点45分&lt;/time&gt;
&lt;time datetime="23:59"&gt;晚上11点59分&lt;/time&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>会议时间：<time datetime="10:30">上午10点30分</time></p>
                    <p>截止时间：<time datetime="23:59">晚上11点59分</time></p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>日期时间组合</h4>
                <div class="code-demo">
&lt;time datetime="2024-01-01T10:30:00"&gt;
    2024年1月1日上午10点30分
&lt;/time&gt;
&lt;time datetime="2024-12-31T23:59:59"&gt;
    2024年最后一分钟
&lt;/time&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>开始时间：<time datetime="2024-01-01T10:30:00">2024年1月1日上午10点30分</time></p>
                    <p>结束时间：<time datetime="2024-12-31T23:59:59">2024年最后一分钟</time></p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>时区支持</h4>
                <div class="code-demo">
&lt;time datetime="2024-01-01T10:30:00+08:00"&gt;
    北京时间
&lt;/time&gt;
&lt;time datetime="2024-01-01T10:30:00Z"&gt;
    UTC时间
&lt;/time&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>北京时间：<time datetime="2024-01-01T10:30:00+08:00">2024年1月1日上午10点30分</time></p>
                    <p>UTC时间：<time datetime="2024-01-01T10:30:00Z">2024年1月1日上午10点30分</time></p>
                </div>
            </div>
        </div>
        
        <div class="interactive-demo">
            <h4>实时时间显示器</h4>
            <div class="demo-controls">
                <button class="demo-button active" onclick="updateTimeDisplay()">更新时间</button>
                <button class="demo-button" onclick="toggleTimeFormat()">切换格式</button>
            </div>
            <div id="timeDisplay">
                <div class="time-display">
                    当前时间：<time id="currentTime" datetime="">-</time>
                </div>
            </div>
        </div>
        
        <div class="seo-benefits">
            <h4>🔍 SEO优势</h4>
            <ul>
                <li>搜索引擎能识别和索引时间信息</li>
                <li>支持结构化数据标记</li>
                <li>有助于时间相关的搜索结果</li>
                <li>提高内容的时效性权重</li>
            </ul>
        </div>
        
        <div class="accessibility-benefits">
            <h4>♿ 可访问性</h4>
            <ul>
                <li>屏幕阅读器能正确读取时间</li>
                <li>支持不同的时间格式展示</li>
                <li>提供机器可读的时间格式</li>
                <li>便于时间相关的用户交互</li>
            </ul>
        </div>
    </div>
    
    <!-- mark元素详解 -->
    <div class="semantic-container">
        <h3>3. &lt;mark&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>搜索结果高亮</h4>
                <div class="code-demo">
&lt;p&gt;
    在搜索结果中，&lt;mark&gt;关键词&lt;/mark&gt;会被高亮显示，
    帮助用户快速找到相关的&lt;mark&gt;内容&lt;/mark&gt;。
&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>在搜索结果中，<mark>关键词</mark>会被高亮显示，帮助用户快速找到相关的<mark>内容</mark>。</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>重要信息标记</h4>
                <div class="code-demo">
&lt;p&gt;
    请注意：&lt;mark&gt;截止日期为2024年12月31日&lt;/mark&gt;，
    逾期提交将不予受理。
&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>请注意：<mark>截止日期为2024年12月31日</mark>，逾期提交将不予受理。</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>引用中的标记</h4>
                <div class="code-demo">
&lt;blockquote&gt;
    &lt;p&gt;
        学而时习之，不亦说乎？有朋自远方来，
        &lt;mark&gt;不亦乐乎&lt;/mark&gt;？
    &lt;/p&gt;
&lt;/blockquote&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <blockquote>
                        <p>学而时习之，不亦说乎？有朋自远方来，<mark>不亦乐乎</mark>？</p>
                    </blockquote>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>自定义样式标记</h4>
                <div class="code-demo">
&lt;p&gt;
    这是普通文本，&lt;mark class="custom-mark"&gt;
    这是自定义样式的标记&lt;/mark&gt;，
    还有&lt;mark class="highlight"&gt;另一种样式&lt;/mark&gt;。
&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <p>这是普通文本，<mark class="custom-mark">这是自定义样式的标记</mark>，还有<mark class="mark-highlight">另一种样式</mark>。</p>
                </div>
            </div>
        </div>
        
        <div class="interactive-demo">
            <h4>文本高亮工具</h4>
            <div class="demo-controls">
                <input type="text" id="searchText" placeholder="输入要高亮的文本..." style="padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 4px;">
                <button class="demo-button" onclick="highlightText()">高亮</button>
                <button class="demo-button" onclick="clearHighlight()">清除</button>
            </div>
            <div id="highlightDemo">
                <p>这是一段示例文本，您可以在上面的输入框中输入要高亮的关键词，然后点击高亮按钮来标记文本。这个功能在搜索结果展示中非常有用，能够帮助用户快速定位相关内容。</p>
            </div>
        </div>
        
        <div class="best-practices">
            <h4>✅ 最佳实践</h4>
            <ul>
                <li>用于标记搜索结果中的关键词</li>
                <li>突出显示重要信息或警告</li>
                <li>在引用中标记重点内容</li>
                <li>避免过度使用，保持内容的可读性</li>
            </ul>
        </div>
        
        <div class="avoid-practices">
            <h4>❌ 避免做法</h4>
            <ul>
                <li>不要仅为了样式而使用mark标签</li>
                <li>避免在同一段落中大量使用</li>
                <li>不要用于装饰性高亮</li>
                <li>避免与其他强调标签混用</li>
            </ul>
        </div>
    </div>
    
    <!-- details和summary元素详解 -->
    <div class="semantic-container">
        <h3>4. &lt;details&gt; 和 &lt;summary&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>FAQ问答</h4>
                <div class="code-demo">
&lt;details&gt;
    &lt;summary&gt;什么是HTML5？&lt;/summary&gt;
    &lt;p&gt;HTML5是HTML的最新版本，引入了许多新特性...&lt;/p&gt;
&lt;/details&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <details class="details-example">
                        <summary>什么是HTML5？</summary>
                        <div class="details-content">
                            <p>HTML5是HTML的最新版本，引入了许多新特性，包括语义化标签、多媒体支持、离线存储等功能。</p>
                        </div>
                    </details>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>产品规格</h4>
                <div class="code-demo">
&lt;details&gt;
    &lt;summary&gt;技术规格&lt;/summary&gt;
    &lt;table&gt;
        &lt;tr&gt;&lt;td&gt;处理器&lt;/td&gt;&lt;td&gt;Intel i7&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;内存&lt;/td&gt;&lt;td&gt;16GB&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
&lt;/details&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <details class="details-example">
                        <summary>技术规格</summary>
                        <div class="details-content">
                            <table style="width: 100%; border-collapse: collapse;">
                                <tr><td style="border: 1px solid #ddd; padding: 8px;">处理器</td><td style="border: 1px solid #ddd; padding: 8px;">Intel i7</td></tr>
                                <tr><td style="border: 1px solid #ddd; padding: 8px;">内存</td><td style="border: 1px solid #ddd; padding: 8px;">16GB</td></tr>
                                <tr><td style="border: 1px solid #ddd; padding: 8px;">存储</td><td style="border: 1px solid #ddd; padding: 8px;">512GB SSD</td></tr>
                            </table>
                        </div>
                    </details>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>代码示例</h4>
                <div class="code-demo">
&lt;details&gt;
    &lt;summary&gt;查看代码&lt;/summary&gt;
    &lt;pre&gt;&lt;code&gt;
function hello() {
    console.log("Hello World!");
}
    &lt;/code&gt;&lt;/pre&gt;
&lt;/details&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <details class="details-example">
                        <summary>查看代码</summary>
                        <div class="details-content">
                            <pre><code>function hello() {
    console.log("Hello World!");
}</code></pre>
                        </div>
                    </details>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>多级折叠</h4>
                <div class="code-demo">
&lt;details&gt;
    &lt;summary&gt;第一级&lt;/summary&gt;
    &lt;details&gt;
        &lt;summary&gt;第二级&lt;/summary&gt;
        &lt;p&gt;嵌套内容&lt;/p&gt;
    &lt;/details&gt;
&lt;/details&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <details class="details-example">
                        <summary>第一级</summary>
                        <div class="details-content">
                            <details class="details-example">
                                <summary>第二级</summary>
                                <div class="details-content">
                                    <p>这是嵌套的内容，可以创建多级折叠结构。</p>
                                </div>
                            </details>
                        </div>
                    </details>
                </div>
            </div>
        </div>
        
        <div class="interactive-demo">
            <h4>交互式FAQ系统</h4>
            <div class="demo-controls">
                <button class="demo-button" onclick="toggleAllDetails(true)">展开所有</button>
                <button class="demo-button" onclick="toggleAllDetails(false)">收起所有</button>
                <button class="demo-button" onclick="addFAQItem()">添加FAQ</button>
            </div>
            <div id="faqContainer">
                <details class="details-example">
                    <summary>HTML5有哪些新特性？</summary>
                    <div class="details-content">
                        <p>HTML5引入了语义化标签、Canvas绘图、音视频支持、本地存储、Web Workers等新特性。</p>
                    </div>
                </details>
                
                <details class="details-example">
                    <summary>如何学习前端开发？</summary>
                    <div class="details-content">
                        <p>建议从HTML、CSS基础开始，然后学习JavaScript，最后掌握框架和工具。</p>
                    </div>
                </details>
                
                <details class="details-example">
                    <summary>响应式设计的重要性？</summary>
                    <div class="details-content">
                        <p>响应式设计确保网站在不同设备上都能良好显示，提升用户体验。</p>
                    </div>
                </details>
            </div>
        </div>
        
        <div class="accessibility-benefits">
            <h4>♿ 可访问性优势</h4>
            <ul>
                <li>原生键盘导航支持</li>
                <li>屏幕阅读器友好</li>
                <li>无需JavaScript即可工作</li>
                <li>符合WCAG可访问性标准</li>
            </ul>
        </div>
    </div>
    
    <!-- progress元素详解 -->
    <div class="semantic-container">
        <h3>5. &lt;progress&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>文件上传进度</h4>
                <div class="code-demo">
&lt;progress id="uploadProgress" value="0" max="100"&gt;0%&lt;/progress&gt;
&lt;p&gt;上传进度：&lt;span id="progressText"&gt;0%&lt;/span&gt;&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <progress id="uploadProgress" value="0" max="100">0%</progress>
                    <p>上传进度：<span id="progressText">0%</span></p>
                    <button onclick="simulateUpload()">模拟上传</button>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>任务完成度</h4>
                <div class="code-demo">
&lt;progress value="7" max="10"&gt;7/10&lt;/progress&gt;
&lt;p&gt;任务完成：7/10&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <progress value="7" max="10">7/10</progress>
                    <p>任务完成：7/10</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>学习进度</h4>
                <div class="code-demo">
&lt;progress value="85" max="100"&gt;85%&lt;/progress&gt;
&lt;p&gt;课程进度：85%&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <progress value="85" max="100">85%</progress>
                    <p>课程进度：85%</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>不确定进度</h4>
                <div class="code-demo">
&lt;progress&gt;加载中...&lt;/progress&gt;
&lt;p&gt;正在处理，请稍候...&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <progress>加载中...</progress>
                    <p>正在处理，请稍候...</p>
                </div>
            </div>
        </div>
        
        <div class="interactive-demo">
            <h4>多进度条演示</h4>
            <div class="demo-controls">
                <button class="demo-button" onclick="startMultiProgress()">开始所有任务</button>
                <button class="demo-button" onclick="pauseMultiProgress()">暂停</button>
                <button class="demo-button" onclick="resetMultiProgress()">重置</button>
            </div>
            <div id="multiProgressContainer">
                <div class="progress-demo">
                    <h5>任务1：数据下载</h5>
                    <progress id="task1Progress" value="0" max="100">0%</progress>
                    <span id="task1Text">0%</span>
                </div>
                <div class="progress-demo">
                    <h5>任务2：数据处理</h5>
                    <progress id="task2Progress" value="0" max="100">0%</progress>
                    <span id="task2Text">0%</span>
                </div>
                <div class="progress-demo">
                    <h5>任务3：结果输出</h5>
                    <progress id="task3Progress" value="0" max="100">0%</progress>
                    <span id="task3Text">0%</span>
                </div>
            </div>
        </div>
        
        <div class="best-practices">
            <h4>✅ 使用场景</h4>
            <ul>
                <li>文件上传/下载进度</li>
                <li>表单提交进度</li>
                <li>任务完成状态</li>
                <li>加载状态指示</li>
                <li>游戏中的血条、经验条</li>
            </ul>
        </div>
    </div>
    
    <!-- meter元素详解 -->
    <div class="semantic-container">
        <h3>6. &lt;meter&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>磁盘使用率</h4>
                <div class="code-demo">
&lt;meter value="0.6" min="0" max="1"&gt;60%&lt;/meter&gt;
&lt;p&gt;磁盘使用率：60%&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <meter value="0.6" min="0" max="1">60%</meter>
                    <p>磁盘使用率：60%</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>温度指示</h4>
                <div class="code-demo">
&lt;meter value="25" min="0" max="50" low="10" high="35"&gt;25°C&lt;/meter&gt;
&lt;p&gt;当前温度：25°C&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <meter value="25" min="0" max="50" low="10" high="35">25°C</meter>
                    <p>当前温度：25°C</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>评分显示</h4>
                <div class="code-demo">
&lt;meter value="8.5" min="0" max="10" optimum="9"&gt;8.5/10&lt;/meter&gt;
&lt;p&gt;用户评分：8.5/10&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <meter value="8.5" min="0" max="10" optimum="9">8.5/10</meter>
                    <p>用户评分：8.5/10</p>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>内存使用</h4>
                <div class="code-demo">
&lt;meter value="3.2" min="0" max="8" low="2" high="6"&gt;3.2GB&lt;/meter&gt;
&lt;p&gt;内存使用：3.2GB/8GB&lt;/p&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <meter value="3.2" min="0" max="8" low="2" high="6">3.2GB</meter>
                    <p>内存使用：3.2GB/8GB</p>
                </div>
            </div>
        </div>
        
        <div class="interactive-demo">
            <h4>系统监控面板</h4>
            <div class="demo-controls">
                <button class="demo-button" onclick="startSystemMonitor()">开始监控</button>
                <button class="demo-button" onclick="stopSystemMonitor()">停止监控</button>
                <button class="demo-button" onclick="resetSystemMonitor()">重置</button>
            </div>
            <div id="systemMonitor">
                <div class="meter-demo">
                    <h5>CPU使用率</h5>
                    <div class="meter-display">
                        <meter id="cpuMeter" value="0" min="0" max="100" low="30" high="80">0%</meter>
                        <span id="cpuText">0%</span>
                    </div>
                </div>
                <div class="meter-demo">
                    <h5>内存使用率</h5>
                    <div class="meter-display">
                        <meter id="memoryMeter" value="0" min="0" max="100" low="40" high="85">0%</meter>
                        <span id="memoryText">0%</span>
                    </div>
                </div>
                <div class="meter-demo">
                    <h5>网络带宽</h5>
                    <div class="meter-display">
                        <meter id="networkMeter" value="0" min="0" max="1000" low="100" high="800">0 Mbps</meter>
                        <span id="networkText">0 Mbps</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>progress vs meter</h4>
                <h5>progress - 进度指示</h5>
                <ul>
                    <li>表示任务的完成进度</li>
                    <li>有明确的起点和终点</li>
                    <li>适用于加载、上传等场景</li>
                </ul>
                <h5>meter - 量度指示</h5>
                <ul>
                    <li>表示已知范围内的标量值</li>
                    <li>有最优、警告区间</li>
                    <li>适用于评分、使用率等场景</li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- address元素详解 -->
    <div class="semantic-container">
        <h3>7. &lt;address&gt; 元素详解</h3>
        <div class="feature-comparison">
            <div class="comparison-item">
                <h4>联系信息</h4>
                <div class="code-demo">
&lt;address&gt;
    &lt;p&gt;联系人：张三&lt;/p&gt;
    &lt;p&gt;邮箱：&lt;a href="mailto:zhangsan@example.com"&gt;zhangsan@example.com&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;电话：&lt;a href="tel:+8613800138000"&gt;138-0013-8000&lt;/a&gt;&lt;/p&gt;
&lt;/address&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <address class="address-card">
                        <p>联系人：张三</p>
                        <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
                        <p>电话：<a href="tel:+8613800138000">138-0013-8000</a></p>
                    </address>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>公司地址</h4>
                <div class="code-demo">
&lt;address&gt;
    &lt;p&gt;公司名称：科技有限公司&lt;/p&gt;
    &lt;p&gt;地址：北京市朝阳区XXX街道123号&lt;/p&gt;
    &lt;p&gt;邮编：100000&lt;/p&gt;
    &lt;p&gt;网站：&lt;a href="https://www.example.com"&gt;www.example.com&lt;/a&gt;&lt;/p&gt;
&lt;/address&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <address class="address-card">
                        <p>公司名称：科技有限公司</p>
                        <p>地址：北京市朝阳区XXX街道123号</p>
                        <p>邮编：100000</p>
                        <p>网站：<a href="https://www.example.com">www.example.com</a></p>
                    </address>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>文章作者信息</h4>
                <div class="code-demo">
&lt;article&gt;
    &lt;h2&gt;文章标题&lt;/h2&gt;
    &lt;p&gt;文章内容...&lt;/p&gt;
    &lt;footer&gt;
        &lt;address&gt;
            &lt;p&gt;作者：&lt;a href="mailto:author@example.com"&gt;李四&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;发布时间：&lt;time datetime="2024-01-01"&gt;2024年1月1日&lt;/time&gt;&lt;/p&gt;
        &lt;/address&gt;
    &lt;/footer&gt;
&lt;/article&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <article>
                        <h4>文章标题</h4>
                        <p>这是一篇关于HTML5语义化标签的文章...</p>
                        <footer>
                            <address class="address-card">
                                <p>作者：<a href="mailto:author@example.com">李四</a></p>
                                <p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p>
                            </address>
                        </footer>
                    </article>
                </div>
            </div>
            
            <div class="comparison-item">
                <h4>多种联系方式</h4>
                <div class="code-demo">
&lt;address&gt;
    &lt;h4&gt;多种联系方式&lt;/h4&gt;
    &lt;div class="contact-info"&gt;
        &lt;div&gt;📧 &lt;a href="mailto:info@example.com"&gt;info@example.com&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;📞 &lt;a href="tel:+8613800138000"&gt;138-0013-8000&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;🌐 &lt;a href="https://www.example.com"&gt;www.example.com&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;📍 北京市朝阳区XXX街道123号&lt;/div&gt;
    &lt;/div&gt;
&lt;/address&gt;
                </div>
                <div class="live-demo">
                    <h5>效果展示</h5>
                    <address class="address-card">
                        <h5>多种联系方式</h5>
                        <div class="contact-info">
                            <div class="contact-item">📧 <a href="mailto:info@example.com">info@example.com</a></div>
                            <div class="contact-item">📞 <a href="tel:+8613800138000">138-0013-8000</a></div>
                            <div class="contact-item">🌐 <a href="https://www.example.com">www.example.com</a></div>
                            <div class="contact-item">📍 北京市朝阳区XXX街道123号</div>
                        </div>
                    </address>
                </div>
            </div>
        </div>
        
        <div class="best-practices">
            <h4>✅ 适用场景</h4>
            <ul>
                <li>网站或页面的联系信息</li>
                <li>文章作者的联系方式</li>
                <li>公司或组织的地址信息</li>
                <li>客服和技术支持信息</li>
            </ul>
        </div>
        
        <div class="avoid-practices">
            <h4>❌ 不适用场景</h4>
            <ul>
                <li>不要用于标记任意的物理地址</li>
                <li>不要用于标记邮政地址以外的地址</li>
                <li>不要用于标记与内容无关的联系信息</li>
                <li>不要用于纯装饰性的地址信息</li>
            </ul>
        </div>
    </div>
    
    <!-- 综合实例 -->
    <div class="semantic-container">
        <h3>8. 综合实例：产品详情页</h3>
        <div class="real-world-example">
            <h4>完整的产品详情页面</h4>
            <div class="code-demo">
&lt;article&gt;
    &lt;header&gt;
        &lt;h1&gt;智能手机 Pro Max&lt;/h1&gt;
        &lt;p&gt;发布时间：&lt;time datetime="2024-01-01"&gt;2024年1月1日&lt;/time&gt;&lt;/p&gt;
        &lt;p&gt;用户评分：&lt;meter value="4.5" min="0" max="5" optimum="5"&gt;4.5/5&lt;/meter&gt;&lt;/p&gt;
    &lt;/header&gt;
    
    &lt;section&gt;
        &lt;h2&gt;产品特色&lt;/h2&gt;
        &lt;p&gt;这款手机采用了最新的&lt;mark&gt;AI处理器&lt;/mark&gt;，性能提升显著。&lt;/p&gt;
        
        &lt;details&gt;
            &lt;summary&gt;详细规格&lt;/summary&gt;
            &lt;table&gt;
                &lt;tr&gt;&lt;td&gt;处理器&lt;/td&gt;&lt;td&gt;A17 Pro&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;内存&lt;/td&gt;&lt;td&gt;8GB&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;存储&lt;/td&gt;&lt;td&gt;256GB&lt;/td&gt;&lt;/tr&gt;
            &lt;/table&gt;
        &lt;/details&gt;
    &lt;/section&gt;
    
    &lt;section&gt;
        &lt;h2&gt;下载中心&lt;/h2&gt;
        &lt;p&gt;产品手册下载进度：&lt;progress value="100" max="100"&gt;已完成&lt;/progress&gt;&lt;/p&gt;
        &lt;p&gt;存储空间使用：&lt;meter value="128" min="0" max="256"&gt;128GB/256GB&lt;/meter&gt;&lt;/p&gt;
    &lt;/section&gt;
    
    &lt;footer&gt;
        &lt;address&gt;
            &lt;h3&gt;客服联系方式&lt;/h3&gt;
            &lt;p&gt;客服热线：&lt;a href="tel:4001234567"&gt;400-123-4567&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;客服邮箱：&lt;a href="mailto:support@example.com"&gt;support@example.com&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;服务时间：周一至周五 9:00-18:00&lt;/p&gt;
        &lt;/address&gt;
    &lt;/footer&gt;
&lt;/article&gt;
            </div>
        </div>
    </div>

    <script>
        // 内容语义标签交互脚本
        
        let timeFormat = '12hour';
        let multiProgressIntervals = [];
        let systemMonitorInterval;
        
        // 更新时间显示
        function updateTimeDisplay() {
            const now = new Date();
            const timeElement = document.getElementById('currentTime');
            
            if (timeFormat === '12hour') {
                const formatted = now.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: true
                });
                timeElement.textContent = formatted;
            } else {
                const formatted = now.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                });
                timeElement.textContent = formatted;
            }
            
            timeElement.setAttribute('datetime', now.toISOString());
        }
        
        // 切换时间格式
        function toggleTimeFormat() {
            timeFormat = timeFormat === '12hour' ? '24hour' : '12hour';
            updateTimeDisplay();
        }
        
        // 高亮文本功能
        function highlightText() {
            const searchText = document.getElementById('searchText').value;
            const demoElement = document.getElementById('highlightDemo');
            
            if (!searchText) {
                alert('请输入要高亮的文本');
                return;
            }
            
            const originalText = demoElement.textContent;
            const highlightedText = originalText.replace(
                new RegExp(searchText, 'gi'),
                `<mark>$&</mark>`
            );
            
            demoElement.innerHTML = highlightedText;
        }
        
        // 清除高亮
        function clearHighlight() {
            const demoElement = document.getElementById('highlightDemo');
            demoElement.innerHTML = demoElement.textContent;
        }
        
        // 切换所有details元素
        function toggleAllDetails(open) {
            const detailsElements = document.querySelectorAll('#faqContainer details');
            detailsElements.forEach(details => {
                details.open = open;
            });
        }
        
        // 添加FAQ项目
        function addFAQItem() {
            const question = prompt('请输入问题：');
            const answer = prompt('请输入答案：');
            
            if (question && answer) {
                const faqContainer = document.getElementById('faqContainer');
                const newItem = document.createElement('details');
                newItem.className = 'details-example';
                newItem.innerHTML = `
                    <summary>${question}</summary>
                    <div class="details-content">
                        <p>${answer}</p>
                    </div>
                `;
                faqContainer.appendChild(newItem);
            }
        }
        
        // 模拟上传进度
        function simulateUpload() {
            const progressBar = document.getElementById('uploadProgress');
            const progressText = document.getElementById('progressText');
            let progress = 0;
            
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 100) progress = 100;
                
                progressBar.value = progress;
                progressText.textContent = Math.round(progress) + '%';
                
                if (progress >= 100) {
                    clearInterval(interval);
                    alert('上传完成！');
                }
            }, 200);
        }
        
        // 开始多进度条演示
        function startMultiProgress() {
            const tasks = [
                { id: 'task1', speed: 2 },
                { id: 'task2', speed: 1.5 },
                { id: 'task3', speed: 3 }
            ];
            
            tasks.forEach(task => {
                const progressBar = document.getElementById(task.id + 'Progress');
                const progressText = document.getElementById(task.id + 'Text');
                
                const interval = setInterval(() => {
                    let currentValue = parseInt(progressBar.value);
                    currentValue += task.speed;
                    
                    if (currentValue > 100) {
                        currentValue = 100;
                        clearInterval(interval);
                    }
                    
                    progressBar.value = currentValue;
                    progressText.textContent = currentValue + '%';
                }, 100);
                
                multiProgressIntervals.push(interval);
            });
        }
        
        // 暂停多进度条
        function pauseMultiProgress() {
            multiProgressIntervals.forEach(interval => clearInterval(interval));
            multiProgressIntervals = [];
        }
        
        // 重置多进度条
        function resetMultiProgress() {
            pauseMultiProgress();
            ['task1', 'task2', 'task3'].forEach(taskId => {
                document.getElementById(taskId + 'Progress').value = 0;
                document.getElementById(taskId + 'Text').textContent = '0%';
            });
        }
        
        // 开始系统监控
        function startSystemMonitor() {
            systemMonitorInterval = setInterval(() => {
                // 模拟CPU使用率
                const cpuUsage = Math.random() * 100;
                const cpuMeter = document.getElementById('cpuMeter');
                const cpuText = document.getElementById('cpuText');
                cpuMeter.value = cpuUsage;
                cpuText.textContent = Math.round(cpuUsage) + '%';
                
                // 模拟内存使用率
                const memoryUsage = Math.random() * 100;
                const memoryMeter = document.getElementById('memoryMeter');
                const memoryText = document.getElementById('memoryText');
                memoryMeter.value = memoryUsage;
                memoryText.textContent = Math.round(memoryUsage) + '%';
                
                // 模拟网络带宽
                const networkUsage = Math.random() * 1000;
                const networkMeter = document.getElementById('networkMeter');
                const networkText = document.getElementById('networkText');
                networkMeter.value = networkUsage;
                networkText.textContent = Math.round(networkUsage) + ' Mbps';
                
            }, 1000);
        }
        
        // 停止系统监控
        function stopSystemMonitor() {
            if (systemMonitorInterval) {
                clearInterval(systemMonitorInterval);
                systemMonitorInterval = null;
            }
        }
        
        // 重置系统监控
        function resetSystemMonitor() {
            stopSystemMonitor();
            ['cpu', 'memory', 'network'].forEach(type => {
                document.getElementById(type + 'Meter').value = 0;
                document.getElementById(type + 'Text').textContent = type === 'network' ? '0 Mbps' : '0%';
            });
        }
        
        // 页面加载时的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化时间显示
            updateTimeDisplay();
            
            // 每秒更新时间
            setInterval(updateTimeDisplay, 1000);
            
            // 初始化高亮演示文本
            const highlightDemo = document.getElementById('highlightDemo');
            highlightDemo.innerHTML = highlightDemo.textContent;
        });
    </script>
</body>
</html>

5.3.2 语义标签的实际应用 ​

博客文章系统 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>博客文章 - 使用语义标签</title>
</head>
<body>
    <article>
        <header>
            <h1>HTML5语义化标签的实践应用</h1>
            <p>发布时间：<time datetime="2024-01-01T10:00:00">2024年1月1日上午10点</time></p>
            <p>阅读时间：约5分钟</p>
            <p>文章评分：<meter value="4.8" min="0" max="5" optimum="5">4.8/5</meter></p>
        </header>
        
        <section>
            <h2>前言</h2>
            <p>在现代Web开发中，<mark>语义化标签</mark>的使用变得越来越重要。它们不仅提高了代码的可读性，还增强了网站的可访问性和SEO效果。</p>
        </section>
        
        <section>
            <h2>主要内容</h2>
            <p>本文将详细介绍HTML5中的内容语义标签，包括它们的用法和最佳实践。</p>
            
            <details>
                <summary>查看文章大纲</summary>
                <ol>
                    <li>time元素的使用</li>
                    <li>mark元素的应用场景</li>
                    <li>details和summary的交互</li>
                    <li>progress和meter的区别</li>
                    <li>address元素的正确用法</li>
                </ol>
            </details>
            
            <p>让我们通过实际案例来学习这些标签的使用方法。</p>
        </section>
        
        <section>
            <h2>学习进度</h2>
            <p>课程完成进度：<progress value="75" max="100">75%</progress></p>
            <p>掌握程度：<meter value="8" min="0" max="10" low="3" high="7">8/10</meter></p>
        </section>
        
        <footer>
            <address>
                <h3>作者信息</h3>
                <p>作者：<a href="mailto:author@example.com">张三</a></p>
                <p>个人网站：<a href="https://author.example.com">author.example.com</a></p>
                <p>微信：author_blog</p>
            </address>
            
            <p>本文发布于：<time datetime="2024-01-01">2024年1月1日</time></p>
            <p>最后更新：<time datetime="2024-01-15">2024年1月15日</time></p>
        </footer>
    </article>
</body>
</html>

电商产品页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品详情 - 智能手表</title>
</head>
<body>
    <main>
        <article>
            <header>
                <h1>智能手表 Pro 2024</h1>
                <p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p>
                <p>用户评分：<meter value="4.5" min="0" max="5" optimum="5">4.5/5</meter></p>
            </header>
            
            <section>
                <h2>产品特色</h2>
                <p>这款智能手表具有<mark>超长续航</mark>和<mark>健康监测</mark>功能，是您日常生活的完美伴侣。</p>
                
                <details>
                    <summary>详细规格参数</summary>
                    <table>
                        <tr><td>显示屏</td><td>1.4英寸OLED</td></tr>
                        <tr><td>电池</td><td>300mAh</td></tr>
                        <tr><td>续航</td><td>7天</td></tr>
                        <tr><td>防水</td><td>50米</td></tr>
                    </table>
                </details>
            </section>
            
            <section>
                <h2>健康监测</h2>
                <p>当前心率：<meter value="72" min="40" max="200" low="60" high="100">72 bpm</meter></p>
                <p>今日步数：<progress value="8500" max="10000">8500/10000</progress></p>
                <p>睡眠质量：<meter value="85" min="0" max="100" optimum="90">85%</meter></p>
            </section>
            
            <section>
                <h2>用户评价</h2>
                <article>
                    <header>
                        <h3>用户评价</h3>
                        <p>评价者：李四</p>
                        <time datetime="2024-01-10">2024年1月10日</time>
                    </header>
                    <p>这款手表的<mark>续航能力</mark>确实很强，使用了一周才需要充电。</p>
                    <p>评分：<meter value="5" min="0" max="5">5/5</meter></p>
                </article>
            </section>
            
            <footer>
                <address>
                    <h3>客服信息</h3>
                    <p>客服热线：<a href="tel:4001234567">400-123-4567</a></p>
                    <p>客服邮箱：<a href="mailto:service@example.com">service@example.com</a></p>
                    <p>服务时间：周一至周日 9:00-21:00</p>
                </address>
            </footer>
        </article>
    </main>
</body>
</html>

在线课程平台 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线课程 - HTML5入门</title>
</head>
<body>
    <main>
        <article>
            <header>
                <h1>HTML5从入门到精通</h1>
                <p>开课时间：<time datetime="2024-01-01T09:00:00">2024年1月1日上午9点</time></p>
                <p>课程时长：约30小时</p>
                <p>难度等级：<meter value="3" min="1" max="5" optimum="3">3/5</meter></p>
            </header>
            
            <section>
                <h2>课程介绍</h2>
                <p>本课程将带您从零开始学习HTML5，重点介绍<mark>语义化标签</mark>的使用和<mark>响应式布局</mark>的实现。</p>
                
                <details>
                    <summary>课程大纲</summary>
                    <ol>
                        <li>HTML5基础语法</li>
                        <li>语义化标签详解</li>
                        <li>多媒体元素</li>
                        <li>表单增强</li>
                        <li>Canvas绘图</li>
                        <li>响应式设计</li>
                    </ol>
                </details>
            </section>
            
            <section>
                <h2>学习进度</h2>
                <div>
                    <h3>第1章：基础语法</h3>
                    <progress value="100" max="100">已完成</progress>
                    <p>完成度：100%</p>
                </div>
                
                <div>
                    <h3>第2章：语义化标签</h3>
                    <progress value="75" max="100">进行中</progress>
                    <p>完成度：75%</p>
                </div>
                
                <div>
                    <h3>第3章：多媒体元素</h3>
                    <progress value="0" max="100">未开始</progress>
                    <p>完成度：0%</p>
                </div>
            </section>
            
            <section>
                <h2>学习统计</h2>
                <p>学习时长：<meter value="18" min="0" max="30">18/30小时</meter></p>
                <p>练习完成：<meter value="12" min="0" max="20">12/20个</meter></p>
                <p>测试成绩：<meter value="85" min="0" max="100" optimum="90">85分</meter></p>
            </section>
            
            <footer>
                <address>
                    <h3>讲师信息</h3>
                    <p>主讲师：<a href="mailto:teacher@example.com">王老师</a></p>
                    <p>助教：<a href="mailto:assistant@example.com">张助教</a></p>
                    <p>答疑时间：周三、周五 19:00-21:00</p>
                </address>
                
                <p>课程最后更新：<time datetime="2024-01-15">2024年1月15日</time></p>
            </footer>
        </article>
    </main>
</body>
</html>

5.3.3 与JavaScript的交互 ​

动态更新内容语义标签 ​

javascript
// 动态更新语义标签的JavaScript示例
class SemanticUpdater {
    constructor() {
        this.updateInterval = null;
    }
    
    // 更新时间显示
    updateTimeElements() {
        const timeElements = document.querySelectorAll('time[data-live="true"]');
        timeElements.forEach(element => {
            const now = new Date();
            element.setAttribute('datetime', now.toISOString());
            element.textContent = now.toLocaleString();
        });
    }
    
    // 更新进度条
    updateProgress(elementId, value, max = 100) {
        const progressElement = document.getElementById(elementId);
        if (progressElement) {
            progressElement.value = value;
            progressElement.max = max;
            
            // 更新相关文本
            const textElement = document.getElementById(elementId + 'Text');
            if (textElement) {
                textElement.textContent = `${Math.round(value)}%`;
            }
        }
    }
    
    // 更新仪表
    updateMeter(elementId, value, min = 0, max = 100) {
        const meterElement = document.getElementById(elementId);
        if (meterElement) {
            meterElement.value = value;
            meterElement.min = min;
            meterElement.max = max;
            
            // 更新相关文本
            const textElement = document.getElementById(elementId + 'Text');
            if (textElement) {
                textElement.textContent = `${value}/${max}`;
            }
        }
    }
    
    // 动态添加标记
    addMarkToText(containerId, searchText) {
        const container = document.getElementById(containerId);
        if (container && searchText) {
            const originalText = container.textContent;
            const markedText = originalText.replace(
                new RegExp(searchText, 'gi'),
                `<mark>$&</mark>`
            );
            container.innerHTML = markedText;
        }
    }
    
    // 动态创建details元素
    createDetailsElement(parentId, summary, content) {
        const parent = document.getElementById(parentId);
        if (parent) {
            const details = document.createElement('details');
            const summaryElement = document.createElement('summary');
            summaryElement.textContent = summary;
            
            const contentElement = document.createElement('div');
            contentElement.innerHTML = content;
            
            details.appendChild(summaryElement);
            details.appendChild(contentElement);
            parent.appendChild(details);
        }
    }
    
    // 批量更新系统状态
    updateSystemStatus(statusData) {
        Object.entries(statusData).forEach(([key, value]) => {
            if (key.endsWith('Progress')) {
                this.updateProgress(key, value.current, value.max);
            } else if (key.endsWith('Meter')) {
                this.updateMeter(key, value.current, value.min, value.max);
            }
        });
    }
    
    // 开始实时更新
    startLiveUpdate() {
        this.updateInterval = setInterval(() => {
            this.updateTimeElements();
            
            // 模拟系统状态更新
            const statusData = {
                cpuMeter: {
                    current: Math.random() * 100,
                    min: 0,
                    max: 100
                },
                memoryMeter: {
                    current: Math.random() * 100,
                    min: 0,
                    max: 100
                },
                downloadProgress: {
                    current: Math.min(100, Math.random() * 120),
                    max: 100
                }
            };
            
            this.updateSystemStatus(statusData);
        }, 1000);
    }
    
    // 停止实时更新
    stopLiveUpdate() {
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
            this.updateInterval = null;
        }
    }
}

// 使用示例
const updater = new SemanticUpdater();

// 手动更新特定元素
updater.updateProgress('downloadProgress', 65);
updater.updateMeter('ratingMeter', 4.5, 0, 5);
updater.addMarkToText('contentDiv', '重要');

// 开始实时更新
updater.startLiveUpdate();

本节要点回顾 ​

  • time元素：标记时间和日期，支持机器可读的datetime属性
  • mark元素：突出显示重要内容，常用于搜索结果高亮
  • details/summary元素：创建可折叠的详细信息区域，增强交互性
  • progress元素：显示任务完成进度，适用于加载状态和进度条
  • meter元素：显示已知范围内的量度值，适用于评分和统计
  • address元素：标记联系信息，用于作者或机构的联系方式

相关学习资源 ​

常见问题FAQ ​

Q: time元素的datetime属性格式有什么要求？ ​

A: datetime属性应使用ISO 8601格式，如"2024-01-01"、"2024-01-01T10:30:00"等。

Q: mark元素和strong元素有什么区别？ ​

A: mark用于突出显示相关内容（如搜索结果），strong用于表示重要性或强调。

Q: progress和meter元素如何选择使用？ ​

A: progress用于显示任务进度，meter用于显示已知范围内的度量值（如评分、使用率）。

Q: details元素默认是展开还是折叠？ ​

A: 默认是折叠状态，添加open属性可以设置为默认展开。

第5章完结：恭喜您完成了HTML5语义化标签的学习！您已经掌握了现代Web开发中最重要的语义化技术。