Skip to content

HTML 核心知识点

HTML (HyperText Markup Language) 是构建 Web 的基础。

1. 语义化 (Semantics)

使用正确的标签包含内容,有利于 SEO 和无障碍访问 (A11y)。

  • 结构标签: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
  • 文本标签: <strong> (重要), <em> (强调), <mark> (高亮)
  • 多媒体: <figure>, <figcaption>

2. 核心特性

2.1 DOCTYPE

<!DOCTYPE html> 告诉浏览器使用标准模式 (Standards Mode) 渲染,而非怪异模式 (Quirks Mode)。

2.2 Meta 标签

html
<!-- 设置视口,用于移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1, 关键词2">

2.3 Script 加载

  • <script src="...">: 阻塞解析,下载并立即执行。
  • <script defer src="...">: 推荐。并行下载,文档解析完成后按顺序执行。
  • <script async src="...">: 并行下载,下载完立即执行(可能阻断解析,顺序不确定)。

3. HTML5 新特性

  • Canvas & SVG: 绘图与矢量图。
  • Drag and Drop API: 拖放接口。
  • Web Storage: localStorage, sessionStorage.
  • WebSocket: 全双工通信。
  • Semantic Elements: 上述的 <article> 等。
  • Form Enhancements: <input type="date">, email, url, placeholder, required.

4. 关键面试题

  • src 和 href 的区别?
  • HTML5 有哪些新特性?
  • 如何优化图片的加载(Lazy load, WebP, srcset)?
  • 什么是 Shadow DOM (Web Components 的一部分)?

MIT Licensed | Keep Learning.