HTML5必须使用和，二者须置于前且不可混用；语义化标签如等是可访问性与SEO硬性要求，非视觉替代；表单type属性触发原生校验与系统控件；video/audio需多格式source及正确MIME类型。

DOCTYPE 和字符编码写法必须改，否则不算真正 HTML5

HTML5 不是“加几个新标签”就完事，最基础的文档声明和编码方式已经强制简化。旧版 XHTML 常见的 在 HTML5 中不仅冗余，还会触发怪异模式（Quirks Mode），让浏览器降级渲染。

正确写法只有且必须是：（不区分大小写，但建议小写）；字符编码也从 <code><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 改为更简洁的 <meta charset="utf-8">。

• 这两个标签必须放在 标签之前，且 <meta charset> 应紧随 开始后——放晚了可能导致前几个字节乱码
• 不能混用：如果写了 <meta charset>，就别再写 http-equiv 版本，浏览器可能忽略后者或报警告
• 所有现代浏览器都支持这种写法，包括 IE9+；IE8 及以下根本不认 HTML5，这类项目通常已不需兼容

语义化结构标签不是“锦上添花”，而是 DOM 可访问性和 SEO 的硬性依赖

用 <div id="header"> 和用 <code><header></header> 渲染效果可能一样，但对屏幕阅读器、搜索引擎爬虫、甚至 JS 的 document.querySelector('header') 行为，意义完全不同。

常见误用是把 <section></section> 当成 <div> 的替代品无脑替换，结果结构混乱。它本质是“有主题的独立内容块”，必须配 <code><h1>–<h6></h6> </h1> 才算完整语义。

立即学习“前端免费学习笔记（深入）”；

• <article></article>：可独立分发/复用的内容（如博客正文、新闻条目），自带隐式 sectioning root
• <aside></aside>：与主内容相关但可剥离的补充信息（如侧边栏推荐、术语注释），不是所有侧栏都适合
• <nav></nav>：仅用于主要导航链接集合，面包屑、页脚链接、版权声明都不该塞进去
• 旧版中大量使用的 <font></font>、<center></center>、<u></u> 等纯样式标签，HTML5 已彻底废弃，CSS 替代是唯一合法路径

表单控件升级不只是“长得好看”，关键在原生校验和移动端体验

HTML5 新增的 type="email"、type="date"、type="number" 等，并非只改个输入框样式。它们直接调用系统级控件（iOS 日期滚轮、Android 邮箱键盘），并触发浏览器原生验证逻辑。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

比如用户输错邮箱格式，提交时会自动弹出提示，无需 JS 监听 input 事件手动判断。但要注意：这些校验是“友好提醒”，不是安全屏障，后端仍必须验证。

• required、min、max、pattern 等属性在 HTML5 中才具备实际校验能力，旧版只当普通字符串属性
• type="date" 在 Safari 和 Firefox 桌面端支持较弱，若需强一致性，得 fallback 到第三方日历组件（如 flatpickr）
• 移动端对 type="tel" 会调起数字键盘，但 type="number" 可能带小数点——要限制整数，得加 step="1"

video/audio 标签省略 src 属性是常见错误，但更隐蔽的问题在 MIME 类型和 fallback

很多人写 <video controls><source src="a.mp4"></source></video> 就以为完事，结果在某些服务器上播放失败。根本原因常是服务器没返回正确的 Content-Type（如 video/mp4），浏览器直接拒播。

另一个坑是只提供一种格式：MP4 在 iOS 全系支持，但 Linux 或部分安卓机可能需要 WebM；没有 <source></source> 备选，就会静音黑屏。

• 务必为同一视频提供至少两种格式：<source src="a.mp4" type="video/mp4"></source> + <source src="a.webm" type="video/webm"></source>
• 服务器需配置对应 MIME 类型，Nginx 示例：types { video/mp4 mp4; video/webm webm; }
• 永远在 <video></video> 内部加 fallback 文字或 poster 图片，避免用户看到空白区域：“您的浏览器不支持视频播放”比什么都不显示更可靠

真正写 HTML5，不是换几个标签名，而是接受它的约束逻辑：语义即结构，结构即行为，行为即体验。最容易被跳过的，其实是 DOCTYPE 和 charset 这两行——它们不出错时不显眼，一出错却全盘失效。