HTML是转行前端第一天就要实战的工具，需立即用它解决真实页面问题；重点掌握文件路径、UTF-8编码、基础标签（img/a）的属性与路径规范、语义化报错场景、CSS/JS混写及本地调试方法。
转行做前端，HTML 不是“起点”，而是你第一天就要用、第二天就要改、第三天就要和 CSS/JS 打交道的活工具。别学“HTML 是什么”，直接学「怎么用 HTML 解决真实页面问题」。
写第一个能被浏览器打开的页面，不是写 <html> 标签
很多人卡在第一步：新建文件、保存、双击打开，结果空白或报错。核心不是语法，是路径和编码。
- 文件名必须以
.html结尾（不能是.txt或没后缀） - 用 VS Code 或 Sublime Text 保存时，编码选
UTF-8（不是 ANSI 或 GBK） - 右键文件 → “在浏览器中打开”，不要拖进浏览器地址栏（可能触发
file://权限限制）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>你好，世界</h1> <p>这是段落</p> </body> </html>
<img> 和 <a> 是你两周内最高频的两个标签
它们看着简单，但 90% 的新人错误都出在路径和属性拼写上。
-
<img src="logo.png">中的logo.png必须和 HTML 文件在同一文件夹，否则要写相对路径如images/logo.png -
<a href="about.html">关于我</a>的about.html也必须存在，大小写敏感（About.html在 macOS/Linux 下打不开） - 别加
target="_blank"就算完事——必须加rel="noopener"防安全漏洞
别背语义化标签，先盯住三个会“报错”的场景
浏览器不报错，但 Chrome DevTools 控制台会警告，或者 SEO/无障碍工具直接标红。这些才是真实工作里被 QA 或测试揪出来的点。
立即学习“前端免费学习笔记（深入）”；
- 标题乱序：
<h2>后面跟<h4>（跳过h3），会被读屏软件误读 - 表单没
<label for="email">对应<input id="email">，移动端点击输入框可能失焦 - 图片没有
alt属性（哪怕写alt=""），WAVE 工具直接标为“严重可访问性问题”
CSS 和 JS 不是“下一步”，是“同一行就开始混写”
纯 HTML 页面没人上线。从第 2 天起，你就得在 <head> 里加 <link rel="stylesheet" href="style.css">，在 <body> 底部加 <script src="main.js"></script>。
- 本地开发时，CSS/JS 文件路径错误比 HTML 标签写错更难排查——浏览器 Network 面板看
Status是 404 还是 200 - 别用在线 CDN 学习初期：比如
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>网络一断就白屏，无法调试 - 先写内联样式练手感：
<p style="color: red; font-size: 14px;">紧急提示</p>，再抽离到 CSS 文件
真正卡住转行者的，从来不是“会不会写 <div>”，而是“改完代码后，为什么页面没变？”——查缓存、查路径、查控制台报错，这三件事每天重复 20 次，比学 100 个标签重要得多。
