HTML 图片、列表与链接：从旧属性迁移到响应式语义

旧课件把图片、图像映射、自定义列表、文本格式、URL、实体和颜色名列在一起。现代页面仍会用到这些能力，但展示样式属于 CSS，内容结构与交互语义才由 HTML 表达；把两者混在一堆标签属性里，往往会造成移动端、键盘和屏幕阅读器问题。

图片先解决含义，再解决尺寸

src 或 srcset 提供图像资源，alt 提供替代文本。若图片传达正文信息，alt 应简洁描述该信息；若图像只是相邻文字的装饰，使用 alt=""，避免读屏重复。图片链接的替代文本应说明链接目的，而不是只说“图片”。不要把整段说明、文件名或“图片”机械塞进 alt。

width 和 height 写入图片固有尺寸可提前预留宽高比、减少布局偏移；CSS 负责最终响应式尺寸。首屏关键图片不要懒加载，长文下方的非关键图片才考虑 loading="lazy"。decoding="async" 是浏览器提示，不是保证。旧 align、border、hspace、vspace 展示属性应迁入 CSS；longdesc 不适合作为新页面的长说明方案。

<picture>
  <source type="image/avif" srcset="/media/diagram.avif">
  <source type="image/webp" srcset="/media/diagram.webp">
  <img src="/media/diagram.png" width="1200" height="675"
       alt="事件循环中任务队列与微任务队列的执行顺序">
</picture>

srcset/sizes 让浏览器按候选图像宽度和布局槽位选资源；picture 的 source 还可做格式回退或艺术指导。JPEG 常用于照片，PNG 可无损保存透明图，GIF 有调色板限制并支持简单动画，SVG 适合矢量图形；WebP/AVIF 可减小体积，但仍要考虑解码成本和目标浏览器。不要只根据扩展名相信文件格式。

图像映射与定义列表

map/area 可以让一张图片上的矩形、圆形或多边形区域分别成为链接；usemap 引用对应 map 名称，area 要有描述用途的 alt。坐标绑定到图像固有像素，缩放裁切后需要重新核算，响应式布局也较难维护。导航或交互较多时，通常用普通链接、按钮或图像旁的列表替代；图像地图不能成为唯一的操作入口。旧 ismap 是服务器端坐标图像机制，只有确有兼容需求才保留。

dl 表示一组名称与描述，常见子项为 dt 和 dd；一个术语可以对应多个描述，多个术语也可以共用一组描述。它适合术语表、元数据和键值说明，不应仅因布局像两列就把任意内容改成定义列表。

文本语义，不靠旧标签调外观

strong 表示重要性，em 表示语气强调；b 和 i 是不增加这两种强调含义的视觉性标记。cite 标记作品标题，code 标记代码片段，kbd 表示用户输入，del 表示删除内容。br 只用于诗歌或地址等确实需要的行内换行，hr 表示主题转换，不要把它们当通用留白组件。

旧 font、basefont、big、tt 和 strike 不用于新内容；字体、颜色、大小、间距、下划线等展示交给 CSS。u 在现代 HTML 有特定的文本注记含义，不是通用“画一条线”的按钮。HTML 实体用于在源码中表达语法敏感字符或特殊字符，例如 <、>、&；无需把普通 Unicode 中文全部改写成实体。动态文本使用 textContent 等文本 API，实体转义不能替代正确的上下文编码和安全渲染。

URL 与颜色

绝对 URL 包含 scheme 与主机等定位信息；相对 URL 会按当前文档 URL 解析，可写同目录文件、子目录或 ../ 上级路径。以 / 开头的是站点根路径，#fragment 指向文档片段，查询参数放在 ? 之后。<base href> 会改变文档里所有相对 URL 的解析基准，不要为修复一个链接而轻易添加它。构造查询参数优先使用 URL / URLSearchParams，避免手工拼接空格、中文和 &。

内链指向本站资源，外链指向其他来源；新窗口链接要让用户知道会打开新页面，并评估 rel="noopener" 等隔离策略。外部 URL、上传图片和链接文本仍需按业务做校验。颜色名和十六进制色值属于 CSS 值，放在样式或主题 token 中，不要恢复旧 font color、hr color 一类展示属性。

1. 为每张信息图检查 alt 是否提供了邻近正文没有表达的信息；装饰图使用空 alt。
2. 给图片尺寸、候选资源和加载优先级设合理值，并在慢网速/窄屏复测。
3. 图像映射的每个 area 都可键盘访问且有明确名称，同时提供普通链接替代。
4. 确认 dl 的确是术语/值关系，文本强调标签符合语义，而不是外观偏好。
5. 在不同目录层级测试相对 URL；在动态文本中测试 <、& 与引号的安全显示。

参考：MDN img、MDN 响应式图片、MDN picture、MDN map、MDN area、MDN dl、WHATWG 废弃与过时特性、WHATWG URL 标准、MDN 安全地使用 textContent。