HTML5新特性

最新推荐文章于 2024-06-20 09:39:35 发布

PinkM∞n7

最新推荐文章于 2024-06-20 09:39:35 发布

阅读量165

点赞数

分类专栏： HTML+CSS HTML 文章标签： html5 前端

本文链接：https://blog.csdn.net/w1060436872/article/details/125160780

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML+CSS

2 篇文章 0 订阅

订阅专栏

新增特性不支持ie8及以下版本浏览器,特性如下:

1. 语义标签

2. 增强型表单

3. 视频和音频

4. Canvas绘图

5. SVG绘图

6. 地理定位

7. 拖放API

8. WebWorker

9. WebStorage

10. WebSocket

1. 语义标签

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

2. 增强型表单

HTML5新增的五个表单元素

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

HTML5新增的表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型<input>标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定<input>元素中可选择多个值

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

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

3. 视频和音频

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>

4. Canvas绘图

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。

参考: 学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程一、canvas 简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤..https://www.runoob.com/w3cnote/html5-canvas-intro.html

5. SVG绘图

参考:SVG 简介https://www.w3school.com.cn/svg/svg_intro.asp

什么是SVG?

SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。

SVG指可伸缩矢量图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准

SVG的优势

与其他图像格式相比，SVG的优势在于：

SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大

SVG与Canvas区别

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

6. 地理定位

使用getCurrentPosition()方法来获取用户的位置。

navigator.geolocation.getCurrentPosition(success=>{
 console.log(success.coords)//包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息
},fail=>{
 console.log(fail)
},{//可增加的配置
  enableHighAccuracy:true,//高精度
  timeout:3000,//超时时间,以ms为单位
  maximumAge:30*60*60*1000,//位置缓存时间,以ms为单位
})

successCallback：

表示调用getCurrentPosition函数成功以后的回调函数，该函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：

accuracy：精确度
latitude：纬度
longitude：经度
altitude：海拔
altitudeAcuracy：海拔高度的精确度
heading：朝向
speed：速度

errorCallback：

和 successCallback 函数一样带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：

message：错误信息
code：错误代码。

其中错误代码包括以下四个值：

UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息
PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求
POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星
TIMEOUT：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

positionOptions：

positionOptions 的数据格式为JSON，有三个可选的属性：

enableHighAcuracy — 布尔值：表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
timeout — 整数：表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
maximumAge — 整数/常量：表示浏览器重新获取位置信息的时间间隔。

7. 拖放API

HTML5中，任何元素都可以被拖放：

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

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本