做了这么多年前端几乎每周都会有人拿一个.html文件来问我这文件到底怎么打开为什么双击之后浏览器能显示页面用记事本打开却是满屏尖括号其实 HTML 没有大多数人想象中那么玄。HTML 的全称是 HyperText Markup Language中文叫超文本标记语言它不是编程语言而是一套用来描述网页内容结构的标记规则HTML5 就是这套规则目前最主流的版本。招聘网站、博客后台、管理界面、各种节日祝福 H5底层跑的都离不开标签。这篇文章会把 HTML 和 HTML5 基础按我平时带新人的思路重新讲一遍先看页面骨架再逐个吃透常用标签然后进入 HTML5 重点特性最后用几个能直接上手的小案例把知识点串起来。适合完全零基础的同学也适合学过一点但总是记不住标签语义、想看目录当手册用的朋友。我会尽量少讲教材废话多讲实际写页面时会踩的坑。1. HTML 到底是什么先从一份完整页面拆起1.1 最简页面拆解DOCTYPE、html、head、body刚开始学 HTML不需要急着记几百个标签先把一个页面的骨架搭明白。下面这段代码是合法 HTML 文档中最常见的起点也是你在任何网页右键查看源代码时最先看到的样子!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好HTML/h1 p这是正文。/p /body /html这段代码里!DOCTYPE html是全篇最容易被忽略的一行但它决定了浏览器用哪种模式渲染页面。写上它浏览器进入标准模式CSS 布局基本按规范来不写浏览器可能进入怪异模式盒模型、图片对齐都会出现各种历史遗留怪癖。早期 IE 时代没有这行声明同一个页面在不同浏览器里长得完全不一样。今天很多 CSS 兼容性问题的起点就在这所以哪怕你只写三行 HTML我也建议把 DOCTYPE 带上。html langzh-CN是根元素所有标签都包在它里面。lang 属性告诉浏览器和搜索引擎这个页面主要使用哪种语言zh-CN 表示简体中文en 表示英文。它对无障碍读屏软件的发音选择、浏览器自动翻译提示、搜索引擎语言识别都有影响。初学者最容易犯的错是把 lang 当成编码设置实际它只是语言标记真正管编码的是下一行的 meta。head区域的内容不会直接显示在网页主体上它更像后台档案室编码信息、页面描述、样式表引入、标题都在这里。meta charsetUTF-8是中文页面能不能正常显示的关键乱码问题十有八九是文件实际编码不是 UTF-8或者这一行没写、写错。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的基础它让页面宽度跟随设备宽度而不是模拟桌面端。做手机 H5 没有这行文字会小得需要双击放大。title是浏览器标签页上显示的文本也是搜索引擎结果里的主标题千万别写一串无意义的默认名。body里才是用户真正看到的内容标题、段落、图片、按钮都放在这里。把一个 HTML 文件比作一篇文章head是题名、作者和摘要body才是正文。1.2 标签、元素、属性的关系HTML 的构成单位是元素一个元素通常由开始标签、内容和结束标签组成。比如p你好/p其中p是开始标签/p是结束标签。也有少数空元素不需要内容比如img、br、input它们没有结束标签HTML5 里直接写img就行。标签名不区分大小写但我建议统一小写团队协作更省心。属性是写在开始标签里、用来给元素补充信息的键值对。比如a hrefhttps://example.com链接/ahref 是属性名地址是属性值。属性值可以用双引号、单引号甚至某些情况下不写引号但规范做法是始终加双引号避免值里带空格时浏览器解析出错。常见的全局属性有 id、class、style、title、hidden它们几乎可以用在所有元素上。布尔属性比较特殊input disabled的存在就表示值为 true不需要写成 disabledtrue。HTML5 规范里元素的展示特性被进一步弱化取而代之的是内容分类流式内容、短语内容、嵌入内容、交互内容等。但前端老人口中常说的块级元素和行内元素对快速理解布局仍然非常有用。块级元素默认独占一行能设置宽高、内外边距例如 div、p、h1、ul、table行内元素默认在同一行排列宽高由内容决定例如 span、a、strong、em。两者可以用 CSS 的 display 属性互相转换。嵌套规则是高频翻车点。段落p里面不能放div列表ul或ol的直接子元素只能是libutton里不能再嵌套buttonform不能嵌套另一个form。浏览器遇到非法嵌套不会报错而是自动纠错把 DOM 结构重新解释结果往往是样式错位、布局诡异。所以写代码时要想想每个标签允许装什么内容这比记一堆标签名更重要。2. 基础标签怎么用才算到位2.1 文本排版标题、段落、列表、引用网页内容一半以上是文字文本标签的使用频率极高。标题用 h1 到 h6h1 一个页面只建议出现一次通常放网站名称或文章大标题h2 到 h6 按层级使用不要从 h1 直接跳到 h4。标题的作用是表达信息层级不是调字号如果只是想让某行字变大应该用 CSS 的 font-size而不是硬选一个标题标签。搜索引擎和读屏软件都靠标题层级理解页面结构用错标题会让页面结构非常混乱。段落用p包裹一个 p 就是一段文字浏览器会自动在段前段后加间距。很多人写 HTML 时会用一堆br换行模拟段落间距这个习惯一定要改掉段间距交给 CSS 的 margin 控制。需要强调的文本可以用strong表示重要em表示语气重读b和i在 HTML5 里已经偏向纯样式标签除非你确定只是加粗或斜体否则优先用 strong 和 em。列表方面无序列表ul加li适合并列关系有序列表ol加li适合有先后顺序的内容。导航菜单、功能列表、步骤说明基本都是列表结构。列表可以嵌套但层级要清晰。长段引用用blockquote行内引用用q显示代码时用code包内联代码整块代码用pre保留空格和换行。这些在博客、文档页面里很常见基础阶段就应该记住。h1前端入门笔记/h1 p今天是第一次写 HTML先学会把结构搭清楚。/p h2学习清单/h2 ol li掌握文档骨架/li li熟悉常用标签/li li理解 HTML5 新特性/li /ol blockquote代码不是背出来的是改出来的。/blockquote p在控制台输入 codedocument.title/code 可以看到当前页面标题。/p2.2 链接、图片、路径链接是超文本的灵魂。a标签的 href 可以指向网页地址、页面内锚点、邮箱地址、电话甚至本地文件。target_blank表示在新标签页打开但要注意新窗口打开的链接最好加上relnoopener避免新页面通过 window.opener 反向控制原页面这是一个安全细节。title属性可以作为悬停提示但不是必填。锚点跳转是单页内定位的常用方式。给目标元素一个 id再用a href#section就能跳过去。配合 CSS 的scroll-behavior: smooth跳转会有平滑滚动效果。很多“一键返回顶部”就是锚点跳转的变体后面会单独讲。图片用img标签src 是来源alt 是替代文本。alt 不只给盲人用户读图片加载失败时浏览器也会显示 alt 文本所以不要留空除非图片纯粹是装饰。宽度高度建议在标签里写出来哪怕 CSS 会覆盖这样布局不会在图片加载前突然跳动。现代浏览器支持loadinglazy可以让不在视口范围内的图片延迟加载提升首屏速度。路径分两种相对路径和绝对路径。绝对路径是完整 URL相对路径是相对于当前文件的位置。同一目录直接写文件名子目录写image/logo.png上级目录用../。很多人在本地打开能显示图片放到服务器上却一片空白八成是路径写错了。基础阶段建议先把相对路径练熟再去看 CDN 地址之类。2.3 表格和表单收集数据的基本功表格在早年被大量用来做页面布局现在它回归本职工作展示结构化数据。一个标准表格由table包裹内部用thead放表头、tbody放数据行、tfoot放汇总行用tr单元格用th或td。这样写代码量多一点但浏览器和辅助工具能正确读出表头与数据的关系样式也好控制。colspan和rowspan分别控制跨列跨行做合并单元格时会用到。表单是网页和用户交互的主要入口。基础结构是form包住一堆表单控件action 表示提交到哪个地址method 表示用 GET 还是 POST。新手测试时可以直接写methodget action点提交后地址栏能看到?namexxxage18这就是 GET 提交的数据格式非常直观。每个要提交的控件都必须有 name 属性没有 name 的控件值不会出现在提交数据里这是最容易被忽略的坑。控件部分文本输入用input typetext密码用 typepassword单选 typeradio 同一组 name 必须相同多选 typecheckbox提交按钮 typesubmit 或button typesubmit。下拉选择用select包option多行文本用textarea它不是自闭合标签必须写成textarea/textarea。每个输入控件最好配一个label让 label 的 for 指向控件的 id这样点击文字也能聚焦到输入框移动端体验会好很多。文本输入框应当给出 placeholder 提示但 placeholder 不能替代 label。必填项加 required限制格式可以用 HTML5 的 pattern 属性表单增强部分还会展开。表单是前后端数据流转的第一站基础阶段务必要理解 name、value、提交方式这三个概念。3. HTML5 有哪些新特性值得在基础阶段掌握3.1 语义化标签header、nav、main、articleHTML5 最直观的变化不是多了一堆炫酷 API而是把标签分成结构与语义两类。旧时代整个页面全是 div看代码根本分不清哪里是导航哪里是正文。HTML5 引入了 header、nav、main、article、section、aside、footer 这些语义化标签让一段 HTML 即使不看 CSS也能大概看出页面布局。语义化的好处有两个对搜索引擎友好爬虫能准确识别主要内容对读屏软件友好视障用户跳转导航、跳过页眉更方便。基础阶段可以用一套最稳的骨架body header h1网站标题/h1 nav ul lia href/首页/a/li lia href/about.html关于/a/li /ul /nav /header main article h2文章标题/h2 p文章内容。/p /article aside p相关推荐/p /aside /main footer p版权信息/p /footer /bodyarticle 和 section 的区分记住一句话article 是可以独立发布、完整成文的内容section 只是内容分区。判断方式就是把它单独拿出来内容是否仍然自洽。语义化不是把所有标签都换成新名字。header 通常包含 logo 和标题但也可以出现在 article 内部作为文章头部footer 也不一定只在页面最底部article 内可以有自己的 footer。先理解内容含义再选合适标签。初学者最容易犯的错是导航明明是一个 ul 列表却因为包在 nav 里就忘记写 ul。语义化标签描述的是区块角色内部该用什么标签还用。3.2 多媒体video、audio 与 data: 调试技巧HTML5 之前网页里放视频基本靠插件放音频要靠各种播放器控件兼容性能把人逼疯。HTML5 原生 video 和 audio 标签解决了基础问题。基本写法是video controls width640 postercover.jpg source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 您的浏览器不支持 video 标签。 /videocontrols 显示播放控件poster 设置封面图。为了兼容不同浏览器可以准备 mp4 和 webm 两种格式用 source 标签按顺序列出浏览器会从上往下选第一个能播的。全都播不了时fallback 文字会显示。不要忘了写 fallback 内容这是基础中的基础。音频标签 audio 用法与 video 几乎一致常用属性是 controls、loop、muted、preload。有个实际经验autoplay 属性在很多浏览器里不会生效因为自动播放策略要求有声内容必须先得到用户交互。如果确实需要打开页面自动播放背景音乐通常得静音自动播放再放一个按钮让用户点击后开启声音。做节日祝福 H5 时BGM 开关按钮几乎是标配。这里分享一个调试技巧在浏览器地址栏直接输入data:text/html,h1你好/h1回车后会直接渲染出这个 HTML 页面。不需要建文件不需要开服务器适合快速验证一个标签或一小段 HTML 是否生效。内容稍长时可以 URL 编码后再拼进去。我经常用它给新人演示 h1 和 p 的默认样式差异。3.3 表单增强type 与原生校验HTML5 给表单加了一批原生控件和属性让基础校验不依赖 JavaScript。最常用的是 input 的 type 新取值typeemail 会校验邮箱格式typeurl 校验网址typenumber 只允许数字输入typerange 显示滑块typedate 弹出日期选择器typecolor 弹出取色器。移动端还会根据 type 调出不同键盘比如 email 弹出带 符号的键盘tel 弹出数字键盘。input typeemail nameemail required placeholder请输入邮箱 input typedate namebirthday input typerange min0 max100 value50 namepercent input typetel namephone pattern[0-9]{11} placeholder11位手机号required 表示必填placeholder 显示占位提示pattern 用正则表达式限制输入格式。这些校验在高级浏览器里会阻止表单提交并弹出提示但要注意它们只是前端体验层面的约束真正的数据合法性必须在后端再校验一次。前端校验防误触后端校验防攻击这个原则从第一天学就要记住。表单增强有几个坑typenumber 在桌面端可以用滚轮改数字购物车数量偶尔会因此被误改所以数值输入不一定要用 number需要验证格式时也可以用 text 加 pattern。typedate 的默认格式在不同语言区域浏览器里不一样别指望它输出统一格式。如果只是让用户输年份用 text 加 pattern 反而更稳定。3.4 画布与本地存储canvas、localStorageHTML5 的 canvas 标签是一块画布真正让它动起来的是 JavaScript。基础使用路径是获取 canvas 元素、拿到 2d 绘图上下文、用 fillRect、arc、beginPath、stroke 等方法画图形配合 clearRect 清屏和 requestAnimationFrame 做动画。很多爱心粒子特效、字符雨、烟花动画核心都是这一套。const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); ctx.fillStyle #ff6699; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fill();纯 HTML 只提供画布canvas 标签本身不会画画请把 canvas 和绘图 API 当作一个整体理解。本地存储是 HTML5 提供的浏览器端存储能力localStorage 数据永久保存sessionStorage 在标签页关闭后清除。API 只有四个常用方法setItem、getItem、removeItem、clear。存储的值必须是字符串想存对象要先 JSON.stringify取出来再 JSON.parse。const user { name: 小明, age: 18 }; localStorage.setItem(user, JSON.stringify(user)); const str localStorage.getItem(user); const obj JSON.parse(str); console.log(obj.name);这个能力后来被大量用于保存主题设置、购物车数据、表单草稿。基础阶段不需要深入封装只要理解使用场景和限制即可容量一般 5MB 左右不能存敏感信息。4. 从基础到实用三个能直接上手的小案例4.1 一键返回顶部组件“HTML 一键返回顶部算法”不是算法题而是一个典型的事件绑定和滚动判断逻辑。最简单粗暴的版本是a href#返回顶部/a但这样点击后地址栏会多一个 #体验一般。稍好一点的做法是用 JavaScript 监听滚动位置显示或隐藏按钮再用 window.scrollTo 平滑滚动。a href# idbackTop classback-top aria-label返回顶部返回顶部/a.back-top { position: fixed; right: 20px; bottom: 20px; display: none; padding: 10px 14px; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 6px; text-decoration: none; }const backTop document.getElementById(backTop); window.addEventListener(scroll, function () { if (window.scrollY 200) { backTop.style.display block; } else { backTop.style.display none; } }); backTop.addEventListener(click, function (e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: smooth }); });这段代码把 HTML 结构、CSS 展示、JS 行为串在了一个 20 行的小场景里。要点有两个href# 要阻止默认跳转否则行为不统一判断条件用 window.scrollY但如果页面滚动容器不是 window而是某个 overflow: auto 的 div就要监听那个容器的 scroll 事件不能套用。改造别人页面时第一步先确定滚动容器是谁。4.2 节日祝福页中秋、生日、表白搜“中秋祝福 html”“生日快乐 html 网页”“表白代码 html”的同学特别多。这些页面的本质都是好看的背景、有意义的文字、合适的音乐、一点动画。先把静态祝福页搭好比一上来抄满屏粒子特效靠谱得多。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title中秋快乐/title style body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff8e7; font-family: 楷体, KaiTi, serif; text-align: center; } img { max-width: 80%; border-radius: 12px; } /style /head body h1中秋快乐/h1 p月圆人圆事事圆满/p img srcmoon.jpg alt一轮明月 audio controls loop srcbgm.mp3/audio /body /html把这个模板改成生日日期、祝福语、表白对象换一张图、一首歌就是一个能直接发出去的静态页面。进阶一点的爱心代码通常是在 body 底部挂一个 canvas用 JS 循环画粒子并按心形轨迹运动。想做出“会动的祝福”路线是先写好静态页面再引入一个小动画模块不用一上来就啃动画库。背景音乐有个经验不要依赖 autoplay把 audio 的 controls 显示出来用户想听就点。如果非要自动播放第一版先 muted 播放再在页面任意位置放一个“开启声音”按钮点击后才打开声音。这个方案符合浏览器的自动播放策略用户接受度也更高。4.3 一个简单的天气信息模块“百度首页天气 HTML 制作”也是一类高频搜索。其实天气模块的页面语法并不复杂复杂的是数据从哪来。早期很多网站都是后端把天气数据拼成 HTML 片段吐给前端前端直接插入页面容器。所以前端基础阶段要做的是先用 HTML 把天气信息的结构列出来。div classweather-card h2北京天气/h2 p classtoday今天 晴 18°C / 8°C/p ul li明天 多云 20°C / 10°C/li li后天 阴 17°C / 9°C/li /ul /div再往后你可以用 fetch 请求天气接口拿到 JSON 数据后用 JavaScript 动态替换文本。基础阶段别急着上框架把上面的卡片样式做好再用 setTimeout 模拟数据延迟更新一次你就理解了前端渲染数据的核心套路结构固定内容替换。HTML 还有一个常被忽略的应用场景是邮件。真正发送出去的 HTML 邮件规则和普通网页完全不同邮件客户端不允许 JavaScript外部 CSS 也经常失效所以业内老做法是用表格布局加内联 style图片必须是绝对地址。以后做订阅邮件、通知邮件时再把这段经验捡起来。同一个 HTML 放到不同环境里会有不同约束这是需要注意的。5. 常见问题与避坑指南5.1 中文乱码与 meta charset 的真相新手最常见的页面问题就是打开 HTML 后中文全是乱码。原因通常有两个文件本身不是 UTF-8 编码或者 head 里缺少meta charsetUTF-8。meta charset是告诉浏览器按 UTF-8 解码它和文件实际存储编码是两回事。用记事本把文件存成了 ANSI只加 meta 没有用必须把文件另存为 UTF-8 编码。处理 WPS 表格转 HTML 时我也遇到过类似问题。WPS 或老版 Excel 另存为网页生成的 HTML 通常带大量冗余标签编码可能是 GBK 或 GB2312浏览器打开乱码编辑器打开满屏 style。建议用 VS Code 打开右下角看到编码后选择“通过编码重新打开”改成 UTF-8再另存为。如果只是展示表格数据别直接用转换工具把数据导出成 CSV 或 JSON在网页里用 JS 渲染成表格可控性强得多。如果遇到 HTML 转 Markdown可以用一条命令完成pandoc input.html -o output.md。复杂表格转换后大概率变形需要人工检查。这些小技巧不算是 HTML 基础本身但能帮你从别人手里接过 HTML 文件时少走弯路。5.2 多个 HTML 文件怎么管理和打包当一个项目不止一个页面很多人会问“多个 HTML 文件怎么打包”。先别急着上工具把目录结构理顺静态页面本身就能被浏览器逐个访问。一个常见的小站点结构长这样site/ ├── index.html ├── about.html ├── contact.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── logo.png └── banner.jpgindex.html 是默认首页其他页面通过a hrefabout.html相互跳转。公共的页头、导航、页脚可以先复制粘贴等学了 JavaScript 后写一个公共组件脚本再往后会用模板语言或组件化框架。如果基础阶段就惦记着打包我的建议是先把相对路径理解透打包本质上是构建工具把多个 HTML 和资源文件复制到 dist 目录并统一改好路径引用。真正需要打包多个 HTML 时常见场景是 Vite 或 Webpack 的多页面应用。Vite 会要求为每个页面配置入口但开发时 public 目录里的 HTML 会被原样复制不需要编译。基础阶段不需要在这里花太多精力知道有这个概念即可。很多优秀的分页站点其实就是多个 .html 文件加相对链接部署到任何静态服务器上都能跑。5.3 编辑器选择Windows、macOS 与 UbuntuWindows、macOS、Linux 我都用过最推荐的是 VS Code跨平台免费、插件生态好。装了 Live Server 插件后右键 HTML 文件选择 Open with Live Server浏览器会打开本地服务代码保存后页面自动刷新省去来回切换窗口的功夫。这对新手非常友好因为能立刻看到每一步修改的效果。编辑器平台特点适合人群VS CodeWindows / macOS / Linux插件丰富、免费、社区活跃大多数前端学习者Sublime Text全平台轻量、启动快喜欢极简的人NotepadWindows小巧自带编码转换Windows 轻量编辑GeditLinux 默认系统自带、够用Ubuntu 快速上手Vim / Neovim全平台终端学习成本高、效率上限高长期终端用户在 Ubuntu 上装 VS Code最省事的方式是官网下载 .deb 安装或者sudo snap install code --classic。如果只是临时改一行 HTML系统自带的 gedit 也能胜任但没有代码高亮之外的提示写大文件很痛苦。不管用哪个编辑器记得把默认编码设为 UTF-8并开启显示空格和换行符方便排查缩进问题。补充一个桌面开发场景PyQt5 显示 HTML。QTextBrowser 支持部分 HTML 标签可以用于富文本展示但遇到完整网页会力不从心真正要显示复杂网页得用 QWebEngineView它基于 Chromium 内核。这个例子想说明HTML 不只是网页专属很多桌面软件和混合应用都嵌入了 HTML 渲染能力所以 HTML 基础是值得认真学的通用技能。6. HTML、CSS、JS 三者到底是什么关系6.1 HTML 负责结构CSS 负责样式JS 负责行为经常有人问学 HTML 是不是还得一起学 CSS 和 JS可以先只学 HTML但最好很快就把三者当成完整体系。可以把网页理解成毛坯房HTML 决定哪里是墙、哪里是门窗这是结构CSS 决定墙刷什么颜色、门窗用什么材质这是样式JS 决定按下开关灯会不会亮、门禁能不能识别这是行为。三者边界不是绝对划分但按这个思路入门会很稳。一个最直观的例子是按钮。HTML 写button登录/button页面出现一个无名按钮CSS 给它设置背景色、圆角、阴影按钮变好看JS 监听 click 事件点击后弹出提示或提交表单。同一份 HTML只加 CSS 和 JS就能演化出无数个样子。这也是前端框架大行其道的今天HTML 基础却从未被淘汰的原因。6.2 在 HTML 中引入 CSS 和 JS 的几种方式CSS 有三种引入方式外部样式表、内部样式、内联样式。日常项目用外部样式表一个 style.css 文件用link relstylesheet hrefstyle.css引入单页面临时演示可以用内部style内联写p stylecolor: red虽快却难以复用不推荐在生产环境使用。把 CSS 放在 head 里能让页面解析时提前拿到样式避免白屏闪烁。JS 也有外部文件和内部代码两种主要引入方式。外部script srcmain.js/script最常见内部script适合页面级小逻辑。需要注意普通 script 的默认行为是下载并立即执行如果放在 head 里可能阻塞后续 HTML 解析所以传统做法是把 script 放在 body 底部确保 DOM 已经生成。现代浏览器推荐给 script 加 defer 属性让它延迟到文档解析完成后再执行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML CSS JS 联动/title link relstylesheet hrefstyle.css /head body button idloginBtn登录/button script defer srcmain.js/script /body /html如果页面里既有外部 script 又有内部 script执行顺序取决于它们出现的先后和 defer 行为。基础阶段别依赖这个顺序尽量把逻辑拆分得清晰一点。6.3 学习路线建议从“能用”到“好用”HTML 基础不需要背大量标签应该以“能读懂结构、能写出页面”为目标。建议按这个顺序推进第一周把文档骨架、文本、列表、链接、图片练熟能做一个个人介绍页第二周学表格和表单能做注册页第三周接触 HTML5 语义化、多媒体、本地存储把之前的页面改造一遍接下来再学 CSS然后是 JavaScript 基础最后可以考虑简单项目。每次练习最好带一个真实的页面目标不要只在空白文件里敲标签。比如做“我的学习清单”页面、“生日祝福”页、“天气卡片”页。过程中遇到不认识但不断出现的标签就去 MDN 查不用强记。同一段 HTML 可以在浏览器开发者工具里删掉某个标签观察布局变化再撤销这是最快的学习反馈。我在实际带人时最常说的一句话HTML 是前端的骨架骨架立不住后面 CSS 和 JS 都是无根之木。遇到陌生代码先别急着复制先把 doctype、head、body 这三层台阶踩稳再沿着标签一层层拆下去很多问题自然就解决了。