HTML5详解
HTML5的介绍
Web 技术发展时间线
- 1991 HTML
- 1994 HTML2
- 1996 CSS1 + JavaScript
- 1997 HTML4
- 1998 CSS2
- 2000 XHTML1（严格的html）
- 2002 Tableless Web Design（表格布局）
- 2005 AJAX
- 2009 HTML5
- 2014 HTML5 Finalized
2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。
2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。
H5草案的前身是叫：Web Application，最早是由 WHATWG 这个组织在2004年提出的。
HTML5 的新特性
HTML5 引入了许多新特性，主要包括：
1. 语义化标签
HTML5 引入了一系列语义化标签，使文档结构更加清晰：
<header>- 定义文档或节的页眉<nav>- 定义导航链接的容器<section>- 定义文档中的节<article>- 定义独立的自包含内容<aside>- 定义内容之外的内容（如侧栏）<footer>- 定义文档或节的页脚<figure>- 用于组合图像、图表等媒体内容<figcaption>- 为 figure 元素定义标题<main>- 定义文档的主要内容
这些语义化标签的优点：
- 代码结构更加清晰
- 有利于SEO
- 有利于无障碍访问
- 便于开发和维护
2. 表单增强
HTML5 对表单进行了增强，新增了多种输入类型和属性：
新的输入类型：
<input type="email">- 用于邮箱地址<input type="url">- 用于URL<input type="number">- 用于数字<input type="range">- 用于范围选择<input type="date">- 用于日期选择<input type="time">- 用于时间选择<input type="color">- 用于颜色选择<input type="search">- 用于搜索字段<input type="tel">- 用于电话号码
新的表单元素：
<datalist>- 为输入字段提供预定义选项列表<output>- 表示计算结果<progress>- 表示任务的进度<meter>- 表示已知范围内的标量测量
新的表单属性：
placeholder- 提供输入字段的提示信息required- 指定输入字段是必需的pattern- 指定输入字段的正则表达式模式min和max- 指定输入字段的最小值和最大值step- 指定输入字段的合法数字间隔autocomplete- 指定是否启用自动完成功能autofocus- 指定页面加载时自动获得焦点
3. 音频和视频
HTML5 引入了原生的音频和视频支持，无需插件：
<!-- 音频 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频标签。
</audio>
<!-- 视频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>这些标签的常用属性：
controls- 显示控制面板autoplay- 自动播放loop- 循环播放muted- 静音preload- 预加载方式
4. Canvas 绘图
HTML5 引入了 <canvas> 元素，用于通过 JavaScript 绘制图形：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>Canvas 可以用于：
- 绘制图形和图表
- 创建动画
- 开发游戏
- 图像处理
- 实时视频处理
5. SVG 绘图
HTML5 原生支持 SVG（可缩放矢量图形）：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>SVG 的优点：
- 可缩放而不失真
- 文件小，加载快
- 可以通过 CSS 和 JavaScript 进行交互和动画
6. 地理定位
HTML5 Geolocation API 允许获取用户的地理位置：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("该浏览器不支持地理定位。");
}
function showPosition(position) {
console.log("纬度: " + position.coords.latitude +
"，经度: " + position.coords.longitude);
}7. Web 存储
HTML5 提供了两种客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
// 存储数据
localStorage.setItem("name", "张三");
// 获取数据
var name = localStorage.getItem("name");
// 删除数据
localStorage.removeItem("name");
// 清空所有数据
localStorage.clear();8. Web Workers
Web Workers 允许在后台线程中运行 JavaScript，不会影响页面性能：
// 创建 Web Worker
var worker = new Worker("worker.js");
// 向 Worker 发送数据
worker.postMessage("Hello");
// 接收 Worker 的数据
worker.onmessage = function(event) {
console.log("收到消息: " + event.data);
};9. 应用缓存
HTML5 引入了应用缓存（Application Cache），使应用可以离线工作：
<!DOCTYPE HTML>
<html manifest="example.appcache">
...
</html>注意：Application Cache 已被弃用，推荐使用 Service Workers 代替。
10. WebSockets
WebSockets 提供了一种在客户端和服务器之间建立持久连接的方法：
// 创建 WebSocket 连接
var socket = new WebSocket("ws://example.com/socket");
// 连接建立时触发
socket.onopen = function(event) {
socket.send("Hello Server!");
};
// 接收服务器数据时触发
socket.onmessage = function(event) {
console.log("收到数据: " + event.data);
};HTML5 的应用场景
HTML5 可以用于开发各种类型的应用：
1. 响应式网站
利用 HTML5 的语义化标签和 CSS3 的媒体查询，可以轻松创建适应不同设备的响应式网站。
2. 移动应用
结合 PhoneGap/Cordova 等框架，可以使用 HTML5、CSS3 和 JavaScript 开发跨平台的移动应用。
3. 游戏开发
利用 Canvas、WebGL 和 JavaScript，可以开发 2D 和 3D 网页游戏。
4. 富媒体应用
利用音频、视频和 Canvas，可以开发富媒体应用，如视频播放器、音乐播放器等。
5. 数据可视化
利用 Canvas、SVG 和 JavaScript 库（如 D3.js），可以创建交互式数据可视化应用。
6. 单页应用（SPA）
结合现代前端框架（如 React、Vue、Angular），可以开发复杂的单页应用。
HTML5 的浏览器支持
现代浏览器（Chrome、Firefox、Safari、Edge 等）都很好地支持 HTML5 的大部分特性。对于旧版浏览器，可以使用 polyfill 或 shim 来提供兼容性支持。
总结
HTML5 带来了许多新特性，极大地增强了 Web 应用的功能和用户体验。这些新特性不仅简化了开发过程，还使 Web 应用能够提供更接近原生应用的体验。随着浏览器对 HTML5 支持的不断完善，HTML5 将在 Web 开发中发挥越来越重要的作用。