人人都会AI编程

HTML CSS

更新时间：2025-12-31

HTML 和 CSS 是构建网页的基石，分别负责网页的结构内容与视觉表现。下面这张表格能帮你快速把握它们的核心分工与关联。

| 特性 | HTML (超文本标记语言) | CSS (层叠样式表) |
| --- | --- | --- |
| 角色​ | 网页的骨架​ | 网页的外观装扮师​ |
| 职责​ | 定义内容结构（标题、段落、图片、链接等） | 控制布局、颜色、字体、动画等视觉效果 |
| 关注点​ | 有什么内容 | 内容如何呈现​ |
| 关系​ | 提供需要样式化的原始元素​ | 通过选择器定位HTML元素并施加样式规则​ |

◾ HTML 基础与代码示例

HTML 使用标签（tags）来定义内容。一个基本的 HTML5 文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>网站主标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>欢迎光临</h2>
            <p>这是一个段落文本。</p>
            <img src="image.jpg" alt="描述图片">
        </section>
    </main>
    <footer>
        <p>&copy; 2024 我的网站</p>
    </footer>
</body>
</html>

代码解读：

<!DOCTYPE html>声明文档类型为 HTML5。

<html>元素是页面的根元素，lang="zh-CCN"属性有助于提升可访问性和SEO。

<head>部分包含元信息，如字符集 (charset="UTF-8")、视口设置（用于响应式设计）和标题。

<body>部分包含所有可见内容。现代 HTML5 推荐使用语义化标签如 <header>, <nav>, <main>, <section>, <footer>等，这使结构更清晰，更利于理解和SEO。

◾ CSS 基础与代码示例

CSS 的核心是规则集，由选择器和声明块组成。声明块包含多条属性: 值;​ 的声明。

/* 元素选择器：选中所有 <p> 标签 */
p {
  color: blue;
  font-size: 16px;
  line-height: 1.5;
}

/* 类选择器：选中 class="button" 的所有元素 */
.button {
  background-color: #4CAF50; /* 绿色 */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

/* ID选择器：选中 id="header" 的唯⼀元素 */
#header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}

/* 后代选择器：选中 <nav> 内的所有 <a> 标签 */
nav a {
  text-decoration: none;
  color: inherit;
}

/* 伪类选择器：当鼠标悬停在按钮上时生效 */
.button:hover {
  background-color: #45a049; /* 更深的绿色 */
}

代码解读：

选择器是 CSS 的“瞄准器”，用于精准定位要样式化的 HTML 元素。

常见的样式属性包括控制文本（color, font-size）、盒模型（padding, border, margin）和背景（background-color）等。

:hover是伪类，用于定义元素在特定状态（如鼠标悬停）下的样式。

◾ 关键概念：盒模型与布局

1. 盒模型 (Box Model)

每个 HTML 元素都被视为一个矩形盒子，从内到外由 内容(content)、内边距(padding)、边框(border)​ 和 外边距(margin)​ 组成。理解盒模型是控制元素尺寸和间距的关键。

2. 现代布局方式

Flexbox (弹性盒子)：最适合一维布局（沿一条直线排列元素），如导航栏、工具栏，能轻松解决垂直居中等难题。

.container {
  display: flex;
  justify-content: space-between; /* 项目之间均匀分布 */
  align-items: center; /* 在交叉轴上居中对齐 */
}

Grid (网格布局)：强大的二维布局系统，将页面划分为行和列，非常适合整体页面布局（如头部、侧边栏、主内容区、页脚）。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两侧的两倍宽 */
  gap: 20px; /* 网格项之间的间距 */
}

🛠️ 实际项目开发场景与 AI 实操 Prompt

以下是两个常见的网页开发场景，你可以直接将下面的 Prompt 提供给 AI，让它帮你生成具体的代码。

场景一：创建响应式个人博客主页

你的目标：需要一个单页的个人博客主页，展示简介、文章列表和联系方式，并在手机和电脑上都能良好显示。

你可以给 AI 的 Prompt：

你是一个前端开发助手。请生成一个个人博客主页的HTML和CSS代码，要求如下：

1.  **结构(HTML):**
    - 使用语义化标签（如<header>, <nav>, <main>, <article>, <footer>）。
    - 包含以下部分：顶部导航（首页、关于、博客）、个人简介区（头像、简短自我介绍）、博客文章列表（至少3篇文章预览，包含标题、摘要和阅读更多链接）、页脚（版权信息）。

2.  **样式(CSS):**
    - 采用“移动端优先”的响应式设计。
    - 使用 Flexbox 或 Grid 进行布局。
    - 在电脑端（屏幕宽度大于768px）显示为多列布局，移动端则垂直堆叠。
    - 设置美观的字体、颜色和间距。
    - 导航链接需要有悬停效果。

3.  **其他:**
    - 将CSS代码放在独立的 `<style>` 标签内。
    - 代码注释清晰，方便我理解。

（此 Prompt 的设计综合了个人博客和企业官网的常见要素与响应式设计原则）

场景二：为企业官网构建一个产品介绍卡片组件

你的目标：需要创建一组用于展示公司产品或服务的美观卡片，这些卡片布局要灵活，能自适应不同数量的产品。

你可以给 AI 的 Prompt：

请生成一个产品介绍卡片的HTML和CSS代码，要求如下：

1.  **组件功能:**
    - 每张卡片包含：产品图片、产品标题、简短描述、一个“了解更多”按钮。
    - 多张卡片应在一个容器内均匀排列，自动换行。

2.  **样式与布局:**
    - 使用 CSS Grid 或 Flexbox 实现布局，确保无论卡片数量多少，布局都能自动适配。
    - 当屏幕宽度足够时，每行显示3张卡片；在平板设备上每行显示2张；在手机上单列显示。
    - 卡片需要有轻微的阴影（`box-shadow`）和圆角（`border-radius`），营造立体感。
    - “了解更多”按钮需要有明显的视觉样式和悬停效果（例如颜色变化）。

3.  **输出:**
    - 提供完整的HTML结构（包含一个包含3张卡片的示例）和CSS代码。
    - 在CSS中使用媒体查询（`@media`）实现上述响应式断点。

（此 Prompt 的设计参考了项目展示中常见的卡片式布局及响应式适配需求）