HTML5+CSS3零基础入门教程：从环境搭建到响应式项目实战-创锋一号

这次教程的定位很直接：零基础、保姆级、从入门到实战。HTML5 和 CSS3 是前端学习的起点，不依赖框架，不需要高配电脑，也不用装一堆软件。准备一个编辑器、一个现代浏览器，就能从零写出一个完整、可以部署上线的网页。

现在前端已经进入工程化、组件化阶段，但底层始终是这三样：HTML5 负责页面结构和内容，CSS3 负责样式和布局，JavaScript 负责交互和数据。把 HTML5+CSS3 这一层打牢，后面学 Vue、React 才有地基可踩。否则直接冲框架，遇到样式失效、布局错乱、浏览器兼容问题，往往很难定位根因。

本文是一篇完整版入门教程，覆盖环境搭建、HTML5 核心标签、CSS3 选择器、盒模型、Flexbox、Grid、动画、响应式布局和完整项目实战，每个环节都有代码示例和判断标准。文章偏长，建议先收藏，再按章节一行一行跟着练。

1. HTML5+CSS3 核心能力速览

能力项	说明
面向人群	零基础转前端、在校学生、需要自己维护页面或博客的开发者
核心内容	HTML5 语义化标签、表单、多媒体、CSS3 选择器、盒模型、Flexbox、Grid、过渡、动画、媒体查询
运行环境	任意能安装现代浏览器的电脑，Windows / macOS / Linux 均可
开发工具	VS Code、Notepad++、Sublime Text，甚至系统自带记事本
是否需要服务器	不需要，本地双击 HTML 文件即可运行
与 JavaScript 的关系	HTML5+CSS3 解决结构和样式，JavaScript 负责交互
最终产出	静态网页、个人博客、企业介绍页、响应式站点、小型工具页面
容易踩的坑	标签嵌套错误、CSS 优先级混乱、不用语义化标签、忽略浏览器兼容性

HTML5 本质是 HTML 语言的新一代标准，目标是让网页结构更清晰、表单更强大、多媒体支持更原生。CSS3 是 CSS 的模块化升级，把选择器、布局、动画、响应式能力拆分成了多个独立模块，方便浏览器按模块逐步支持。

下面正式开始。从环境准备开始写，一步一步搭起来。

2. 开发环境准备与第一个 HTML 页面

2.1 编辑器选择与浏览器准备

写 HTML5+CSS3 不需要安装 IDE。VS Code 是目前前端开发最主流的编辑器，免费、插件丰富，支持实时预览和代码高亮。直接用下载页面安装即可：code.visualstudio.com。

如果电脑配置比较低，也可以使用 Notepad++ 或 Sublime Text。零基础阶段最重要的是把语法写对，编辑器只是辅助工具。

浏览器建议准备 Chrome 或 Edge，这两个浏览器的开发者工具最完善，CSS 调试体验好。打开网页后按F12就能进入开发者工具，查看元素、控制台、网络请求、设备模拟。后面排查样式问题时基本都靠它。

建议单独建一个练习目录，例如D:\html-css-demo，每个小节都在这个目录下新建 HTML 文件。不要把所有练习写在同一个文件里，方便后面对比不同知识点的效果。

2.2 写第一个 HTML5 页面

新建01-first-page.html，内容如下：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个 HTML5 页面</title> </head> <body> <h1>你好，HTML5</h1> <p>这是第一段内容，我会在这里学会网页开发。</p> </body> </html>

这个文件里有几个固定结构需要记住：

<!DOCTYPE html>声明文档类型为 HTML5，必须写在第一行。
<html lang="zh-CN">表示页面语言是简体中文，方便浏览器翻译和屏幕阅读器解析。
<meta charset="UTF-8">指定字符编码，防止中文乱码。
<meta name="viewport">是移动端适配必须的设置。
<title>是浏览器标签页显示的标题。
<body>内部是页面可见内容。

把这个文件保存后，直接双击用浏览器打开，就能看到“你好，HTML5”的标题和一段说明文字。此时页面没有任何样式，属于最原始的 HTML 结构。

2.3 浏览器开发者工具快速上手

打开页面后按F12，点击 Elements 面板，可以看到 DOM 树。鼠标点击<h1>标签，右侧会显示它的盒模型、样式、继承关系。

后面写 CSS 的时候，需要经常在这里查看：

元素实际占据的宽度和高度；
哪些样式被覆盖；
padding 和 margin 的真实值；
响应式布局在不同屏幕宽度下的效果。

2.4 内联 CSS 观察第一个样式效果

没有样式的页面看起来像纯文本。为验证 HTML5+CSS3 的组合效果，可以先在<head>中加一段<style>：

<style> h1 { color: #2c3e50; text-align: center; } p { color: #666; font-size: 18px; text-align: center; } </style>

刷新页面，标题颜色变成深蓝灰，正文变成 18 像素灰色。这个操作说明：HTML 定义内容，CSS 定义呈现。后面所有样式进阶，都是在这个基础上扩展。

3. HTML5 核心技能：文档结构、语义化标签、表单与多媒体

3.1 为什么语义化标签如此重要

老式网页大量使用<div>划分区域，导致整个页面结构含义不清晰。HTML5 新增了一系列语义化标签，让浏览器、搜索引擎、辅助工具能理解页面区块的功能：

标签	作用	常见场景
`<header>`	页头区域	顶部导航栏、Logo
`<nav>`	导航区域	菜单链接
`<main>`	页面主体内容	唯一的主内容区
`<article>`	独立文章块	博客正文、新闻内容
`<section>`	通用内容区块	相似内容分组
`<aside>`	侧边栏	广告、相关推荐
`<footer>`	页脚区域	版权信息、联系方式

语义化标签对 SEO 友好，搜索引擎能更精准判断页面结构；对无障碍访问友好，屏幕阅读器能按照语义朗读；对后期维护友好，代码可读性远高于一堆<div>。

3.2 页面结构完整示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>语义化页面结构</title> </head> <body> <header> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#news">资讯</a></li> <li><a href="#about">关于</a></li> </ul> </nav> </header> <main> <article> <h1>HTML5 语义化标签指南</h1> <section> <h2>为什么需要语义化</h2> <p>语义化标签让页面结构更清晰，对搜索引擎和开发者都友好。</p> </section> </article> <aside> <h3>相关推荐</h3> <ul> <li><a href="#">CSS3 基础教程</a></li> <li><a href="#">JavaScript 入门</a></li> </ul> </aside> </main> <footer> <p>版权所有 @ 2026</p> </footer> </body> </html>

这个示例覆盖了完整页面的骨架。练习时可以尝试把<main>换成<div>对比一下，会发现语义差别很大：<div>只能靠 class 名称判断用途，而语义化标签直接表达区块功能。

3.3 HTML5 表单：输入类型与校验

HTML5 表单是平时开发中最高频的内容。相比老版本，HTML5 提供了多种内置输入类型和约束校验。

<form action="#" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="username" required placeholder="请输入用户名"> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> <label for="age">年龄</label> <input type="number" id="age" name="age" min="1" max="120"> <label for="birthday">生日</label> <input type="date" id="birthday" name="birthday"> <label for="color">喜欢的颜色</label> <input type="color" id="color" name="color"> <label for="password">密码</label> <input type="password" id="password" name="password" minlength="6"> <button type="submit">提交</button> </form>

这里有一个值得注意的点：浏览器会自动校验required、email、min、max等属性，不满足条件时点提交会弹出提示，不需要写一行 JavaScript。

HTML5 还支持input type="range"、type="search"、type="tel"等类型，它们让移动端弹出对应键盘。新增的<datalist>也能实现输入框联想效果，适合做搜索建议。

3.4 音视频标签：浏览器对 HTML5 播放器的支持

音视频是 HTML5 最实用的能力之一。以前播放视频要依赖 Flash 插件，现在一个<video>标签就能搞定。

<video controls width="640" poster="poster.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频播放器。 </video>

controls属性显示播放控件；poster是视频封面；多个<source>是为了兼容不同浏览器对视频编码格式的支持。不同浏览器对 HTML5 播放器的支持情况并不完全一致：Chrome、Edge、Firefox 对 MP4、WebM 的支持较好，Safari 对 H.264 更友好。如果视频无法播放，优先检查格式和编码，再检查浏览器控制台有没有报错。

音频标签同样简单：

<audio controls> <source src="voice.mp3" type="audio/mpeg"> 您的浏览器不支持 HTML5 音频播放器。 </audio>

在使用 JS 控制播放器时，最常见的需求是读取播放进度：HTML5 的<video>和<audio>对象提供了currentTime属性、duration属性，配合play()和pause()方法就能实现播放、暂停、跳转。即使是桌面端工具，也经常通过浏览器控件间接读取这两个属性来做视频信息采集，原理都是一套 API。

3.5 Canvas：用 HTML5 画图

Canvas 是 HTML5 提供的绘图画布，通过 JavaScript 在上面绘制图形、图表，甚至做小游戏。先按照下面的代码创建一个画布：

<canvas id="myCanvas" width="400" height="300"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#3498db'; ctx.fillRect(20, 20, 150, 80); ctx.beginPath(); ctx.arc(280, 120, 50, 0, Math.PI * 2); ctx.fillStyle = '#e74c3c'; ctx.fill(); </script>

刷新页面后，左侧会出现一个蓝色矩形，右侧出现一个红色圆形。Canvas 不是 CSS3 的替代，它是和 CSS3 互补的底层绘图 API，更适合做动态图表、图像处理和游戏画面。

这里建议做一个随手小实验：用requestAnimationFrame配合 Canvas 让圆形动起来，能直观理解“浏览器渲染刷新”的概念，也是后面做交互页面的基础。

4. CSS3 核心技能：选择器、盒模型与常见样式

4.1 CSS 引入方式与基础选择器

CSS 有三种引入方式：

方式	写法	适用场景
内联样式	`<p style="color:red"></p>`	单元素测试，不推荐生产使用
内部样式	`<style>`写在 head 中	单页面小项目
外部样式	`<link rel="stylesheet" href="style.css">`	企业项目、多页面复用

CSS 选择器决定“哪些元素被应用样式”。四种基础选择器必须掌握：

/* 标签选择器 */ p { color: #333; } /* class 选择器 */ .box { border: 1px solid #ccc; } /* id 选择器 */ #main-title { font-size: 28px; } /* 后代选择器 */ article p { line-height: 1.8; }

class 可以复用，id 在页面中只能出现一次。优先级方面，内联样式 > id 选择器 > class 选择器 > 标签选择器。遇到样式不生效，先看优先级是不是被更高权重的规则覆盖。

4.2 盒模型：页面布局的基础

HTML 中每一个元素都是一个矩形盒子，由 content、padding、border、margin 四部分构成。

.box { width: 300px; padding: 20px; border: 2px solid #000; margin: 10px; }

这里要注意：width: 300px默认只包含内容宽度，实际占宽是300 + 40 + 4 = 344px。如果想直接让width包含 padding 和 border，可以设置：

* { box-sizing: border-box; }

box-sizing: border-box是现在主流项目默认开启的配置。它让尺寸计算更符合直觉，尤其是响应式布局中不会因为加了 padding 就把容器撑破。

4.3 常用文本与背景样式

文本样式是页面的门面。基础属性如下：

p { font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; text-indent: 2em; text-align: left; }

中文排版中line-height建议设在 1.6 到 1.8 之间，阅读更舒适；text-indent: 2em可以实现段落首行缩进两个字符。

背景样式支持渐变和多重背景，这是 CSS3 的高频能力：

.hero { height: 400px; background: linear-gradient(135deg, #1e3c72, #2a5298); display: flex; align-items: center; justify-content: center; }

渐变背景能做出非常有层次感的页面顶部，不需要切图，也不需要加载额外图片资源。

4.4 CSS3 伪类与伪元素

伪类和伪元素经常混在一起说，但概念不同。

伪类选择元素在某种状态下的样式，常见的包括：

a:hover { color: #e74c3c; } input:focus { border-color: #3498db; } li:first-child { font-weight: bold; } li:nth-child(even) { background-color: #f5f5f5; }

:hover、:focus、:nth-child都是伪类。它们让页面在不使用 JavaScript 的情况下也能产生交互反馈。很多传统站点展示的“伪静态”交互效果，实际上就是通过 CSS3 伪类和过渡模拟出来的，比如导航菜单悬停变色、按钮点击凹陷、列表隔行变色，这些都是纯 CSS 实现的静态结构之上的动态表现。

伪元素则是在页面中插入一个并不存在于 HTML 中的元素：

.title::before { content: "◆ "; color: #e67e22; } .title::after { content: ""; display: inline-block; width: 40px; height: 2px; background: #e67e22; }

::before和::after最常用在标签装饰、说明前缀、小图标等场景，不需要额外写 HTML 标签。

5. CSS3 布局实战：Flexbox 与 Grid

5.1 Flexbox 核心用法

Flexbox 是一维布局模型，解决子元素在主轴和交叉轴上的排列问题。这是当前前端项目中使用频率最高的布局方案。

.container { display: flex; justify-content: center; align-items: center; gap: 16px; }

display: flex开启弹性布局；
justify-content控制主轴对齐；
align-items控制交叉轴对齐；
gap设置子元素间距，比 margin 更好用。

典型的导航布局：

.nav { display: flex; list-style: none; background: #2c3e50; } .nav li { flex: 1; text-align: center; } .nav a { display: block; color: #fff; text-decoration: none; padding: 14px 0; }

这里flex: 1让每个导航项均分宽度，无论导航有几项都能自动适应。

5.2 Grid 布局核心用法

Grid 是二维布局模型，同时处理行和列。适合页面整体框架和卡片排列。

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

repeat(3, 1fr)表示创建三列等宽布局。如果想让中间列更宽，可以写成：

.grid-container { display: grid; grid-template-columns: 200px 1fr 200px; }

Grid 与 Flexbox 的选择原则：页面整体结构和分行分列，优先 Grid；单行内元素的对齐和排列，优先 Flexbox。两者可以嵌套使用，这也是真实的项目组合方式。

5.3 组合示例：导航加卡片布局

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox + Grid 组合布局</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } .navbar { display: flex; justify-content: space-between; align-items: center; background: #1a1a2e; padding: 16px 24px; color: #fff; } .navbar ul { display: flex; list-style: none; gap: 20px; } .navbar a { color: #fff; text-decoration: none; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 24px; } .card { background: #f8f9fa; border-radius: 8px; padding: 20px; } </style> </head> <body> <nav class="navbar"> <div class="logo">LOGO</div> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </nav> <main class="card-grid"> <div class="card"><h3>卡片一</h3><p>描述内容</p></div> <div class="card"><h3>卡片二</h3><p>描述内容</p></div> <div class="card"><h3>卡片三</h3><p>描述内容</p></div> <div class="card"><h3>卡片四</h3><p>描述内容</p></div> </main> </body> </html>

这个例子中，导航栏使用 Flexbox，卡片区域使用 Grid 的auto-fill和minmax，做到一屏显示不下时自动换行，页面宽度足够宽时会自动增加每行卡片数量，不需要写媒体查询就具备基础的响应式能力。

6. CSS3 动效：过渡、变形与动画

6.1 transition 过渡

过渡让属性值在变化过程中平滑改变，而不是瞬间跳变。

.btn { background: #3498db; color: #fff; border: none; padding: 12px 24px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .btn:hover { background: #2c3e50; transform: translateY(-2px); }

这是一个按钮的经典写法。鼠标悬停时背景色和位置都会平滑变化，0.3s表示变化持续 0.3 秒，ease是缓动函数。日常开发中，导航下拉、按钮 hover、卡片浮起效果，都可以用 transition 完成。

6.2 transform 变形

transform可以旋转、缩放、移动、倾斜元素，而且不会影响布局流。

.box { width: 100px; height: 100px; background: #e67e22; transform: rotate(45deg) scale(1.2); }

这个box会被旋转 45 度并放大 1.2 倍。transform经常和transition搭配使用，做出流畅的鼠标悬停反馈。

6.3 animation 动画

动画比过渡更复杂，可以定义多阶段的关键帧，自动循环播放。

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .animated { animation: fadeInUp 0.8s ease-out; }

@keyframes定义动画阶段，animation属性绑定动画名称、时长、缓动函数。页面加载时，这个元素会从下方 30 像素的位置逐渐浮现。想实现图片轮播图的自动切换、Loading 旋转动画、粒子效果，都可以基于这个思路扩展。

6.4 动效使用原则

动效不是越多越好。生产项目里通常遵循三个原则：时长短，控制在 0.2 到 0.5 秒；有明确目的，比如引导视线、反馈操作；避免大面积闪烁和复杂线性动画，防止用户头晕。动画写完后，建议逐个元素检查是否会影响页面加载性能和浏览器兼容性。

7. 响应式设计：媒体查询与移动优先

7.1 viewport 与移动端适配

移动端页面的第一步是设置 viewport，否则页面在手机上会按照电脑端宽度显示，出现横向滚动。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7.2 媒体查询基础用法

媒体查询允许针对不同屏幕宽度应用不同样式：

/* 默认样式：手机优先 */ .container { display: block; padding: 16px; } /* 屏幕宽度大于等于 768px 时 */ @media (min-width: 768px) { .container { display: flex; justify-content: space-between; padding: 24px; } }

min-width: 768px表示“当屏幕宽度至少为 768 像素时，应用这些样式”。它符合从小到大、由简到繁的编写逻辑。

常见断点参考：

设备范围	断点
手机竖屏	小于 576px
手机横屏 / 小平板	576px - 767px
平板	768px - 991px
桌面小屏	992px - 1199px
桌面大屏	1200px 以上

7.3 移动优先写法

移动优先的说法，就是先写手机端样式，再用媒体查询逐步增强桌面端表现。这种写法代码量更少，因为大多数移动端布局是单列，只需要把核心样式写好，再在断点处覆盖成多列布局。

前端开发中判断响应式效果，不需要真机。Chrome 开发者工具里按Ctrl+Shift+M即可切换设备模拟，实时查看不同尺寸下的效果。建议在开发阶段至少检查 375px、768px、1440px 三个宽度。

8. HTML5+CSS3 综合实战：制作一个完整落地页

8.1 项目需求

现在把前面知识点整合起来，做一个品牌介绍落地页。页面包含以下模块：

顶部导航栏，带 Logo 和菜单；
首屏大标题，使用渐变背景；
三张产品特征卡片；
页脚版权信息；
支持移动端响应式布局。

8.2 页面 HTML 结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5+CSS3 落地页实战</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="logo">MySite</div> <nav class="nav"> <a href="#home">首页</a> <a href="#features">功能</a> <a href="#about">关于</a> </nav> </header> <main> <section class="hero" id="home"> <h1>用 HTML5 + CSS3 构建现代网页</h1> <p>从零开始，掌握前端开发的两大基础技能。</p> <a href="#features" class="btn">了解更多</a> </section> <section class="features" id="features"> <div class="card"> <h3>语义化结构</h3> <p>header、nav、main、footer 让页面结构清晰可读。</p> </div> <div class="card"> <h3>弹性布局</h3> <p>Flexbox 和 Grid 解决常见页面布局问题。</p> </div> <div class="card"> <h3>响应式适配</h3> <p>一套代码适配手机、平板和桌面端屏幕。</p> </div> </section> </main> <footer class="footer"> <p>© 2026 MySite. All rights reserved.</p> </footer> </body> </html>

8.3 页面 CSS 样式

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #333; line-height: 1.6; } .header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; } .logo { font-size: 22px; font-weight: bold; color: #2c3e50; } .nav a { margin-left: 20px; text-decoration: none; color: #555; transition: color 0.2s; } .nav a:hover { color: #3498db; } .hero { background: linear-gradient(135deg, #1e3c72, #2a5298); color: #fff; text-align: center; padding: 100px 24px; } .hero h1 { font-size: 40px; margin-bottom: 16px; } .hero p { font-size: 18px; opacity: 0.9; margin-bottom: 24px; } .btn { display: inline-block; background: #f39c12; color: #fff; padding: 12px 32px; border-radius: 4px; text-decoration: none; transition: background 0.3s, transform 0.3s; } .btn:hover { background: #e67e22; transform: translateY(-2px); } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 48px auto; padding: 0 24px; } .card { background: #f8f9fa; border-radius: 8px; padding: 24px; text-align: center; transition: box-shadow 0.3s; } .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .card h3 { margin-bottom: 12px; color: #2c3e50; } .footer { text-align: center; padding: 24px; background: #2c3e50; color: #fff; } @media (max-width: 768px) { .hero h1 { font-size: 28px; } .features { grid-template-columns: 1fr; margin: 24px auto; } .nav a { margin-left: 12px; } }

8.4 实战页面的判断标准

把这个页面在浏览器中打开，预期现象如下：

顶部导航固定在页面顶部，滚动时不消失；
首屏显示渐变蓝色背景，标题和按钮居中；
鼠标悬停按钮，按钮背景变深并轻微上浮；
三张卡片在桌面端一行排列，宽度缩到 768px 以下变成一列；
页面在手机模拟器下没有横向滚动条。

以上全部满足，说明 HTML5 结构、CSS3 Flexbox、Grid、渐变、过渡、媒体查询都已掌握。这也是入门阶段的基础能力验收。

这里还有一个很好的后续项目建议：用 HTML5+JavaScript 开发一个网页网络检测工具。这类工具的核心思路是利用浏览器原生能力发起请求、读取响应时间，进而计算下载速度。开源的 LibreSpeed 就是典型案例，它基于 HTML5 的 XHR 和 WebSocket 实现带宽测试，不需要安装客户端。做完本文的静态页面之后，再去研究这类工具，你会发现 HTML5 的能力边界远超普通网页。

9. 常见问题排查、浏览器兼容性与学习建议

9.1 不同浏览器对 HTML5 播放器的支持差异

不同浏览器对 HTML5 播放器的支持程度不同，主要体现在视频编码格式上。Chrome、Edge、Firefox 对 MP4、WebM 格式支持都很好；Safari 对 H.264 支持最稳定，对 WebM 支持稍弱。开发视频页面时，最稳妥的做法是准备至少两种格式的<source>源，并始终填写兜底提示文字。遇到“视频无法播放”，先确认是不是浏览器不支持该视频编码，而不是代码本身写错。

9.2 高频问题与排查方法

问题现象	可能原因	排查方式	解决方案
中文乱码	缺少`charset="UTF-8"`	查看 head 中的 meta	添加`<meta charset="UTF-8">`
CSS 不生效	选择器写错或优先级低	F12 检查 Elements 样式	检查 class 名、id 名和优先级
视频不显示	格式不支持或路径错误	打开控制台看网络请求	准备多种 source 格式，检查文件路径
宽度溢出出现横向滚动条	布局宽度超过视口	检查 body 或某个容器宽度	使用`box-sizing: border-box`并检查子元素宽度
移动端字体过大	缺少 viewport 设置	检查 head 中的 meta	添加 viewport meta 标签
Flexbox 子元素被压缩	子元素默认`flex-shrink`	查看子元素 computed style	设置`flex-shrink: 0`或调整`flex`值
动画播放卡顿	动画属性触发大量重绘	检查 transform 和 opacity	优先使用`transform`和`opacity`做动画

9.3 CSS3 与前端工程化的关系

很多初学者只学 HTML5 和 CSS3，不关心工程化。实际项目里，样式文件会非常庞大，这时候需要预处理器和构建工具。CSS3 本身提供了变量自定义属性，能减少重复代码：

:root { --primary-color: #3498db; --gap: 16px; } .button { background: var(--primary-color); padding: var(--gap); }

这个能力用到熟练之后，可以继续学习 Sass、Tailwind CSS，它们的底层逻辑依然建立在 CSS3 规则之上。

9.4 学习路线与下一步建议

完成本文所有代码练习后，建议按以下顺序学习：

JavaScript 基础，理解 DOM 操作和事件机制；
用 HTML5+CSS3+JavaScript 完成一个交互式小项目，比如网页游戏；
学习一个主流框架，如 Vue 或 React；
理解构建工具，如 Vite、Webpack；
尝试部署发布到静态托管，比如 GitHub Pages 或云服务器。

HTML5 和 CSS3 是整个前端的底座。这两个技术栈看起来简单，但真正决定页面质量的地方恰恰在这里：语义化标签是否规范、盒模型计算是否正确、Flexbox 和 Grid 选型是否合理、响应式断点是否覆盖常用设备。把这些基础挨个过完，后面学框架会省下大量排查样式问题的时间。

建议把本文第 8 章的完整落地页代码保存为模板，之后新增练习时，在这个模板上增加模块，不要从头再来。每学一个新知识点，就对模板做一次升级。这个习惯坚持下去，积累出的代码库比单纯刷几十个教程都更有价值。

企业官网建设流程全解析