《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.rhkb.cn/news/247806.html

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

相关文章

【Algorithms 4】算法（第4版）学习笔记 01 - 1.5 案例研究：union-find算法

【Algorithms 4】算法（第4版）学习笔记 01 - 1.5 案例研究：union-find算法

文章目录 前言参考目录学习笔记1&#xff1a;动态连通性2&#xff1a;UF 实现 1&#xff1a;快速查找 quick-find2.1&#xff1a;demo 演示 12.2&#xff1a;demo 演示 22.3&#xff1a;quick-find 代码实现3&#xff1a;UF 实现 2&#xff1a;快速合并 quick-union3.1&#xf…
阅读更多...
第 6 章：Linux中使用时钟、计时器和信号

第 6 章：Linux中使用时钟、计时器和信号

在本章中&#xff0c;我们将开始探索Linux环境中可用的各种计时器。随后&#xff0c;我们将深入了解时钟的重要性&#xff0c;并探讨UNIX时间的概念。接下来&#xff0c;我们将揭示在Linux中使用POSIX准确测量时间间隔的方法。之后&#xff0c;我们将进入std::chrono的领域&…
阅读更多...
第二篇:数据结构与算法-顺序表

第二篇:数据结构与算法-顺序表

顺序表 动态星空制作 #include <iostream> #include <graphics.h> #include <Windows.h> using namespace std;#define MAX_START 100 //星星数 #define MAX_MARGIN 80 //随机地 #define WIN_WIDTH 640 //窗口宽 #define WIN_HEIGHT 480 //窗口高 #define…
阅读更多...
.ui文件相关

.ui文件相关

目录 ui类生成过程&#xff1a; 提问&#xff1a; 等以后自己熟练了用代码写这些样式内容&#xff0c;尽量用代码写&#xff0c;原因很简单&#xff1a; 用代码写的可以直接修改代码&#xff0c;但是在设计界面修改的东西&#xff0c;电脑没有QC这玩意&#xff0c;还真不好改…
阅读更多...
计算机网络-数据交换方式（电路交换 报文交换 分组交换及其两种方式 ）

计算机网络-数据交换方式（电路交换 报文交换 分组交换及其两种方式 ）

文章目录 为什么要数据交换&#xff1f;总览电路交换电路交换的各个阶段建立连接数据传输释放连接 电路交换的特点电路交换的优缺点 报文交换报文交换流程报文交换的优缺点 分组交换分组交换流程分组交换的优缺点 数据交换方式的选择分组交换的两种方式数据报方式数据报方式的特…
阅读更多...
深入浅出 diffusion(4)：pytorch 实现简单 diffusion

深入浅出 diffusion(4)：pytorch 实现简单 diffusion

1. 训练和采样流程 2. 无条件实现 import torch, time, os import numpy as np import torch.nn as nn import torch.optim as optim from torchvision.datasets import MNIST from torchvision import transforms from torch.utils.data import DataLoader from torchvision.…
阅读更多...
基于Redis的高可用分布式锁——RedLock

基于Redis的高可用分布式锁——RedLock

目录 RedLock简介 RedLock工作流程 获取锁 释放锁 RedLock简介 Redis作者提出来的高可用分布式锁由多个完全独立的Redis节点组成&#xff0c;注意是完全独立&#xff0c;而不是主从关系或者集群关系&#xff0c;并且一般是要求分开机器部署的利用分布式高可以系统中大多数存…
阅读更多...
基于ncurse的floppy_bird小游戏

基于ncurse的floppy_bird小游戏

1. 需求分析 将运动分解为鸟的垂直运动和杆的左右运动。 2. 概要设计 2.1 鸟运动部分 2.2 杆的运动 3. 代码实现 #include <stdio.h> #include <ncurses.h>#include <stdlib.h> #include <time.h>int vx 0; int vy 1;int bird_r; int bird_c;int…
阅读更多...
2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测（matlab）

2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测（matlab）

2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测&#xff08;matlab&#xff09; CDO-CNN-BiLSTM-Attention切诺贝利灾难优化器优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 切诺贝利灾难优化器Chernobyl Disaster Optimizer (CDO)是H. Shehadeh于202…
阅读更多...
力扣题集（第一弹）

力扣题集（第一弹）

一日练,一日功;一日不练十日空。 学编程离不开刷题&#xff0c;接下来让我们来看几个力扣上的题目。 1. 242. 有效的字母异位词 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数…
阅读更多...
详解OpenHarmony各部分文件在XR806上的编译顺序

详解OpenHarmony各部分文件在XR806上的编译顺序

大家好&#xff0c;今天我们来谈一谈编程时一个很有趣的话题——编译顺序。我知道&#xff0c;一提到编译可能大家会感到有点儿头疼&#xff0c;但请放心&#xff0c;我不会让大家头疼的。我们要明白&#xff0c;在开始写代码之前&#xff0c;了解整个程序的编译路径是十分有必…
阅读更多...
[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--大模型、扩散模型、视觉语言导航

[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--大模型、扩散模型、视觉语言导航

专属领域论文订阅 VX 关注{晓理紫}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新论文。 为了答谢各位网友的支持&#xff0c;从今日起免费…
阅读更多...
【国产MCU】-认识CH32V307及开发环境搭建

【国产MCU】-认识CH32V307及开发环境搭建

认识CH32V307及开发环境搭建 文章目录 认识CH32V307及开发环境搭建1、CH32V307介绍2、开发环境搭建3、程序固件下载1、CH32V307介绍 CH32V307是沁恒推出的一款基于32位RISC-V设计的互联型微控制器，配备了硬件堆栈区、快速中断入口，在标准RISC-V基础上大大提高了中断响应速度…
阅读更多...
Unity3d实现简单的战斗

Unity3d实现简单的战斗

使用u3d实现一个简单的战斗demo&#xff0c;记下学到的知识点&#xff0c;以备后查。 1.判断鼠标是否点中制定物体 if (Input.GetMouseButton(0)) {Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit)){//坐标转换Ve…
阅读更多...
Docker 安装篇（Ubuntu）

Docker 安装篇（Ubuntu）

图省事一般采用第一种 一、 直接采用apt安装 apt install docker.io查看 /usr/lib/systemd/system/docker.service ubuntu默认守护进程用的&#xff1a;fd:// ps -ef | grep docker root 775237 1 0 11:14 ? 00:01:07 /usr/bin/dockerd -H fd:// --cont…
阅读更多...
Python qt.qpa.xcb: could not connect to display解决办法

Python qt.qpa.xcb: could not connect to display解决办法

遇到问题&#xff1a;qt.qpa.xcb: could not connect to display 解决办法&#xff0c;在命令行输入&#xff1a; export DISPLAY:0 然后重新跑python程序&#xff0c;解决&#xff01; 参考博客&#xff1a;qt.qpa.xcb: could not connect to displayqt.qpa.plugin: Could …
阅读更多...
Mysql-事务（隔离级别，事务底层原理，MVCC）

Mysql-事务（隔离级别，事务底层原理，MVCC）

什么是事务&#xff1f;有哪些特性&#xff1f; 事务&#xff1a;事务指的是逻辑上的一组操作&#xff0c;组成这组操作的各个单元要么全都成功&#xff0c;要么全都失败。 事务特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a; 原子性是指事务是一个不…
阅读更多...
window下如何安装ffmpeg(跨平台多媒体处理工具)

window下如何安装ffmpeg(跨平台多媒体处理工具)

ffmpeg是什么? FFmpeg是一个开源的跨平台多媒体处理工具&#xff0c;可以用于录制、转换和流媒体处理音视频。它包含了几个核心库和工具&#xff0c;可以在命令行下执行各种音视频处理操作&#xff0c;如剪辑、分割、合并、媒体格式转换、编解码、流媒体传输等。FFmpeg支持多…
阅读更多...
探索Java中最常用的框架：Spring、Spring MVC、Spring Boot、MyBatis和Netty

探索Java中最常用的框架：Spring、Spring MVC、Spring Boot、MyBatis和Netty

目录 前言 Spring框架 Spring MVC框架 Spring Boot框架 MyBatis框架 Netty框架 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊探索Java中最常用的框架&#xff1a;Spring、Spring MVC、Spring Boot、MyBatis和Netty&#xff0c;希…
阅读更多...
解锁Web3：数字未来的大门

解锁Web3：数字未来的大门

随着科技的不断推进&#xff0c;我们正站在数字时代的新门槛上。Web3&#xff0c;作为互联网的下一个演进阶段&#xff0c;正在逐渐揭开数字未来的面纱。本文将深入探讨Web3的本质、对社会的影响以及在数字时代中所扮演的关键角色。 什么是Web3&#xff1f; Web3是互联网发展的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发