SGK字典学习：从K-SVD到稀疏引导的快速图像去噪
2026/9/14 6:13:54
简介：这套示例代码源自《HTML+CSS+JavaScript编程入门指南》一书，主要面向刚接触前端开发的初学者，以及需要边读边练的学生和自学者。内容按超文本标记语言（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 lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个页面</title> </head> <body> <h1>你好，前端</h1> <p>这是用 HTML 写出的第一个段落。</p> </body> </html>把这段代码存成 index.html，双击用浏览器打开，就是你写的第一个页面。每个标签的作用都值得单独说清楚。
<!doctype html>声明文档类型，告诉浏览器按 HTML5 标准渲染。漏掉它浏览器会进入怪癖模式，盒模型、行高这些样式计算都会出现兼容性偏差，这是"代码看起来一样但显示不一样"的头号原因。<html lang="zh-cn">标注页面语言，中文站点统一用这个值，搜索引擎和屏幕阅读器都依赖它。<meta charset="utf-8">指定字符编码，漏掉它中文大概率乱码。<meta name="viewport">控制移动端视口，没有这一行，手机浏览器会按桌面宽度渲染再整体缩小，字小到需要双击放大。<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" method="get"> <label for="keyword">关键词</label> <input type="text" id="keyword" name="q" placeholder="输入搜索内容"> <button type="submit">搜索</button> </form>表单是 HTML 里第一处有"状态"的语法。label的for指向<input>的id，点击文字即可聚焦输入框，这也是无障碍检查的硬性要求。name="q"是提交数据的键名，最终请求会变成?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)一次打印两个值，逗号分隔比字符串拼接更直观，对象还能展开查看。打开浏览器按 F12，Console 面板就能看到这行输出，调试的起点就是把关键变量的值打出来，确认"程序认为的值"和"你以为的值"是否一致。
脚本放置位置同样影响执行结果。把<script src="main.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 id="backTop" class="back-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 rel="stylesheet" href="style.css">引入样式，用<script src="main.js"></script>放在</body>前引入脚本。如果用的是 HBuilder 这类集成工具，新建项目会自动生成这套目录结构，直接改文件、按 F5 就能在浏览器里看到效果。
提示：如果按钮始终不出现，先确认 style.css 和 main.js 的引入路径与文件名是否完全一致。浏览器开发者工具的 Network 面板会直接报 404，这是文件路径问题最快的定位方式。
本文还有配套的精品资源，点击获取