html index

作者：▄对对碰发布日期:2026-02-09 浏览:92

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Index 示例</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>首页</h2>
        <p>这是首页的内容。</p>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>这是关于我们页面的内容。</p>
    </section>

    <section id="services">
        <h2>服务</h2>
        <p>这是服务页面的内容。</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>这是联系我们页面的内容。</p>
    </section>

    <footer>
        <p>&copy; 2023 我的网站. 保留所有权利。</p>
    </footer>
</body>
</html>

解释说明：

DOCTYPE声明：<!DOCTYPE html> 声明文档类型为HTML5。
HTML标签：<html> 是根元素，lang="zh-CN" 表示文档语言为简体中文。
头部信息：<head> 包含了元数据（如字符编码、视口设置）和标题 <title>。
主体内容：<body> 包含了页面的主要内容。
头部结构：<header> 包含了一个大标题 <h1> 和导航栏 <nav>。
导航栏：<nav> 内部使用无序列表 <ul> 来创建链接。
各部分内容：通过多个 <section> 标签来划分不同部分的内容，并使用锚点 id 进行内部链接。
页脚：<footer> 包含版权信息。

这个示例代码展示了一个简单的HTML页面结构，包含常见的网页元素。

上一篇：html表格

下一篇：html居中代码