HTML5

HTML5 核心特性

革命性突破

1. 富客户端应用支持

• 无需插件实现复杂交互

2. 类原生应用体验

• 离线应用能力
• 硬件加速

3. 跨平台兼容

• 响应式设计支持
• 自适应各种设备

4. 游戏开发能力

• Canvas 2D绘图
• WebGL 3D图形

语义化标签

语义化的重要性

核心价值：

• 提高代码可读性和可维护性
• 增强无障碍访问能力
• 改善SEO表现

设计原则

HTML应该描述内容是什么，而不是长什么样。表现样式应该由CSS控制。

HTML5语义化改进

传统布局 vs HTML5布局

传统DIV布局：

<div class="header">
<div class="nav"></div>
</div>
<div class="main">
<div class="article"></div>
<div class="aside"></div>
</div>
<div class="footer"></div>

HTML5语义化布局：

<header>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>

常用语义标签对照表

传统方式	HTML5标签	用途
div.header	header	页面或区块的页眉
div.footer	footer	页面或区块的页脚
div.nav	nav	导航链接
div.content	main	主要内容区域
div.article	article	独立的内容区块
div.sidebar	aside	侧边栏内容
div.section	section	文档中的节

HTML5 表单增强

新增输入类型

类型	用途	设备适配性
email	电子邮件地址	移动端键盘优化
tel	电话号码	移动端数字键盘
url	URL地址	自动验证格式
number	数字输入	带步进控件
range	滑块控件	可视化调节
color	颜色选择器	原生拾色器
date/time	日期时间选择	原生控件支持

兼容性提示

部分类型在旧版浏览器中会降级为普通文本输入框，建议：

1. 提供fallback处理
2. 配合Modernizr等特性检测库使用

表单元素增强

1. <datalist> 数据列表

<input type="text" list="degrees">
<datalist id="degrees">
<option value="本科">
<option value="硕士">
<option value="博士">
</datalist>

2. <output> 计算结果输出

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="25"> =
<output name="result" for="a b">75</output>
</form>

表单属性增强

关键属性：

• autocomplete：自动填充历史记录（on/off）
• pattern：正则验证模式
• novalidate：禁用表单验证
• formnovalidate：禁用单个控件验证

示例：

<input type="text"
placeholder="请输入手机号"
pattern="1[3-9]\d{9}"
required
autofocus>

表单验证事件

// 实时输入验证
emailInput.addEventListener('input', function(e) {
console.log('当前输入值:', e.target.value);
});

// 无效输入处理
emailInput.addEventListener('invalid', function(e) {
e.target.setCustomValidity('请输入有效的邮箱地址');
e.preventDefault(); // 阻止默认错误提示
});

多媒体支持

视频与音频

HTML5媒体元素：

<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持HTML5视频
</video>

<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>

Canvas绘图

基础使用：

<canvas id="drawing" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('drawing');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
</script>

本地存储方案

存储API对比

技术	容量	生命周期	访问范围
Cookie	~4KB	可设置过期时间	同源窗口
localStorage	5-10MB	永久保存	同源窗口
sessionStorage	5-10MB	会话期间有效	单个标签页
IndexedDB	50MB+	永久保存	同源窗口

使用示例：

// localStorage操作
localStorage.setItem('username', 'John');
const user = localStorage.getItem('username');

// sessionStorage操作
sessionStorage.setItem('token', 'abc123');

性能优化建议

1. 语义化优先：正确使用HTML5标签提升解析效率
2. 渐进增强：确保基础功能在不支持新特性的浏览器中可用
3. 特性检测：使用Modernizr检测浏览器支持情况
4. 移动优先：针对移动设备优化表单输入体验

最佳实践

<!-- 兼容性写法示例 -->
<input type="text"
placeholder="选择日期"
onfocus="(this.type='date')"
onblur="(this.type='text')">