html5网页制作代码

作者：昂首向前走，发布日期:2026-05-31 浏览:77

<!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;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的 HTML5 网页</h1>
    </header>
    <main>
        <section>
            <h2>关于我</h2>
            <p>这是一个使用 HTML5 制作的简单网页示例。HTML5 提供了许多新的标签和功能，使得网页开发更加简单和高效。</p>
        </section>
        <section>
            <h2>HTML5 的特点</h2>
            <ul>
                <li>语义化标签（如 <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;footer&gt;</code>）</li>
                <li>音频和视频支持（<code>&lt;audio&gt;</code>, <code>&lt;video&gt;</code> 标签）</li>
                <li>离线存储（Application Cache, IndexedDB）</li>
                <li>图形绘制（Canvas 和 SVG）</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 我的公司. 版权所有.</p>
    </footer>
</body>
</html>

解释说明：

DOCTYPE 声明：<!DOCTYPE html> 是 HTML5 的声明，告诉浏览器这是一个 HTML5 文档。
HTML 标签：<html> 是文档的根元素，lang="zh-CN" 表示文档语言为简体中文。
头部信息：<head> 包含了文档的元数据，如字符集 (<meta charset="UTF-8">)、视口设置 (<meta name="viewport">) 和标题 (<title>).
样式：通过 <style> 标签定义了一些简单的 CSS 样式，用于美化页面。
主体结构：<header>、<main> 和 <footer> 分别表示页面的头部、主体内容和底部信息。HTML5 引入了这些语义化的标签，使代码更具可读性和结构化。
段落和列表：在 <main> 中使用了 <section> 来组织内容，并通过 <p> 和 <ul> 标签展示文本和列表。
固定底部：通过 CSS 设置 <footer> 的 position: fixed 属性，使其始终固定在页面底部。

希望这个示例能帮助你理解 HTML5 的基本用法！

上一篇：html 颜色代码

下一篇：html横线代码