《HTML 简易速速上手小册》第9章：HTML5 新特性（2024 最新版）
文章目录
- 9.1 HTML5 新增标签和属性
-
- 9.1.1 基础知识
- 9.1.2 案例 1：创建一个结构化的博客页面
- 9.1.3 案例 2：使用新的表单元素创建事件注册表单
- 9.1.4 案例 3：创建一个具有高级搜索功能的搜索表单
- 9.2 HTML5 表单增强
-
- 9.2.1 基础知识
- 9.2.2 案例 1：创建一个具有高级输入类型的表单
- 9.2.3 案例 2：使用数据列表和输出元素的表单
- 9.2.4 案例 3：创建一个带有表单验证的注册表单
- 9.3 HTML5 的 API 和本地存储
-
- 9.3.1 基础知识
- 9.3.2 案例 1：使用地理位置 API
- 9.3.3 案例 2：使用 Canvas API 创建简单图形
- 9.3.4 案例 3：使用本地存储来保存用户数据
9.1 HTML5 新增标签和属性
9.1.1 基础知识
- HTML5介绍：HTML5引入了一系列新的元素和属性，旨在提供更丰富的文档结构，改善网页的语义性和互动性。
- 新的结构元素：新元素如
,,,等，使得内容组织更加直观和有意义，有助于提高SEO和网站的可访问性。 - 新的表单元素：HTML5还包括了新的表单输入类型，如
,等，使得表单更加用户友好和功能丰富。
9.1.2 案例 1：创建一个结构化的博客页面
在这个案例中，我们将使用HTML5的新结构标签来创建一个博客页面。
DOCTYPE html>
<html>
<head>
<title>我的博客title>
head>
<body>
<header>
<h1>我的博客h1>
<nav>
<ul>
<li><a href="#">首页a>li>
<li><a href="#">文章a>li>
<li><a href="#">关于我a>li>
ul>
nav>
header>
<section>
<article>
<header>
<h2>文章标题1h2>
<p>发表于 2024年1月28日p>
header>
<p>这里是文章内容...p>
article>
<article>
<header>
<h2>文章标题2h2>
<p>发表于 2024年1月20日p>
header>
<p>这里是另一篇文章的内容...p>
article>
section>
<footer>
<p>版权所有 © 2024 我的博客p>
footer>
body>
html>
9.1.3 案例 2：使用新的表单元素创建事件注册表单
接下来，我们将使用HTML5的新表单元素来创建一个事件注册表单。
DOCTYPE html>
<html>
<head>
<title>事件注册title>
head>
<body>
<form>
<label for="name">姓名:label>
<input type="text" id="name" name="name" required><br>
<label for="email">电子邮箱:label>
<input type="email" id="email" name="email" required><br>
<label for="event-date">事件日期:label>
<input type="date" id="event-date" name="event-date" required><br>
<label for="guest-number">来宾数量:label>
<input type="number" id="guest-number" name="guest-number" min="1" max="10" required><br>
<button type="submit">注册button>
form>
body>
html>
9.1.4 案例 3：创建一个具有高级搜索功能的搜索表单
在这个案例中，我们将创建一个搜索表单，使用HTML5的一些新属性来增强用户体验。
DOCTYPE html>
<html>
<head>
<title>高级搜索title>
head>
<body>
<form>
<input type="search" id="search" name="search" placeholder="搜索..." aria-label="搜索">
<button type="submit">搜索button>
<label for="category">分类:label>
<select id="category" name="category">
<option value="all">所有option>
<option value="blog">博客option>
<option value="news">新闻option>
select>
<label for="date-from">从:label>
<input type="date" id="date-from" name="date-from">
<label for="date-to">到:label>
<input type="date" id="date-to" name="date-to">
form>
body>
html>
通过这些案例，你可以了解如何运用HTML5的新特性来构
建更加丰富和互动的网页。这些新元素和属性不仅提高了网页的可用性和可访问性，还为用户带来了更好的体验。
9.2 HTML5 表单增强
9.2.1 基础知识
- HTML5 表单新特性：HTML5 引入了多种新的表单输入类型和属性，旨在增强表单的功能性和用户体验。这些新特性包括日期选择器、范围滑块、颜色选择器等。
- 数据验证：HTML5 还提供了内置的表单验证机制，如
required,pattern, 和type属性，使表单验证更简单高效。 - 新的表单元素：除了新的输入类型，HTML5 还引入了如
、等新元素，提供更多的互动性和功能性。
9.2.2 案例 1：创建一个具有高级输入类型的表单
在这个案例中，我们将创建一个表单，其中包含多种HTML5的新输入类型。
DOCTYPE html>
<html>
<head>
<title>高级输入类型表单title>
head>
<body>
<form>
<label for="color">选择颜色:label>
<input type="color" id="color" name="color"><br>
<label for="birthdate">出生日期:label>
<input type="date" id="birthdate" name="birthdate"><br>
<label for="quantity">数量:label>
<input type="number" id="quantity" name="quantity" min="1" max="10"><br>
<label for="email">电子邮箱:label>
<input type="email" id="email" name="email"><br>
<label for="range">调整范围:label>
<input type="range" id="range" name="range" min="0" max="100"><br>
<button type="submit">提交button>
form>
body>
html>
9.2.3 案例 2：使用数据列表和输出元素的表单
这个案例展示了如何使用 和 元素来创建一个具有动态建议和实时反馈的表单。
DOCTYPE html>
<html>
<head>
<title>数据列表和输出表单title>
head>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<label for="a">输入 A:label>
<input type="range" id="a" name="a" value="50"><br>
<label for="b">输入 B:label>
<input type="range" id="b" name="b" value="50"><br>
<label for="cities">选择城市:label>
<input list="cities" name="city">
<datalist id="cities">
<option value="纽约">
<option value="伦敦">
<option value="北京">
<option value="东京">
<option value="巴黎">
datalist><br>
<label for="result">结果:label>
<output name="result" for="a b">100output><br>
<button type="submit">提交button>
form>
body>
html>
9.2.4 案例 3：创建一个带有表单验证的注册表单
这个案例将展示如何使用HTML5的表单验证特性来创建一个安全的注册表单。
DOCTYPE html>
<html>
<head>
<title>带验证的注册表单title>
head>
<body>
<form>
<label for="username">用户名:label>
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,}" title="用户名至少需要5个字符" required><br>
<label for="password">密码:label>
<input type="password" id="password" name="password" minlength="8" required><br>
<label for="email">电子邮箱:label>
<input type="email" id="email" name="email" required><br>
<button type="submit">注册button>
form>
body>
html>
通过这些案例，你将能够了解和应用HTML5的一些先进的表单特性，从而创建出功能
更强大、用户体验更佳的表单。这些特性不仅使表单更加友好和易于使用，还提高了数据的准确性和安全性。
9.3 HTML5 的 API 和本地存储
9.3.1 基础知识
- HTML5 API：HTML5引入了多种新的API，扩展了网页的功能，比如地理位置API、画布(Canvas) API、拖放API等。
- 本地存储：HTML5提供了两种主要的本地存储方式：localStorage和sessionStorage。这些存储机制允许网页在用户的浏览器中存储数据，即使在页面刷新后也能保持。
- 地理位置API：允许网站获取用户的地理位置信息，前提是用户授权。
9.3.2 案例 1：使用地理位置 API
我们将创建一个简单的页面，它可以获取并显示用户的当前位置。
DOCTYPE html>
<html>
<head>
<title>地理位置示例title>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
document.getElementById("location").innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
script>
head>
<body>
<button onclick="getLocation()">获取位置button>
<p id="location">p>
body>
html>
9.3.3 案例 2：使用 Canvas API 创建简单图形
这个示例展示了如何使用Canvas API来绘制基本图形。
DOCTYPE html>
<html>
<head>
<title>Canvas API示例title>
head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
script>
body>
html>
9.3.4 案例 3：使用本地存储来保存用户数据
在这个案例中，我们将使用localStorage来存储用户的数据。
DOCTYPE html>
<html>
<head>
<title>本地存储示例title>
<script>
function saveData() {
var name = document.getElementById("name").value;
localStorage.setItem("userName", name);
}
function loadData() {
var storedName = localStorage.getItem("userName");
if (storedName) {
document.getElementById("welcomeMessage").innerHTML = "欢迎回来，" + storedName;
}
}
script>
head>
<body onload="loadData()">
<input type="text" id="name" placeholder="输入你的名字">
<button onclick="saveData()">保存button>
<p id="welcomeMessage">p>
body>
html>
通过这些案例，你可以了解HTML5的API和本地存储如何使网页更加动态和交互性强。这些功能不仅提高了网站的实用性，还增强了用户体验。