【H5】盘点HTML5新特性

news2024/11/25 22:40:37

html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器

文章目录

  • 一、语义标签
  • 二、增强型表单
  • 三、音频和视频
  • 四、Canvas绘图
  • 五、SVG绘图
  • 六、地理定位
  • 七、拖放API
  • 八、Web Worker
  • 九、Web Storage
  • 十、WebSocket

一、语义标签

html5语义标签,可以使开发者更方便清晰构建页面的布局

标签描述
<header>定义了文档的头部区域
<footer>定义了文档的尾部区域
<nav>定义文档的导航
<section>定义文档中的节
<article>定义文章
<aside> 定义页面以外的内容
<details>定义用户可以看到或者隐藏的额外细节
<summary> 标签包含details元素的标题
<dialog> 定义对话框
<figure> 定义自包含内容,如图表
<main> 定义文档主内容
<mark> 定义文档的主内容
<time> 定义日期/时间

在这里插入图片描述

二、增强型表单

html5修改一些新的input输入特性,改善更好的输入控制和验证

输入类型描述
color主要用于选取颜色
date选取日期
datetime选取日期(UTC时间)
datetime-local选取日期(无时区)
month选择一个月份
week选择周和年
time选择一个时间
email包含e-mail地址的输入域
number数值的输入域
urlurl地址的输入域
tel定义输入电话号码和字段
search用于搜索域
range一个范围内数字值的输入域

html5新增了五个表单元素

<datalist> 用户会在他们输入数据时看到域定义选项的下拉列表
<progress>进度条,展示连接/下载进度
<meter> 刻度值,用于某些计量,例如温度、重量等
<keygen> 提供一种验证用户的可靠方法 生成一个公钥和私钥
<output>用于不同类型的输出 比如尖酸或脚本输出

在这里插入图片描述

三、音频和视频

html5提供了音频和视频文件的标准,既使用元素。

音频:<audio src=" "></audio>

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

视频:<video src=" "></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

四、Canvas绘图

https://www.runoob.com/w3cnote/html5-canvas-intro.html

五、SVG绘图

什么是SVG?

SVG指可伸缩矢量图形

SVG用于定义用于网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG是万维网联盟的标准

SVG的优势

与其他图像格式相比,是哟个SVG的优势在于:

SVG图像可通过文本编译器来创建和修改

SVG图像可被搜索、索引、脚本化或压缩

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量的打印

SVG可在图像质量不下降的情况下被放大

SVG与Canvas区别

*SVG适用于描述XML中的2D图形的语言

*Canvas随时随地绘制2D图形(使用javaScript)

*SVG是基于XML的,意味这可以操作DOM,渲染速度较慢

*在SVG中每个形状都被当做是一个对象,如果SVG发生改变,页面就会发生重绘

*Canvas是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘。
在这里插入图片描述

六、地理定位

使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

七、拖放API

拖放是一种常见的特性,即捉取对象以后拖到另一个位置。

在html5中,拖放是标准的一部分,任何元素都能够拖放。

<div draggable="true"></div>

当元素拖动时,我们可以检查其拖动的数据。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

在这里插入图片描述

八、Web Worker

Web Worker可以通过加载一个脚本文件,进而创建一个独立工作的线程,在主线程之外运行。

基本使用:

Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,

起到互不阻塞执行的效果,并且提供主线程和新县城之间数据交换的接口:postMessage、onmessage。

javascript:

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world");     //向worker发送数据
worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>

九、Web Storage

WebStorage是HTML新增的本地存储解决方案之一,但并不是取代cookie而指定的标准,cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的,session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做,却不得不用cookie的本地存储。

websorage拥有5M的存储容量,而cookie却只有4K,这是完全不能比的。

客户端存储数据有两个对象,其用法基本是一致。

localStorage:没有时间限制的数据存储

sessionStorage:在浏览器关闭的时候就会清除。

localStorage.setItem(key,value);//保存数据
let value = localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
let key = localStorage.key(index);//得到某个索引的值

十、WebSocket

WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

特点:

(1)握手阶段采用HTTP协议,默认端口是80和443

(2)建立在TCP协议基础之上,和http协议同属于应用层

(3)可以发送文本,也可以发送二进制数据。

(4)没有同源限制,客户端可以与任意服务器通信。

(5)协议标识符是ws(如果加密,为wss),如ws://localhost:8023

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

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

相关文章

Maven的安装与配置(包含所有细节)

一、idea版本和maven配对 这里是很多新手都会遇到的大坑&#xff0c;一定要先将自己的idea版本和maven进行版本配配对。 Maven3.6.3版本兼容问题 注意&#xff1a;针对一些老项目 还是尽量采用 3.6.3版本&#xff0c;针对idea各个版本的兼容性就很兼容 IDEA 2022 兼容maven 3.8…

肠道重要菌属——埃希氏菌属 (Escherichia), 肠道炎症和生态失调相关

谷禾健康 —变形菌门 —γ变形菌纲 —肠杆菌目 —肠杆菌科 —埃希氏菌属 埃希氏菌属 (Escherichia)&#xff0c;是一种常见的细菌。其中最著名的种是大肠杆菌&#xff08;Escherichia coli&#xff09;&#xff0c;大肠杆菌是一种厌氧菌&#xff0c;通常生活在人和动物的肠道中…

echarts 日常设计感图表

饼图 pieChart(id) {const data {value:100,type:aaa}let angle 0; //角度&#xff0c;用来做简单的动画效果的let count echarts.init(document.getElementById(id));let option {title: [{text: "{a|" data.value "}{c|%}",x: "center"…

super父类 事物

一个没有事物的方法。 调用他的父类里有事物的方法。 无论this 和 super 都会让父类事物方法没有事物。 如果写了super.class 文件里面&#xff0c;就是super调用。 如果没写&#xff0c;就是this调用&#xff0c;坑爹 测试&#xff0c;把父类注入&#xff0c;事物才生效。

Redis——特性介绍与应用场景

Redis特性介绍 In-memory data structrues 众所周知&#xff0c;MySQL是一种关系型数据库&#xff0c;其通过表的结构存储数据&#xff0c;就类似于建立了一个excel表格来存储数据。但是像视频这类数据并不适合存储在关系型数据库中&#xff0c;因此存在非关系型数据库——通…

用例拆分情况考虑方案

文章目录 1、方案一方案概述方案分析(1) 把对应图商地图的逻辑给分离开(2) 要使用命令行的方式执行方法 2、方案二3、最终决定 1、方案一 方案概述 每个图商&#xff08;GD、BD、自建&#xff09;拆分成单独的类 把参数化的几个图商类别拆分成对应的图商类&#xff0c;在每个类…

服务器数据恢复-EXT3分区误删除邮件的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器有一组由8块盘组建的RAID5阵列&#xff0c;EXT3文件系统。 服务器故障&#xff1a; 由于工作人员的误操作导致文件系统中的邮件丢失。用户需要恢复丢失的邮件数据。 服务器数据恢复过程&#xff1a; 1、将故障服务器中所有磁盘以只…

LabVIEW开发分段反射器测试台

LabVIEW开发分段反射器测试台 随着对太空的观察需求越来越远&#xff0c;而不是当前技术&#xff08;如哈勃望远镜&#xff09;所能达到的&#xff0c;有必要增加太空望远镜主镜的尺寸。但是&#xff0c;增加主镜像的大小时存在几个问题。随着反射镜尺寸的增加&#xff0c;制造…

车载开发能不能入?Android实属卷不动了

随着智能化的快速发展&#xff0c;车载开发成为了汽车行业中的一个重要领域。车载开发是指开发和设计车载系统中的软件和硬件&#xff0c;以实现车辆的智能化和互联化。在当前汽车行业竞争激烈的市场环境下&#xff0c;车载开发岗位具有广阔的发展前景。 随着人们对智能化的需…

VMware虚拟机开机状态动态增加内存和CPU

实验环境&#xff1a;一台虚拟机 1、右击虚拟机&#xff0c;点击“编辑设置”&#xff0c; 2、在“选项”中&#xff0c;找到“内存/cpu热插拔”这一项&#xff0c;把“为此虚拟机启动内存热添加”和“仅为此虚拟机启动CPU热添加”打钩&#xff0c;点击 “确定”。 注意&#x…

【Unity3D】Renderer Feature简介

1 3D 项目迁移到 URP 项目后出现的问题 3D 项目迁移至 URP 项目后&#xff0c;会出现很多渲染问题&#xff0c;如&#xff1a;材质显示异常、GL 渲染不显示、多 Pass 渲染异常、屏幕后处理异常等问题。下面将针对这些问题给出一些简单的解决方案。 URP 官方教程和 API 详见→Un…

Cloud Studio实战——热门视频Top100爬虫应用开发

最近Cloud Studio非常火&#xff0c;我也去试了一下&#xff0c;感觉真的非常方便&#xff01;我就以Python爬取B站各区排名前一百的视频&#xff0c;并作可视化来给大家分享一下Cloud Studio&#xff01;应用链接&#xff1a;Cloud Studio实战——B站热门视频Top100爬虫应用开…

MyCat分片规则——范围分片、取模分片、一致性hash、枚举分片

1.范围分片 2.取模分片 范围分片和取模分片针对数字类型的字段可以&#xff0c;但是针对于字符串类型的字段时。这两种就不适用了。 3.一致性hash 4.枚举分片 默认节点指的是&#xff0c;如果我们向数据库表插入数据的时候&#xff0c;超出了这个枚举值&#xff0c;那么默认向…

stm32 cubemx ps2无线(有线)手柄

文章目录 前言一、cubemx配置二、代码1.引入库bsp_hal_ps2.cbsp_hal_ps2.h 2.主函数 前言 本文讲解使用cubemx配置PS2手柄实现对手柄的按键和模拟值的读取。 很简单&#xff0c;库已经封装好了&#xff0c;直接就可以了。 文件 一、cubemx配置 这个很简单&#xff0c;不需要…

数据结构 二叉树(一篇基本掌握)

绪论 雄关漫道真如铁&#xff0c;而今迈步从头越。 本章将开始学习二叉树&#xff08;全文共一万两千字&#xff09;&#xff0c;二叉树相较于前面的数据结构来说难度会有许多的攀升&#xff0c;但只要跟着本篇博客深入的学习也可以基本的掌握基础二叉树。 话不多说安全带系好&…

怎么绘制汤姆索亚历险记思维导图?掌握这几个绘制步骤就可以

怎么绘制汤姆索亚历险记思维导图&#xff1f;如果你正在为学习汤姆索亚历险记而感到困惑&#xff0c;或者你想要更好地理解小说中的人物关系、情节和舞台背景&#xff0c;那么一个清晰的思维导图就可以帮助你梳理思路。那么下面就给大家介绍一下绘制步骤。 在进行思维导图绘制的…

抽象工厂模式-java实现

介绍 抽象工厂模式基于工厂方法模式引入了“产品族”的概念&#xff0c;即我们认为具体产品是固定的&#xff0c;具体产品存在等级之分&#xff0c;比如我们常说的手机&#xff0c;有“青春版”&#xff0c;“至尊版”&#xff0c;“至臻版”。一个产品有多个版本族。这时候&a…

lvs+keepAlived高可用部署

LVSKeepAlived高可用部署实战 1. 构建高可用集群 1.1 什么是高可用集群 高可用集群&#xff08;High Availability Cluster&#xff0c;简称HA Cluster&#xff09;&#xff0c;是指以减少服务中断时间为目的的服务器集群技术。它通过保护用户的业务程序对外部不间断的提供服…

【果树农药喷洒机器人】Part5:基于深度相机与分割掩膜的果树冠层体积探测方法

文章目录 一、引言二、树冠体积测量对比方法2.1冠层体积人工测量法2.2冠层体积拟合测量法 三、基于深度相机与分割掩膜探测树冠体积方法3.1像素值与深度值的转换3.2树冠体积视觉探测法3.3实验分析 总结 一、引言 果树靶标探测是实现农药精准喷施的关键环节&#xff0c;本章以果…