示例1：最简单的单页结构

这个例子展示了HTML文档最基本的结构，只有一个标题和一段文字,没有CSS样式。

html和css简单静态网页代码
（图片来源网络，侵删）

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个非常简单的HTML页面。</p>
</body>
</html>

如何使用:

  1. 打记事本（或任何代码编辑器，如 VS Code, Sublime Text）。
  2. 将上面的代码复制进去。
  3. 点击“文件” -> “另存为”，在“保存类型”中选择“所有文件”，然后将文件名保存为 index.html。
  4. 找到你保存的 index.html 文件，用浏览器（如 Chrome, Edge, Firefox）打开它。

示例2：带CSS样式的个人简介页面

这个例子在示例1的基础上，增加了内嵌式CSS样式，让页面变得美观一些，它包含了常见的网页元素：头部、导航栏、主要内容区、侧边栏和页脚。

代码:

html和css简单静态网页代码
（图片来源网络，侵删）
<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        /* 头部样式 */
        header {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
            border-bottom: 5px solid #e74c3c;
        }
        /* 导航栏样式 */
        nav {
            background: #444;
            overflow: hidden; /* 清除浮动 */
        }
        nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
        }
        nav ul li {
            display: inline; /* 让列表项横向排列 */
        }
        nav ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        nav ul li a:hover {
            background-color: #e74c3c;
        }
        /* 主要内容区布局 */
        .container {
            width: 80%;
            margin: 20px auto;
            overflow: hidden; /* 清除浮动 */
        }
        /* 主要内容样式 */
        main {
            float: left;
            width: 70%;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        /* 侧边栏样式 */
        aside {
            float: right;
            width: 25%;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        /* 段落和标题样式 */
        h2 {
            color: #e74c3c;
        }
        /* 页脚样式 */
        footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>张三的个人网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </nav>
    <div class="container">
        <main>
            <h2>关于我</h2>
            <p>你好！我叫张三，是一名前端开发爱好者，我热爱用代码创造美好的网页体验。</p>
            <p>这个页面是我用HTML和CSS编写的第一个静态网页，虽然很简单，但它包含了网页的基本结构和样式。</p>
            <h2>我的技能</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript (正在学习中...)</li>
            </ul>
        </main>
        <aside>
            <h3>链接</h3>
            <p>这里是一些有用的链接：</p>
            <ul>
                <li><a href="#">我的GitHub</a></li>
                <li><a href="#">我的微博</a></li>
                <li><a href="#">技术博客</a></li>
            </ul>
        </aside>
    </div>
    <footer>
        <p>&copy; 2025 张三的个人网站. All rights reserved.</p>
    </footer>
</body>
</html>

代码解析:

  • <style>: 在 <head> 标签内,用于编写CSS代码。
  • 选择器: 如 body, header, .container, main 等，用来选择要添加样式的HTML元素。
    • 开头的是类选择器（如 .container），用于给设置了 class="container" 的元素添加样式。
    • 开头的是ID选择器（本例未使用），用于给设置了 id="..." 的元素添加样式。
    • 直接写标签名的是元素选择器（如 body, p）。
  • 属性: 如 background-color, color, width, padding 等,用来定义元素的外观。
  • 布局: 主要使用了 float 属性来实现两列布局（主要内容区和侧边栏）。.container 设置了 overflow: hidden 来包裹浮动的子元素,防止布局错乱。
  • 盒模型: padding (内边距), margin (外边距), border (边框) 共同构成了盒模型,控制元素内容与边界的距离。

示例3：响应式图片画廊

这个例子展示了如何使用CSS来创建一个简单的图片画廊，并且在不同屏幕尺寸下能自动调整布局（响应式设计）。

代码:

<!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: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .gallery {
            display: flex; /* 使用Flexbox布局 */
            flex-wrap: wrap; /* 允许项目换行 */
            justify-content: center; /* 水平居中 */
            gap: 15px; /* 项目之间的间距 */
        }
        .gallery-item {
            flex: 1 1 300px; /* flex-grow: 0; flex-shrink: 0; flex-basis: 300px; */
            max-width: 350px; /* 最大宽度 */
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden; /* 让图片的圆角生效 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease; /* 添加悬停动画效果 */
        }
        .gallery-item:hover {
            transform: scale(1.03); /* 鼠标悬停时轻微放大 */
        }
        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover; /* 保持图片比例并覆盖整个区域 */
            display: block;
        }
        .gallery-item p {
            padding: 10px;
            text-align: center;
            margin: 0;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <h1>我的图片画廊</h1>
    <div class="gallery">
        <div class="gallery-item">
            <img src="https://via.placeholder.com/350x250/e74c3c/ffffff?text=图片1" alt="风景图片">
            <p>美丽的日落</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/350x250/3498db/ffffff?text=图片2" alt="城市图片">
            <p>繁华的都市</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/350x250/2ecc71/ffffff?text=图片3" alt="自然图片">
            <p>宁静的森林</p>
        </div>
        <div class="gallery-item">
            <img src="https://via.placeholder.com/350x250/f39c12/ffffff?text=图片4" alt="建筑图片">
            <p>现代建筑</p>
        </div>
    </div>
</body>
</html>

代码解析:

html和css简单静态网页代码
（图片来源网络，侵删）
  • Flexbox布局: 这是现代CSS布局的强大工具。
    • display: flex; 将 .gallery 变为一个弹性容器。
    • flex-wrap: wrap; 让子项目（.gallery-item）在一行放不下时自动换行。
    • justify-content: center; 让子项目在水平方向上居中对齐。
    • gap: 15px; 提供了一个非常方便的属性来设置项目之间的间距。
  • 响应式设计: 通过 flex: 1 1 300px; 和 max-width: 350px; 实现了响应式效果。
    • flex-basis: 300px; 定义了项目的默认宽度。
    • flex-grow: 1; 让项目可以平分剩余空间。
    • max-width: 350px; 设置了最大宽度,防止在大屏幕上单个项目变得过宽。
    • 这样，在小屏幕上（如手机），项目会堆叠成单列；在中等屏幕上，会显示两列；在大屏幕上,可能会显示三列或更多。
  • 图片处理:
    • object-fit: cover; 是一个非常有用的属性，它确保图片能够填满其容器，同时保持其宽高比,避免图片被拉伸或压缩。
  • 交互效果: hover 伪类和 transform 属性结合，为鼠标悬停时添加了平滑的放大效果,提升了用户体验。

希望这些例子能帮助你理解HTML和CSS的基本用法！你可以尝试修改这些代码中的颜色、文字、布局等，看看会发生什么变化,这是学习编程最好的方式。