HTML5新特性有哪些_重要标签功能汇总【介绍】-html教程-PHP中文网

html5语义化标签（如、、等）在现代浏览器中已无兼容问题，ie9+基本支持但需注意的兼容处理；canvas适合动态绘图，svg适合矢量图形与响应式场景；input新类型提升移动端体验但需服务端校验；localstorage/sessionstorage为同步键值存储，存对象需json序列化，敏感数据勿存，大容量或结构化需求应选indexeddb。

html5新特性有哪些_重要标签功能汇总【介绍】

哪些HTML5标签现在真能用、该优先学

绝大多数新语义化标签（<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>）在所有现代浏览器中已无兼容性问题，IE9+ 基本支持，但 IE9 不支持 <main></main> —— 如果还要兼容 IE9，得手动加 role="main" 或用 JS 补 DOM。

常见错误现象：<section></section> 被当“分栏容器”滥用，结果语义错乱；<div> 套一堆 <code><div> 却硬加 <code>class="header"，放弃原生语义。

<main></main> 页面有且仅有一个，不能嵌套在 <article></article> 或 <section></section> 里
<article></article> 强调可独立分发/复用的内容（如博客正文、新闻条目），不是所有“区块”都该用它
<time></time> 必须带 datetime 属性才有机器可读性，光写 <time>2024年3月</time> 没用

`canvas` 和 `svg` 到底选哪个画图

看动态性与缩放需求：canvas 是位图绘制，适合游戏、实时图表、图像处理；svg 是矢量描述，适合图标、数据可视化（D3）、响应式插图，缩放不糊、可被 CSS/JS 精确控制节点。

容易踩的坑：canvas 在高 DPR 设备（如 MacBook Retina、iPhone）上默认模糊——必须手动设置 canvas.width/canvas.height 为物理像素，并用 CSS 控制显示尺寸；svg 内联进 HTML 才能被 CSS 选中，用 <img src="x.svg" alt="HTML5新特性有哪些_重要标签功能汇总【介绍】" > 就彻底失去样式和交互能力。

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

Knowt

Knowt是一款AI驱动的在线学习工具

下载

动态更新频繁 → 优先 canvas（重绘成本低）
要 SEO、无障碍、缩放清晰、CSS 动画 → 选 svg
canvas 导出图片需调用 toDataURL()，注意跨域图片会触发安全异常

`input` 新类型：别只记得 `type="email"`

type="tel"、type="url"、type="search"、type="date" 这些不只是加个校验，关键是触发对应设备原生 UI：iOS 上 type="date" 弹日历，type="tel" 弹数字键盘，type="search" 自带清空按钮和圆角样式。

但别迷信自动校验：type="email" 只检查基本格式（如含 @），不验证邮箱真实存在；type="number" 允许输入 e 或 +，提交时才报错；type="date" 在 Safari 和 Firefox 中不支持 min/max 的完整约束（比如限制只能选未来日期，Safari 仍可手动输入绕过）。

移动端体验提升明显，但服务端校验不可省
type="date" 的值永远是 YYYY-MM-DD 字符串，没有时区信息
想让 Chrome 的 type="number" 禁用上下箭头？加 CSS：input[type="number"]::-webkit-inner-spin-button { display: none; }