《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.mzph.cn/news/661808.shtml

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

相关文章

VScode注释快捷键,RStudio注释快捷键, Texmaker注释快捷键

VScode&#xff1a;一款界面简单的代码编辑器&#xff1b;RStudio: R语言的IDE&#xff0c;包含代码编辑器&#xff0c;运行&#xff0c;绘图窗口等&#xff1b;Texmaker&#xff1a;Latex编译器&#xff08;编辑编译&#xff09;&#xff0c;界面简单&#xff0c;个人认为比Te…

ArrayList的扩容机制详解,解决面试难题!

前言 大家好&#xff0c;我是chowley&#xff0c;不知各位在面试中&#xff0c;是否被问过 ‘读没读过相关框架的源码&#xff1f;’ 这个经典问题&#xff1f;我最近就遇到了&#xff0c;虽然我之前读过&#xff0c;但这玩意干读不进味啊 今天我就来讲讲ArrayList&#xff0…

揭秘远程控制APP的便捷之美!

在这个科技日新月异的时代&#xff0c;我们的生活被各种手机软件所包围。几乎每个人都有一个甚至多个手机&#xff0c;你是否也有遇到过需要远程操作自己某一台手机的场景呢&#xff1f;今天&#xff0c;我要向大家推荐一款神奇的手机远程操作神器&#xff0c;让你可以随时随地…

Kore.ai获10亿元融资,提供定制化类ChatGPT助手

1月31日&#xff0c;生成式AI和企业对话平台Kore.ai在官网宣布&#xff0c;获得1.5 亿美元&#xff08;约10.7亿元&#xff09;融资。本次由FTV Capital 领投&#xff0c;英伟达等跟投。 Kore.ai主要提供银行、医疗、零售、营销、人力资源等多种领域的&#xff0c;定制化类Cha…

【动态规划】【C++算法】1340. 跳跃游戏 V

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 LeetCode1340跳跃游戏 V 给你一个整数数组 arr 和一个整数 d 。每一步你可以从下标 i 跳到&#xff1a; i x &#xff0c;其中 i x < arr.length 且 0 < x…

zsh: command not found: mysql (mac通过安装MySQL后终端cmd找不到mysql命令)

考虑是mysql环境变量没有配置的问题 1.查找mysql安装路径 ps -ef|grep mysql 2.先启动上安装的mysql 3. 查看 .bash_profile 文件 ls -al 查看是否有(.bash_profile)文件 如果没有就输入以下命令创建一个&#xff0c;再查看 touch .bash_profile 4.打开 .bash_profile 文件 …

C++——析构函数

C——析构函数 什么是析构函数 析构函数是C中的一个特殊的成员函数&#xff0c;它在对象生命周期结束时被自动调用&#xff0c;用于执行对象销毁前的清理工作。析构函数特别重要&#xff0c;尤其是在涉及动态分配的资源&#xff08;如内存、文件句柄、网络连接等&#xff09;…

Android 8.1 设置--声音中增加通话音量

Android 8.1 设置--声音中增加通话音量 近来收到项目需求&#xff0c;想要在设置--声音中增加一项通话音量调节&#xff0c;具体修改参照如下&#xff1a; /vendor/mediatek/proprietary/packages/apps/MtkSettings/res/values/strings.xml <!-- Sound: Title for the opt…

ARM/CM3/CM4:读写内核寄存器和内核特殊寄存器

方式1&#xff1a;内联汇编&#xff0c;所以跟C编译器有关&#xff0c;有些编译器可能会不支持&#xff08;每种编译器内联汇编的形式都不一样&#xff09;&#xff0c;本代码在MDK的“defaul compiler version 6”编译器里测试通过。 uint32_t core_res_c;void set_core_res(…

kubekey网页版安装k8s集群操作流程

kubekey可以一键拉起k8s集群并完成kubesphere的部署&#xff0c;以后kubekey简称kk。kk 3.2版本以前都是在宿主机上完成对应的创建集群、添加节点、升级等操作的&#xff0c;3.2版本后开始往页面操作的方向演进&#xff0c;kk 3.2版本现在还是alpha&#xff0c;所以不推荐在生产…

C语言数组:从入门到进阶

前言&#xff1a; 在这篇博客中&#xff0c;我们将学习如何使用C语言数组的基本知识。数组是C语言中的一种重要数据结构&#xff0c;它允许我们存储一系列相同类型的数据。我们将讨论数组的定义、初始化、访问元素、遍历数组以及数组的应用场景。此外&#xff0c;我们还将通过…

MySQL基础查询篇(1)-使用GROUP BY分组数据

在MySQL数据库中&#xff0c;GROUP BY语句是一种用于分组数据的非常有用的功能。它允许我们根据指定的列将数据行分组为不同的集合&#xff0c;并对每个组应用聚合函数。这使得我们能够从大量数据中提取所需的汇总信息。 首先&#xff0c;让我们看一个简单的示例。假设我们有一…

SpringBoot使用Rabbit详解含完整代码

1. 摘要 本文将详细介绍如何在Spring Boot应用程序中集成和使用RabbitMQ消息队列。RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;用于通过轻量级和可靠的消息在应用程序或系统之间进行异步通信。本文将通过步骤说明、代码示例和详细注释&#xff0c;指导读者在Spring…

【数据分享】1929-2023年全球站点的逐年最高气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2023年全球气象站…

python如何实现异步并发

下面是一个示例代码&#xff0c;展示了如何设计一个异步线程池&#xff0c;并实现线程池满了就等待&#xff0c;空了就继续扔的功能&#xff1a; import concurrent.futures import time # 创建一个线程池 thread_pool concurrent.futures.ThreadPoolExecutor(max_workers8) …

Oracle 如何强制重构索引

在Oracle数据库中&#xff0c;当索引变得碎片化或性能下降时&#xff0c;通常建议对索引进行重构。重构索引可以消除碎片&#xff0c;提高查询性能&#xff0c;并维护索引的完整性。在Oracle中&#xff0c;你可以使用ALTER INDEX语句来强制重构索引。 下面是强制重构索引的一般…

el-table动态合并

废话就不多说了&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; 合并行 // 方法一 <template><div class"container"><el-table :data"dataSource" :border"true":header-cell-style"{ font-weight: normal,…

Kotlin中的内置函数-apply、let

在使用Kotlin的过程中会经常用到其内置函数&#xff0c;包括apply&#xff0c;let&#xff0c;run&#xff0c;with&#xff0c;also&#xff0c;takeIf,takeUnless函数等&#xff0c;想要更好熟悉Kotlin&#xff0c;这些函数必须烂熟于心&#xff0c;接下来让我们来逐步了解&a…

redis的AOF

redis 提供了两种持久化方式—— RDB(Redis DataBase) 和 AOF(Append Only File) &#xff0c;可以将 Redis 在内存中的数据库状态保存到磁盘里。 RDB快照并不是很可靠。如果服务器突然宕机了&#xff0c;最新的数据就会丢失。除了 RDB 持久化功能之外&#xff0c;Redis 还提供…

大语言模型之LlaMA系列- LlaMA 2及LLaMA2_chat(上)

LlaMA 2是一个经过预训练与微调的基于自回归的transformer的LLMs&#xff0c;参数从7B至70B。同期推出的Llama 2-Chat是Llama 2专门为对话领域微调的模型。 在许多开放的基准测试中Llama 2-Chat优于其他开源的聊天模型&#xff0c;此外Llama 2-Chat还做了可用性与安全性评估。 …