web前端学习:HTML5十个新特性

(一)  语义标签

         (二)增强型表单

         (三)视频和音频

         (四)Canvas绘图

         (五)SVG绘图

         (六)地理定位

         (七)拖放API

        (八) WebWorker

        (九) WebStorage

         (十)WebSocket

(一)  语义标签

(二)增强型表单/表单2.0

          1)新的input type

           2)新的表单元素

                  <select><option>....

                   :数据列表,为input提供输入建议列表

                   :进度条,展示连接/下载进度

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

                   :输出内容,语义上表示此处的数据是经过计算而输出得到的

           3)表单元素的新属性

                   通用属性:

                            placeholder:占位提示文字

                            mutiple:是否允许多个输入

                            autofocus:自动获得输入焦点

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

                   验证属性(了解即可):

                            required:输入框内容不能为空

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

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

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

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

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

(三)视频和音频       

(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()                                     基于现有路径进行裁切

//绘制图像

             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/

          基本使用方法:

(五)SVG绘图         

           Scalable Vector Graphic,可缩放向量图

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

           网页中进行嵌入

纳入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)图像

           扩展小知识:

(六)地理定位—— 了解

           通过浏览器获取当前用户的所在地理坐标,以实现“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

感谢阅读

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户3030674的专栏

Android 性能优化——之控件的优化

  前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化。

1353
来自专栏散尽浮华

Html之初体验

概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大...

24810
来自专栏MixLab科技+设计实验室

H5Canvas入门(上)(下)

前言 本系列教程是专门给设计师写的快速入门教程,只要一步步跟随本教程,即可轻松进入编程的世界。 学习成果 用canvas制作带有图案的封面。 a、了解HTML、...

3155
来自专栏用户画像

使用jatoolsPrinter实现套打

最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

641
来自专栏理论坞

那些你不知道的Photoshop冷知识①——以一敌三的组合计

关于笔刷,用过PS的人基本上都知道几个快捷键,比如Ctrl+"["、"]"调整笔刷大小之类,这次我带来的方法比那个更加便捷,不但是大小上的调整,连同硬度和颜色都...

651
来自专栏程序员的知识天地

HTML/CSS/JS 是如何在浏览器中,渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

3784
来自专栏程序员叨叨叨

未来布局之星——ConstraintLayout

ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统...

642
来自专栏IMWeb前端团队

移动端重构实战系列2——line list

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

2238
来自专栏菩提树下的杨过

拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)

先看效果:  ? wrapPanel的效果在固定宽度的情况下看不出来,可查看在线演示地址:http://images.24city.com/jimmy/Cust...

1855
来自专栏知晓程序

如何在小程序中绘制图表?

1362

扫码关注云+社区

领取腾讯云代金券