《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引入了一系列新的元素和属性，旨在提供更丰富的文档结构，改善网页的语义性和互动性。
  • 新的结构元素：新元素如<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和本地存储如何使网页更加动态和交互性强。这些功能不仅提高了网站的实用性，还增强了用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/439410.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Windows Server 2025 LTSC 预览版来了

Windows Server 2025 LTSC 预览版来了

Windows Server 2025 LTSC 预览版来了 1. 安装 Windows Server 2025 LTSC 预览版2. 安装 VMware Tools3. Windows Server 2025 LTSC 预览版4. Windows Server 2025 LTSC 预览版下载地址 1. 安装 Windows Server 2025 LTSC 预览版 使用 VMware Workstation 安装&#xff0c; 安…
阅读更多...
测试ASP.NET Core项目调用EasyCaching的基本用法（InMemory）

测试ASP.NET Core项目调用EasyCaching的基本用法（InMemory）

EasyCaching属于开源缓存库&#xff0c;支持基本缓存方式及高级缓存用法&#xff0c;提高用户操作缓存的效率。EasyCaching支持的缓存方式包括以下类型&#xff0c;本文学习最基础的InMemory方式的基本用法。   EasyCaching.InMemory包属于基于内存的缓存库&#xff0c;使用的…
阅读更多...
QWidget

QWidget

目录 setWindowTitle 改变主体窗口大小 setWindowTitle 代码&#xff1a; ui->setupUi(this);setWindowTitle("CSDN"); 这样写可以&#xff0c;但是下面的写在ui指针前面的写法就不行&#xff0c;达不到效果&#xff1a; 改变主体窗口大小 代码&#xff1a; …
阅读更多...
运行VUE提示找不到模块validate-engines.js...

运行VUE提示找不到模块validate-engines.js...

原来好好的&#xff0c;突然提示找不到模块validate-engines.js&#xff0c;CMD命令行输入npm -v不是内部或外部命令&#xff0c;node -v可以查看到版本号。 解决&#xff1a; 1. 卸载nodejs&#xff0c;重新下载安装文件&#xff1a;下载nodejs 2. 到目录&#xff1a;C:\Us…
阅读更多...
20240129收获

20240129收获

今天终于发现《八部金刚功》第五部我一直做的是错的&#xff0c;嗨。这里这个写法非常聪明&#xff0c;创立的数组&#xff0c;以及用obj[key] item[key]这样的写法&#xff0c;这个写法充分展示了js常规写法中只有等号右边会去参与运算&#xff0c;等号左边就是普通的键的写法…
阅读更多...
day35WEB 攻防-通用漏洞XSS 跨站反射存储DOMBeef-XSS

day35WEB 攻防-通用漏洞XSS 跨站反射存储DOMBeef-XSS

目录 一&#xff0c;XSS 跨站-原理&分类&手法&探针 1、原理 2、分类 3、危害 二&#xff0c;反射型XSS 1&#xff0c;案例演示 三&#xff0c;存储型XSS 1&#xff0c;案例演示 四&#xff0c;DOM 型XSS 五&#xff0c;XSS 利用环境-XSS 平台&Beef-XS…
阅读更多...
Nacos注册中心核心原理

Nacos注册中心核心原理

不知你是否跟我一样&#xff0c;在使用Nacos时有以下几点疑问&#xff1a; 临时实例和永久实例是什么&#xff1f;有什么区别&#xff1f; 服务实例是如何注册到服务端的&#xff1f; 服务实例和服务端之间是如何保活的&#xff1f; 服务订阅是如何实现的&#xff1f; 集群间数…
阅读更多...
零基础学习数学建模——（四）备战美赛

零基础学习数学建模——（四）备战美赛

本篇博客将讲解如何备战美赛。 什么是美赛 美赛&#xff0c;全称是美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;由美国数学及其应用联合会主办&#xff0c;是最高的国际性数学建模竞赛&#xff0c;也是世界范围内最具影响力的数学建模竞赛。 赛题内容…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第七十六期】Fri, 12 Jan 2024

【AI视野·今日NLP 自然语言处理论文速览 第七十六期】Fri, 12 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 12 Jan 2024 Totally 60 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Axis Tour: Word Tour Determines the Order of Axes in ICA-transformed Embeddings Authors Hiroaki Yamagi…
阅读更多...
Ubuntu22.04 网络图标突然消失

Ubuntu22.04 网络图标突然消失

本来 好好的&#xff0c;突然就发现没有网络了&#xff0c;图标也不见了。 修复办法 1. sudo service network-manager stop2. sudo rm /var/lib/NetworkManager/NetworkManager.state3. sudo service network-manager start到这基本应该就恢复了&#xff0c;如果还不行往后继…
阅读更多...
西瓜书学习笔记——层次聚类（公式推导+举例应用）

西瓜书学习笔记——层次聚类（公式推导+举例应用）

文章目录 算法介绍实验分析 算法介绍 层次聚类是一种将数据集划分为层次结构的聚类方法。它主要有两种策略&#xff1a;自底向上和自顶向下。 其中AGNES算法是一种自底向上聚类算法&#xff0c;用于将数据集划分为层次结构的聚类。算法的基本思想是从每个数据点开始&#xff0…
阅读更多...
STM32——DMA

STM32——DMA

一、DMA DMA直接存储器存储 DMA提高外设到存储器&#xff0c;存储器到存储器之间的高速数据传输&#xff0c;无需CPU的干扰&#xff0c;减轻了CPU的负担&#xff1b; SMT32的DMA有多个通道&#xff0c;每个通道都可以通过软件触发或者特定的硬件触发&#xff1b; 外设到存储…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023