湖州市住房和城乡建设局官方网站/太原百度seo

湖州市住房和城乡建设局官方网站,太原百度seo,o2o是什么意思通俗讲,做网站和做网店哪个好HTML5 初探:新特性与本地存储的魔法 作为一名前端新手,你可能听说过 HTML5 这个名词。它是 HTML 的第五代版本,不仅让网页变得更强大,还带来了许多新功能和工具。今天,我们就来聊聊 HTML5 的新特性,以及它…

HTML5 初探:新特性与本地存储的魔法

作为一名前端新手,你可能听说过 HTML5 这个名词。它是 HTML 的第五代版本,不仅让网页变得更强大,还带来了许多新功能和工具。今天,我们就来聊聊 HTML5 的新特性,以及它如何通过本地存储让网页更智能。别担心,我会用最简单的方式带你入门!

一、HTML5 是什么?

简单来说,HTML5 是网页开发的基础语言(HyperText Markup Language)的升级版。它不仅能写出网页的结构,还增加了许多新功能,让开发者可以轻松实现动画、视频播放、本地存储等功能,而不需要依赖额外的插件(比如以前的 Flash)。

HTML5 的目标是让网页更现代、更互动、更用户友好。下面,我们来看看它的一些“超能力”!

二、HTML5 的新特性

1. 语义化标签

在 HTML4 中,开发者常用 <div> 来布局网页,但这让代码看起来很乱,也不利于搜索引擎理解。HTML5 引入了语义化标签,比如:

  • <header>:表示页面的头部
  • <footer>:表示页面的底部
  • <article>:表示一篇独立的文章
  • <section>:表示一个内容区域

举个例子:

<!DOCTYPE html>
<html>
<head><title>我的第一个HTML5页面</title>
</head>
<body><header><h1>欢迎来到我的博客</h1></header><section><article><h2>今天学到了什么</h2><p>我学会了HTML5的新特性!</p></article></section><footer><p>© 2025 我的博客</p></footer>
</body>
</html>

这些标签不仅让代码更清晰,还能帮助搜索引擎优化(SEO),是不是很酷?

2. 多媒体支持

以前想在网页上放视频或音频,需要用 Flash 插件。现在 HTML5 提供了 <video><audio> 标签,直接嵌入多媒体文件。

示例:

<video controls><source src="movie.mp4" type="video/mp4">你的浏览器不支持视频播放。
</video><audio controls><source src="music.mp3" type="audio/mp3">你的浏览器不支持音频播放。
</audio>

加上 controls 属性,用户就可以播放、暂停、调整音量,简单又方便!

3. Canvas 和 SVG

HTML5 提供了 <canvas> 标签,可以用 JavaScript 绘制 2D 图形,比如游戏、图表等。而 SVG(可缩放矢量图形)则用来创建高质量的矢量图像。

Canvas 示例:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.fillRect(10, 10, 50, 50); // 画一个红色矩形
</script>

新手不用急着学会画图,知道有这些功能就行,后面可以慢慢探索。

4. 表单增强

HTML5 让表单更聪明,新增了许多输入类型和属性,比如:

  • <input type="email">:检查邮箱格式
  • <input type="date">:弹出日期选择器
  • placeholder 属性:显示提示文字

示例:

<form><input type="email" placeholder="请输入你的邮箱"><input type="date"><button type="submit">提交</button>
</form>

这些功能让用户输入更方便,也减少了前端验证的麻烦。

三、HTML5 本地存储的魔法

以前,网页只能通过 Cookie 保存少量数据(最多 4KB),而且每次请求都会带着 Cookie 发给服务器,效率不高。HTML5 带来了更强大的本地存储方案:LocalStorageSessionStorage

1. LocalStorage

  • 作用:在浏览器中永久保存数据,除非手动删除。
  • 容量:大约 5-10MB(比 Cookie 大得多)。
  • 使用场景:保存用户的设置、表单数据等。

代码示例:

<script>// 存储数据localStorage.setItem("username", "小明");// 获取数据let name = localStorage.getItem("username");console.log("欢迎回来," + name); // 输出:欢迎回来,小明// 删除数据localStorage.removeItem("username");
</script>

2. SessionStorage

  • 作用:数据只在当前会话(页面关闭前)有效,刷新页面数据还在,但关闭标签后就没了。
  • 容量:和 LocalStorage 差不多。
  • 使用场景:临时保存表单数据,避免用户刷新页面后丢失。

代码示例:

<script>// 存储数据sessionStorage.setItem("tempData", "这是临时数据");// 获取数据let data = sessionStorage.getItem("tempData");console.log(data); // 输出:这是临时数据
</script>

3. LocalStorage vs SessionStorage

特性LocalStorageSessionStorage
数据生命周期永久(手动删除除外)当前会话结束前有效
数据共享同域名所有标签共享仅当前标签可用
使用场景用户偏好设置临时表单数据

四、动手试试吧!

作为前端新手,你可以从简单的 HTML5 页面开始,尝试用语义化标签写一个个人简介页面,再用 LocalStorage 保存你的名字。以下是一个小任务:

  1. 创建一个包含 <header><section><footer> 的页面。
  2. 添加一个输入框,让用户输入名字。
  3. 用 LocalStorage 保存名字,并在页面加载时显示“欢迎回来,[名字]”。

提示代码:

<!DOCTYPE html>
<html>
<head><title>我的HTML5实验</title>
</head>
<body><header><h1>欢迎体验HTML5</h1></header><section><input id="nameInput" placeholder="请输入你的名字"><button onclick="saveName()">保存</button><p id="welcomeText"></p></section><footer><p>© 2025 我的实验</p></footer><script>// 页面加载时检查是否有保存的名字let savedName = localStorage.getItem("username");if (savedName) {document.getElementById("welcomeText").innerText = "欢迎回来," + savedName;}// 保存名字的函数function saveName() {let name = document.getElementById("nameInput").value;localStorage.setItem("username", name);document.getElementById("welcomeText").innerText = "欢迎回来," + name;}</script>
</body>
</html>

五、总结

HTML5 不仅让网页开发更简单,还带来了许多实用功能。语义化标签让代码更清晰,多媒体支持让网页更生动,而本地存储则让网页有了“记忆力”。作为新手,你可以先从这些基础功能入手,慢慢探索更多高级特性,比如 WebSocket、Geolocation 等。

希望这篇文章能帮你迈出前端学习的第一步!有什么问题,欢迎留言讨论哦~

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

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

相关文章

双指针---《移动零》

目录 文章前言 题目描述 算法原理讲解 忽略限制条件的解法 原理讲解 思路总结 代码展示 双指针解法 原理讲解 思路总结 代码展示 大总结 &#x1f4ab;只有认知的突破&#x1f4ab;才来带来真正的成长&#x1f4ab;编程技术的学习&#x1f4ab;没有捷径&#x1f4ab;…

jangow-01-1.0.1靶机攻略

1.进行配置&#xff0c;按住shift&#xff0c;在图一界面按e进去得到图二 .ro 替换为 rw signie init/bin/bash ctrlx&#xff0c;ip a查看网卡信息&#xff0c;修改配置文件网卡信息 修改为如图所示内容后按shift?然后输入wq点击回车退出&#xff0c;然后重启靶机 2.在kali中…

安全上网沙箱:多方面解决政企私的上网问题

在数字化的浪潮中&#xff0c;网络已成为我们工作与生活不可或缺的一部分。然而&#xff0c;网络的便捷也伴随着诸多安全隐患&#xff0c;尤其是对于企业、个人以及政企机构而言&#xff0c;安全上外网成为了至关重要的课题。 隔离保护&#xff1a;构建安全堡垒 沙箱技术在内网…

C++ string的模拟实现

Hello!!大家早上中午晚上好&#xff0c;昨天复习了string的使用&#xff0c;今天来模拟实现一下string&#xff01;&#xff01;&#xff01; 一、string的框架搭建 1.1首先我们需要一个string的头文件用来做变量、函数、类等声明&#xff1b;再需要一个test文件来做测试,还需…

Java 中装饰者模式与策略模式在埋点系统中的应用

前言 在软件开发中&#xff0c;装饰者模式和策略模式是两种常用的设计模式&#xff0c;它们在特定的业务场景下能够发挥巨大的作用。本文将通过一个实际的埋点系统案例&#xff0c;探讨如何在 Java 中运用装饰者模式和策略模式&#xff0c;以及如何结合工厂方法模式来优化代码…

田间机器人幼苗视觉检测与护苗施肥装置研究(大纲)

田间机器人幼苗视觉检测与护苗施肥装置研究 基于多光谱视觉与精准施肥的农业机器人系统设计 第一章 绪论 1.1 研究背景与意义 农业智能化需求&#xff1a; 传统幼苗检测依赖人工&#xff0c;效率低且易遗漏弱苗/病苗施肥不精准导致资源浪费和环境污染 技术挑战&#xff1a;…

如何在Linux CentOS上安装和配置Redis

如何在Linux CentOS上安装和配置Redis 大家好&#xff0c;我是曾续缘。欢迎来到本教程&#xff01;今天我将向您介绍在Linux CentOS上安装和配置Redis的详细步骤。Redis是一个高性能的键值存储系统&#xff0c;常用于缓存、消息队列和数据持久化等应用场景。让我们一起开始吧&…

如何快速下载并安装 Postman?

从下载、安装、启动 Postman 这三个方面为大家详细讲解下载安装 Postman 每一步操作&#xff0c;帮助初学者快速上手。 Postman 下载及安装教程(2025最新)

使用Gitee Go流水线部署个人项目到服务器指南

使用Gitee Go流水线部署个人项目到服务器指南 前言&#xff01;&#xff01;&#xff01; 本文解决的问题&#xff1a; 你有一台ECS服务器&#xff0c;你在上面部署了一个Java服务也就是一个jar&#xff0c;你觉着你每次手动本地打包&#xff0c;上传&#xff0c;在通过命令去…

在 ASP .NET Core 9.0 中使用 Scalar 创建漂亮的 API 文档

示例代码&#xff1a;https://download.csdn.net/download/hefeng_aspnet/90407900 Scalar 是一款可帮助我们为 API 创建精美文档的工具。与感觉有些过时的默认 Swagger 文档不同&#xff0c;Scalar 为 API 文档提供了全新而现代的 UI。其简洁的设计让开发人员可以轻松找到测试…

Rabbitmq消息被消费时抛异常,进入Unacked 状态,进而导致消费者不断尝试消费(下)

一、消费流程图 消息在消费出现异常的时候&#xff0c;将一直保留在消息队列&#xff0c;所以你会看到以下奇怪的现象&#xff1a; 消息队列仅有5个消息&#xff0c; 投递速度也非常快&#xff0c;结果却一直无法消费掉。 二、重试策略 重试机制的使用场景&#xff1a;重试机制…

【STM32】知识点介绍二:GPIO引脚介绍

文章目录 一、概述二、GPIO的工作模式三、寄存器编程 一、概述 GPIO&#xff08;英语&#xff1a;General-purpose input/output&#xff09;,即通用I/O(输入/输出)端口&#xff0c;是STM32可控制的引脚。STM32芯片的GPIO引脚与外部设备连接起来&#xff0c;可实现与外部通讯、…

【赵渝强老师】达梦数据库的数据库对象

达梦数据库中包含各种数据库对象&#xff0c;主要分为两大类型&#xff1a;基本数据库对象和复杂数据库对象。下面分别进行介绍。 视频讲解如下 【赵渝强老师】达梦数据库的数据库对象 一、 基本数据库对象 常见的基本数据库对象有&#xff1a;表、索引、视图、序列、同义词等…

26考研——树与二叉树_树、森林(5)

408答疑 文章目录 二、树、森林树的基本概念树的定义和特性树的定义树的特性 基本术语树的基本术语和概念祖先、子孙、双亲、孩子、兄弟和堂兄弟结点的层次、度、深度和高度树的度和高度分支结点和叶结点有序树和无序树路径和路径长度 森林的基本术语和概念森林的定义森林与树的…

【HarmonyOS Next之旅】DevEco Studio使用指南(六)

目录 1 -> 在模块中添加Ability 1.1 -> Stage模型添加UIAbility 1.1.1 -> 在模块中添加UIAbility 1.1.2 -> 在模块中添加Extension Ability 2 -> 创建服务卡片 2.1 -> 概述 2.2 -> 使用约束 2.3 -> 创建服务卡片 2.4 -> 创建动态/静态卡片…

Excel多级联动下拉菜单的自动化设置(使用Python中的openpyxl模块)

1 主要目的 在Excel中&#xff0c;经常会遇到需要制作多级联动下拉菜单的情况&#xff0c;要求单元格内填写的内容只能从指定的多个选项中进行选择&#xff0c;并且需要设置多级目录&#xff0c;其中下级目录的选项内容要根据上级目录的填写内容确定&#xff0c;如下图所示&am…

3.25-1 postman执行+弱网测试

1.导出json脚本 2.打包json文件 3.下载的文件 二 .导入脚本 选择文件 点击导入 导入的接口 三.多接口运行 &#xff08;1&#xff09;集合右键&#xff0c;点击run &#xff0c;运行多个接口 2.编辑环境&#xff0c;集合&#xff0c;执行次数等 运行多个接口 四.运行多个接口…

Pear Admin Flask 开发问题

下载代码请复制以下命令到终端执行 git clone https://gitee.com/pear-admin/pear-admin-flask 于是我下载git 完成安装后&#xff1a; 安装 Git 后出现的页面是 “Git for Windows 的版本发布说明&#xff08;Release Notes&#xff09;”&#xff0c;通常会在安装完成后自动弹…

【C语言】文件操作(详解)

个人主页 今天我们来讲一下有关文件的相关操作&#xff0c;希望看完这篇文章对你有所帮助&#xff0c;大力感谢你对博主的支持&#xff01; 文章目录 ⭐一、为什么使用文件&#x1f389;二、什么是文件2.1 程序文件2.2 数据文件2.3 文件名 &#x1f3a1;三、二进制文件和文本…

基于web的家政服务网站

内容摘要 由于互联网的使用&#xff0c;人们在管理、应用、服务等领域使用数据更加简洁、方便&#xff0c;大大提高了工作效率。互联网正逐渐融入我们的生活&#xff0c;影响和改变我们的生活。 家政服务管理系统是典型的信息管理系统&#xff08;MIS&#xff09;。其开发主要…