城市徒步 · 周六 09:00
沿江步道 6 公里，报名后会收到集合地点。
工程与栈 · 开发基础
HTMLHTML
用语义标签说明哪里是标题、地标、操作或链接；结构靠标签被工具读出，不靠外观。
先认出这张活动页，再决定用什么标签
下面就是浏览器里的活动页：默认已用语义标签，读屏能跳到标题，报名和地图都能 Tab。点「报名」看按钮变「已报名」；再试「全换成 div」，失败也写在同一页上。
语义骨架 · 可 Tab：结果长在标题、按钮和链接上。
原因：h1、header、button、a 告诉工具这块是什么。下一步：点「报名」，或试「全换成 div」。
知识点：标签即含义
页上的章已经演示了核心关系，这里只给可复用的命名。
- 结构靠标签：h1、header、button、a 让工具认出这块是什么；外观相近的 div 堆读不到。
- 标题层级：一个 h1 写主题，章节用 h2，不要为了字号跳级。
- 可操作元素：触发动作用 button，跳转用 a[href]；div 冒充的链接不可 Tab。
- 图片要 alt：信息图写描述；装饰图可空 alt，但别漏掉属性。
什么时候用、怎么用
页面看起来正常，但读屏或键盘出问题时，先回头查结构。
- 信号：Tab 跳不到按钮、读屏读不清层级、搜索引擎抓不到主旨。
- 适用：搭页面骨架、写地标、给图片补文字。
- 不适用：没有合适语义时包一层用 div——它是最后手段，不是默认。
- 最短路径：问「这块是什么」→ 选标签 → 用键盘走一遍关键操作。
正反例：同一条「查看地图」
目标都是打开地图，只改标签。
原生链接：Tab 可达、读屏播报「链接」、回车打开。
键盘跳不到，读屏没有链接角色。失败写在活动页上那行死字。
快速自测
首页要展示一张「限时折扣」海报，alt 该怎么写？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。
用到这个知识点的案例
看看真实的项目蓝图里，HTML是怎么被用上的。