HTML5
文章平均质量分 86
前端人
专注前端开发技术分享,助力初学者更好成长
展开
-
「移动端」前端常见知识点总结
1、获取位置HTML5地理位置API,允许js程序向浏览器询问用户的真实信息,移动端使用GPS获取的位置,非常精准。但是地理位置API的浏览器访问前总是会询问是否同意,如果同意的话就会获取到位置,否则获取不到。geolocation对象获取位置的方法:getCurrentPosition - 获取一次位置信息。 watchPosition - 监听当前位置,位置改变之后就会执行函数 clearWatch - 清除 watchPosition具体获取用户位置代码如下:navigator原创 2021-08-27 11:57:55 · 272 阅读 · 0 评论 -
前端响应式布局为什么是个坑?
一、什么是响应式布局?响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是为每个终端做一个特定版本,响应式是为解决移动互联网浏览器而诞生的。二、响应式设计步骤2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,将网页宽度设为设备宽度。在head中添加meta标签,设置设备的宽度作为视图大小,禁止缩放。代码如下:<meta原创 2021-08-26 12:48:27 · 236 阅读 · 0 评论 -
「移动端」touch事件,touchEvent对象
随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸、移动、旋转等等,多种操作。一般电脑的人机交互靠的是鼠标,而手机用的就是触摸。区别有:PC 端一个电脑只能有一个鼠标,而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove,而移动端使用的 touchstart、touchmove、touchend 。一、touch事件类型touchstart - 手指触摸屏幕,在元素上按下时触发 touchmove - 手指移动,在元素上按下之后屏幕上任意原创 2021-08-25 11:23:01 · 1716 阅读 · 0 评论 -
前端启动本地服务的四种方法,看完不会你锤我
前边几篇文章介绍本地缓存,还有 WebSocket 等好多需要在服务内才能运行,上一篇介绍移动端适配,更是需要在手机端访问页面,此时就不得不介绍下如何在本地启动服务,及手机如何访问?一、为什么需要本地服务?调试移动端网页调试方法:PC端浏览器的开发者模式中,选择手机模式。 利用手机模拟器。 使用真机访问本地。上述三种方法中,比如页面的内容展示,点击、滑动等效果可以测试,但是如果有多点触摸的缩放、旋转时,必须要真机操作。所以我们需要搭建一个本地服务,本地局域网内,允许手机访问本地网页。二原创 2021-08-24 12:17:41 · 7716 阅读 · 0 评论 -
「移动端」Web页面适配
一、什么是移动端适配移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。二、移动适配方案常见的移动适配方案有以下几种:viewport 盒模型 flex rem2.1、viewport - 可视区最初手机端需要照顾 PC 端,如果不设置 vie原创 2021-08-23 10:39:14 · 1209 阅读 · 0 评论 -
HTML5(十二)——一文读懂 WebSocket 原理
一、WebSocket 由来WebSocket 是一个持久化的协议,通过第一次 HTTP Request 建立连接之后,再把通信协议升级成 websocket,保持连接状态,后续的数据交换不需要再重复请求。websocket 可以看成一种类似 TCP/IP 的 socke t技术,在 web 应用中实现、并获得同 TCP/IP 通信一样的双向通信功能,因此客户端既和服务器可以发送消息也可以接收消息,同时还支持多路复用的功能,由于它借用了 HTTP 协议的一些概念,所以被称为 WebSocket。we原创 2021-08-20 10:35:33 · 1356 阅读 · 0 评论 -
HTML5(十一)——WebSocket 基础教程
一、为什么要学 WebSocket?websocket 是 HTML5 提供的一种长链接双向通讯协议,使得客户端和服务器之间的数据交换更简单,允许服务端主动向客户端推送数据,并且客户端与服务端只需连接一次,就可以保持长久连接,并进行数据通信。websocket 与 http 区别:http 链接分为长链接、短链接,短链接是发送一个请求,返回一个响应,长链接是在一定周期内保持链接。但是 websocket 只需连接一次就可以保持长链接,不需要的时候可以手动断开。 http 通信中,客户端是主动的原创 2021-08-16 15:34:06 · 535 阅读 · 0 评论 -
HTML5(十)——Canvas 与 SVG 区别
作为一名前端攻城狮,Canvas 和 SVG 对于我们并不陌生,canvas 是 HTML5 提供的新元素,而 svg 存在的时间要比 canvas 长很多,svg 并不属于 html,最初的 svg 是由 XML 定义的,在 html 5 中 canvas 与 svg 看着相似,其实不同。一、基本介绍Canvas通过 js 来绘制 2D图形。 canvas 图像单位是像素。 canvas 图像绘制完毕之后,浏览器将不再关注它,如果位置发生变换,就需要重新绘制。SVGsvg 使用 XM原创 2021-08-13 16:38:05 · 399 阅读 · 0 评论 -
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些?一、SVG 的 animationSVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:set animate animateColor animateTransform animateMotion1.1、setset 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。使用语法:<set attributeName=""原创 2021-08-12 14:15:35 · 2403 阅读 · 0 评论 -
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个,不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中,介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果,我们就开始学习 path 如何应用。一、path 路径详解1.1、path 命令path 用于定义一个路径,其中命令就是控制这条路径的,以下命令就是可用于路径数据:注:以上所有命令大小写都可以,区别是大写命令表示绝对定位原创 2021-08-09 16:10:44 · 5225 阅读 · 0 评论 -
HTML5(七)——SVG基础入门
声明:SVG 虽然也是标签,但它不是 HTML5,标题加了 HTML5 只是为了与 canvas 放到一起。一、为什么要学 SVG ?SVG 意为可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的,但是 SVG 没有单位的概念,它的20只是表示1的20倍,所以 SVG 绘制的图形放大或缩小都不会失真。与其他图像比较,SVG 的优势有以下几点:SVG 可以被多个工具读取和修改。 SVG 与其他格式图片相比,尺寸更小原创 2021-08-06 16:03:58 · 5584 阅读 · 0 评论 -
HTML5(六)——Canvas 高级操作
上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形,这节开始介绍canvas的高级操作。一、canvas 转换canvas 转换常用的几种方法介绍,如下: 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。原创 2021-08-04 17:20:47 · 530 阅读 · 0 评论 -
HTML5(五)——Canvas API
什么是 Canvas API?Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。使用前,首先需要新建在网页上新建 canvas 元素。<canvas id="mycanvas" width="400" height="400"> 您的浏览器不支持canvas!</canvas>上述代码,如果浏览器不支持 canvas,就会显示标签中间的文原创 2021-08-02 17:10:16 · 729 阅读 · 0 评论 -
HTML5(四)——Web Workers
一、什么是Web Worker ?JavaScript 语言是采用单线程模型,也就是任务只能在一个线程上完成,一次只能做一件事,前面任务没执行完,后面的任务只能排队等待,由于多核 CPU 的出现,单线程带来很大不便,无法充分发挥计算机的能力。Web Worker 就是为了 javascript 创造多线程而生的,主线程创建 worker 子线程,将一些任务分配给后台运行,等到子线程完成计算任务,再把结果返回给主线程,好处是计算密集型或高延迟的任务被 worker 负担了,主线程就会很流畅。网页加载展原创 2021-07-30 11:41:16 · 445 阅读 · 0 评论 -
HTML5(三)——Web 本地存储
WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。WebStorage两个主要目标:(1)提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制。web存储更加安全与快速,这些数据还不会保存到服务器,还可以存储大量数据而不影响网站性能。web 存储类型localStorage- 用于长久保存数据,没有有效期,直到手动清除。 sessionStorage- 临时保存..原创 2021-07-29 09:11:41 · 402 阅读 · 0 评论 -
HTML5(二)——获取用户位置Geolocation
地图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。Geolocation是 H5 新增的对象,用于定位。常见打开网页有两种方式:移动端和PC端。它们是根据什么如何定位的呢?IP定位:通过IP地址定位,由于没有硬件支持,主要是服务器根据 IP库判断所处位置,所以精度差。 GPS(全球定位系统):使用GPS定位,定位时间长,耗电量大,但是精度高。 WIFI定位:wifi 定位数据是通过三角距离计算得到,三角原创 2021-07-28 14:39:18 · 1568 阅读 · 0 评论