HTML是转行前端第一天就要实战的工具，需立即用它解决真实页面问题；重点掌握文件路径、UTF-8编码、基础标签（img/a）的属性与路径规范、语义化报错场景、CSS/JS混写及本地调试方法。

转行做前端，HTML 不是“起点”，而是你第一天就要用、第二天就要改、第三天就要和 CSS/JS 打交道的活工具。别学“HTML 是什么”，直接学「怎么用 HTML 解决真实页面问题」。

写第一个能被浏览器打开的页面，不是写 标签

很多人卡在第一步：新建文件、保存、双击打开，结果空白或报错。核心不是语法，是路径和编码。

• 文件名必须以 .html 结尾（不能是 .txt 或没后缀）
• 用 VS Code 或 Sublime Text 保存时，编码选 UTF-8（不是 ANSI 或 GBK）
• 右键文件 → “在浏览器中打开”，不要拖进浏览器地址栏（可能触发 file:// 权限限制）

  
  


  
你好，世界
  
这是段落

和 的 也必须存在，大小写敏感（logo.png 在 macOS/Linux 下打不开）

别加 images/logo.png 就算完事——必须加 关于我 防安全漏洞

别背语义化标签，先盯住三个会“报错”的场景

浏览器不报错，但 Chrome DevTools 控制台会警告，或者 SEO/无障碍工具直接标红。这些才是真实工作里被 QA 或测试揪出来的点。

• 标题乱序：about.html 后面跟 About.html（跳过 target="_blank"），会被读屏软件误读
• 表单没 rel="noopener" 对应
  ，移动端点击输入框可能失焦
• 图片没有
  属性（哪怕写 h3），WAVE 工具直接标为“严重可访问性问题”

CSS 和 JS 不是“下一步”，是“同一行就开始混写”

纯 HTML 页面没人上线。从第 2 天起，你就得在 里加 ，在 alt 底部加 alt=""。

• 本地开发时，CSS/JS 文件路径错误比 HTML 标签写错更难排查——浏览器 Network 面板看 是 404 还是 200
• 别用在线 CDN 学习初期：比如 网络一断就白屏，无法调试
• 先写内联样式练手感：，再抽离到 CSS 文件

真正卡住转行者的，从来不是“会不会写 ”，而是“改完代码后，为什么页面没变？”——查缓存、查路径、查控制台报错，这三件事每天重复 20 次，比学 100 个标签重要得多。