HTML5的十个新特性介绍

（一）语义标签（二）增强型表单/表单2.0 1)新的input type 2)新的表单元素 <input><textarea><select><option>.... <datalist>：数据列表，为input提...

（一）语义标签

（二）增强型表单/表单2.0

1)新的input type

2)新的表单元素

<input><textarea><select><option>....

<datalist>：数据列表，为input提供输入建议列表

<progress>：进度条，展示连接/下载进度

<meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)

<output>：输出内容，语义上表示此处的数据是经过计算而输出得到的

3)表单元素的新属性

通用属性：

placeholder：占位提示文字

mutiple：是否允许多个输入

autofocus：自动获得输入焦点

form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果

验证属性(了解即可)：

required：输入框内容不能为空

min：允许输入的数字最小值

max：允许输入的数字最大值

minlength：允许输入的字符串最小长度

maxlength：允许输入的字符串最大长度

pattern：输入框内容必须符合的正则表达式

（三）视频和音频

视频播放：<video src=""><video>

查看视频的所有属性、方法、事件：console.log(videoBirds);

音频播放：<audio src=""></audio>

查看视频的所有属性、方法、事件：console.log(bgMusic);

WEB中可用的绘图技术：

(1)Canvas绘图：H5原生技术，基于网页画布绘制2D位图绘图技术，善于表现细腻颜色

(2)SVG绘图：H5借鉴技术，基于SVG绘图空间绘制2D矢量图绘图技术，缩放不会失真

(3)WebGL绘图：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js

（四）Canvas绘图

H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。

使用Canvas的步骤：

Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！

使用H5 Canvas API进行绘图：

var ctx = c2.getContext('2d');

//绘制矩形

ctx.fillStyle = '#000' 填充颜色/渐变色对象

ctx.strokeStyle = '#000' 描边颜色/渐变色对象

ctx.lineWidth = 1 描边线宽度

ctx.fillRect(x, y, w, h)：填充矩形

ctx.strokeRect(x, y, w, h)：描边矩形

ctx.clearRect(x, y, w, h)：描边矩形

//绘制文本

ctx.font = '10px sans-serif'

ctx.textBaseline = 'alphabetic/top/bottom'

ctx.fillStyle = '#000'

ctx.strokeStyle = '#000'

ctx.fillText(txt, x, y) 填充文本

ctx.strokeText(txt, x, y) 描边文本

ctx.measureText(txt).width 测量文本基于当前字体设置的宽度

//绘制路径——概念上类似于PS中的钢笔工具

ctx.beginPath()

ctx.moveTo()

ctx.lineTo()

ctx.arc()

ctx.rect()

ctx.ellipse()

ctx.closePath()

-----------------------------

ctx.stroke() 基于现有路径进行描边

ctx.fill() 基于现有路径进行填充

ctx.clip() 基于现有路径进行裁切

//绘制图像

about:blank

//绘制图像

ctx.drawImage(img, x, y) 绘制图像(原始尺寸)

ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)

//绘图上下文变形和状态保持

ctx.rotate() 图像旋转

ctx.translate() 图像平移

ctx.scale() 图像缩放

------------------

ctx.save() 绘图上下文的保存

ctx.restore() 绘图上下文的恢复

2.Chart.js —— 了解

简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....

官网：http://www.chartjs.org/

基本使用方法：


             <canvas id="c3"></canvas>
             <script src="js/Chart.js"></script>
             <script>
                  new Chart(c13, {
                      type: 'bar/line/pie',
                       data: {
                            labels: ['','','',''],
                            datasets: [{
                                            label: '',
                                            data: [...]
                                   } ]
                       }
                   });
             </script>

（五）SVG绘图

Scalable Vector Graphic，可缩放向量图

在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；

网页中使用<img src="x.svg">进行嵌入

纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

Canvas与SVG的不同：

(1)Canvas是位图；SVG是矢量图

(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；

(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

常用的SVG图形：

(1)矩形

(2)圆形

(3)椭圆

(4)直线（没有fill只有stroke）

(5)折线（fill必须设置透明/stroke必须手工指定）

(6)多边形

(7)文本

(8)图像

扩展小知识：

(1)使用滤镜（高斯模糊）

参考MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter

声明滤镜：

      <filter id="f2">
                 <feGaussianBlur stdDeviation="3"></feGaussianBlur>
               </filter>

使用滤镜：

(2)使用颜色渐变对象

声明渐变对象：

                   <linearGradient id="g2" x1="0" y1="0" x2="100%" y2="0">
                   <stop offset="0" stop-color="red"></stop>
                   <stop offset="0.5" stop-color="yellow"></stop>
                   <stop offset="1" stop-color="green"></stop>
                   </linearGradient>

使用渐变对象：

（六）地理定位 —— 了解

通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。

情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据

情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)

                    window.navigator.geolocation : {
                             watchPosition(){},
                             clearWatch(){},
                             getCurrentPosition(function(pos){
                                     '定位成功'
                                     定位时间：pos.timestamp
                                     维度：pos.coords.latitude
                                     经度：pos.coords.longitude
                                     海拔：pos.coords.altitude
                                     速度：pos.coods.speed
                             }, function(err){
                                     '定位失败'
                             }){},
                    }

（七）拖放API

H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。

H5之后专门提供了七个鼠标拖动相关事件句柄：

拖动的源对象(source)可能触发的事件：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

拖动的目标对象(target)可能触发的事件：

dragenter：拖动进入

dragover：拖动悬停

drop：松手释放

dragleave：拖动离开

注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。

源对象：event.dataTransfer.setData(key, value)

目标对象：var value = event.dataTransfer.getData(key)

（八） WebWorker

背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。

问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。

解决方案：H5新特性——Web Worker

Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。使用方法：

HTML文件中：

                    var w = new Worker('js/x.js')
                    w.postMessage('发送给Worker线程的消息');
                    w.onmessage = function(e){
                             e.data; //来自Worker线程的消息
                    }

JS文件中：


                    onmessage = function(e){
                             var data = e.data;  //接收UI线程的消息
                             //执行耗时任务....
                             postMessage(result);   //给UI线程发送消息
                    }

注意：Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。

（九） WebStorage

Web项目存储数据常用的方案：

(1)服务器端存储

1)数据库存储，如商品、用户等核心数据

2)Session/内存存储，如用户的登录信息

(2)客户端存储

3)Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制

4)H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大

H5WebStorage存储具体涉及到两个对象：

(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储

添加数据：sessionStorage['key'] = 'value'

修改数据：sessionStorage['key'] = 'newValue'

删除数据：delete sessionStorage['key']

获得数据：var v = sessionStorage['key']

(2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储

添加数据：localStorage['key'] = 'value'

修改数据：localStorage['key'] = 'newValue'

删除数据：delete localStorage['key']

获得数据：var v = localStorage['key']

（十）WebSocket

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

发表于 2021-07-06 11:55
阅读 ( 466 )
分类：WEB前端开发

HTML5的十个新特性介绍

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »