跳到主要内容

HTML 知识体系概览

什么是 HTML？​

HTML（HyperText Markup Language，超文本标记语言） 是构建网页的骨架语言。当你在浏览器中看到的每一个网页——文字、图片、按钮、输入框——它们的结构都是由 HTML 定义的。

一个最简单的 HTML 示例：

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>这是一个段落。</p>
  </body>
</html>

HTML 并不是编程语言——它没有变量、循环、条件判断。它是一种标记语言，用"标签"（如 <h1>、<p>、<div>）来描述页面的结构和语义。CSS 控制外观（颜色、布局），JavaScript 控制行为（交互、动态），三者共同构成了前端开发的基石。

为什么 HTML 基础很重要？​

很多人觉得 HTML 只是写写标签，没什么好学的。但面试中 HTML 的考察往往出乎意料地深入：

  1. 语义化：为什么要用 <article> 而不是 <div>？这直接影响 SEO 排名和屏幕阅读器对页面的理解
  2. 可访问性（A11Y）：企业级网站必须满足 WCAG 标准，否则可能面临法律风险
  3. 表单处理：用户输入、数据校验、文件上传——这些都建立在 HTML 表单之上
  4. Canvas & SVG：数据可视化、图片处理、游戏开发的底层图形能力
  5. Web Components：浏览器原生的组件化方案，不依赖任何框架
一句话总结

HTML 决定了网页"是什么"（语义），CSS 决定了"长什么样"（样式），JavaScript 决定了"做什么"（交互）。HTML 写得好不好，直接影响页面的 SEO、可访问性和可维护性。

核心知识点概览​

语义化与可访问性​

语义化是面试最高频的 HTML 考点。核心理念是：用正确的标签做正确的事。用 <nav> 表示导航、<main> 表示主内容、<footer> 表示页脚——而不是一路用 <div> 到底。语义化标签不仅让代码更可读，还能帮助搜索引擎理解页面结构，帮助残障用户使用屏幕阅读器浏览网页。

HTML5 新特性​

HTML5 带来了大量新能力：<video> / <audio> 多媒体标签、Canvas 画布、拖拽 API、Web Storage（localStorage / sessionStorage）、Geolocation 地理定位等。这些 API 极大丰富了浏览器端的原生能力。

meta 标签与 SEO​

<meta> 标签控制着搜索引擎如何理解和展示你的页面。viewport 设置影响移动端适配，Open Graph 协议决定了链接在社交媒体上的展示效果，结构化数据（JSON-LD）帮助搜索引擎提取关键信息。对于做过 C 端产品的同学，这是面试中的加分项。

表单与验证​

表单是 Web 应用中最基础的用户交互方式。HTML5 新增了 email、url、date 等 input 类型，以及 required、pattern 等原生验证属性，能在不写 JavaScript 的情况下完成基本校验。在 React/Vue 项目中，表单处理更是需要理解受控组件与非受控组件的区别。

Canvas 与 SVG​

Canvas 是像素级的画布，适合高性能图形渲染（游戏、数据可视化）；SVG 是矢量图形，适合图标、插画、简单动画。两者在面试中常被对比——Canvas 是命令式 API，SVG 是声明式标记语言，各有适用场景。

Web Components​

Web Components 是浏览器原生的组件化标准，包括 Custom Elements（自定义标签）、Shadow DOM（样式隔离）、HTML Templates（模板）。它不依赖 React 或 Vue，是真正"框架无关"的组件方案，在微前端、设计系统中越来越多见。

学习建议​

推荐学习路径
  1. 先掌握语义化 & 可访问性 → 面试最高频考点，也是写出专业 HTML 的基础
  2. 熟悉 HTML5 新特性 → 了解现代 HTML 的能力边界
  3. 深入 meta 与 SEO → 对做过 C 端项目的同学尤其重要
  4. 表单验证 → 几乎每个项目都会涉及
  5. Canvas/SVG 和 Web Components → 根据项目经验选择性深入

相关链接​