0
点赞
收藏
分享

微信扫一扫

HTML5的十大新特性

半夜放水 2022-02-15 阅读 76


简介

说明

        本文介绍HTML5的十大新特性和一些废除的特性。

        HTML5总体比HTML4多了十个新特性,但其不支持IE8及IE8以下版本的浏览器。

十大新特性


  1. 新增语义化标签
  2. 增强表单功能
  3. 新增视频和音频
  4. 新增Canvas绘图
  5. 新增SVG绘图
  6. 新增地理定位
  7. 新增拖放API
  8. 新增WebWorker
  9. 新增WebStorage
  10. 新增WebSocket

废除的特性

废除的元素:纯表现元素、部分浏览器支持的元素和对可用性产生负面影响的元素

纯表现元素:basefont、big、center、font、s、strike、tt、u 用css代替

部分浏览器支持的元素:applet、bgsound、blink、marquee

对可用性产生负面影响的元素:frameset、frame、noframes,在html5中不支持frame框架,只支持iframe框架

一、新增语义化标签

语义化标签使得页面的内容结构化,见名知义。

结构化元素


标签



描述



<header>



定义了文档的头部区域



<footer>



定义了文档的尾部区域 



<nav>



定义文档的导航 



<section>



定义文档中的节



<article>



定义文章



<aside>



定义页面以外的内容(侧边栏)



<figure>



定义自包含内容,如图表



<main>



定义文档主内容


HTML5提供的新元素可以更好的描述网页文档结构,比如:

HTML5的十大新特性_ide

其他元素


标签



描述



<video>



用来定义视频。



<audio>



用来定义音频。



<canvas>



用来展示图形,该元素本身没有行为,仅提供一块画布。



<embed>



用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。



<mark>



用来展示高亮的文字。



<progress>



用来展示任何类型的任务的进度。



<meter>



表示度量衡,定义预定义范围内的度量。



<time>



用来展示日期或者时间。



<command>



表示命令按钮。



<details>



用来展示用户要求得到并且可以得到的细节信息。



<summary>



用来为details元素定义可见的标题。



<datalist>



用来展示可选的数据列表,与input元素配合使用,可以制作出输入值的下拉列表。



<datagrid>



也用来展示可选的数据列表,以树形列表的形式来显示。



<keygen>



表示生成密匙。



<output>



表示不同类型的输出。



<source>



为媒介元素定义媒介资源。



<menu>



表示菜单列表。



<ruby>



表示ruby注释,rt元素表示字符的解释或发音。rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。



<wbr>



表示软换行。

与br元素的区别是:br元素表示此处必须换行。

wbr元素:浏览器窗口或父级元素的宽度够宽时,不进行换行;而当宽度不够时,主动在此处进行换行。



<bdi>



定义文本的文本方向,使其脱离其周围文本的方向设置。



<dialog>



表示对话框或窗口。


二、增强表单功能

新增输入类型(type)

HTML5新增了一些新的input输入特性,从而更好的进行输入控制和验证。


输入类型



描述



color



选取颜色



date



选取日期



datetime



选取日期(UTC时间)



datetime-local



选取日期(无时区)



month



选择一个月份



week



选择周和年



time



选择一个时间



email



包含e-mail地址的输入域



number



数值的输入域



url



url地址的输入域



tel



定义输入电话号码和字段



search



用于搜索域



range



一个范围内数字值的输入域


新增表单元素


标签



含义



<datalist>



用户会在他们输入数据时看到域定义选项的下拉列表



<progress>



进度条,展示连接/下载进度



<meter>



刻度值,用于某些计量,例如温度、重量等



<keygen>



提供一种验证用户的可靠方法

生成一个公钥和私钥



<output>



用于不同类型的输出。output元素的输出内容是由代码控制的


新增表单属性


属性



描述



placehoder



输入框默认提示文字



required



要求输入的内容是否可为空



pattern



描述一个正则表达式验证输入的值



min/max



设置元素最小/最大值



step



为输入域规定合法的数字间隔



height/wdith



用于image类型<input>标签图像高度/宽度



autofocus



规定在页面加载时,域自动获得焦点



multiple



规定<input>元素中可选择多个值


三、新增音频和视频

音频:<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绘图

说明

        <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

        Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通过一套完整的绘图函数来动态生成图形。

Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

详见:​​学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程​​

五、新增SVG绘图

什么是SVG?


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

SVG的优势


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

SVG与Canvas区别




Canvas



SVG



绘制方式



JavaScript



XML



是否依赖于分辨率



依赖分辨率



不依赖分辨率



是否支持事件处理器



不支持事件处理器



支持事件处理器



渲染速度



能够以.png或.jpg格式保存结果图像



复杂度会减慢搞渲染速度



功能



文字呈现功能比较简单



适合大型渲染区域的应用程序



适用场景



最合适图像密集的游戏



不适合游戏应用


六、新增地理定位

使用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>

七、新增拖放

        拖放是一种常见的特性,即捉取对象以后拖到另一个位置。在HTML5中,拖放是标准的一部分,任何元素都能够拖放。

示例

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

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

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

拖动的生命周期


拖动生命周期



属性名



描述



拖动开始



ondragstart



在拖动操作开始时执行脚本



拖动过程中



ondrag



只要脚本在被拖动就运行脚本



拖动过程中



ondragenter



当元素被拖动到一个合法的防止目标时,执行脚本



拖动过程中



ondragover



只要元素正在合法的防止目标上拖动时,就执行脚本



拖动过程中



ondragleave



当元素离开合法的防止目标时



拖动结束



ondrop



将被拖动元素放在目标元素内时运行脚本



拖动结束



ondragend



在拖动操作结束时运行脚本


八、新增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协议的一部分用来处理客户端和服务器的通信是不可或缺的。

        WebSorage的意图在于解决本来不应该cookie做,却不得不用cookie的本地存储。

        WebStorage包括:


  1. localStorage:没有时间限制的数据存储
  2. sessionStorage:在浏览器关闭的时候就会清除


十、新增WebSocket

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

特点:


  1. 握手阶段采用HTTP协议,默认端口是80和443
  2. 建立在TCP协议基础之上,和http协议同属于应用层
  3. 可以发送文本,也可以发送二进制数据。
  4. 没有同源限制,客户端可以与任意服务器通信。
  5. 协议标识符是ws(如果加密,为wss),如ws://localhost:8023
举报

相关推荐

0 条评论