九八云安全HTML5 核心特性
HTML5 是超文本标记语言的第五次重大修订，旨在提升网页功能与兼容性，其核心特性包括：
<header>、<nav>、<main>、<aside>、<figure>、<figcaption><input> 新增类型（如 date、email、url）、<datalist> 下拉列表<video>、<audio>、<source>（用于多格式资源）<canvas>（2D/3D 绘图）、<svg>（矢量图）、<animate>（SMIL 动画）<websocket>（实时双向通信）、<track>（字幕/章节标签）HTML5 多媒体支持示例
<!-视频标签 --> <video width="600" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频。 </video> <!-音频标签 --> <audio src="music.mp3" controls loop></audio>
特点：
- 自动兼容多种格式（通过
<source>标签）。 - 内置控件（播放、暂停、音量等），减少开发成本。
HTML5 本地存储 vs Cookie
| 特性 | Cookie | LocalStorage |
|---|---|---|
| 存储大小 | 约 4KB | 约 5MB（浏览器限制） |
| 生命周期 | 可设置过期时间或随会话结束失效 | 长期存储（除非手动清除） |
| 用途 | 用户标识、登录状态 | 缓存数据、离线应用数据持久化 |
| 性能影响 | 每次请求携带数据（影响性能） | 仅读写时触发网络请求 |
HTML5 图形绘制工具对比
| 工具 | 适用场景 | 特点 |
|---|---|---|
| Canvas | 动态图形、游戏、动画 | 像素级操作，需用 JavaScript 绘图 |
| SVG | 静态矢量图标、图表 | XML 描述图形，可缩放且支持 CSS/JS 控制 |
相关问题与解答
问题 1：HTML5 的语义化标签对 SEO 有什么影响？
解答：
- 语义化标签（如
<article>、<header>）明确页面结构，帮助搜索引擎理解内容层次。 - 搜索引擎更倾向抓取结构化内容，可能提升关键词权重和页面排名。
- 但需注意：SEO 核心仍是内容质量，标签仅为辅助。
问题 2：HTML5 的 <canvas> 和 <svg> 如何选择？
解答：
- 选择 Canvas：需动态绘制或频繁更新的图形（如游戏、动画），适合像素级操作。
- 选择 SVG：静态矢量图标、图表，需保留图像清晰度且支持缩放的场景。
- 关键区别：Canvas 绘制的是位图，SVG 是矢量图；Canvas 内容不可直接编辑，SVG 可通过 DOM
