WangQuan's Blog

Appearance

HTML ​

HTML 不是“写几个标签”这么简单。

HTML 负责的是：

  1. 页面内容的结构表达
  2. 文档语义的组织
  3. 浏览器解析页面时的基础骨架
  4. 搜索引擎和无障碍工具理解页面的入口

如果 CSS 决定“怎么展示”，JavaScript 决定“怎么交互”，那 HTML 决定的就是：

页面到底是什么。

1. HTML 在解决什么问题 ​

HTML 的核心价值，主要有三层：

  1. 用结构把内容组织起来
  2. 用语义告诉浏览器和开发者“这一块是什么”
  3. 为样式和脚本提供稳定的挂载基础

所以 HTML 真正重要的地方，不在于你会多少个标签，而在于：你是否知道某一段内容为什么应该用这个标签，而不是另一个标签。

2. 一份页面为什么必须先有 HTML ​

浏览器看到一个页面时，并不是看到样式和交互，而是先拿到一份 HTML 文档。

这份文档至少要回答几件事：

  1. 页面标题是什么
  2. 页面有哪些结构块
  3. 文本、链接、图片、表单分别在哪里
  4. 哪些资源需要继续加载

看一条非常简化的主线：

mermaid
flowchart TD
    A[浏览器拿到 HTML 文本] --> B[解析标签与属性]
    B --> C[构建 DOM 结构]
    C --> D[继续加载 CSS JS 图片等资源]
    D --> E[页面完成结构展示]

这条图最值得记住的不是术语，而是：HTML 是页面的起点。

3. 一份标准 HTML 文档长什么样 ​

看一个最基础的例子：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Demo</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>这是一个最基础的页面骨架。</p>
  </body>
</html>

这里几个关键点分别在做什么：

  1. <!doctype html>：告诉浏览器按现代 HTML 标准模式解析页面
  2. <html>：整个文档的根节点
  3. <head>：放页面元信息、标题、资源声明，不直接承载正文内容
  4. <body>：放页面真正可见的主体内容
  5. lang="zh-CN"：告诉浏览器和辅助工具当前文档的语言

3.1 head 和 body 的边界 ​

这两个标签很容易看起来只是“固定模板的一部分”，但职责非常不同。

  1. head 更偏文档说明和资源声明
  2. body 更偏页面可见内容本身

常见放在 head 中的内容有：

  1. title
  2. meta
  3. link
  4. style
  5. 某些需要尽早声明的 script

常见放在 body 中的内容有：

  1. 标题和段落
  2. 图片和列表
  3. 表单
  4. 页面结构容器

4. 语义化到底在解决什么问题 ​

语义化不是为了把标签写得“更像规范示例”，而是为了让标签本身就表达结构含义。

例如：

  1. 导航区域用 nav
  2. 主要内容区用 main
  3. 文章主体用 article
  4. 侧边补充区域用 aside
  5. 页眉和页脚分别用 header、footer

语义化的价值主要在三层：

  1. 代码结构更清楚，团队协作更轻松
  2. 搜索引擎更容易理解页面内容
  3. 屏幕阅读器等辅助工具更容易正确解析页面

也就是说，语义化解决的不是“标签好不好看”，而是：页面结构能不能被人和工具同时更准确地理解。

4.1 常见语义标签可以怎么用 ​

html
<header>
  <h1>技术笔记</h1>
  <nav>
    <a href="/frontend">前端</a>
    <a href="/backend">后端</a>
  </nav>
</header>

<main>
  <article>
    <h2>HTML 是什么</h2>
    <p>HTML 负责页面结构和语义。</p>
  </article>

  <aside>
    <p>相关阅读推荐</p>
  </aside>
</main>

<footer>
  <p>Copyright</p>
</footer>

5. 常见文本与结构标签怎么理解 ​

HTML 里很多标签虽然常见，但职责并不一样。

5.1 标题与段落 ​

最基础也最常见的是：

  1. h1 到 h6
  2. p

要注意的点是：

  1. 标题标签表示内容层级，不只是字体大小
  2. p 更适合承载一段完整文本

5.2 列表 ​

列表最常见的是：

  1. ul：无序列表
  2. ol：有序列表
  3. li：列表项

如果内容本身存在顺序关系，例如步骤说明，更适合用 ol。

5.3 链接和强调 ​

常见包括：

  1. a
  2. strong
  3. em
  4. span

这里最值得注意的是：

  1. a 用来表达可跳转的超链接
  2. strong 更偏重要性强调
  3. em 更偏语义上的强调语气
  4. span 是更中性的局部包裹标签

6. 块级元素、行内元素、行内块元素怎么理解 ​

这是 HTML 和 CSS 交界处最容易混的一组概念。

把这层分工记住：

  1. 块级元素：默认更像一个结构块，通常独占一行
  2. 行内元素：默认和文本排在同一行，更适合包裹局部内容
  3. 行内块元素：不独占一行，但又可以控制宽高

常见例子：

  1. 块级元素：div、p、h1、ul
  2. 行内元素：span、a、strong
  3. 行内块元素：img、input、button

要注意的是：

  1. 块级元素更适合结构分区
  2. 行内元素更适合局部文本语义
  3. 行内块元素常用于横向排列但又需要尺寸控制的场景

7. 表单为什么是 HTML 的重要主线 ​

很多前端交互最后都会落到“用户输入数据”这件事上，所以表单不是边角知识，而是 HTML 的核心能力之一。

常见表单标签包括：

  1. form
  2. input
  3. textarea
  4. select
  5. option
  6. button
  7. label

7.1 一个基础表单示例 ​

html
<form action="/login" method="post">
  <div>
    <label for="username">用户名</label>
    <input id="username" name="username" type="text" />
  </div>

  <div>
    <label for="password">密码</label>
    <input id="password" name="password" type="password" />
  </div>

  <button type="submit">登录</button>
</form>

这里几个关键点要注意：

  1. form 定义一组提交数据的边界
  2. name 会影响表单提交时字段名
  3. label 和控件关联后，可点击范围更自然，也更利于无障碍
  4. button type="submit" 会触发表单提交

7.2 常见输入类型 ​

input 并不是只有文本框。

常见类型包括：

  1. text
  2. password
  3. email
  4. number
  5. checkbox
  6. radio
  7. file
  8. date

不同类型不只是“UI 不同”，还会影响：

  1. 浏览器默认校验方式
  2. 移动端输入法表现
  3. 用户输入体验

7.3 表单原生能力不要忽略 ​

HTML 表单本身已经提供了一些很实用的能力，例如：

  1. required
  2. placeholder
  3. disabled
  4. readonly
  5. maxlength

这些能力不一定能替代完整业务校验，但它们能提供第一层输入约束和更好的交互反馈。

8. 图片、多媒体和嵌入内容怎么理解 ​

HTML 不只承载文本，也承载多媒体内容。

8.1 图片 ​

最常见的是 img：

html
<img src="/images/avatar.png" alt="用户头像" />

这里最容易被忽略的是 alt。

alt 不是装饰性属性，而是：

  1. 图片加载失败时的替代说明
  2. 屏幕阅读器理解图片含义的文本入口
  3. 页面可访问性的重要组成部分

8.2 音视频 ​

HTML5 提供了原生：

  1. audio
  2. video

例如：

html
<video controls width="480">
  <source src="/videos/demo.mp4" type="video/mp4" />
</video>

这类标签让浏览器具备了更直接的多媒体播放能力，而不需要完全依赖第三方插件。

8.3 嵌入内容 ​

有时还会看到：

  1. iframe
  2. embed
  3. object

其中 iframe 最常见，但也要特别注意：

  1. 它会引入一个独立文档上下文
  2. 对样式、交互、性能和安全都有额外影响

9. src 和 href 的区别 ​

这两个属性很容易看起来差不多，但含义并不一样。

可以直接把它看成：

  1. src 更像“把资源本体引进来使用”
  2. href 更像“和某个外部资源建立引用关系”

例如：

场景常见属性
图片、脚本、音视频src
超链接、样式表、站内跳转href

所以：

  1. img、script 常用 src
  2. a、link 常用 href

10. script、defer、async 的区别 ​

script 标签不只是“引 JS 文件”，它还直接影响 HTML 解析和脚本执行顺序。

把这三种加载方式放在一起看：

  1. 普通 script：下载和执行都会阻塞 HTML 解析
  2. async：脚本异步下载，下载完就立即执行，不保证多个脚本顺序
  3. defer：脚本异步下载，但会等 HTML 解析完成后按顺序执行

如果压缩成一句话：

  1. async 更适合彼此无依赖的独立脚本
  2. defer 更适合有顺序要求的业务脚本

10.1 为什么这件事和 HTML 有关 ​

因为浏览器解析 HTML 时，会一边读文档，一边决定：

  1. 哪些资源要继续加载
  2. 哪些脚本会阻塞后续解析
  3. 页面结构什么时候能先建立起来

所以资源声明方式本身，就是 HTML 主线的一部分。

11. SEO 和无障碍为什么都离不开 HTML ​

很多人会把 SEO 和无障碍理解成“额外优化项”，但它们很多时候首先是 HTML 结构问题。

11.1 SEO 和 HTML 的关系 ​

搜索引擎首看到的，是文档结构。

更合理的 HTML 通常意味着：

  1. 标题层级更清楚
  2. 主要内容更明确
  3. 链接关系更自然
  4. 元信息更完整

11.2 无障碍为什么值得在 HTML 阶段就考虑 ​

无障碍不是“后面再补几个属性”的问题，它很多时候从 HTML 结构阶段就已经决定了。

最基础也最常见的做法包括：

  1. 使用正确的语义标签
  2. 图片补上合适的 alt
  3. 表单控件和说明文字建立关联
  4. 让页面支持键盘操作
  5. 必要时使用 aria-* 属性补充语义

真正要先立住的是：无障碍首先依赖正确的结构和语义，其次才是额外属性补充。

12. 工程上最容易踩的坑 ​

12.1 用一堆 div 代替本该有语义的标签 ​

这样页面虽然也能显示，但结构表达会越来越差。

12.2 把标题标签只当成“大号字体” ​

标题层级不仅影响样式，也影响页面结构和 SEO 理解。

12.3 表单里只写输入框，不写 label ​

这会让可访问性和可操作性都变差。

12.4 图片省略 alt ​

这通常会直接损失页面可访问性表达。

12.5 不了解脚本加载方式就随意写 script ​

这很容易导致解析阻塞或执行顺序问题。

13. 一份检查清单 ​

写一份 HTML 页面时，至少可以自查下面这些问题：

  1. 页面骨架是否完整
  2. 标题层级是否自然
  3. 结构标签是否有语义
  4. 表单是否正确关联 label
  5. 图片是否补了合适的 alt
  6. 脚本加载方式是否符合依赖顺序
  7. 是否为 SEO 和无障碍保留了必要结构信息

14. 小结 ​

如果把 HTML 压缩成一句话，可以记住：HTML 负责定义页面内容的结构和语义，是整个前端页面的骨架。

如果继续往下读，最自然的下一步是进入 CSS，因为有了页面骨架之后，接下来就该看它怎么被布局和展示。

基于 VitePress 构建的个人技术笔记。

Copyright © 2026 WangQuan's Blog