尧图网页设计 
简介《HTML.CSS.JavaScript标准教程》实例版第二版是一本面向Web前端初学者与进阶开发者的实例型入门教材围绕HTML结构标记、CSS布局样式与JavaScript交互逻辑三大核心展开帮助读者从零建立完整的前端知识体系。资源包共528个文件以286个html实例页面、115张jpg与67张gif素材图为主辅以23个ppt课件、5个css样式表、4个htm页面及若干txt说明与psd源文件压缩包约35.9MB目录按章节组织便于对照知识点逐例练习。书中内容覆盖HTML5音频视频与离线存储、CSS盒模型与Flexbox/Grid布局、响应式设计以及JavaScript基础语法、DOM操作、AJAX异步通信与ES6箭头函数、模板字符串、类与模块等新特性每个知识点均配具体代码示例。目前已有274人学习下载适合希望动手实践、将理论转化为实际开发能力的读者参考使用。1. 从一本教程到能跑的项目HTML、CSS、JavaScript 到底该怎么学很多人学前端卡在同一个地方书翻完了标签和属性都认识但打开编辑器还是不知道从哪下手。这本《HTML.CSS.JavaScript标准教程(实例版)(第2版)》的定位恰好卡在这个缺口上——它不是语法字典而是用实例把三件套串起来。HTML 负责结构CSS 负责表现JavaScript 负责行为三者不是并列关系而是同一张页面上的三层协作。你写一个按钮HTML 决定它存在CSS 决定它长什么样JavaScript 决定它被点击后干什么。这本书的价值在于用完整实例把这条链路走通而不是把三个语言拆开各讲各的。适合谁适合已经能看懂基本标签、但没独立做过完整页面的人也适合后端或测试岗想补前端落地能力的从业者。接下来我不复述书里的章节而是按一线做页面的顺序把这本书里最值得动手的部分拆成能直接复现的路径。2. 三件套的协作边界先搞清楚谁管什么再动手2.1 HTML 只做结构别把样式和逻辑塞进去新手最容易犯的错是在 HTML 标签里写stylecolor:red和onclickdoSomething()。这样写能跑但页面一复杂就变成一锅粥。HTML 的职责只有一个用语义化标签描述内容结构。标题用h1到h6段落用p导航用nav主要内容用main独立文章用article。这些标签不只是给浏览器看的也是给搜索引擎和屏幕阅读器看的。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实例页面/title !-- 样式外链不在 HTML 里写 style -- link relstylesheet hrefstyle.css /head body header h1页面主标题/h1 /header main article h2文章标题/h2 p正文内容。/p /article /main !-- 脚本放 body 末尾避免阻塞渲染 -- script srcmain.js/script /body /html这段结构里!DOCTYPE html声明文档类型langzh-cn告诉浏览器和辅助工具这是中文页面meta charsetutf-8保证中文不乱码viewport让移动端按设备宽度渲染而不是缩成一个桌面版。link引入外部样式script放在body末尾是因为浏览器从上到下解析脚本放前面会挡住后面内容的渲染。参数上charset必须是utf-8这是目前唯一稳妥的选择viewport的widthdevice-width和initial-scale1.0是移动适配的最小配置少一个都可能出问题。2.2 CSS 的三种引入方式和优先级CSS 有三种写法行内style、内部style、外部link。行内优先级最高但最难维护内部适合单页小 demo外部是项目里的标准做法。很多人问「CSS 文件需要写style吗」答案是外部.css文件里直接写选择器和规则不需要再包一层style标签style只在 HTML 内部样式块里用。/* style.css 里直接写规则不要包 style */ :root { --main-color: #2c7be5; --gap: 16px; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; line-height: 1.6; } header { padding: var(--gap); background: var(--main-color); color: #fff; } main { max-width: 960px; margin: 0 auto; padding: var(--gap); }这里用:root定义 CSS 变量好处是改一处全局生效比到处找颜色值靠谱。margin: 0清掉浏览器默认边距font-family用系统字体栈避免加载外部字体拖慢首屏max-width加margin: 0 auto是居中容器的经典组合。优先级规则要记住行内 ID 选择器 类选择器 标签选择器!important能不用就不用用了后面很难覆盖。2.3 JavaScript 负责行为但别一上来就上框架JavaScript 的核心是操作 DOM 和响应事件。判断数据类型是高频需求typeof能区分基本类型但typeof null返回object是个历史遗留坑判断数组要用Array.isArray()判断null要直接 null。// 数据类型判断的可靠写法 function getType(value) { if (value null) return null; if (Array.isArray(value)) return array; return typeof value; } console.log(getType(null)); // null console.log(getType([1, 2, 3])); // array console.log(getType(3.14)); // number console.log(getType(hello)); // string // 事件绑定等 DOM 解析完再操作 document.addEventListener(DOMContentLoaded, () { const btn document.querySelector(#submit-btn); if (!btn) return; btn.addEventListener(click, () { console.log(按钮被点击); }); });DOMContentLoaded事件在 HTML 解析完成后触发比window.onload早后者要等所有图片和资源加载完。querySelector返回第一个匹配元素找不到返回null所以绑定前要判空否则报Cannot read properties of null。保留两位小数用Number.prototype.toFixed(2)但注意它返回字符串参与计算前要parseFloat转回来。3. 用实例把三件套串起来从静态页到可交互组件3.1 先搭一个能跑的最小页面骨架不管做什么实例骨架都一样。新建一个文件夹里面放index.html、style.css、main.js三个文件用浏览器直接打开index.html就能跑。这是最省事的验证方式不需要装任何构建工具。如果你在 Ubuntu 上用 VS Code 或任意编辑器都行浏览器用系统自带的即可。mkdir demo-page cd demo-page touch index.html style.css main.js # 用编辑器打开 index.html写入上一节的结构三个文件的分工要清晰HTML 里不出现style属性和onclickCSS 里不出现选择器操作 DOM 的逻辑JS 里不拼接大段 HTML 字符串。这条边界守住了后面加功能才不会互相打架。3.2 做一个倒计时组件HTML 结构、CSS 样式、JS 逻辑各就各位倒计时是练手的好例子因为它同时用到结构、样式和定时逻辑。HTML 只放一个容器和几个显示数字的节点CSS 负责排版和数字样式JS 负责每秒更新。div classcountdown idcountdown span classcountdown__num iddays00/span span classcountdown__unit天/span span classcountdown__num idhours00/span span classcountdown__unit时/span span classcountdown__num idminutes00/span span classcountdown__unit分/span span classcountdown__num idseconds00/span span classcountdown__unit秒/span /div.countdown { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; /* 数字等宽跳动时不抖 */ } .countdown__num { font-size: 32px; font-weight: 700; color: #2c7be5; min-width: 2ch; text-align: center; } .countdown__unit { font-size: 14px; color: #666; }font-variant-numeric: tabular-nums让数字等宽倒计时跳动时不会左右晃这是很多人忽略的细节。min-width: 2ch保证数字从 9 变 10 时宽度不跳。display: flex加align-items: baseline让数字和单位底部对齐视觉上更稳。function startCountdown(targetDate) { const els { days: document.getElementById(days), hours: document.getElementById(hours), minutes: document.getElementById(minutes), seconds: document.getElementById(seconds), }; function pad(n) { return String(n).padStart(2, 0); } function tick() { const diff targetDate - Date.now(); if (diff 0) { Object.values(els).forEach(el el.textContent 00); clearInterval(timer); return; } const sec Math.floor(diff / 1000); els.days.textContent pad(Math.floor(sec / 86400)); els.hours.textContent pad(Math.floor((sec % 86400) / 3600)); els.minutes.textContent pad(Math.floor((sec % 3600) / 60)); els.seconds.textContent pad(sec % 60); } tick(); const timer setInterval(tick, 1000); } // 目标时间设为 7 天后 const target new Date(Date.now() 7 * 24 * 3600 * 1000); startCountdown(target);padStart(2, 0)把个位数补成两位Math.floor逐级取整算出天、时、分、秒。setInterval每 1000 毫秒执行一次但要注意它不精确页面切到后台时浏览器会降频所以每次tick都用Date.now()重新算差值而不是靠累加这样即使定时器有偏差显示的时间也是准的。clearInterval在倒计时结束时清掉定时器避免无意义地跑下去。3.3 用事件委托处理动态列表列表项是动态生成的时候给每个项单独绑事件既费性能又容易漏。事件委托的做法是把监听器绑在父容器上利用事件冒泡判断实际点击的是哪个子元素。const list document.getElementById(todo-list); list.addEventListener(click, (e) { const target e.target; // 只处理带 delete 类的按钮 if (target.classList.contains(delete)) { const item target.closest(li); if (item) item.remove(); } }); // 动态添加一项 function addItem(text) { const li document.createElement(li); li.innerHTML ${text} button classdelete删除/button; list.appendChild(li); }e.target是实际被点击的元素closest(li)从点击位置往上找最近的li祖先这样即使点的是按钮里的文字也能正确找到整行。classList.contains判断类名比className字符串匹配可靠。用innerHTML插入内容时如果 text 来自用户输入要做转义否则有 XSS 风险简单场景可以用textContent加createElement组合。4. 避坑与排查新手最容易翻车的五个地方4.1 中文乱码现象是页面显示问号或方块原因几乎都是编码不一致。HTML 文件本身存成了 GBK但meta charset写的是utf-8或者反过来。解决方法是统一用 UTF-8编辑器里把文件编码设为 UTF-8HTML 里写meta charsetutf-8CSS 文件如果有中文注释也存 UTF-8。用 VS Code 的话右下角能看到当前编码点一下可以转换。4.2 样式不生效现象是改了 CSS 但页面没变化先看选择器有没有写对类名大小写是否一致id和class有没有混用。再看优先级行内样式和!important会覆盖外部样式。还有一个常见原因是浏览器缓存了旧的 CSS 文件强制刷新CtrlF5或者改一下文件名再试。如果用了link引入检查路径对不对hrefstyle.css和href./css/style.css指向的位置不同。4.3 JavaScript 报错Cannot read properties of null现象是控制台报这个错脚本中断。原因是querySelector或getElementById没找到元素返回了null后面又去访问它的属性。最常见的情况是脚本在head里执行此时body里的元素还没解析出来。解决办法是把script放到body末尾或者用DOMContentLoaded包起来或者给取到的元素加判空。4.4 移动端页面比屏幕宽出现横向滚动条现象是手机上页面能左右滑。原因通常是某个元素宽度超过视口比如固定width: 1200px的容器或者图片没设max-width: 100%。解决方法是给容器用max-width而不是固定width图片加max-width: 100%; height: auto;检查有没有元素用了负margin或绝对定位超出边界。box-sizing: border-box也建议全局设上避免 padding 把宽度撑大。4.5 事件绑定了但没反应现象是点击按钮没任何反应控制台也不报错。先确认元素是否真的存在用console.log打印一下取到的元素。再看事件名有没有拼错click不是onclickaddEventListener里不带on。如果是动态生成的元素绑定时机在生成之前就会失效改用事件委托。还有一种情况是元素被其他透明层盖住了用开发者工具的 Elements 面板检查一下层级。5. 进阶技巧用 CSS 变量和模块化思路管理越来越大的页面页面写到几十个组件之后最大的问题不是不会写而是改不动。颜色散落在各处间距一会儿 8px 一会儿 10px改一个主题要全局搜索替换。这时候 CSS 变量的价值就出来了。把颜色、间距、圆角、字号这些反复出现的值抽到:root里组件里只引用变量换主题时只改一处。:root { --color-primary: #2c7be5; --color-text: #1a1a1a; --color-bg: #ffffff; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --radius: 6px; } /* 暗色主题只需覆盖变量 */ [data-themedark] { --color-text: #e8e8e8; --color-bg: #1a1a1a; } .card { padding: var(--space-md); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }切换主题时用 JS 改document.documentElement.dataset.theme所有引用变量的地方自动更新不需要逐个元素改样式。这个思路在实例版教程里可能只是一笔带过但实际项目里能省掉大量重复劳动。另一个值得养成的习惯是给 JavaScript 分模块。哪怕不用打包工具也可以用 ES Module 的import/export浏览器原生支持。// utils.js export function formatDate(date) { const y date.getFullYear(); const m String(date.getMonth() 1).padStart(2, 0); const d String(date.getDate()).padStart(2, 0); return ${y}-${m}-${d}; } // main.js import { formatDate } from ./utils.js; console.log(formatDate(new Date()));用typemodule引入main.js浏览器会按模块加载每个文件有独立作用域不会污染全局。注意模块脚本默认是延迟执行的等价于加了defer所以不用担心 DOM 没解析完的问题。本地直接打开file://协议时模块可能被 CORS 拦住起一个本地静态服务器就行Python 自带的python3 -m http.server足够用。我自己的习惯是每做一个新实例先把 HTML 结构写死确认内容对了再上 CSS最后加 JS 行为。三件套分开验证出问题时能快速定位是哪一层的锅。这个顺序看起来慢实际上比混在一起写再回头排查要快得多。希望帮到你。本文还有配套的精品资源点击获取 HTML、CSS、JavaScript三件套实战：从教程到可运行项目
简介《HTML.CSS.JavaScript标准教程》实例版第二版是一本面向Web前端初学者与进阶开发者的实例型入门教材围绕HTML结构标记、CSS布局样式与JavaScript交互逻辑三大核心展开帮助读者从零建立完整的前端知识体系。资源包共528个文件以286个html实例页面、115张jpg与67张gif素材图为主辅以23个ppt课件、5个css样式表、4个htm页面及若干txt说明与psd源文件压缩包约35.9MB目录按章节组织便于对照知识点逐例练习。书中内容覆盖HTML5音频视频与离线存储、CSS盒模型与Flexbox/Grid布局、响应式设计以及JavaScript基础语法、DOM操作、AJAX异步通信与ES6箭头函数、模板字符串、类与模块等新特性每个知识点均配具体代码示例。目前已有274人学习下载适合希望动手实践、将理论转化为实际开发能力的读者参考使用。1. 从一本教程到能跑的项目HTML、CSS、JavaScript 到底该怎么学很多人学前端卡在同一个地方书翻完了标签和属性都认识但打开编辑器还是不知道从哪下手。这本《HTML.CSS.JavaScript标准教程(实例版)(第2版)》的定位恰好卡在这个缺口上——它不是语法字典而是用实例把三件套串起来。HTML 负责结构CSS 负责表现JavaScript 负责行为三者不是并列关系而是同一张页面上的三层协作。你写一个按钮HTML 决定它存在CSS 决定它长什么样JavaScript 决定它被点击后干什么。这本书的价值在于用完整实例把这条链路走通而不是把三个语言拆开各讲各的。适合谁适合已经能看懂基本标签、但没独立做过完整页面的人也适合后端或测试岗想补前端落地能力的从业者。接下来我不复述书里的章节而是按一线做页面的顺序把这本书里最值得动手的部分拆成能直接复现的路径。2. 三件套的协作边界先搞清楚谁管什么再动手2.1 HTML 只做结构别把样式和逻辑塞进去新手最容易犯的错是在 HTML 标签里写stylecolor:red和onclickdoSomething()。这样写能跑但页面一复杂就变成一锅粥。HTML 的职责只有一个用语义化标签描述内容结构。标题用h1到h6段落用p导航用nav主要内容用main独立文章用article。这些标签不只是给浏览器看的也是给搜索引擎和屏幕阅读器看的。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实例页面/title !-- 样式外链不在 HTML 里写 style -- link relstylesheet hrefstyle.css /head body header h1页面主标题/h1 /header main article h2文章标题/h2 p正文内容。/p /article /main !-- 脚本放 body 末尾避免阻塞渲染 -- script srcmain.js/script /body /html这段结构里!DOCTYPE html声明文档类型langzh-cn告诉浏览器和辅助工具这是中文页面meta charsetutf-8保证中文不乱码viewport让移动端按设备宽度渲染而不是缩成一个桌面版。link引入外部样式script放在body末尾是因为浏览器从上到下解析脚本放前面会挡住后面内容的渲染。参数上charset必须是utf-8这是目前唯一稳妥的选择viewport的widthdevice-width和initial-scale1.0是移动适配的最小配置少一个都可能出问题。2.2 CSS 的三种引入方式和优先级CSS 有三种写法行内style、内部style、外部link。行内优先级最高但最难维护内部适合单页小 demo外部是项目里的标准做法。很多人问「CSS 文件需要写style吗」答案是外部.css文件里直接写选择器和规则不需要再包一层style标签style只在 HTML 内部样式块里用。/* style.css 里直接写规则不要包 style */ :root { --main-color: #2c7be5; --gap: 16px; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; line-height: 1.6; } header { padding: var(--gap); background: var(--main-color); color: #fff; } main { max-width: 960px; margin: 0 auto; padding: var(--gap); }这里用:root定义 CSS 变量好处是改一处全局生效比到处找颜色值靠谱。margin: 0清掉浏览器默认边距font-family用系统字体栈避免加载外部字体拖慢首屏max-width加margin: 0 auto是居中容器的经典组合。优先级规则要记住行内 ID 选择器 类选择器 标签选择器!important能不用就不用用了后面很难覆盖。2.3 JavaScript 负责行为但别一上来就上框架JavaScript 的核心是操作 DOM 和响应事件。判断数据类型是高频需求typeof能区分基本类型但typeof null返回object是个历史遗留坑判断数组要用Array.isArray()判断null要直接 null。// 数据类型判断的可靠写法 function getType(value) { if (value null) return null; if (Array.isArray(value)) return array; return typeof value; } console.log(getType(null)); // null console.log(getType([1, 2, 3])); // array console.log(getType(3.14)); // number console.log(getType(hello)); // string // 事件绑定等 DOM 解析完再操作 document.addEventListener(DOMContentLoaded, () { const btn document.querySelector(#submit-btn); if (!btn) return; btn.addEventListener(click, () { console.log(按钮被点击); }); });DOMContentLoaded事件在 HTML 解析完成后触发比window.onload早后者要等所有图片和资源加载完。querySelector返回第一个匹配元素找不到返回null所以绑定前要判空否则报Cannot read properties of null。保留两位小数用Number.prototype.toFixed(2)但注意它返回字符串参与计算前要parseFloat转回来。3. 用实例把三件套串起来从静态页到可交互组件3.1 先搭一个能跑的最小页面骨架不管做什么实例骨架都一样。新建一个文件夹里面放index.html、style.css、main.js三个文件用浏览器直接打开index.html就能跑。这是最省事的验证方式不需要装任何构建工具。如果你在 Ubuntu 上用 VS Code 或任意编辑器都行浏览器用系统自带的即可。mkdir demo-page cd demo-page touch index.html style.css main.js # 用编辑器打开 index.html写入上一节的结构三个文件的分工要清晰HTML 里不出现style属性和onclickCSS 里不出现选择器操作 DOM 的逻辑JS 里不拼接大段 HTML 字符串。这条边界守住了后面加功能才不会互相打架。3.2 做一个倒计时组件HTML 结构、CSS 样式、JS 逻辑各就各位倒计时是练手的好例子因为它同时用到结构、样式和定时逻辑。HTML 只放一个容器和几个显示数字的节点CSS 负责排版和数字样式JS 负责每秒更新。div classcountdown idcountdown span classcountdown__num iddays00/span span classcountdown__unit天/span span classcountdown__num idhours00/span span classcountdown__unit时/span span classcountdown__num idminutes00/span span classcountdown__unit分/span span classcountdown__num idseconds00/span span classcountdown__unit秒/span /div.countdown { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; /* 数字等宽跳动时不抖 */ } .countdown__num { font-size: 32px; font-weight: 700; color: #2c7be5; min-width: 2ch; text-align: center; } .countdown__unit { font-size: 14px; color: #666; }font-variant-numeric: tabular-nums让数字等宽倒计时跳动时不会左右晃这是很多人忽略的细节。min-width: 2ch保证数字从 9 变 10 时宽度不跳。display: flex加align-items: baseline让数字和单位底部对齐视觉上更稳。function startCountdown(targetDate) { const els { days: document.getElementById(days), hours: document.getElementById(hours), minutes: document.getElementById(minutes), seconds: document.getElementById(seconds), }; function pad(n) { return String(n).padStart(2, 0); } function tick() { const diff targetDate - Date.now(); if (diff 0) { Object.values(els).forEach(el el.textContent 00); clearInterval(timer); return; } const sec Math.floor(diff / 1000); els.days.textContent pad(Math.floor(sec / 86400)); els.hours.textContent pad(Math.floor((sec % 86400) / 3600)); els.minutes.textContent pad(Math.floor((sec % 3600) / 60)); els.seconds.textContent pad(sec % 60); } tick(); const timer setInterval(tick, 1000); } // 目标时间设为 7 天后 const target new Date(Date.now() 7 * 24 * 3600 * 1000); startCountdown(target);padStart(2, 0)把个位数补成两位Math.floor逐级取整算出天、时、分、秒。setInterval每 1000 毫秒执行一次但要注意它不精确页面切到后台时浏览器会降频所以每次tick都用Date.now()重新算差值而不是靠累加这样即使定时器有偏差显示的时间也是准的。clearInterval在倒计时结束时清掉定时器避免无意义地跑下去。3.3 用事件委托处理动态列表列表项是动态生成的时候给每个项单独绑事件既费性能又容易漏。事件委托的做法是把监听器绑在父容器上利用事件冒泡判断实际点击的是哪个子元素。const list document.getElementById(todo-list); list.addEventListener(click, (e) { const target e.target; // 只处理带 delete 类的按钮 if (target.classList.contains(delete)) { const item target.closest(li); if (item) item.remove(); } }); // 动态添加一项 function addItem(text) { const li document.createElement(li); li.innerHTML ${text} button classdelete删除/button; list.appendChild(li); }e.target是实际被点击的元素closest(li)从点击位置往上找最近的li祖先这样即使点的是按钮里的文字也能正确找到整行。classList.contains判断类名比className字符串匹配可靠。用innerHTML插入内容时如果 text 来自用户输入要做转义否则有 XSS 风险简单场景可以用textContent加createElement组合。4. 避坑与排查新手最容易翻车的五个地方4.1 中文乱码现象是页面显示问号或方块原因几乎都是编码不一致。HTML 文件本身存成了 GBK但meta charset写的是utf-8或者反过来。解决方法是统一用 UTF-8编辑器里把文件编码设为 UTF-8HTML 里写meta charsetutf-8CSS 文件如果有中文注释也存 UTF-8。用 VS Code 的话右下角能看到当前编码点一下可以转换。4.2 样式不生效现象是改了 CSS 但页面没变化先看选择器有没有写对类名大小写是否一致id和class有没有混用。再看优先级行内样式和!important会覆盖外部样式。还有一个常见原因是浏览器缓存了旧的 CSS 文件强制刷新CtrlF5或者改一下文件名再试。如果用了link引入检查路径对不对hrefstyle.css和href./css/style.css指向的位置不同。4.3 JavaScript 报错Cannot read properties of null现象是控制台报这个错脚本中断。原因是querySelector或getElementById没找到元素返回了null后面又去访问它的属性。最常见的情况是脚本在head里执行此时body里的元素还没解析出来。解决办法是把script放到body末尾或者用DOMContentLoaded包起来或者给取到的元素加判空。4.4 移动端页面比屏幕宽出现横向滚动条现象是手机上页面能左右滑。原因通常是某个元素宽度超过视口比如固定width: 1200px的容器或者图片没设max-width: 100%。解决方法是给容器用max-width而不是固定width图片加max-width: 100%; height: auto;检查有没有元素用了负margin或绝对定位超出边界。box-sizing: border-box也建议全局设上避免 padding 把宽度撑大。4.5 事件绑定了但没反应现象是点击按钮没任何反应控制台也不报错。先确认元素是否真的存在用console.log打印一下取到的元素。再看事件名有没有拼错click不是onclickaddEventListener里不带on。如果是动态生成的元素绑定时机在生成之前就会失效改用事件委托。还有一种情况是元素被其他透明层盖住了用开发者工具的 Elements 面板检查一下层级。5. 进阶技巧用 CSS 变量和模块化思路管理越来越大的页面页面写到几十个组件之后最大的问题不是不会写而是改不动。颜色散落在各处间距一会儿 8px 一会儿 10px改一个主题要全局搜索替换。这时候 CSS 变量的价值就出来了。把颜色、间距、圆角、字号这些反复出现的值抽到:root里组件里只引用变量换主题时只改一处。:root { --color-primary: #2c7be5; --color-text: #1a1a1a; --color-bg: #ffffff; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --radius: 6px; } /* 暗色主题只需覆盖变量 */ [data-themedark] { --color-text: #e8e8e8; --color-bg: #1a1a1a; } .card { padding: var(--space-md); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }切换主题时用 JS 改document.documentElement.dataset.theme所有引用变量的地方自动更新不需要逐个元素改样式。这个思路在实例版教程里可能只是一笔带过但实际项目里能省掉大量重复劳动。另一个值得养成的习惯是给 JavaScript 分模块。哪怕不用打包工具也可以用 ES Module 的import/export浏览器原生支持。// utils.js export function formatDate(date) { const y date.getFullYear(); const m String(date.getMonth() 1).padStart(2, 0); const d String(date.getDate()).padStart(2, 0); return ${y}-${m}-${d}; } // main.js import { formatDate } from ./utils.js; console.log(formatDate(new Date()));用typemodule引入main.js浏览器会按模块加载每个文件有独立作用域不会污染全局。注意模块脚本默认是延迟执行的等价于加了defer所以不用担心 DOM 没解析完的问题。本地直接打开file://协议时模块可能被 CORS 拦住起一个本地静态服务器就行Python 自带的python3 -m http.server足够用。我自己的习惯是每做一个新实例先把 HTML 结构写死确认内容对了再上 CSS最后加 JS 行为。三件套分开验证出问题时能快速定位是哪一层的锅。这个顺序看起来慢实际上比混在一起写再回头排查要快得多。希望帮到你。本文还有配套的精品资源点击获取