什么是 HTML5？
HTML5 是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5 的目标是提供提供更丰富的网页内容，减少对插件的依赖（如 Flash），并支持跨平台的应用开发。
HTML5 的新特性
HTML5 是最新的 HTML 标准，它既保留了 HTML4 的原有特性，又新增新的元素和 API，主要包括：
- 语义化标签：如<header>、<footer>、<article>、<section>等，使得网页结构更加清晰。
- 多媒体支持：通过<audio>、<video>标签，可以直接在网页中嵌入音频和视频，无需插件。
- 图形绘制：通过<canvas>标签，可以使用 JavaScript 在网页上绘制图形。
- 本地存储：提供了localStorage和sessionStorage，允许在客户端存储大量数据。
- 表单增强：新增了多种输入类型（如 email、date、range 等）和属性（如 placeholder、required 等），使得表单处理更加方便。
- 地理定位：通过Geolocation API，可以获取用户的地理位置信息。
- Web Workers：允许在后台运行 JavaScript，避免阻塞主线程。
HTML5 文档声明
1. HTML5 的新的文档类型（DOCTYPE）声明非常简单：
<!DOCTYPE html>注意：<!DOCTYPE html>是 HTML5 的文档类型声明，它告诉浏览器这是一个 HTML5 文档。
2. 同时 HTML 文档使用的字符编码也非常简单：
<meta charset="UTF-8">注意：<meta charset="UTF-8">指定了文档的字符编码为 UTF-8，确保网页能够正确显示各种字符。
下面是一个带有文档声明和字符编码的简单 HTML5 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>注意：HTML5 中默认的字符编码是 UTF-8。
HTML5 表单增强
HTML5 提供了许多新地输入类型和属性，使得表单处理更加方便。
1. 新的输入类型
- email：用于输入电子邮件地址。
- date：用于输入日期。
- range：用于输入范围内的数值。
- color：用于选择颜色。
<form>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="birthdate">生日：</label>
<input type="date" id="birthdate" name="birthdate">
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100">
<label for="favcolor">喜欢的颜色：</label>
<input type="color" id="favcolor" name="favcolor">
<input type="submit" value="提交">
</form>2. 新的表单属性
- placeholder：在输入框中显示提示文本。
- required：指定输入框为必填项。
- autofocus：页面加载时自动聚焦到该输入框。
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required autofocus>
<input type="submit" value="提交">
</form>3. HTML5 多媒体
HTML5 通过<audio>和<video>标签，可以直接在网页中嵌入音频和视频。
音频<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio><video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>HTML5 图形绘制
HTML5 提供了<canvas>标签，可以使用 JavaScript 在网页上绘制图形。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 canvas 元素。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>HTML5 本地存储
HTML5 提供了localStorage和sessionStorage，允许在客户端存储大量数据。
1. localStorage
localStorage存储的数据没有过期时间，除非手动删除。
<script>
// 存储数据
localStorage.setItem("name", "John Doe");
// 获取数据
var name = localStorage.getItem("name");
console.log(name); // 输出 "John Doe"
// 删除数据
localStorage.removeItem("name");
</script>2. sessionStorage
sessionStorage存储的数据在会话结束时（关闭浏览器标签页）会被清除。
<script>
// 存储数据
sessionStorage.setItem("name", "Jane Doe");
// 获取数据
var name = sessionStorage.getItem("name");
console.log(name); // 输出 "Jane Doe"
// 删除数据
sessionStorage.removeItem("name");
</script>HTML5 废弃元素
以下 HTML 4.01 元素已从 HTML5 中删除：
标签
作用
<acronym>
定义首字母缩写（已废弃，建议使用<abbr>）
<applet>
嵌入Java小程序（已废弃，建议使用<object>）
<basefont>
设置页面默认字体（已废弃，建议使用CSS）
<big>
增大文本字体大小（已废弃，建议使用CSS）
<center>
居中内容（已废弃，建议使用CSS）
<dir>
定义目录列表（已废弃，建议使用<ul>）
<font>
设置字体样式（已废弃，建议使用CSS）
<frame>
定义框架（已废弃，建议使用<iframe>）
<frameset>
定义框架集（已废弃，建议使用<iframe>或CSS布局）
<noframes>
为不支持框架的浏览器提供替代内容（已废弃）
<strike>
定义删除线文本（已废弃，建议使用<del>或CSS）
<tt>
定义等宽字体文本（已废弃，建议使用CSS）
评论区 0
发表评论
教程介绍
HTML5 是 HTML 的修订标准，2014年由万维网联盟（W3C）完成标准制定。
60
章节
1,331
阅读
0
评论