3、HTML5基础回顾：语义化标签、表单与输入、多媒体元素、Canvas绘图基础

说实话，很多前端开发者觉得HTML太简单了，不值得花时间。但我做了这么多年跨端开发，发现恰恰是这些「基础」的东西，决定了你后面能走多远。尤其是当你从网页转向小程序、甚至原生应用时，你会发现——HTML5的语义化思维，是所有跨端框架的底层逻辑。

今天我们就来快速过一遍HTML5的核心知识点。嗯，我尽量不讲废话，直接上干货。

3.1 语义化标签：不只是「好看」

我记得刚入行那会儿，写页面全是<div>套<div>。后来接手一个老项目，光找导航栏就花了半小时。你想想看，如果代码里全是<div class="header">，搜索引擎和屏幕阅读器根本不知道你这段是干嘛的。

语义化标签的核心价值：

• 可访问性：盲人用户靠屏幕阅读器浏览网页，语义化标签能让他们「听」懂页面结构
• SEO友好：搜索引擎会优先抓取<article>、<nav>等标签内的内容
• 代码可维护性：团队协作时，看一眼标签就知道这块是什么功能

3.2 表单与输入：用户交互的起点

表单是前端最常打交道的东西。说白了，用户要注册、登录、搜索、下单，都得靠表单。HTML5给表单加了不少好东西，我一个个说。

3.2.1 新的输入类型

以前我们做日期选择，得用第三方插件。现在直接<input type="date">就搞定了。我个人建议：能用原生就别自己造轮子。

<!-- 常用HTML5输入类型 -->
<input type="email" placeholder="请输入邮箱">
<input type="url" placeholder="请输入网址">
<input type="tel" placeholder="请输入手机号">
<input type="number" min="1" max="100" step="1">
<input type="range" min="0" max="100" value="50">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="search">

3.2.2 表单验证：前端的第一道防线

以前做表单验证，得写一堆JavaScript。现在HTML5自带验证属性，省事不少。

<form id="myForm">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" 
         required minlength="2" maxlength="20"
         placeholder="2-20个字符">
  
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" 
         required min="18" max="120">
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">提交</button>
</form>

你想想看，required、minlength、pattern这些属性，直接让浏览器帮你做基础校验。但注意——前端验证只是用户体验，后端必须再做一次。为什么？因为用户可以禁用JavaScript，甚至直接发HTTP请求绕过你的页面。

3.2.3 表单新元素

• <datalist>：带建议列表的输入框。用户既可以输入，也可以从下拉列表选。
• <output>：显示计算结果。比如购物车总价，用这个标签语义更清晰。
• <progress>：进度条。上传文件时特别好用。
• <meter>：度量衡。比如显示磁盘使用量、投票结果等。

<!-- datalist 示例 -->
<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

3.3 多媒体元素：让页面「活」起来

以前要在网页里放视频，得用Flash。现在<video>和<audio>原生支持，而且跨端表现一致。我在做小程序的时候发现，小程序的video组件和HTML5的<video>API几乎一模一样——这就是我说的「底层逻辑相通」。

3.3.1 视频元素

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p>您的浏览器不支持视频播放，请升级浏览器。</p>
</video>

关键属性：

• controls：显示播放控件（播放/暂停、音量、进度条）
• autoplay：自动播放（注意：很多浏览器会限制自动播放，需要用户交互后才能触发）
• loop：循环播放
• muted：静音播放（自动播放时通常需要配合这个属性）
• poster：视频封面图
• preload：预加载策略（none/metadata/auto）

3.3.2 音频元素

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <p>您的浏览器不支持音频播放。</p>
</audio>

音频和视频的API基本一致。我个人习惯用JavaScript控制播放，而不是依赖controls属性——因为自定义UI在跨端场景下更可控。

3.4 Canvas绘图基础：像素级的控制力

Canvas是HTML5最强大的功能之一。说白了，它给你一块画布，让你用JavaScript在上面画任何东西。从图表到游戏，从图像处理到动画，Canvas都能搞定。

我在做跨端开发时，经常用Canvas来做一些平台差异的「抹平」工作。比如在小程序里，canvas的API和Web端几乎一样，只是命名空间不同。

3.4.1 基本用法

<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas。
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 画一个红色矩形
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(50, 50, 100, 80);
  
  // 画一个蓝色边框的矩形
  ctx.strokeStyle = '#0000FF';
  ctx.lineWidth = 3;
  ctx.strokeRect(200, 50, 100, 80);
  
  // 画一个圆形
  ctx.beginPath();
  ctx.arc(150, 200, 50, 0, Math.PI * 2);
  ctx.fillStyle = '#00FF00';
  ctx.fill();
</script>

3.4.2 路径与图形

Canvas的绘图核心是「路径」。你想想看，就像用笔在纸上画线——先beginPath()起笔，然后moveTo()移动，lineTo()画线，最后stroke()或fill()落笔。

// 画一个三角形
ctx.beginPath();
ctx.moveTo(100, 100);   // 起点
ctx.lineTo(200, 100);   // 画到右上
ctx.lineTo(150, 200);   // 画到底部
ctx.closePath();        // 闭合路径
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.stroke();

3.4.3 文本与图片

// 绘制文本
ctx.font = '30px Arial';
ctx.fillStyle = '#333';
ctx.fillText('Hello Canvas', 50, 50);
ctx.strokeText('Hello Canvas', 50, 100);

// 绘制图片
const img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, 200, 150);
};
img.src = 'example.jpg';

3.4.4 动画基础

Canvas动画的核心是requestAnimationFrame。它比setInterval更平滑，而且当页面不可见时会自动暂停，节省性能。

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(x, 100, 50, 50);
  
  x += 2;
  if (x > canvas.width) x = 0;
  
  requestAnimationFrame(animate);
}
animate();

嗯，这里要注意：clearRect每次都要清空画布，否则上一帧的内容会残留。如果你做的是游戏，可能还需要考虑双缓冲来避免闪烁。

3.5 小结

HTML5的这些基础，说白了就是跨端开发的「通用语言」。不管你是做Web、小程序、还是React Native，语义化标签的思维、表单验证的逻辑、多媒体播放的API、Canvas绘图的原理，都是相通的。

我个人建议：别急着学框架，先把HTML5吃透。框架会过时，但HTML5不会。你想想看，我十年前写的语义化页面，现在照样能跑——这就是基础的力量。

下一章我们会进入CSS3的世界。说实话，CSS3才是真正让页面「好看」的关键——尤其是Flexbox和Grid，彻底改变了布局方式。到时候见。