html5新特性总结

你们这些凡人 發表於 2019-5-28 20:18:00

html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage
十、WebSocket
 
一、语义标签
html5语义标签，可以使开发者更方便清晰构建页面的布局
<table border="0">
<tbody>
<tr align="center">
<td style="width: 200px; height: 30px" align="center">标签</td>
<td style="width: 200px; height: 30px" align="center">描述</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><header></td>
<td style="width: 200px; height: 30px" align="center">定义了文档的头部区域</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><footer> </td>
<td style="width: 200px; height: 30px" align="center">定义了文档的尾部区域 </td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><nav> </td>
<td style="width: 200px; height: 30px" align="center">定义文档的导航 </td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"> <section></td>
<td style="width: 200px; height: 30px" align="center"> 定义文档中的节</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"> <article></td>
<td style="width: 200px; height: 30px" align="center"> 定义文章</td>
</tr>
<tr align="center">
<td style="width: 220px; height: 30px" align="center"> <aside></td>
<td style="width: 200px; height: 30px" align="center"> 定义页面以外的内容</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"> <details></td>
<td style="width: 220px; height: 30px" align="center">定义用户可以看到或者隐藏的额外细节</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"> <summary></td>
<td style="width: 200px; height: 30px" align="center">标签包含details元素的标题 </td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"> <dialog></td>
<td style="width: 200px; height: 30px" align="center">定义对话框 </td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><figure></td>
<td style="width: 200px; height: 30px" align="center">定义自包含内容，如图表</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><main></td>
<td style="width: 200px; height: 30px" align="center">定义文档主内容</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"></td>
<td style="width: 200px; height: 30px" align="center">定义文档的主内容</td>
</tr>
<tr align="center">
<td style="width: 200px; height: 30px" align="center"><time></td>
<td style="width: 200px; height: 30px" align="center">定义日期/时间</td>
</tr>
</tbody>
</table>
<img src="https://img2018.cnblogs.com/blog/1239961/201905/1239961-20190527090526985-576135815.png">
 
二、增强型表单
html5修改一些新的input输入特性，改善更好的输入控制和验证
<table border="0">
<tbody>
<tr>
<td style="width: 100px" align="center">输入类型</td>
<td style="width: 200px" align="center">描述</td>
</tr>
<tr>
<td style="width: 100px" align="center">color</td>
<td style="width: 200px" align="center">主要用于选取颜色</td>
</tr>
<tr>
<td style="width: 100px" align="center">date</td>
<td style="width: 200px" align="center">选取日期</td>
</tr>
<tr>
<td style="width: 100px" align="center">datetime</td>
<td style="width: 200px" align="center">选取日期(UTC时间)</td>
</tr>
<tr>
<td style="width: 100px" align="center">datetime-local</td>
<td style="width: 200px" align="center">选取日期（无时区）</td>
</tr>
<tr>
<td style="width: 100px" align="center">month</td>
<td style="width: 200px" align="center">选择一个月份</td>
</tr>
<tr>
<td style="width: 100px" align="center">week</td>
<td style="width: 200px" align="center">选择周和年</td>
</tr>
<tr>
<td style="width: 100px" align="center">time</td>
<td style="width: 200px" align="center">选择一个时间</td>
</tr>
<tr>
<td style="width: 100px" align="center">email</td>
<td style="width: 200px" align="center">包含e-mail地址的输入域</td>
</tr>
<tr>
<td style="width: 100px" align="center">number</td>
<td style="width: 200px" align="center">数值的输入域</td>
</tr>
<tr>
<td style="width: 100px" align="center">url</td>
<td style="width: 200px" align="center">url地址的输入域</td>
</tr>
<tr>
<td style="width: 100px" align="center">tel</td>
<td style="width: 200px" align="center">定义输入电话号码和字段</td>
</tr>
<tr>
<td style="width: 100px" align="center">search</td>
<td style="width: 200px" align="center">用于搜索域</td>
</tr>
<tr>
<td style="width: 100px" align="center">range</td>
<td style="width: 200px" align="center">一个范围内数字值的输入域</td>
</tr>
</tbody>
</table>
 
html5新增了五个表单元素
<table border="0">
<tbody>
<tr>
<td style="width: 100px" align="center"><datalist></td>
<td style="width: 350px" align="center">用户会在他们输入数据时看到域定义选项的下拉列表</td>
</tr>
<tr>
<td style="width: 100px" align="center"><progress></td>
<td style="width: 350px" align="center">进度条，展示连接/下载进度</td>
</tr>
<tr>
<td style="width: 100px" align="center"><meter></td>
<td style="width: 350px" align="center">刻度值，用于某些计量，例如温度、重量等</td>
</tr>
<tr>
<td align="center"><keygen></td>
<td align="center">
提供一种验证用户的可靠方法
生成一个公钥和私钥
</td>
</tr>
<tr>
<td align="center"><output></td>
<td align="center">
用于不同类型的输出
比如尖酸或脚本输出
</td>
</tr>
</tbody>
</table>
html5新增表单属性
<table border="0">
<tbody>
<tr>
<td style="width: 120px" align="center">属性</td>
<td style="width: 300px" align="center">描述</td>
</tr>
<tr>
<td style="width: 120px" align="center">placehoder</td>
<td style="width: 300px" align="center">输入框默认提示文字</td>
</tr>
<tr>
<td style="width: 120px" align="center">required</td>
<td style="width: 300px" align="center">要求输入的内容是否可为空</td>
</tr>
<tr>
<td style="width: 120px" align="center">pattern</td>
<td style="width: 300px" align="center">描述一个正则表达式验证输入的值</td>
</tr>
<tr>
<td style="width: 120px" align="center">min/max</td>
<td style="width: 300px" align="center">设置元素最小/最大值</td>
</tr>
<tr>
<td style="width: 120px" align="center">step</td>
<td style="width: 300px" align="center">为输入域规定合法的数字间隔</td>
</tr>
<tr>
<td style="width: 120px" align="center">height/wdith</td>
<td style="width: 300px" align="center">用于image类型<input>标签图像高度/宽度</td>
</tr>
<tr>
<td style="width: 120px" align="center">autofocus</td>
<td style="width: 300px" align="center">规定在页面加载时，域自动获得焦点</td>
</tr>
<tr>
<td style="width: 120px" align="center">multiple</td>
<td style="width: 300px" align="center">规定<input>元素中可选择多个值</td>
</tr>
</tbody>
</table>
三、音频和视频
html5提供了音频和视频文件的标准，既使用<audio>元素。
音频：<audio src=" "></audio>
<div class="cnblogs_code">
<pre><audio controls> //controls属性提供添加播放、暂停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。 //浏览器不支持时显示文字
</audio></pre>
</div>
视频：<video src=" "></video>
<div class="cnblogs_code">
<pre><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video></pre>
</div>
 
四、Canvas绘图
https://www.runoob.com/w3cnote/html5-canvas-intro.html 
 
五、SVG绘图
什么是SVG?
  SVG指可伸缩矢量图形
  SVG用于定义用于网络的基于矢量的图形
  SVG使用XML格式定义图形
  SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
  SVG是万维网联盟的标准
SVG的优势
与其他图像格式相比，是哟个SVG的优势在于：
   SVG图像可通过文本编译器来创建和修改
   SVG图像可被搜索、索引、脚本化或压缩
   SVG是可伸缩的
   SVG图像可在任何的分辨率下被高质量的打印
   SVG可在图像质量不下降的情况下被放大
 
SVG与Canvas区别
*SVG适用于描述XML中的2D图形的语言
*Canvas随时随地绘制2D图形（使用javaScript）
*SVG是基于XML的，意味这可以操作DOM，渲染速度较慢
*在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
*Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。
<table border="0">
<tbody>
<tr>
<td style="width: 220px" align="center">Canvas</td>
<td style="width: 220px" align="center">SVG</td>
</tr>
<tr>
<td style="width: 220px" align="center">依赖分辨率</td>
<td style="width: 220px" align="center">不依赖分辨率</td>
</tr>
<tr>
<td style="width: 220px" align="center">不支持事件处理器</td>
<td style="width: 220px" align="center">支持事件处理器</td>
</tr>
<tr>
<td style="width: 220px" align="center">能够以.png或.jpg格式保存结果图像</td>
<td style="width: 220px" align="center">复杂度会减慢搞渲染速度</td>
</tr>
<tr>
<td style="width: 220px" align="center">文字呈现功能比较简单</td>
<td style="width: 220px" align="center">适合大型渲染区域的应用程序</td>
</tr>
<tr>
<td style="width: 220px" align="center">最合适图像密集的游戏</td>
<td style="width: 220px" align="center">不适合游戏应用</td>
</tr>
</tbody>
</table>
 
 
六、地理定位
使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”
<div class="cnblogs_code">
<pre><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 +
" Longitude: " + position.coords.longitude;
}
</script></pre>
</div>
 
七、拖放API
 拖放是一种常见的特性，即捉取对象以后拖到另一个位置。
在html5中，拖放是标准的一部分，任何元素都能够拖放。
<div class="cnblogs_code">
<pre><div draggable="true"></div></pre>
</div>
当元素拖动时，我们可以检查其拖动的数据。
<div class="cnblogs_code">
<pre><div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
console.log(ev);
}
</script></pre>
</div>
<table border="0">
<tbody>
<tr>
<td style="width: 100px" align="center">拖动生命周期</td>
<td style="width: 100px" align="center">属性名</td>
<td style="width: 300px" align="center">描述</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动开始</td>
<td style="width: 100px" align="center">ondragstart</td>
<td style="width: 300px" align="center">在拖动操作开始时执行脚本</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动过程中</td>
<td style="width: 100px" align="center">ondrag</td>
<td style="width: 300px" align="center">只要脚本在被拖动就运行脚本</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动过程中</td>
<td style="width: 100px" align="center">ondragenter</td>
<td style="width: 300px" align="center">当元素被拖动到一个合法的防止目标时，执行脚本</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动过程中</td>
<td style="width: 100px" align="center">ondragover</td>
<td style="width: 300px" align="center">只要元素正在合法的防止目标上拖动时，就执行脚本</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动过程中</td>
<td style="width: 100px" align="center">ondragleave</td>
<td style="width: 300px" align="center">当元素离开合法的防止目标时</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动结束</td>
<td style="width: 100px" align="center">ondrop</td>
<td style="width: 300px" align="center">将被拖动元素放在目标元素内时运行脚本</td>
</tr>
<tr>
<td style="width: 100px" align="center">拖动结束</td>
<td style="width: 100px" align="center">ondragend</td>
<td style="width: 300px" align="center">在拖动操作结束时运行脚本</td>
</tr>
</tbody>
</table>
 
 
八、Web Worker
    Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
 基本使用：
     Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，
起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。
javascript:
<div class="cnblogs_code">
<pre>//worker.js
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}</pre>
</div>
html
<div class="cnblogs_code">
<pre><!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></pre>
</div>
 
九、Web Storage
 WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。
websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。
客户端存储数据有两个对象，其用法基本是一致。
localStorage：没有时间限制的数据存储
sessionStorage:在浏览器关闭的时候就会清除。
<div class="cnblogs_code">
<pre>localStorage.setItem(key,value);//保存数据
let value = localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
let key = localStorage.key(index);//得到某个索引的值</pre>
</div>
 
 
 
十、WebSocket
   WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
特点：
  （1）握手阶段采用HTTP协议，默认端口是80和443
  （2）建立在TCP协议基础之上，和http协议同属于应用层
  （3）可以发送文本，也可以发送二进制数据。
  （4）没有同源限制，客户端可以与任意服务器通信。
  （5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023
 
文章参考：
https://www.cnblogs.com/vicky1018/p/7705223.html
https://www.cnblogs.com/greatluoluo/p/5714221.html
https://www.jianshu.com/p/37c0b1eb4145
https://blog.csdn.net/m0_37696296/article/details/81083402
 
 
顺便插个tip:多益网络2021届秋招内推，不影响正常批次。内推吗：5wB2wc
链接：https://xz.duoyi.com/ 
来源：https://www.cnblogs.com/binguo666/p/10928907.html

頁: [1]

琼殿技术论坛's Archiver

html5新特性总结