HTML5的十大新特性
作者：互联网
原文网址：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十大新特性
标签：定义,十大,拖动,SVG,元素,新增,特性,HTML5 来源： https://blog.csdn.net/feiying0canglang/article/details/121943070