HTML是前端开发的准入门槛，本质是用语义化标签（如<h1><p><img>）标记内容结构而非编程，需掌握DOCTYPE声明、lang和charset设置、常见标签用法及嵌套规范。

HTML不是“可学可不学”的技能，而是前端开发的准入门槛——没有它，CSS 和 JavaScript 就像没有地基的装修和电器，根本无处依附。

HTML 是什么：别被“语言”俩字吓住

HTML 全称是 HyperText Markup Language，但它不是编程语言，没有 if、for、函数或变量。它只做一件事：用标签（比如 <h1>、<p>、<img>）给内容打标记，告诉浏览器“这是一级标题”“这是一段文字”“这是一张图”。浏览器照着这些标记把内容渲染成你看到的网页。

常见误解：

• 写错一个 </div> 不会报错，但可能导致布局错乱——因为 HTML 容错强，但结构逻辑已损坏
• 用 <b> 加粗 ≠ 用 <strong> 加粗：<b> 只是样式，<strong> 表达语义重要性，对 SEO 和屏幕阅读器有实际影响
• <div> 不是万能筐：滥用会导致结构模糊，现代写法优先用 <header>、<nav>、<main> 等语义化标签

第一个 HTML 文件怎么跑起来：三步不踩坑

新手常卡在“写了代码却看不到效果”，问题往往出在细节：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 文件名必须以 .html 结尾（如 index.html），不能是 index.txt 或没后缀
• 保存时，“编码格式”选 UTF-8（记事本里要手动选“另存为 → 编码 → UTF-8”；VS Code 默认就是，但右下角可确认）
• 双击打开时，确保是用浏览器（Chrome / Edge）打开，而不是用记事本或 Word 打开——后者只会显示源码

最小可运行示例（复制进文件即可）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试页</title>
</head>
<body>
  <h1>Hello HTML</h1>
  <p>这是第一段</p>
</body>
</html>

哪些标签必须立刻会用：按使用频率排序

不用背全表，先掌握这 6 类高频标签，覆盖 90% 的静态页面需求：

• <h1>–<h6>：标题层级，<h1> 全页只能有一个，代表主主题
• <p>：段落，不是换行，别用多个 <p></p> 模拟空行
• <a href="xxx">：链接，绝对路径写 https://...，相对路径写 about.html 或 ./images/logo.png
• <img src="xxx" alt="xxx">：图片必带 alt 属性，不仅是无障碍要求，也是图片加载失败时的兜底文案
• <ul>/<ol> + <li>：列表结构清晰，比用 <br> 手动排版更可靠、更易维护
• <form> + <input type="text"> + <button type="submit">：表单交互起点，注意每个 <input> 最好配 <label for="xxx">

容易被忽略的底层细节：决定长期可维护性

初学者能写出“看起来对”的页面，但真正拉开差距的是这些不起眼的点：

• <meta charset="UTF-8"> 必须放在 <head> 最前面，否则中文可能乱码——哪怕你当前没中文，也得写上
• <html lang="zh-CN"> 中的 lang 属性影响语音朗读、拼写检查、搜索引擎理解，别留空或写错
• 所有自闭合标签（如 <img>、<hr>、<input>）在 HTML5 中不需要写 />，写成 <img src="x"> 即可，加了也不报错但冗余
• 标签嵌套必须合法：<p> 里不能放 <div>（块级元素不能嵌套在行内元素里），这种错误浏览器会自动修复，但修复逻辑不统一，结果不可控