当前位置：首页 > news >正文

《HTML 简易速速上手小册》第9章：HTML5 新特性（2024 最新版）

news 2025/12/21 20:39:47

在这里插入图片描述

文章目录

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引入了一系列新的元素和属性，旨在提供更丰富的文档结构，改善网页的语义性和互动性。
新的结构元素：新元素如<article>, <section>, <nav>, <header>, <footer>等，使得内容组织更加直观和有意义，有助于提高SEO和网站的可访问性。
新的表单元素：HTML5还包括了新的表单输入类型，如<input type="date">, <input type="range">等，使得表单更加用户友好和功能丰富。

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>文章标题1</h2><p>发表于 2024年1月28日</p></header><p>这里是文章内容...</p></article><article><header><h2>文章标题2</h2><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 还引入了如 <datalist>、<output> 等新元素，提供更多的互动性和功能性。

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：使用数据列表和输出元素的表单

这个案例展示了如何使用 <datalist> 和 <output> 元素来创建一个具有动态建议和实时反馈的表单。

<!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">100</output><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 + "<br>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和本地存储如何使网页更加动态和交互性强。这些功能不仅提高了网站的实用性，还增强了用户体验。

《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&a…...

编程日记 2024/1/30 15:45:51

计算机网络之NAT

NAT（网络地址转换，Network Address Translation）是一种网络技术，用于在一个网络与另一个网络之间重新映射IP地址。NAT最常见的应用是在家庭和小型办公室的路由器中，用于将私有（内部）IP地址转换为…...

编程日记 2024/1/30 15:43:48

SQL - 数据操作语句

SQL - 数据操作语句文章目录 SQL - 数据操作语句数据操作语言-DML1 新增2 修改3 删除4 清空数据类型1 数值类型2 字符串类型3 日期时间类型数据操作语言-DML 概念： DML（Data Manipulation Language）, 数据操作语言。对数据表数据的增、删…...

编程日记 2024/1/30 15:40:44

【Python笔记-设计模式】单例模式

一、说明单例是一种创建型设计模式，能够保证一个类只有一个实例， 并提供一个访问该实例的全局节点。 (一) 解决问题维护共享资源（数据库或文件）的访问权限，避免多个实例覆盖同一变量，引发程序崩溃。 …...

编程日记 2024/1/30 15:38:41

Java使用io流生成pdf文件

首先生成pdf和正常请求接口一样，直接写~ Controller层： 第一个注解：最顶层增加 Controller 注解（控制器）不多讲了直接加上。第二个注解：最顶层增加 CrossOrigin 注解此注解是为了浏览器请求的时候防…...

编程日记 2024/1/30 15:37:40

STL-priority_queue

文档目录 1.关于priority_queued1的定义 2.priority_queue的使用 1.关于priority_queued1的定义 1. 优先队列是一种容器适配器，根据严格的弱排序标准，它的第一个元素总是它所包含的元素中最大的。 2. 此上下文类似于堆，在堆中可以随时插入元…...

编程日记 2024/1/30 15:34:37

SpringBoot基于注解形式配置多数据源@DS

TOC() 1.引入依赖 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.2</version></dependency>2.配置…...

编程日记 2024/1/30 15:33:35

华清远见作业第三十四天——C++（第三天）

思维导图： 题目： 设计一个Per类，类中包含私有成员:姓名、年龄、指针成员身高、体重，再设计一个Stu类，类中包含私有成员:成绩、Per类对象p1，设计这两个类的构造函数、析构函数和拷贝构造函数。代码&#…...

编程日记 2024/1/30 15:32:34

Shell中正则表达式

1.正则表达式介绍 1、正则表达式---通常用于判断语句中，用来检查某一字符串是否满足某一格式 2、正则表达式是由普通字符与元字符组成 3、普通字符包括大小写字母、数字、标点符号及一些其他符号 4、元字符是指在正则表达式中具有特殊意义的专用字符&#xff0c…...

编程日记 2024/1/30 15:28:29

Flutter Canvas 属性详解与实际运用

在Flutter中，Canvas是一个强大的绘图工具，允许我们以各种方式绘制图形、文字和图像。了解Canvas的属性是开发高度定制化UI的关键。在本篇博客中，我们将深入探讨Flutter中Canvas的一些重要属性，并展示它们在实际应用中的使用。 1.…...

编程日记 2024/1/30 15:26:27

Django配置websocket时的错误解决

基于移动群智感知的网络图谱构建系统需要手机app不断上传数据到服务器并把数据推到前端标记在百度地图上，由于众多手机向同一服务器发送数据，如果使用长轮询，则实时性差、延迟高且服务器的负载过大，而使用websocket则有更好的性能…...

编程日记 2024/1/30 15:23:24

(免费分享)springboot,vue在线考试系统

springboot 在线考试系统前后端分离一、项目简介基于SpringBoot的在线考试系统二、技术实现后台框架：SpringBoot，mybatis-plus UI界面：Vue、ElementUI、Axios、Node.js（前后端分离） 数据库：MySQ…...

编程日记 2024/1/30 15:16:15

WebSocket 整合记录用法

WebSocket 介绍 WebSocket 是基于tcp的一种新的网络协议,可以让浏览器和服务器进行通信,然后区别于http需要三次握手,websocket只用一次握手,就可以创建持久性的连接,并进行双向数据传输 Http和WebSocket的区别 Http是短连接,WebSocket’是长连接Http通信是单向的,基于请求…...

编程日记 2024/1/30 15:14:13

代码随想录训练营第三十一天|122.买卖股票的最佳时机II55.跳跃游戏45.跳跃游戏II

122.买卖股票的最佳时机II class Solution { public:int maxProfit(vector<int>& prices) {int earn0;for(int i 0; i < prices.size()-1;i){int x prices[i 1] - prices[i];if(x>0){earnx;}}return earn;} }; 55.跳跃游戏本题关键在于看覆盖的范围利…...

编程日记 2024/1/30 15:11:09

python17-Python的字符串格式化

Python提供了“%”对各种类型的数据进行格式化输出，例如如下代码。 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2024/01# @Author : Laopiweight = 180print(老师傅的体重是 %s % weight) 上面程序就是格式化输出的关键代码，这行代码中的 print 函数包含三个部…...

编程日记 2024/1/30 15:10:07

HTTPS 之fiddler抓包--jmeter请求

一、浅谈HTTPS 我们都知道HTTP并非是安全传输，在HTTPS基础上使用SSL协议进行加密构成的HTTPS协议是相对安全的。目前越来越多的企业选择使用HTTPS协议与用户进行通信，如百度、谷歌等。HTTPS在传输数据之前需要客户端（浏览器）与服…...

编程日记 2024/1/30 15:06:01

Kotlin快速入门系列6

Kotlin的接口与扩展接口与Java类似，Kotlin使用interface关键字定义接口，同时允许方法有默认实现： interface KtInterfaceTest {fun method()fun methodGo(){println("上面方法未实现，此方法已实现")} } 接口实现 …...

编程日记 2024/1/30 15:05:00

w24文件上传之PHP伪协议

PHP支持的伪协议 file:// - 访问本地文件系统 http:// - 访问网址 ftp:// - 访问文件 php:// -访问各个输入/输出流 zlib:// -压缩流 data:// - 数据 glob:// -查找匹配的文件路径模式 phar:// - php归档 ssh2:// - Secure shell 2 rar:// - RAR ogg:// - 音频流 expect:// - …...

编程日记 2024/1/30 15:00:56

SQL注入攻击 - 基于时间的盲注

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 1、SQL 盲注基础盲注（Blind SQL）是注入攻击的一种形式，攻击者通过向数据库发送true或false等问题，并根据应用程序返回的信息来判断结果。这种攻击方式出现的原因是应用程序配…...

编程日记 2024/1/30 14:59:55

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/12/17 13:33:37

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2025/12/19 4:06:55

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2025/12/17 11:51:51

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/12/12 4:55:21

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/21 1:04:43

什么是VR全景技术

VR全景技术，全称为虚拟现实全景技术，是通过计算机图像模拟生成三维空间中的虚拟世界，使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验，结合图文、3D、音视频等多媒体元素…...

编程新知 2025/12/17 1:39:02

Vue 模板语句的数据来源

🧩 Vue 模板语句的数据来源：全方位解析 Vue 模板（<template> 部分）中的表达式、指令绑定（如 v-bind, v-on）和插值（{{ }}）都在一个特定的作用域内求值。这个作用域由当前组件…...

编程新知 2025/10/4 11:36:04

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/10/8 16:37:52

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统：AI驱动的职业规划平台技术解析引言：数字时代的职业革命在当今瞬息万变的就业市场中，传统的职业规划方法已无法满足个人和企业的需求。据统计，全球每年有超过2亿人面临职业转型困境，而企业也因此遭…...

编程新知 2025/9/26 10:15:18

文章目录

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：使用本地存储来保存用户数据

相关文章：