1. HTML 练手第一步把文档骨架写进肌肉记忆HTML 这个东西跟我刚开始学的时候一样很多人第一反应就是这有什么好练的不就是几个标签吗但真正的问题是标签认得页面写不好。我从带练习营的经验来看能稳定写出规范骨架的人后面学 CSS、JS 都会顺很多。所以我把骨架练习放在第一个不是没道理的——基础质不质量全看这一脚能不能踩稳。1.1 为什么骨架比标签更重要先看一份规范骨架!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的第一个练习页/title /head body h1Hello HTML/h1 /body /html这份代码里每一个细节都有讲究。!doctype html告诉浏览器用标准模式渲染不写它就可能进入怪癖模式边距、盒模型全乱。你去看热搜里反复出现的各种代码模板几乎都带着这串开头但很多人只是复制粘贴根本没有理解它为什么存在。langzh-cn告诉辅助技术和搜索引擎页面语言是简体中文charsetutf-8一旦搞错中文全是乱码viewport这一行在移动端页面里几乎是必须的。练习方法不值钱但真的管用新建一个文件把骨架手敲三遍不要复制粘贴。去背!doctype html的位置练到条件反射。这个过程看起来蠢但撑起了后面所有的调试基础。你以后写任何页面都要从这段骨架开始能不看参考敲出来才算过关。1.2 语义化标签div 不是万能药有一类练习页我几乎每天都能在各种地方见到整个页面从顶到底全是 div 套 div再加上 class 命名为 a1、a2、b1。能显示但可读性和可维护性差到极点。HTML5 提供的语义化标签不是摆设header、nav、main、article、section、aside、footer每个都有明确的使用场景。我的建议是拿一个简单博客页来练顶部 header 放站点名nav 放导航main 里放一篇文章用 article文章分节用 section侧边栏用 aside底部版权用 footer。练习时逼自己一把除了包装用的容器不许使用 div。这个过程能让你真正理解为什么要有语义化标签屏幕阅读器依赖它跳转搜索引擎依赖它理解内容结构团队协作时别人一看标签就知道哪里是导航、哪里是正文。表格对比一下常见标签的适用场景标签典型用途常见错误header页首、板块头部把 header 包住整个页面nav导航链接集合把 logo 也塞进 navmain页面主体内容每页只允许一个在多个页面重复嵌套 mainsection有清晰主题的分区纯粹当 div 用article可以独立成篇的内容内容依赖上下文也硬用aside侧边栏、补充信息把主内容塞进去footer页脚、作者信息在 main 内部到处乱放1.3 文本与链接排版练习一个最小博客页等骨架和语义标签都练熟了就做一个最小博客页标题、作者、日期、三段正文、一个的超链接。这个练习要验证的是标题层级 h1 到 h6 的合理使用h1 每页只出现一次文章内用 h2 分小节小节下的小标题用 h3。别一层嵌套一层层级乱了屏幕阅读器的用户会非常难受。段落、强调、列表这些基础标签每练一个就多写一个实际例句不要光背定义。比如strong和b视觉区别不算大但 strong 表示强调b 只是加粗em和i同理。这些差异放到实际页面里你会慢慢体会出来。链接练习也别只写一个a href#建议把相对路径、绝对路径、锚点跳转、新窗口打开加relnoopener这几个点各写一遍。做完这个练习你的第一个静态页面就能交作业了。2. 天气卡片练习用一个小模块把 HTML、CSS、JS 串起来练习 HTML 最大的误区是只练 HTML。实际上纯静态的 HTML 做不出任何会动的东西而你在热搜里看到的百度首页天气、一键返回顶部这些效果全都是 HTML 打底、CSS 撑摸样、JS 干活的组合。所以第二个练习我建议做一个天气卡片它足够小又能把三者全练到。2.1 先拆需求这只卡片到底要练什么练习之前先想清楚目标。我给学生定的目标是实现一张和百度首页天气模块相似的卡片显示城市、当前温度、天气状况、最高最低温再加一个点击按钮切换城市并更新数据。数据先用静态数组写死不接后端。这样练习的重心就落在三件事上用 HTML 把数据结构化地搭出来、用 CSS 把卡片画得像样、用 JS 完成一次简单的数据渲染和事件响应。不要一开始就上 Vue、React 这类框架。框架的模板语法会掩盖你对原生 HTML 结构的理解练基础语法阶段原生三件套足够。2.2 HTML 结构先写结构再谈美化天气卡片的结构可以这样写article classweather-card div classweather-header h2 classcity-name idcity北京/h2 p classupdate-time更新于 09:30/p /div div classweather-main span classtemperature idtemp26°/span span classcondition idcondition晴/span /div div classweather-detail p最高 span idmax30°/span/p p最低 span idmin19°/span/p /div button classswitch-btn idswitchBtn切换城市/button /article注意我给每个需要 JS 改动的节点都加了 id这是练习阶段最直观的做法。id 相当于给节点发了一个身份证JS 用 getElementById 就能准确找到目标并更新。养成这个习惯后面学 querySelector、学框架的事件绑定都会省事。2.3 CSS让卡片有百度天气的味道百度首页天气模块的视觉特点很明确卡片圆角、投影、信息分层、大号温度数字。CSS 部分重点练三样flex 布局、border-radius 圆角、box-shadow 投影。.weather-card { width: 300px; margin: 40px auto; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .weather-header, .weather-main, .weather-detail { display: flex; justify-content: space-between; align-items: center; } .temperature { font-size: 56px; font-weight: 700; }写完最好把浏览器窗口拉窄拉宽看看观察 flex 在不同宽度下的表现。练习 flex 只背概念没用真正理解它是靠你反复调 justify-content、align-items、gap 这几个属性得出的手感。要让卡片在小屏幕上也好看还可以加一条meta nameviewport配合 max-width这是响应式最基础的一课。2.4 JS点击按钮更新数据练事件和渲染JS 部分先准备数据const cities [ { name: 北京, temp: 26, condition: 晴, max: 30, min: 19 }, { name: 上海, temp: 29, condition: 多云, max: 33, min: 24 }, { name: 广州, temp: 33, condition: 雷阵雨, max: 35, min: 27 } ]; let index 0; const btn document.getElementById(switchBtn); btn.addEventListener(click, function () { index (index 1) % cities.length; const city cities[index]; document.getElementById(city).textContent city.name; document.getElementById(temp).textContent city.temp °; document.getElementById(condition).textContent city.condition; document.getElementById(max).textContent city.max °; document.getElementById(min).textContent city.min °; });这段代码练了三个基础点数组与对象存取、addEventListener 事件绑定、textContent 更新节点。注意我用的是 textContent 而不是 innerHTML因为这里只需要改文本用 innerHTML 反而多留了一个注入隐患虽然练习数据是自己写的但好的习惯要从第一行代码就开始养。2.5 可以再往下走的两步第一步把静态数据换成真实天气接口练习 fetch 和 Promise记得处理加载失败的情况第二步把按钮换成三个城市 Tab练习通过 classList 切换高亮状态。这两步做完你相当于用一个小练习把前端基础语法完整跑了一遍。很多人口中的基础不牢其实就是缺了这类把零散语法串成小项目的过渡练习。3. 练习时的工具链编辑器、预览和格式互转的实用备忘HTML 练习本身写代码不难真正困扰初学者的是环境用什么编辑器、怎么实时预览、怎么把页面转成其他格式。热搜里出现ubuntu的html编辑器html格式转换wps表格html转mdshell显示html说明这些是真实需求我按使用场景逐个说。3.1 Linux/Ubuntu 下编辑器怎么选如果你用的是 Ubuntu最省心的方案是 Visual Studio Code装一个 Live Server 插件就能在浏览器里实时刷新。较轻量的时候可以用 Sublime Textvim 适合纯终端环境但新手期不建议直接拿 vim 练手容易把精力耗在操作上。系统自带的 gedit 也能编辑只是没有高亮和补全体验差很多。我的建议很直接编辑器选一个能立刻上手且带语法高亮、代码补全的就行不用盲目追新。关键是把 HTML、CSS、JS 三个文件分开建练习目录结构保持干净比如weather/ index.html style.css app.js这个习惯看着简单但能避免后面出现把样式全写在 HTML 里越写越长最后找不到在哪改的局面。3.2 data:text/html 的临时验证技巧有时候你并不想新建文件只想快速验证一段 HTML 片段这时直接在浏览器地址栏输入data:text/html,开头的内容就能渲染。比如data:text/html,h1你好/h1p stylecolor:red这是一个临时页面/p把这段粘贴到浏览器地址栏回车就能看到渲染结果。配合 URL 编码可以把多行 HTML 塞进去。这个方法很适合在手机上临时看效果、或者在聊天工具里给别人演示一段代码。别小看这个技巧它出镜率很高说明很多人想把零散的 HTML 片段快速变成可见页面。3.3 HTML 转 Markdown、转 WPS 表格写博客或整理笔记时经常要把网上的 HTML 内容转成 Markdown。工具上首选 pandoc命令很简单pandoc input.html -o output.md如果只是少量内容在线转换工具或者浏览器插件也行但要注意表格、图片路径、代码块这些结构在不同转换器里质量差异很大。我的习惯是转完一定人工检查一遍尤其是代码块和标题层级。HTML 转 WPS/Excel 表格则更适合用 Python pandas 读取 HTML 中的表格import pandas as pd dfs pd.read_html(report.html) for i, df in enumerate(dfs): df.to_excel(freport_{i}.xlsx, indexFalse)pandas 会自动识别页面里的table并转成 DataFrame最后导出 xlsx。这一套做数据报表的同学应该很熟但很多人没想到 HTML 也是它的数据源之一。3.4 打包多个 HTML 页面时的路径问题打包多个 html这个热搜词背后通常是做了一组静态页面最后要发出去或者交给别人。有两种情况一是项目里有多个 html 文件互相链接二是要把整个目录压缩成一个包。先说路径很多新手喜欢用绝对路径写src/images/logo.png或href/page.html一旦整个目录被放到子目录或者直接打开路径就失效。正确的做法是写相对路径img srcimages/logo.png altlogo a hrefpage2.html下一页/a把所有 html、css、js、图片按目录整理好再用 zip 压缩即可。预览打包结果时不要直接双击 html那样有些浏览器会限制本地资源加载正确的做法是在目录里起一个本地静态服务器python3 -m http.server 8000然后浏览器访问 http://localhost:8000。这能模拟真实的网页环境也能排查出相对路径写错、资源 404 这类问题。这个习惯在练习阶段就该养成能帮你避免我这里能打开发给别人就打不开的尴尬。3.5 终端和桌面程序里的 HTML 渲染热搜里的shell显示html和pyqt5显示html其实指向同一件事HTML 不只是网页的专利它也可以作为格式文本在其他环境里渲染。在终端里可以用 w3m、lynx 这样的文本浏览器查看 HTML 的纯文本结构适合在服务器上快速检查内容也可以把 HTML 转成文本用 sed 粗处理但格式复杂时不推荐。pyqt5 里显示 HTML 则有两种常见做法简单文本用 QTextBrowser 的 setHtml() 方法复杂页面用 QWebEngineView 加载 URL。QWebEngineView 本质上是一个内置 Chromium 内核所以能运行完整的 HTML、CSS、JS。这个练习适合做桌面应用的同学比如把本地的报表页面直接嵌进 PyQt 窗口省去自己用 Qt 控件画界面的功夫。这段代码可以照抄import sys from PyQt5.QtWebEngineWidgets import QWebEngineView from PyQt5.QtWidgets import QApplication app QApplication(sys.argv) view QWebEngineView() view.loadFile(index.html) view.resize(800, 600) view.show() sys.exit(app.exec_())这个方案的价值在于你练的 HTML 技能在桌面开发里也能复用技能点不浪费。4. 十个值得反复练的页面从返回顶部到邮件模板练习到了一定阶段需要一份按难度排好的菜单不然容易陷入瞎练。我整理了一份个人觉得梯度合理的列表其中一键返回顶部和邮件模板是热搜常客单独展开讲其余列出练习要点。4.1 一键返回顶部一个练滚动监听和节流的好题目返回顶部按钮看起来简单但值得练的细节不少。基本逻辑是页面滚动超过一定距离后显示按钮点击按钮平滑回到顶部。实现上涉及 scroll 事件监听、按钮显隐判断、window.scrollTo 平滑滚动。先看基础版const backTop document.getElementById(backTop); window.addEventListener(scroll, function () { if (window.scrollY 400) { backTop.style.display block; } else { backTop.style.display none; } }); backTop.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); });如果只是练习语法这个版本够了。但如果想练得更深就研究一下节流 throttlescroll 事件在滚动过程中会以极高频率触发每次触发都操作 DOM 会影响性能。自己实现一个简单的节流函数或者用 requestAnimationFrame 来合并高频触发let ticking false; window.addEventListener(scroll, function () { if (!ticking) { requestAnimationFrame(function () { // 更新显隐逻辑 ticking false; }); ticking true; } });这个小优化背后的思路在图片懒加载、吸顶导航、无限滚动里全都用得上值得当成一个专题练明白。4.2 邮件模板表格布局和内联样式的特训场很多初学者不知道HTML 邮件是不能随意用 div 和外部 CSS 的。主流的邮箱客户端对 CSS 支持非常弱甚至会把style标签直接忽略。所以邮件模板的经典做法是用表格布局、内联样式、兼容性最好的属性。这个练习能倒逼你回到最朴素的 HTML对理解浏览器的渲染规则很有帮助。一个最小可用的邮件模板骨架大致是table rolepresentation width100% cellpadding0 cellspacing0 border0 bgcolor#f4f4f4 tr td aligncenter stylepadding: 20px; table width600 stylemax-width: 600px; background: #ffffff; tr td stylepadding: 20px; font-family: Arial, sans-serif; font-size: 16px; h2活动通知/h2 p这是一个 HTML 邮件模板。/p a href# styledisplay: inline-block; padding: 10px 20px; color: #ffffff; background: #ff6600; text-decoration: none;立即查看/a /td /tr /table /td /tr /table练习邮件模板时请忘掉 flex 和 rem老老实实用固定宽度表格和 px。做完这个练习你会发现自己平时写页面时很少思考哪些 CSS 特性在极端环境里会失效而这种思考恰恰是做兼容性时最需要的。4.3 其他六个练习每个都是一个小专题列一个表把练习目标和检测标准写清楚方便自测序号练习题目核心练习点完成标准1折叠面板手风琴classList 切换、事件代理点一处只开一处再点可关闭2Tab 切换自定义属性>