html5

作者：潇洒一醉发布日期:2026-07-21 浏览:83

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 示例</title>
</head>
<body>
    <header>
        <h1>欢迎来到 HTML5 示例页面</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">部分 1</a></li>
            <li><a href="#section2">部分 2</a></li>
            <li><a href="#section3">部分 3</a></li>
        </ul>
    </nav>
    <article>
        <section id="section1">
            <h2>部分 1</h2>
            <p>这是 HTML5 的第一部分内容。</p>
        </section>
        <section id="section2">
            <h2>部分 2</h2>
            <p>这是 HTML5 的第二部分内容。</p>
        </section>
        <section id="section3">
            <h2>部分 3</h2>
            <p>这是 HTML5 的第三部分内容。</p>
        </section>
    </article>
    <footer>
        <p>&copy; 2023 HTML5 示例页面</p>
    </footer>
</body>
</html>

解释说明

DOCTYPE 声明: <!DOCTYPE html> 声明文档类型为 HTML5。
<html> 标签: 包含整个 HTML 文档的内容。
<head> 部分: 包含文档的元数据，如标题、字符集声明等。这里设置了页面的标题为 "HTML5 示例"。
<body> 部分: 包含页面的实际内容。
<header> 标签: 定义页面或部分的页眉，通常包含标题和导航链接。
<nav> 标签: 定义导航链接部分，方便用户在页面内快速跳转。
<article> 标签: 表示一个独立的内容块，如博客文章或新闻报道。
<section> 标签: 将内容划分为不同的部分，每个部分可以有自己的标题和内容。
<footer> 标签: 定义页面或部分的页脚，通常包含版权信息或其他补充内容。

这个示例展示了如何使用 HTML5 的语义化标签来构建一个结构清晰的网页。

上一篇：html

下一篇：html input