标签：定义 十大 拖动 SVG 元素 新增 特性 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。