B00 HTML 进阶

本阶段目标：让页面在机器侧可读——搜索引擎、社交平台、辅助技术与不同设备都能正确理解同一份 HTML。

所属：frontend/html / B-进阶 ｜ 上一篇：A09-实战拼一张个人主页 ｜ 下一篇：B01-元信息与SEO ｜ 返回：科目 README

路线图

六篇文档按「机器怎么读 → 媒体怎么选 → 外部内容怎么嵌 → 属性怎么用 → 数据怎么标 → 旧写法怎么兼容」推进。

flowchart TD
    B1["B01 元信息与 SEO"] --> B2["B02 多媒体与响应式图片"]
    B2 --> B3["B03 内嵌内容与安全"]
    B3 --> B4["B04 全局属性与交互元素"]
    B4 --> B5["B05 结构化数据"]
    B5 --> B6["B06 版本差异与兼容"]

    subgraph P1["机器侧可读（B01 ~ B03）"]
        B1
        B2
        B3
    end

    subgraph P2["结构与数据（B04 ~ B06）"]
        B4
        B5
        B6
    end

图 1 进阶阶段路线图：B01 ~ B03 解决页面被外部系统读取与呈现，B04 ~ B06 解决属性复用、数据标注与兼容

能力对照

能力	对应篇目	自检方式
为页面配置完整的元信息与分享卡片	B01	查看源码可见 title/description/OG，分享链接有标题与摘要
按设备与网络选择图片与媒体资源	B02	窄屏与高倍屏下请求到不同尺寸的图片，Network 面板可见差异
安全地嵌入外部页面或媒体	B03	iframe 内脚本被 sandbox 阻断，可列出三项必须限制的能力
正确使用全局属性与原生交互元素	B04	用 details 与 dialog 实现折叠与弹层，无自定义脚本
为内容标注结构化数据	B05	用 JSON-LD 描述一篇文章，校验工具零错误
判断旧标签与旧写法是否可以继续使用	B06	给出三个废弃标签的替代方案，并说明回退顺序

阅读顺序

顺序	篇目	建议时长	必读	说明
1	B01 元信息与 SEO	50 分钟	是	决定页面被检索与分享时的样子
2	B02 多媒体与响应式图片	60 分钟	是	图片通常是页面体积的主要来源
3	B03 内嵌内容与安全	50 分钟	是	第三方内容是最常见的安全入口
4	B04 全局属性与交互元素	50 分钟	是	少写脚本即可完成常见交互
5	B05 结构化数据	40 分钟	否	面向搜索与聚合场景，按需使用
6	B06 版本差异与兼容	40 分钟	是	决定旧项目能否平滑升级

跳过建议

• 只做内部后台页面、不对外发布：B01 与 B05 可后置。
• 已有响应式图片经验：B02 只做 3.2 节代码核对，重点看格式选择表。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：B01-元信息与SEO