垦荒学园

简体中文

English

简体中文

English

切换主题

HTML5 新元素 ​

概述 ​

HTML5 引入了许多新的语义化元素和功能元素，使网页结构更清晰，功能更强大。本章将介绍 HTML5 中新增的主要元素。

结构元素 ​

定义文档或节的页眉：

html
<header>
    <h1>网站标题</h1>
    <nav>导航菜单</nav>
</header>

定义导航链接：

html
<nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
</nav>

<main> ​

定义文档主要内容：

html
<main>
    <h1>主要内容</h1>
    <p>页面的核心内容...</p>
</main>

<article> ​

定义独立的内容：

html
<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>

<section> ​

定义文档中的节：

html
<section>
    <h2>章节标题</h2>
    <p>章节内容...</p>
</section>

<aside> ​

定义侧边栏内容：

html
<aside>
    <h3>相关链接</h3>
    <ul>
        <li><a href="#">链接1</a></li>
    </ul>
</aside>

定义页脚：

html
<footer>
    <p>&copy; 2024 版权所有</p>
</footer>

内容元素 ​

<figure> 和 <figcaption> ​

定义独立内容及其标题：

html
<figure>
    <img src="image.jpg" alt="图片">
    <figcaption>图片说明</figcaption>
</figure>

<mark> ​

高亮显示文本：

html
<p>这是<mark>重要的</mark>内容。</p>

<time> ​

定义日期/时间：

html
<time datetime="2024-01-01">2024年1月1日</time>

<progress> ​

显示进度：

html
<progress value="70" max="100">70%</progress>

<meter> ​

显示度量：

html
<meter value="0.6">60%</meter>

<details> 和 <summary> ​

创建可折叠内容：

html
<details>
    <summary>点击展开</summary>
    <p>详细内容...</p>
</details>

表单元素 ​

<datalist> ​

为输入框提供预定义选项：

html
<input list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

<output> ​

显示计算结果：

html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

多媒体元素 ​

<video> ​

嵌入视频：

html
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持视频标签。
</video>

<audio> ​

嵌入音频：

html
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频标签。
</audio>

<source> ​

为媒体元素定义多个源：

html
<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
</video>

<track> ​

为媒体元素定义文本轨道（字幕）：

html
<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

<embed> ​

嵌入外部内容：

html
<embed src="file.pdf" type="application/pdf" width="600" height="400">

图形元素 ​

<canvas> ​

绘制图形：

html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 150, 80);
</script>

<svg> ​

定义矢量图形：

html
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

新的输入类型 ​

HTML5 为 <input> 元素添加了新的类型：

html
<!-- 颜色选择器 -->
<input type="color" value="#ff0000">

<!-- 日期选择器 -->
<input type="date">

<!-- 日期时间选择器 -->
<input type="datetime-local">

<!-- 邮箱 -->
<input type="email">

<!-- 月份选择器 -->
<input type="month">

<!-- 数字 -->
<input type="number" min="0" max="100">

<!-- 范围滑块 -->
<input type="range" min="0" max="100">

<!-- 搜索框 -->
<input type="search">

<!-- 电话号码 -->
<input type="tel">

<!-- 时间选择器 -->
<input type="time">

<!-- URL -->
<input type="url">

<!-- 周选择器 -->
<input type="week">

完整示例 ​

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: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header, footer {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        nav a {
            color: white;
            margin-right: 15px;
            text-decoration: none;
        }
        main {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        article {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 20px;
        }
        aside {
            background-color: #e9e9e9;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 新元素演示</h1>
        <nav>
            <a href="#home">首页</a>
            <a href="#about">关于</a>
            <a href="#contact">联系</a>
        </nav>
    </header>
    
    <main>
        <div>
            <article>
                <h2>文章标题</h2>
                <p>发布于 <time datetime="2024-01-01">2024年1月1日</time></p>
                <p>这是一篇使用 HTML5 新元素的文章。</p>
                
                <figure>
                    <canvas id="myCanvas" width="300" height="150"></canvas>
                    <figcaption>Canvas 绘图示例</figcaption>
                </figure>
                
                <details>
                    <summary>查看更多信息</summary>
                    <p>这里是额外的详细信息...</p>
                </details>
            </article>
            
            <section>
                <h2>进度示例</h2>
                <p>任务完成度：</p>
                <progress value="75" max="100">75%</progress>
                
                <p>磁盘使用情况：</p>
                <meter value="0.6" min="0" max="1">60%</meter>
            </section>
        </div>
        
        <aside>
            <h3>侧边栏</h3>
            <p>这是使用 aside 元素的侧边栏内容。</p>
            
            <h4>搜索</h4>
            <input type="search" placeholder="搜索...">
            
            <h4>选择日期</h4>
            <input type="date">
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 HTML5 示例网站</p>
    </footer>
    
    <script>
        // Canvas 绘图
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#4CAF50';
        ctx.fillRect(20, 20, 260, 110);
        ctx.fillStyle = 'white';
        ctx.font = '30px Arial';
        ctx.fillText('HTML5 Canvas', 40, 80);
    </script>
</body>
</html>

浏览器支持 ​

大多数现代浏览器都支持 HTML5 新元素。对于旧版浏览器，可以使用 polyfill 或 JavaScript 库来提供支持。

最佳实践 ​

  1. 使用语义化标签：优先使用语义化的新元素
  2. 渐进增强：为不支持的浏览器提供降级方案
  3. 验证代码：使用 HTML5 验证器检查代码
  4. 考虑无障碍：添加适当的 ARIA 属性
  5. 测试兼容性：在多个浏览器中测试

总结 ​

HTML5 新元素大大增强了 HTML 的语义性和功能性。合理使用这些新元素可以创建结构清晰、功能强大的现代网页。