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

简介: (一)  语义标签         (二)增强型表单         (三)视频和音频         (四)Canvas绘图         (五)SVG绘图         (六)地理定位         (七)拖放API      ...

(一)  语义标签

         (二)增强型表单

         (三)视频和音频

         (四)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:输入框内容必须符合的正则表达式

(三)视频和音频       


img_e0c4a8fd623bc4fac6834f1dddcd72e6.png

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

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

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

(四)Canvas绘图         

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

使用Canvas的步骤:

img_853705e00111e35169ef4a7a58e45d92.png

                 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/

          基本使用方法:


img_2306d402f17d2323879d4184f34c771a.png

(五)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)矩形


img_737dab4d1ba172aada403a6a6f4e8dc9.png

(2)圆形


(3)椭圆


img_b892c9eaeef35a19949db9a8841c8ead.png

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


img_575cab2709e10e55f8fc92f7c7243932.png

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


img_f942de8b4f0d2d88b7878d1454a3e813.png

(6)多边形


img_749fe62ef70e9da89ed336c7811ba13b.png

(7)文本


img_38c954df98e4d3013c65b0a085b84161.png

(8)图像


img_b1b8825cb93bfb13e8722d3c94bbef8a.png

           扩展小知识:


img_f8eee76e8d699a55fba53e00078f4ec6.png

(六)地理定位—— 了解

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

相关文章
|
4月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
124 61
|
4月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
108 3
|
21天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
2月前
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
77 23
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
|
4月前
|
SQL 安全 前端开发
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
109 2
|
4月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
4月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
Web App开发 前端开发 搜索推荐
从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1451 0