原文网址:HTML5的十大新特性_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍HTML5的十大新特性和一些废除的特性。此内容是前端面试中的常见问题。
HTML5总体比HTML4多了十个新特性,但其不支持IE8及IE8以下版本的浏览器。
十大新特性
- 新增语义化标签
- 增强表单功能
- 新增视频和音频
- 新增Canvas绘图
- 新增SVG绘图
- 新增地理定位
- 新增拖放API
- 新增WebWorker
- 新增WebStorage
- 新增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提供的新元素可以更好的描述网页文档结构,比如:
其他元素
标签 |
描述 |
<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 |
选择一个时间 |
|
包含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?
- SVG指可伸缩矢量图形
- SVG用于定义用于网络的基于矢量的图形
- SVG使用XML格式定义图形
- SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG是万维网联盟的标准
SVG的优势
- SVG图像可通过文本编译器来创建和修改
- SVG图像可被搜索、索引、脚本化或压缩
- SVG是可伸缩的
- SVG图像可在任何的分辨率下被高质量的打印
- 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包括:
- localStorage:没有时间限制的数据存储
- sessionStorage:在浏览器关闭的时候就会清除
详见:cookie, localStorage, sessionStorage的区别(很全,很详细)_IT利刃出鞘的博客-CSDN博客
十、新增WebSocket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
特点:
- 握手阶段采用HTTP协议,默认端口是80和443
- 建立在TCP协议基础之上,和http协议同属于应用层
- 可以发送文本,也可以发送二进制数据。
- 没有同源限制,客户端可以与任意服务器通信。
- 协议标识符是ws(如果加密,为wss),如ws://localhost:8023
其他网址
面试: H5新特性:十个新特性 - jane_panyiyun - 博客园
前端HTML5十大新特性详细总结_傲娇味的草莓的博客-CSDN博客_html5十大新特性