HTML/CSS 简介

欢迎学习 HTML 和 CSS！这是 Web 开发的基础技术，也是每一位前端开发者必须掌握的核心技能。无论你想成为一名专业的前端工程师，还是只是想搭建自己的个人网站，HTML 和 CSS 都是你旅程的起点。

什么是 HTML 和 CSS

HTML：网页的骨架

HTML（HyperText Markup Language，超文本标记语言）是构建网页内容的标准语言。它定义了网页的结构和内容——标题、段落、图片、链接、表单等。如果把网页比作一栋建筑，HTML 就是这栋建筑的框架和结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="https://example.com">这是一个链接</a>
</body>
</html>

HTML 使用"标签"（Tag）来标记内容，标签告诉浏览器如何理解和展示这些内容。例如，<h1> 表示一级标题，<p> 表示段落，<img> 表示图片。

CSS：网页的皮肤

CSS（Cascading Style Sheets，层叠样式表）是用于描述 HTML 文档视觉呈现的语言。它控制网页的样式——颜色、字体、布局、动画等。如果 HTML 是建筑的框架，CSS 就是建筑的装修和装饰。

h1 {
    color: #3498db;
    font-size: 32px;
    text-align: center;
}

p {
    line-height: 1.6;
    color: #333;
}

a {
    color: #e74c3c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

CSS 通过"选择器"找到 HTML 元素，然后应用"声明"（属性和值的组合）来改变元素的外观。

两者的关系

HTML 和 CSS 密不可分但又各司其职：

技术	职责	类比
HTML	内容和结构	建筑的框架
CSS	样式和布局	建筑的装修

这种"结构与样式分离"的设计理念非常重要，它带来以下好处：

易于维护：修改样式不需要动 HTML
代码复用：一个 CSS 文件可以应用于多个页面
性能优化：浏览器可以缓存 CSS 文件
可访问性：结构清晰的 HTML 有利于屏幕阅读器解析

为什么学习 HTML/CSS

前端开发的基石

HTML 和 CSS 是 Web 的三大核心技术中的两个（第三个是 JavaScript）。无论你使用什么前端框架（React、Vue、Angular），最终产出的都是 HTML、CSS 和 JavaScript。

广泛的应用场景

掌握 HTML/CSS 后，你可以：

构建个人博客、作品集网站
开发企业官网、电商平台
设计响应式移动端页面
制作电子邮件模板
开发微信小程序、H5 页面

相对容易入门

与其他编程语言相比，HTML 和 CSS 的学习曲线较为平缓：

不需要复杂的开发环境，一个文本编辑器加浏览器即可
语法直观，所见即所得
错误不会导致程序崩溃，容易调试

职业发展基础

对于想要成为前端工程师的学习者，HTML/CSS 是面试的必考内容。扎实的 HTML/CSS 基础能让你：

更好地理解框架的底层原理
快速定位和解决样式问题
与设计师有效沟通
编写高质量的代码

学习路线图

本教程按照循序渐进的原则组织，从基础到进阶：

第一阶段：HTML 基础

文档结构：理解 HTML 文档的基本结构，DOCTYPE、head、body 的作用
常用标签：标题、段落、链接、图片、列表等基础元素
表单与表格：用户输入和数据展示
语义化：使用正确的标签表达内容含义

第二阶段：CSS 基础

选择器：如何选中想要样式的元素
盒模型：理解 CSS 布局的核心概念
文字排版：字体、行高、对齐、装饰
背景与边框：颜色、图片、圆角、阴影

第三阶段：CSS 布局

Flexbox：一维弹性布局，现代布局的基础
Grid：二维网格布局，复杂布局的利器
定位：position 属性详解，层叠上下文

第四阶段：响应式设计

媒体查询：根据屏幕尺寸应用不同样式
移动优先：从手机到大屏的设计策略
响应式图片：让图片适应不同设备

开发工具准备

代码编辑器

推荐使用 VS Code（Visual Studio Code），它是目前最流行的前端开发编辑器：

免费开源
丰富的扩展生态
内置 Git 支持
强大的智能提示

安装以下扩展可以提升开发效率：

Live Server：实时预览 HTML 页面
Auto Rename Tag：自动重命名配对标签
CSS Peek：快速查看 CSS 定义
Prettier：代码格式化

浏览器开发者工具

现代浏览器都内置了强大的开发者工具，按 F12 或右键选择"检查"即可打开。开发者工具可以帮助你：

查看和编辑 HTML 结构
调试 CSS 样式
测试响应式布局
分析页面性能

Chrome 和 Firefox 的开发者工具功能最为完善，推荐作为主力开发浏览器。

文件组织

一个简单的项目结构：

my-website/
├── index.html          # 首页
├── about.html          # 关于页面
├── css/
│   ├── reset.css       # 重置默认样式
│   └── style.css       # 主样式文件
├── js/
│   └── main.js         # JavaScript 文件
└── images/             # 图片资源
    └── logo.png

学习建议

多写代码，少看书

HTML/CSS 是实践性很强的技能。每学一个概念，都要动手写代码验证。不要只是阅读教程，要亲自敲代码、看效果、改参数、再观察。

使用开发者工具

遇到样式问题时，第一反应应该是打开开发者工具检查。开发者工具可以帮你：

查看元素的计算样式
实时修改 CSS 观察效果
找出样式覆盖的原因

模仿优秀网站

找一些你喜欢的网站，尝试复制它们的布局和样式。这是提升实战能力的有效方法。在模仿过程中，你会遇到各种实际问题，解决这些问题就是成长的过程。

关注 Web 标准

MDN Web Docs（Mozilla Developer Network）是最权威的 Web 技术文档。遇到不确定的用法，去 MDN 查阅。养成阅读官方文档的习惯，这会让你受益终身。

渐进增强

先确保在主流浏览器上正常工作，再逐步添加高级特性。记住，不是所有用户的浏览器都是最新版本。

版本说明

HTML5

本教程基于 HTML5 标准，这是目前广泛支持的 HTML 版本。HTML5 相比之前的版本有重大改进：

新增语义化标签：<header>、<nav>、<main>、<article>、<section>、<footer> 等
多媒体支持：<video>、<audio> 原生播放
表单增强：新的输入类型（email、date、range 等）
图形绘制：<canvas> 元素
本地存储：localStorage、sessionStorage

CSS3

CSS3 是 CSS 的最新演进版本，它被拆分为多个模块独立发展。本教程涵盖的 CSS3 特性包括：

Flexbox 弹性布局
Grid 网格布局
变换与动画
媒体查询
CSS 变量

这些特性在现代浏览器中已得到良好支持，可以放心在生产环境中使用。

参考资源

MDN Web Docs - 最权威的 Web 技术文档
W3C 标准 - Web 技术规范
Can I Use - 浏览器兼容性查询
CSS-Tricks - CSS 技巧和教程

什么是 HTML 和 CSS​

HTML：网页的骨架​

CSS：网页的皮肤​

两者的关系​

为什么学习 HTML/CSS​

前端开发的基石​

广泛的应用场景​

相对容易入门​

职业发展基础​

学习路线图​

第一阶段：HTML 基础​

第二阶段：CSS 基础​

第三阶段：CSS 布局​

第四阶段：响应式设计​

开发工具准备​

代码编辑器​

浏览器开发者工具​

文件组织​

学习建议​

多写代码，少看书​

使用开发者工具​

模仿优秀网站​

关注 Web 标准​

渐进增强​

版本说明​

HTML5​

CSS3​

参考资源​