当前位置：首页 > 行业动态 > 正文

html网站示例

admin
行业动态
2025-04-27
4221

示例欢迎这是一个HTML网站示例

网站结构

以下是一个基础的HTML网站示例,包含常见页面元素与结构：

html网站示例第1张

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">示例网站</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        header { background: #333; color: white; padding: 10px; }
        nav a { color: white; margin-right: 15px; text-decoration: none; }
        .container { display: flex; padding: 20px; }
        main { flex: 3; padding-right: 20px; }
        aside { flex: 1; background: #f4f4f4; padding: 10px; }
        footer { background: #333; color: white; text-align: center; padding: 5px; }
    </style>
</head>
<body>
    <header>
        <h1>网站名称</h1>
    </header>
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系</a>
    </nav>
    <div class="container">
        <main>
            <h2>主要内容区域</h2>
            <p>这里是网站的主要内容，例如文章、产品信息等。</p>
        </main>
        <aside>
            <h3>侧边栏</h3>
            <ul>
                <li>链接1</li>
                <li>链接2</li>
                <li>链接3</li>
            </ul>
        </aside>
    </div>
    <footer>
        版权所有 &copy; 2023
    </footer>
</body>
</html>

代码解析

代码模块	功能说明	关键标签/属性
`<!DOCTYPE html>`	声明文档类型为HTML5	`<!DOCTYPE html>`
`<html lang="zh-CN">`	定义网页语言为中文	`lang`属性
`<meta charset="UTF-8">`	设置字符编码为UTF-8	`<meta>`
`<meta name="viewport">`	适配移动设备屏幕	`viewport`配置
`<header>`	网站头部区域	`<header>`语义标签
`<nav>`	导航菜单	`<nav>`语义标签
`.container`	与侧边栏的容器	`display: flex;` CSS样式
`<main>`	区域	`<main>`语义标签
`<aside>`	`<aside>`语义标签
`<footer>`	底部版权信息	`<footer>`语义标签

单元表格：页面布局拆分

区域	内容描述	样式作用
头部	`<header>`	与Logo	背景色、文字颜色
导航栏	`<nav>`	页面跳转链接	横向排列、字体颜色
侧边栏	`<aside>`	辅助链接或广告	灰色背景、列表布局
底部	`<footer>`	版权信息	居中对齐、深色背景