多端¶

参考文档¶

HTML 5.md、HTML5 新特性.md、svg.md、audio.md、video.md、Taro.md、移动端适配.md、JS开发Harmony 实践.md、Viewport.md

知识地图¶

• 概念：先理解这个模块为什么存在。
• 工具：再看它通过哪些工具落地。
• 场景：最后判断什么时候该用，什么时候不该用。

核心整理¶

HTML5 扩展了语义、多媒体、图形、本地存储和实时通信。SVG 适合矢量图。audio/video 要注意浏览器策略。移动端适配依赖 viewport、响应式布局和尺寸体系。Taro/Harmony 体现多端开发的抽象与平台差异。

我在整理这部分时的重点是把工具放回工程场景，而不是孤立记名词。一个工具出现，通常是为了解决某种复杂度：协作复杂度、上下文复杂度、运行环境复杂度、系统规模复杂度或信息获取复杂度。

学习笔记¶

1. 先读 Why，确认它解决的问题。
2. 再读 What，建立概念边界。
3. 再读 How，补命令、API、配置和实践。
4. 最后用一个小 demo 验证。

实践清单¶

• 用自己的话解释本模块核心概念。
• 找一个最小 demo 跑通。
• 记录一个踩坑点。
• 把相关命令或配置写成可复用片段。
• 回看飞书原文，补齐遗漏的术语。

飞书思考题¶

飞书原文未在本模块设置集中独立的思考题，因此本节只保留原文知识整理，不额外添加题目。

HTML5 的意义¶

HTML5 让 Web 从文档展示走向应用平台。新增语义标签、多媒体、Canvas/SVG、本地存储、WebSocket、地理定位等能力。

语义化标签¶

header、nav、main、article、section、footer 让结构更清晰，也利于可访问性和 SEO。

SVG¶

SVG 是矢量图，适合图标、简单图形和可缩放 UI。可以作为文件，也可以内嵌 HTML，用 CSS/JS 控制颜色、动画和交互。

audio/video¶

常见属性：src、controls、autoplay、muted、loop、poster、preload、playsinline。

浏览器通常禁止非静音自动播放；移动端播放策略更严格，所以 video 实践要注意 muted、playsinline 和 poster。

移动端适配¶

核心是 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

布局策略：Flex、Grid、媒体查询、rem、vw、设计稿尺寸换算。

Taro¶

Taro 用接近 React/Vue 的方式开发小程序和 H5。优势是跨端复用，难点是平台 API、样式、生命周期和资源路径差异。

Harmony 多端实践¶

Harmony 文档里提到 PA/FA、多端 UI 自适应、事件归一、栅格响应式。核心是把平台差异收敛到统一抽象里，而不是每端完全重写。

UserAgent¶

UA 可辅助判断环境，但不可靠。更推荐 feature detection 和响应式布局。

知识卡片¶

语义化¶

语义标签让机器和人都更容易理解页面结构。它不是为了少写 div，而是为了表达内容角色。

响应式¶

响应式不是只适配手机，而是让布局在不同视口、字体、内容长度下保持可用。

跨端抽象¶

跨端框架隐藏了一部分差异，但不能消灭平台差异。API、生命周期和样式仍需单独验证。