红塔湾沙梭 發表於 2025-9-26 14:50:00

HTML5介绍（HTML5特性、HTML5功能） - 指南

<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
      
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style><div class="markdown_views prism-tomorrow-night" id="content_views"><svg style="display: none" xmlns="http://www.w3.org/2000/svg"><path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path></svg><p></p><div class="toc"><h4>文章目录</h4><ul><li>HTML5 是超文本标记语言（HTML）的第五次重大迭代，是构建现代网页与 Web 应用的语义与结构基础。它不仅带来更清晰的语义化标签、强大的多媒体支持，还引入了本地存储、图形绘制、跨文档通信、地理位置、后台线程等能力，使浏览器逐步具备“操作系统级”的应用承载能力。</li><li>为什么是 HTML5？</li><li><ul><li>- **语义更清晰**：让机器与人都能更好地理解页面结构，有利于 SEO 与可访问性。</li><li>- **能力更强**：无需插件即可原生支持视频、音频、图形渲染和离线存储。</li><li>- **性能更好**：Web Worker 等机制让复杂计算不再阻塞主线程。</li><li>- **跨平台**：一次编写，多端可用（桌面、移动、智能终端）。</li><li>核心新特性概览</li></ul></li><li>语义化标签</li><li><ul><li>- **结构标签**：`&lt;header&gt; &lt;nav&gt; &lt;main&gt; &lt;section&gt; &lt;article&gt; &lt;aside&gt; &lt;footer&gt;`</li><li>- **好处**：更易读、可访问、利于搜索引擎理解内容层次</li><li>- 代码示例</li></ul></li><li>多媒体支持</li><li><ul><li>- **音视频**：`&lt;audio&gt;`、`&lt;video&gt;` 原生播放，支持控制、字幕、多码流</li><li>- 代码示例</li></ul></li><li>表单增强</li><li><ul><li>- **新类型**：`email`、`url`、`number`、`date`、`range`、`color` 等</li><li>- **校验与占位**：`required`、`pattern`、`placeholder`、`autocomplete`</li><li>- 代码示例</li></ul></li><li>图形与动画</li><li><ul><li>- **Canvas 2D**：逐像素绘制、游戏、可视化</li><li>- **SVG**：基于向量，缩放不失真，适合图标与图形</li><li>- 代码示例</li></ul></li><li>存储与离线</li><li><ul><li>- **Web Storage**：`localStorage`（持久）、`sessionStorage`（会话）</li><li>- **Cache/Service Worker**：离线缓存、请求拦截（配合 PWA）</li><li>- 代码示例</li></ul></li><li>通信能力</li><li><ul><li>- **postMessage**：跨窗口/iframe 安全通信</li><li>- **WebSocket**：全双工实时通信（非 HTML5 标准本体，但同代常用）</li><li>- **Server-Sent Events**：服务器向客户端推送</li><li>- 代码示例</li></ul></li><li>地理位置</li><li><ul><li>- **Geolocation API**：获取经纬度（需 HTTPS 与用户授权）</li><li>- 代码示例</li></ul></li><li>多线程与性能</li><li><ul><li>- **Web Worker**：在后台线程执行计算，避免阻塞 UI</li><li>代码示例</li><li><ul><li>`const sum = e.data.reduce((a, b) =&gt; a + b, 0);`解释</li></ul></li></ul></li><li>设备与硬件访问（依浏览器支持）</li><li><ul><li>- **Device APIs**：电池、电磁传感器、剪贴板、全屏、震动、媒体设备等（多数需 HTTPS 与权限）</li><li>- **File API**：本地文件选择与读取（受同源策略与权限限制）</li></ul></li><li>与 CSS3、现代 JavaScript 的协作</li><li><ul><li>- **HTML5 负责语义与结构**；CSS3 提供布局与视觉（Flexbox、Grid、动画、变量）；</li><li>- 现代 JS（ES6+）配合模块化、Promise/async、Web APIs 共同构建应用逻辑；</li><li>- 三者合力，打造响应式、可访问、性能优良的 Web 体验。</li></ul></li><li>兼容性与渐进增强</li><li><ul><li>- 使用特性检测而非浏览器嗅探：</li><li>- 为旧浏览器提供兜底：合理的回退内容、Polyfill（如 `fetch`、`Promise`）、优雅降级；</li><li>- 在移动端务必使用 HTTPS、视口设置、触控优化与性能预算。</li></ul></li><li>实战最佳实践</li><li><ul><li>- **语义优先**：优先使用语义标签，配合 `aria-*` 提升可访问性。</li><li>- **媒体优化**：使用现代编码（H.264/HEVC/AV1/Opus），提供多源与字幕。</li><li>- **图形策略**：图标优先 SVG，复杂动态用 Canvas/WebGL。</li><li>- **存储纪律**：限制容量、设置过期策略，谨慎存储敏感数据。</li><li>- **性能**：Workers 处理重活、懒加载媒体、减少重绘与回流。</li><li>- **安全**：默认 HTTPS，使用 CSP、SameSite Cookie、严格权限请求。</li></ul></li><li>简短示例：集成多个 HTML5 能力</li><li>结语与进一步阅读</li></ul></div><p></p><h2>HTML5 是超文本标记语言（HTML）的第五次重大迭代，是构建现代网页与 Web 应用的语义与结构基础。它不仅带来更清晰的语义化标签、强大的多媒体支持，还引入了本地存储、图形绘制、跨文档通信、地理位置、后台线程等能力，使浏览器逐步具备“操作系统级”的应用承载能力。</h2><h2>为什么是 HTML5？</h2><h3>- <strong>语义更清晰</strong>：让机器与人都能更好地理解页面结构，有利于 SEO 与可访问性。</h3><h3>- <strong>能力更强</strong>：无需插件即可原生支持视频、音频、图形渲染和离线存储。</h3><h3>- <strong>性能更好</strong>：Web Worker 等机制让复杂计算不再阻塞主线程。</h3><h3>- <strong>跨平台</strong>：一次编写，多端可用（桌面、移动、智能终端）。</h3><h3>核心新特性概览</h3><h2>语义化标签</h2><h3>- <strong>结构标签</strong>：<code>&lt;header&gt; &lt;nav&gt; &lt;main&gt; &lt;section&gt; &lt;article&gt; &lt;aside&gt; &lt;footer&gt;</code></h3><h3>- <strong>好处</strong>：更易读、可访问、利于搜索引擎理解内容层次</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token comment">&lt;!-- 定义文章内容区域，语义化标签，表示页面中的一个独立内容块 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 定义文章的头部区域，包含标题等 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 文章主标题，h1是最高级别的标题 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>HTML5 简介<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 文章发布日期，time标签用于机器可读的日期 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>发布于 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2025-09-23<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>2025-09-23<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 定义文章的主要内容区域，可以包含多个部分 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- 二级标题，表示文章的一个部分 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>为什么使用 HTML5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 段落内容 --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>更强能力与更好语义。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 定义文章的底部区域，通常包含作者信息等 --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>作者：Ada<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>多媒体支持</h2><h3>- <strong>音视频</strong>：<code>&lt;audio&gt;</code>、<code>&lt;video&gt;</code> 原生播放，支持控制、字幕、多码流</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token comment">&lt;!-- 创建视频播放器，controls属性添加控制条，width设置视频宽度，poster设置封面图 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">controls</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>640<span class="token punctuation">"</span></span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cover.jpg<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 指定视频源文件和类型，支持多个source标签，浏览器会按顺序尝试 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>movie.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token comment">&lt;!-- 添加字幕，kind指定字幕类型，srclang指定语言，label是显示的标签，default表示默认启用 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>中文<span class="token punctuation">"</span></span> <span class="token attr-name">default</span> <span class="token punctuation">/&gt;</span></span>
      <span class="token comment">&lt;!-- 为不支持video标签的浏览器提供回退文本 --&gt;</span>
          您的浏览器不支持 video 标签。
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>表单增强</h2><h3>- <strong>新类型</strong>：<code>email</code>、<code>url</code>、<code>number</code>、<code>date</code>、<code>range</code>、<code>color</code> 等</h3><h3>- <strong>校验与占位</strong>：<code>required</code>、<code>pattern</code>、<code>placeholder</code>、<code>autocomplete</code></h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token comment">&lt;!-- 定义表单区域，用于收集用户输入 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 电子邮件输入框，type="email"会自动验证邮箱格式，required表示必填项，placeholder是提示文本 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>you@example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token comment">&lt;!-- 数字输入框，min和max设置范围，step设置增量 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token comment">&lt;!-- 日期选择器，允许用户选择日期 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token comment">&lt;!-- 提交按钮 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>图形与动画</h2><h3>- <strong>Canvas 2D</strong>：逐像素绘制、游戏、可视化</h3><h3>- <strong>SVG</strong>：基于向量，缩放不失真，适合图标与图形</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token comment">&lt;!-- 创建画布元素，id用于在JavaScript中引用，width和height设置画布尺寸 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 获取画布元素的2D渲染上下文，用于在画布上绘制图形</span>
    <span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 设置填充颜色为蓝色（#0ea5e9）</span>
    ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">'#0ea5e9'</span><span class="token punctuation">;</span>
    <span class="token comment">// 在画布上绘制一个矩形，位置(10,10)，宽120，高60</span>
    ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 设置边框颜色为深灰色（#111827）</span>
    ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> <span class="token string">'#111827'</span><span class="token punctuation">;</span>
    <span class="token comment">// 设置边框宽度为4像素</span>
    ctx<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
    <span class="token comment">// 在画布上绘制一个矩形边框，位置(10,10)，宽120，高60</span>
    ctx<span class="token punctuation">.</span><span class="token function">strokeRect</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>存储与离线</h2><h3>- <strong>Web Storage</strong>：<code>localStorage</code>（持久）、<code>sessionStorage</code>（会话）</h3><h3>- <strong>Cache/Service Worker</strong>：离线缓存、请求拦截（配合 PWA）</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 将'theme'键的值设置为'dark'，存储在本地存储中，持久化保存</span>
localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'theme'</span><span class="token punctuation">,</span> <span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 从本地存储中获取'theme'键的值</span>
<span class="token keyword">const</span> theme <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'theme'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>通信能力</h2><h3>- <strong>postMessage</strong>：跨窗口/iframe 安全通信</h3><h3>- <strong>WebSocket</strong>：全双工实时通信（非 HTML5 标准本体，但同代常用）</h3><h3>- <strong>Server-Sent Events</strong>：服务器向客户端推送</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token comment">&lt;!-- 父页面与 iframe 通信示例 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 发送</span>
    iframeEl<span class="token punctuation">.</span>contentWindow<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> action<span class="token operator">:</span> <span class="token string">'ping'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'https://example.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 接收</span>
    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
    <span class="token punctuation">{</span>
    <span class="token comment">// 检查消息来源是否是预期的域名，防止跨站攻击</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>origin <span class="token operator">!==</span> <span class="token string">'https://example.com'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token comment">// 打印接收到的消息数据</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'来自子页面：'</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>地理位置</h2><h3>- <strong>Geolocation API</strong>：获取经纬度（需 HTTPS 与用户授权）</h3><h3>- 代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 获取用户的地理位置，第一个回调函数在成功获取位置时调用，第二个回调函数在出错时调用</span>
<span class="token comment">// 第三个参数是配置选项，enableHighAccuracy表示使用高精度，timeout设置超时时间（毫秒）</span>
navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span>
<span class="token punctuation">(</span><span class="token parameter">pos</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pos<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span> pos<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>longitude<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> enableHighAccuracy<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> timeout<span class="token operator">:</span> <span class="token number">5000</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>多线程与性能</h2><h3>- <strong>Web Worker</strong>：在后台线程执行计算，避免阻塞 UI</h3><h3>代码示例</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html">// worker.js
// 设置消息处理函数，当主线程发送消息时触发
self.onmessage = (e) =&gt; {
// 计算数组中所有数字的和
const sum = e.data.reduce((a, b) =&gt; a + b, 0);
// 将计算结果发送回主线程
self.postMessage(sum);
};
// main.js
// 创建一个Web Worker，加载worker.js
const worker = new Worker('worker.js');
// 向worker发送数据
worker.postMessage();
// 监听worker发送的消息
worker.onmessage = (e) =&gt; console.log('sum:', e.data);</code></pre>
<h4><code>const sum = e.data.reduce((a, b) =&gt; a + b, 0);</code>解释</h4><p>这个代码是使用JavaScript的<code>reduce()</code>方法来计算数组中所有元素的总和。</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-javascript"><span class="token keyword">const</span> sum <span class="token operator">=</span> e<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">+</span> b<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<ul><li><code>e.data</code>：这是一个数组，包含需要求和的数值</li><li><code>.reduce()</code>：这是数组的一个方法，用于将数组元素通过一个函数缩减为一个单一值</li><li><code>(a, b) =&gt; a + b</code>：这是一个箭头函数，作为<code>reduce()</code>的回调函数
<ul><li><code>a</code>：累加器（accumulator），表示当前的累计值</li><li><code>b</code>：当前元素（currentValue），表示数组中正在处理的元素</li><li>这个函数的逻辑是将当前元素<code>b</code>加到累加器<code>a</code>上</li></ul></li><li><code>, 0</code>：这是传递给<code>reduce()</code>的初始值（initialValue），表示累加器的初始值为0</li></ul><p>简单来说，这行代码的作用是：将<code>e.data</code>数组中的所有数字元素相加，得到它们的总和，并将结果赋值给<code>sum</code>变量。</p><p>例如，如果<code>e.data = </code>，那么：</p><ul><li>第一次调用：a=0, b=1 → 返回 0+1=1</li><li>第二次调用：a=1, b=2 → 返回 1+2=3</li><li>第三次调用：a=3, b=3 → 返回 3+3=6</li><li>第四次调用：a=6, b=4 → 返回 6+4=10</li></ul><p>最终<code>sum</code>的值将是10。</p><h2>设备与硬件访问（依浏览器支持）</h2><h3>- <strong>Device APIs</strong>：电池、电磁传感器、剪贴板、全屏、震动、媒体设备等（多数需 HTTPS 与权限）</h3><h3>- <strong>File API</strong>：本地文件选择与读取（受同源策略与权限限制）</h3><h2>与 CSS3、现代 JavaScript 的协作</h2><h3>- <strong>HTML5 负责语义与结构</strong>；CSS3 提供布局与视觉（Flexbox、Grid、动画、变量）；</h3><h3>- 现代 JS（ES6+）配合模块化、Promise/async、Web APIs 共同构建应用逻辑；</h3><h3>- 三者合力，打造响应式、可访问、性能优良的 Web 体验。</h3><h2>兼容性与渐进增强</h2><h3>- 使用特性检测而非浏览器嗅探：</h3>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'geolocation'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 使用 geolocation</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 提供替代方案</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre>
<h3>- 为旧浏览器提供兜底：合理的回退内容、Polyfill（如 <code>fetch</code>、<code>Promise</code>）、优雅降级；</h3><h3>- 在移动端务必使用 HTTPS、视口设置、触控优化与性能预算。</h3><h2>实战最佳实践</h2><h3>- <strong>语义优先</strong>：优先使用语义标签，配合 <code>aria-*</code> 提升可访问性。</h3><h3>- <strong>媒体优化</strong>：使用现代编码（H.264/HEVC/AV1/Opus），提供多源与字幕。</h3><h3>- <strong>图形策略</strong>：图标优先 SVG，复杂动态用 Canvas/WebGL。</h3><h3>- <strong>存储纪律</strong>：限制容量、设置过期策略，谨慎存储敏感数据。</h3><h3>- <strong>性能</strong>：Workers 处理重活、懒加载媒体、减少重绘与回流。</h3><h3>- <strong>安全</strong>：默认 HTTPS，使用 CSP、SameSite Cookie、严格权限请求。</h3><h2>简短示例：集成多个 HTML5 能力</h2>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 声明文档类型为HTML5 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 设置语言为简体中文 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 设置字符编码为UTF-8 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token comment">&lt;!-- 设置视口，使页面在移动设备上正确显示 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token comment">&lt;!-- 设置页面标题 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>HTML5 Demo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 页面头部区域 --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>我的 HTML5 页面<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
                  <span class="token comment">&lt;!-- 主要内容区域 --&gt;</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">&gt;</span></span>
                      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
                        <span class="token comment">&lt;!-- 视频部分标题 --&gt;</span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>视频<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                        <span class="token comment">&lt;!-- 视频播放器 --&gt;</span>
                              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">controls</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>320<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                              <span class="token comment">&lt;!-- 视频源文件 --&gt;</span>
                              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
                              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
                              <span class="token comment">&lt;!-- 表单部分标题 --&gt;</span>
                              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>表单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                              <span class="token comment">&lt;!-- 表单区域 --&gt;</span>
                                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token comment">&lt;!-- 电子邮件输入框 --&gt;</span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>邮箱<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
                                    <span class="token comment">&lt;!-- 范围选择器 --&gt;</span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
                                        <span class="token comment">&lt;!-- 提交按钮 --&gt;</span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token comment">&lt;!-- Canvas部分标题 --&gt;</span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Canvas<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                                          <span class="token comment">&lt;!-- Canvas元素，用于绘制图形 --&gt;</span>
                                          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>
                                          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token comment">&lt;!-- 页面底部区域 --&gt;</span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>© 2025<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
                                          <span class="token comment">&lt;!-- 脚本区域 --&gt;</span>
                                          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
                                              <span class="token comment">// Canvas 绘制</span>
                                              <span class="token comment">// 获取Canvas元素的2D渲染上下文</span>
                                              <span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'chart'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                              <span class="token comment">// 设置填充颜色为绿色（#22c55e）</span>
                                              ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">'#22c55e'</span><span class="token punctuation">;</span>
                                              <span class="token comment">// 在Canvas上绘制一个矩形，位置(0,80)，宽50，高40</span>
                                              ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                              <span class="token comment">// 存储</span>
                                              <span class="token comment">// 将当前时间戳存储到本地存储中</span>
                                              localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'visited'</span><span class="token punctuation">,</span> <span class="token function">String</span><span class="token punctuation">(</span>Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                          </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
                                          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
<h2>结语与进一步阅读</h2><p>HTML5 已经成为现代 Web 的"共同语言"。通过语义化结构、多媒体与图形、本地能力和性能优化手段，开发者可以在浏览器中构建近乎原生的应用体验。建议结合 CSS3 与 ES6+，在渐进增强与安全合规的前提下，发挥 HTML5 的全部潜力。</p><ul><li>参考文档：
<ul><li>MDN Web Docs（HTML）: <code>https://developer.mozilla.org/docs/Web/HTML</code></li><li>WHATWG HTML Living Standard: <code>https://html.spec.whatwg.org/</code></li><li>Web APIs 总览: <code>https://developer.mozilla.org/docs/Web/API</code></li></ul></li></ul></div><br><br>
来源：https://www.cnblogs.com/tlnshuju/p/19113492
頁: [1]
查看完整版本: HTML5介绍（HTML5特性、HTML5功能） - 指南