Skip to content

第一章:HTML 结构与语义 ​

HTML 首先描述内容之间的关系,然后浏览器才把这棵树交给样式、脚本和辅助技术。学习本章时不要把标签当作视觉组件名称;同样看起来像按钮的两个元素,键盘行为、可访问性和默认表单行为可能完全不同。

阅读顺序 ​

  1. 文档结构三件套
  2. head 里的元信息
  3. 语义化标签家族
  4. 标题层级与文档大纲
  5. 文本内容标记
  6. 列表与描述列表
  7. 链接与导航
  8. 图片与媒体
  9. 原生交互元素
  10. 表格的正确用法
  11. 表单结构与控件
  12. 全局属性与无障碍
  13. 字符实体与编码

先完成前三篇,再回到本章入口按列表顺序继续阅读。表格、表单、全局属性和编码篇会把结构知识连接到真实内容与交互。

本章实验 ​

创建一个只有 <!doctype html>、html、head 和 body 的页面,逐步加入标题、导航和主要内容。每次只加入一个结构,打开开发者工具的 Elements 面板,确认浏览器构造出的 DOM 与源代码意图一致。

本章自测 ​

  • 为什么 <!doctype html> 不是普通元素?
  • 为什么视觉上像标题的文本仍然不能用任意 div 替代 h1?
  • 一个导航区域里,哪些内容应该由 nav 表达,哪些内容不应该放进去?

返回 HTML & CSS 全书导读

用心记录每一步成长