简介这套示例代码源自《HTMLCSSJavaScript编程入门指南》一书主要面向刚接触前端开发的初学者以及需要边读边练的学生和自学者。内容按超文本标记语言HTML、层叠样式表CSS和JavaScript三个部分组织并在最后用综合项目演示三者如何配合完成页面开发所有代码都经过整理可直接在WebStorm等编辑器中打开运行方便对照书本逐段理解。整份资源共1269个文件zip压缩包约192.42MB其中核心源码包括195个html文件、76个js文件和71个css文件同时还配有391张jpg图片、278张png图片、44张gif动图和24个mp4视频用于展示运行效果和操作过程另有字体、XML、PHP等格式的辅助文件整体目录划分清晰。目前已有1492人学习/下载既能满足零基础者循序渐进地练习也可作为前端课程的项目参考值得按章节保存使用。1. 编程入门为什么从 HTML、CSS、JavaScript 这个组合开始编程入门最常见的误区是把学语言等同于背语法。HTML 管结构、CSS 管样式、JavaScript 管行为这三个词是前端的地基但背熟语法不等于会做页面。这个组合的特别之处在于它们是浏览器原生支持的语言写出的东西从第一行起就在真实环境运行保存、刷新、看到变化反馈清晰直接。相比配置一套后端开发环境这个反馈循环几乎没有中间环节。这篇指南按「结构 → 样式 → 行为」的顺序把三个语言讲成一条能直接照做的路径代码可复现、参数可查、报错可排查。适合刚转前端的开发、需要补基础的测试运维以及想确认自己是否适合写代码的人。2. HTML写对骨架语法表单和语义化是绕不开的两件事HTML 的标签总量很大但入门真正高频使用的不到二十个。与其罗列所有标签不如先掌握两个核心能力写出一个结构正确的页面骨架以及让用户在页面上留下输入。掌握这两件事后面接 CSS 和 JavaScript 时就有了稳固的挂载点。2.1 最小页面结构!doctype html到/html逐行拆解!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好前端/h1 p这是用 HTML 写出的第一个段落。/p /body /html把这段代码存成 index.html双击用浏览器打开就是你写的第一个页面。每个标签的作用都值得单独说清楚。!doctype html声明文档类型告诉浏览器按 HTML5 标准渲染。漏掉它浏览器会进入怪癖模式盒模型、行高这些样式计算都会出现兼容性偏差这是代码看起来一样但显示不一样的头号原因。html langzh-cn标注页面语言中文站点统一用这个值搜索引擎和屏幕阅读器都依赖它。meta charsetutf-8指定字符编码漏掉它中文大概率乱码。meta nameviewport控制移动端视口没有这一行手机浏览器会按桌面宽度渲染再整体缩小字小到需要双击放大。title不只是标签页的名字还是搜索结果里的大标题每个页面都应该有且只有一个。2.2 高频标签对照表与语义化div 不是万能容器下面是入门阶段最常用的标签清单建议对照着抄一遍而不是死记标签作用典型位置h1~h6六级标题h1 每页一个页面主标题、章节标题p段落正文文本块a href超链接跳转、锚点导航img src alt图片配图、图标alt 不能空ul/ol/li无序/有序列表导航菜单、步骤说明div/span无语义容器布局包裹、行内修饰这些标签里最容易出问题的是div。它本身没有任何语义全站用 div 套 div后期改样式、做无障碍、写自动化测试都会很痛苦。常见做法是优先用header、nav、main、footer划分页面大区div 只负责纯布局容器。判断标准很简单先问这个区域在语义上是什么答不上来再用 div。2.3 表单是交互的起点name 属性决定数据去哪里form action/search methodget label forkeyword关键词/label input typetext idkeyword nameq placeholder输入搜索内容 button typesubmit搜索/button /form表单是 HTML 里第一处有状态的语法。label的for指向input的id点击文字即可聚焦输入框这也是无障碍检查的硬性要求。nameq是提交数据的键名最终请求会变成?q输入的关键词用 get 方法时地址栏直接可见最适合初学者验证。action指定提交地址入门阶段写#不会报错但语义上应该指向真实接口。一个高频坑id和name是两回事id是页面内的唯一标识name是提交到服务器的字段名后端接口要什么字段名name就写什么字段名前后端对不上是联调时最常见的扯皮现场。3. CSS从三行模式起步用盒模型和状态伪类落地样式CSS 的学习曲线很特别语法半天就看完真做布局却处处碰壁。碰壁的根源大多集中在盒模型和选择器优先级上。这一章用三行模式的 CSS 文件起步把基础样式、高频小技巧和鼠标移入状态一次讲完。3.1 三行模式的 CSS 文件reset、变量、基础排版一次配齐网上很多 CSS 框架文件动辄几百行新手复制过来想改一个按钮间距得翻三屏还不一定找得到位置。我一般用三行模式做起点把最影响布局的三个基础问题先解决* { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #0a66c2; --gap: 16px; --radius: 8px; } body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }第一行的*是通配选择器作用于所有元素。box-sizing: border-box让宽度计算包含 padding 和 border后续写宽高不会出现越调越宽margin: 0; padding: 0清零浏览器默认间距让各浏览器表现一致。第二行用:root定义 CSS 变量--primary是主题色--gap是统一间距--radius是圆角半径整站颜色和间距改动只动这三行。第三行用system-ui字体族中文环境直接调用系统默认字体不额外加载字体文件line-height: 1.6是正文阅读的最低舒适度。这份三行文件不是完整 reset但对入门项目完全够用等布局复杂了再按需补样式即可。3.2 盒模型可视化与三个高频样式删除线、两行省略、优惠券圆切盒模型是 CSS 的底层模型每个元素都是一个盒子从内到外是 content、padding、border、margin。在浏览器里右键元素选检查Elements 面板的盒模型图把四个区域用不同颜色标出来蓝色内容区、绿色 padding、黄色 border、橙色 margin是排查布局问题最快的入口。高频场景里有三个纯 CSS 技巧值得直接抄走。删除线价格用一行text-decoration.price-old { text-decoration: line-through; color: #999; margin-right: 8px; }原价加灰色弱化和现价形成视觉对比margin-right拉开与原价的间距。文本超出两行显示省略号需要组合声明.card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }-webkit-line-clamp控制行数改成 1 就是单行省略改成 3 就是三行省略注意display: -webkit-box必须成对出现缺少它整段声明在 Chrome 里会失效。优惠券的圆切锯齿用径向渐变模拟缺口.coupon { position: relative; overflow: hidden; } .coupon::after { content: ; position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, transparent 6px, #fff 7px); }radial-gradient(circle, transparent 6px, #fff 7px)的意思是半径 6px 内透明、7px 处切到白色配合绝对定位放在右下角就形成缺角效果。::after伪元素不占真实 DOM 结构这是它能用纯 CSS 实现的关键。三个技巧的共同点是零额外标签遇到设计稿先想 CSS 能不能做再做切图的决定。3.3 鼠标移入事件用 CSS 还是 JS:hover优先mouseover 兜底CSS 的:hover伪类常被说成鼠标移入事件严格讲它是状态选择器而不是事件但纯视觉反馈用 CSS这个分工是清晰的。看一个最常见的悬停抬升按钮.btn { background: var(--primary); color: #fff; padding: 10px 20px; border: none; border-radius: var(--radius); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }transition声明哪些属性变化需要补间动画transform和box-shadow走合成器线程不触发重排动画流畅。什么时候上 JavaScript 事件看这张表需求用 CSS用 JavaScript悬停变色、位移、阴影:hover transition没必要点击后读取输入、改其他元素做不到click 事件统计移入次数、埋点上报做不到mouseover 计数变量判断标准一句话状态只发生在视觉层交给 CSS状态要影响数据或其他元素交给 JavaScript。这条准则能省掉大量无用的事件监听代码也让 CSS 和 JavaScript 各归其位。4. JavaScript函数、事件与报错排查是入门的三个门槛JavaScript 的语法量比 HTML 和 CSS 加起来都多但入门关键路径没那么宽先会写函数和操作 DOM再会看懂报错最后掌握几个现代语法的高频写法。这一章按这个顺序推进。4.1 基础语法与函数变量声明、return、console.log 的配合JavaScript 基础语法里最先要掌握的是函数——它把输入什么、输出什么变成一个可复用的单元function calcTotal(price, count) { if (price 0 || count 0) { return 0; } return price * count; } const subtotal calcTotal(99, 3); console.log(小计, subtotal);function关键字声明函数calcTotal是函数名price和count是形参调用时传入的 99 和 3 是实参。return负责把计算结果交给调用方同时结束函数这里对负数参数做了防御返回 0 而不是负值是新手最容易漏掉的一类边界处理。const声明的变量不可重新赋值console.log(小计, subtotal)一次打印两个值逗号分隔比字符串拼接更直观对象还能展开查看。打开浏览器按 F12Console 面板就能看到这行输出调试的起点就是把关键变量的值打出来确认程序认为的值和你以为的值是否一致。脚本放置位置同样影响执行结果。把script srcmain.js/script放在/body之前能保证脚本执行时 DOM 已经渲染完毕这是新手阶段最稳妥的写法。4.2 操作 DOM 与事件绑定querySelector 和 addEventListener 的标准组合操作 DOM 是 JavaScript 入门里做出东西的关键一步。推荐直接学querySelector一个方法通吃所有选择器语法const btn document.querySelector(#submitBtn); const output document.querySelector(#output); btn.addEventListener(click, function () { const name document.querySelector(#name).value.trim(); if (!name) { output.textContent 请输入姓名; return; } output.textContent 你好 name; });document.querySelector的参数与 CSS 选择器写法完全一致#选 id.选 class会写 CSS 就会选元素。addEventListener接收两个参数第一个是事件类型click、scroll、keydown 都属于常见事件第二个是触发时执行的回调函数。value.trim()拿到输入框文本并去掉首尾空格空值判断后textContent改变输出文本。用textContent而不是innerHTML写入字符串只会被当作文本渲染用户输入img onerror...这类内容也不会被解析成 HTML这是入门就要养成的安全习惯。这里的return不是返回值而是提前结束回调函数是条件分支里控制流程的常规手段。4.3 运行时报错怎么查SyntaxError、TypeError、ReferenceError运行时报错是 JavaScript 与 HTML、CSS 最大的体验差异后两者写错通常只是显示不对JS 写错控制台直接红字脚本可能整段失效。先记住三种最高频的报错报错信息含义排查方向Uncaught SyntaxError语法错误脚本不执行检查括号、引号、分号是否成对TypeError: Cannot read properties of null取到了不存在的元素script 位置、id 拼写ReferenceError: xxx is not defined变量或函数未声明拼写、声明顺序、作用域TypeError 的成因最常见script放在head里执行时 body 还没渲染querySelector返回 null对 null 读.value就炸了。排查顺序固定是先看报错行号 → 再看涉及的变量 → 最后看执行时机。另外用安全扫描器检查站点时经常看到检测到目标站点存在 javascript 框架库漏洞这类告警多数原因是引用的第三方库版本过旧漏洞库里有对应编号。入门阶段少引库是治本的方法jQuery 能做的事现代浏览器用querySelector和fetch基本都能做不引库就少一层暴露面。现在也有人把报错直接丢给 AI 编程工具解释这没问题但前提是你能看懂行号和变量名否则 AI 给的修复方案你也判断不了对不对。4.4 合并两个对象的现代写法展开运算符与 Object.assign对象合并是页面配置、表单回填里几乎天天遇到的场景。ES6 的展开运算符是目前最简洁的写法const defaults { theme: light, lang: zh-CN, debug: false }; const userConfig { lang: en }; const merged { ...defaults, ...userConfig }; console.log(merged); const merged2 Object.assign({}, defaults, userConfig); console.log(merged2);...把对象的键值对展开后面的对象覆盖前面的同名键所以merged.lang是en而theme和debug保持默认值。Object.assign({}, defaults, userConfig)是等价的老写法第一个参数是目标对象传空对象{}避免修改 defaults 本身这是很多人容易踩的坑。两种方式都是浅拷贝嵌套对象是引用共享改内层属性会影响原始对象。需要深合并时可以用JSON.parse(JSON.stringify())或递归处理但要清楚前者的局限性——值为函数和 undefined 的键会丢。入门阶段记住浅拷贝的行为边界比背下整个深拷贝实现更实用。5. 用 HTML、CSS、JavaScript 做一个一键返回顶部组件最后一个练习用一个按钮把三种语言全部串起来验证你是否真正入门。需求很简单页面滚动超过一定距离后右下角出现返回顶部按钮点击后平滑滚回顶部。这个需求在资讯站、电商列表页里出现频率极高是html 一键返回顶部算法的经典落点。button idbackTop classback-top aria-label返回顶部↑/button.back-top { position: fixed; right: 24px; bottom: 40px; display: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--primary, #0a66c2); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .back-top.show { display: block; }const backTop document.querySelector(#backTop); window.addEventListener(scroll, function () { if (window.scrollY 300) { backTop.classList.add(show); } else { backTop.classList.remove(show); } }); backTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });三个文件各自承担明确职责HTML 给出按钮元素aria-label为屏幕阅读器提供替代文本CSS 负责固定定位和显隐切换position: fixed相对视口定位display: none默认隐藏.show类控制显示background里var(--primary, #0a66c2)的第二个参数是变量缺失时的兜底色保证单独拷贝这份 CSS 也能跑JavaScript 里的window.scrollY 300是滚动阈值判断classList.add/remove切换状态类scrollTo({ top: 0, behavior: smooth })实现平滑滚动。整个组件的逻辑可以拆成四步滚动监听、阈值判断、状态切换、平滑滚动业务里别的悬浮组件也是这套架子。验证方法按四条做第一滚动超过 300px 时按钮出现回到顶部后自动消失第二点击按钮滚动是平滑的不是瞬移第三44px 的触摸区域符合移动端最小可点击尺寸且不被底部内容遮挡第四打开控制台确认无报错。文件组织的常见做法是在编辑器里建 style.css、main.js 和 index.html 三个文件用link relstylesheet hrefstyle.css引入样式用script srcmain.js/script放在/body前引入脚本。如果用的是 HBuilder 这类集成工具新建项目会自动生成这套目录结构直接改文件、按 F5 就能在浏览器里看到效果。提示如果按钮始终不出现先确认 style.css 和 main.js 的引入路径与文件名是否完全一致。浏览器开发者工具的 Network 面板会直接报 404这是文件路径问题最快的定位方式。本文还有配套的精品资源点击获取