html是转行前端第一天就要实战的工具，需立即用它解决真实页面问题；重点掌握文件路径、utf-8编码、基础标签（img/a）的属性与路径规范、语义化报错场景、css/js混写及本地调试方法。
转行做前端，HTML 不是“起点”，而是你第一天就要用、第二天就要改、第三天就要和 CSS/JS 打交道的活工具。别学“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 alt="如何转行html_html从零开始转行学习路径【教程】" > 和 <a></a> 的 <img src="logo.png" alt="如何转行html_html从零开始转行学习路径【教程】" > 也必须存在，大小写敏感（logo.png 在 macOS/Linux 下打不开）
images/logo.png 就算完事——必须加 <a href="about.html">关于我</a> 防安全漏洞别背语义化标签，先盯住三个会“报错”的场景
浏览器不报错，但 Chrome DevTools 控制台会警告，或者 SEO/无障碍工具直接标红。这些才是真实工作里被 QA 或测试揪出来的点。
立即学习“前端免费学习笔记（深入）”；
- 标题乱序：
about.html后面跟About.html（跳过target="_blank"），会被读屏软件误读 - 表单没
rel="noopener"对应<h2></h2>，移动端点击输入框可能失焦 - 图片没有
<h4></h4>属性（哪怕写h3），WAVE 工具直接标为“严重可访问性问题”
CSS 和 JS 不是“下一步”，是“同一行就开始混写”
纯 HTML 页面没人上线。从第 2 天起，你就得在 <label for="email"></label> 里加 <input id="email">，在 alt 底部加 alt=""。
- 本地开发时，CSS/JS 文件路径错误比 HTML 标签写错更难排查——浏览器 Network 面板看
是 404 还是 200 - 别用在线 CDN 学习初期：比如
<link rel="stylesheet" href="style.css">网络一断就白屏，无法调试 - 先写内联样式练手感：
，再抽离到 CSS 文件
真正卡住转行者的，从来不是“会不会写 <script src="main.js"></script>”，而是“改完代码后，为什么页面没变？”——查缓存、查路径、查控制台报错，这三件事每天重复 20 次，比学 100 个标签重要得多。
