HTML5 不只是“新标签集合”，它还补充了更清晰的页面语义、更强的表单能力、原生音视频和图形绘制 API。本文以日常开发中最常用的部分为主，整理新增特性及使用方式。

语义化结构标签

语义化标签可以让页面结构更清晰，也能帮助辅助阅读工具与搜索引擎理解内容。

<header>页面或区块的页眉</header>
<nav>主要导航</nav>
<main>
  <article>
    <section>
      <h2>文章章节</h2>
      <p>章节正文</p>
    </section>
  </article>
  <aside>侧边栏补充内容</aside>
</main>
<footer>页脚信息</footer>

header、footer、nav、main、article、section 和 aside 都有明确的结构含义。它们不是单纯替代 div；只有内容确实符合其语义时才使用。

新的表单输入类型

HTML5 为 input 增加了更贴近业务的类型。浏览器会提供合适的输入控件，并可参与基础校验。

<input type="email" placeholder="name@example.com" required>
<input type="url" placeholder="https://example.com">
<input type="number" min="1" max="99" step="1">
<input type="date">
<input type="time">
<input type="range" min="0" max="100" value="50">
<input type="color" value="#49b1f5">
<input type="search" placeholder="搜索文章">

常用类型包括 email、url、number、date、time、range、color 和 search。原生校验能改善体验，但服务端仍必须再次校验提交的数据。

常用新增表单属性

placeholder、required 与 pattern

<input
  type="text"
  name="username"
  placeholder="请输入 3～12 位用户名"
  required
  pattern="[A-Za-z0-9_]{3,12}"
>
  • placeholder：显示输入提示，不能替代 label。
  • required：要求字段在提交前不能为空。
  • pattern：用正则表达式限定文本格式。

min、max、step 与 multiple

<input type="number" min="1" max="10" step="1">
<input type="file" accept="image/*" multiple>

min、max、step 常用于数字、日期和范围输入；multiple 允许 file 或 email 输入多个值。

autofocus、autocomplete 与 form

<form id="profile-form" autocomplete="on">
  <input name="nickname" autofocus>
  <button type="submit">保存</button>
</form>

<input name="email" type="email" form="profile-form">
  • autofocus：页面加载后自动聚焦一个输入框；一页通常只设置一个。
  • autocomplete：控制浏览器是否建议历史填写内容。
  • form：让表单外的控件关联到指定表单。

datalist 与 output

datalist 可以为输入框提供候选项，但用户仍可以输入候选列表以外的内容。

<label>
  选择浏览器：
  <input list="browsers" name="browser">
</label>

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

output 用于展示计算结果：

<form oninput="sum.value = Number(a.value) + Number(b.value)">
  <input id="a" name="a" type="number" value="0">
  +
  <input id="b" name="b" type="number" value="0">
  =
  <output name="sum" for="a b">0</output>
</form>

keygen 曾是 HTML5 草案中的元素，但已被废弃，不建议在新项目中使用。

原生音视频

<video controls width="640" poster="/img/poster.jpg">
  <source src="/media/demo.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

<audio controls>
  <source src="/media/audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

常用属性：

  • controls：显示播放控件。
  • poster：视频加载前显示的封面。
  • muted：静音播放；若需要自动播放，现代浏览器通常要求同时静音。
  • preload：控制预加载策略，常用值为 none、metadata、auto。

Canvas 图形绘制

canvas 是 HTML5 提供的位图画布。它适用于图表、小游戏、动画和图像处理；画布中的内容不是 DOM 元素，因此不适合承载需要 SEO 或无障碍阅读的正文。

<canvas id="demo" width="320" height="180">
  您的浏览器不支持 Canvas。
</canvas>
const canvas = document.querySelector('#demo');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#49b1f5';
ctx.fillRect(20, 20, 120, 60);

ctx.beginPath();
ctx.arc(220, 70, 35, 0, Math.PI * 2);
ctx.fillStyle = '#f59e0b';
ctx.fill();

ctx.font = '18px sans-serif';
ctx.fillStyle = '#1f2937';
ctx.fillText('Hello Canvas', 80, 150);

常用方法包括 fillRect()、strokeRect()、beginPath()、lineTo()、arc()、fillText()、drawImage() 与 clearRect()。

使用建议

  1. 优先选择语义正确的标签，而不是无差别地替换所有 div。
  2. 原生表单校验用于提升体验，不能替代后端校验。
  3. 图片与媒体要提供合适的替代文本、字幕或回退文本。
  4. Canvas 适合动态绘制；若内容需要被检索或复制，应同时提供文本版本。