文章列表
zzbozheng 于 16天前发表 279 3 0
前几天在群里看到小杜分享一篇文章,《html写法对gzip压缩率的影响》,为此我也对这点分析了一下。 不知道大家有没有看过这文章,作者是来自微博懒懒交流会,其内容我这里先简述一下。 Gzip算法主要由哈费曼和LZ77算法组成。 如果文件中有两块内容相同的话,那么只要知道前一块内容的位置和大小,通过特定的压缩标识符, 我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息,来替换后一块内容。 举例
16天前
HTML&HTML5
coverguo 于 19天前发表 408 3 0
背景: 最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章,这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下: [http://7tszky.com1.z0.glb.clouddn.com/Fh_4pdBh52iGZWV2GCv82JgVL6WQ] 元旦后提供demo链接 WEBAR WebAR说白了就是通过web端的技术能力去实现AR的效果! 我们知道,AR最基础要实现的功能其实就是实时视频效果,然而帮助我们实现这种实时视频效果的技术基础是 WebRTC ; WEBRTC是什么? 那么,WebRTC是什么? 对前端来说,我们可以通过HTML5的新特性WebRTC(网页实时通信,Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API),通过WebRTC,可以通过网页呼起用户的摄像头,并且实时获取用户摄像头的图像数据的。 WEBRTC API
19天前
HTML&HTML5
赛冷思 ,爱编程,更爱前端。 于 4个月前发表 1102 0 1
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是饭的列表等等。反正挺实用,值得收藏! 先看HTML代码 ​<!doctype html><html><head><metacharset="utf-8"><metaname="description"content=""><metaname="viewport"content="width=device-width, initial-scale=1"><title>左侧固定,右侧自适应</title></head><body><h1>左侧固定,右侧自适应布局</h1><divclass="left-fixed_right-auto"><divclass="left"> 左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽 </div><divclass="right"><divclass="right-content">
4个月前
HTML&HTML5
王军 于 4个月前发表 522 0 1
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 保留关键字 在 JavaScript中,一些标识符是保留关键字,不能用作变量名或函数名。 JavaScript标准 所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript的第三版,从 1999 年开始)。 ECMAScript 4(ES4)未通过。 ECMAScript 5(ES5,2009 年发布),是 JavaScript最新的官方版本。 随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持 ES5。 JavaScript保留关键字 Javascript的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript以后扩展使用。 abstract arguments
4个月前
HTML&HTML5
王军 于 4个月前发表 511 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 保留关键字 在 JavaScript中,一些标识符是保留关键字,不能用作变量名或函数名。 JavaScript标准 所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript的第三版,从 1999 年开始)。 ECMAScript 4(ES4)未通过。 ECMAScript 5(ES5,2009 年发布),是 JavaScript最新的官方版本。 随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持 ES5。 JavaScript保留关键字 Javascript的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript以后扩展使用。 abstract arguments
4个月前
HTML&HTML5
王军 于 4个月前发表 522 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 使用误区 JavaScript使用误区 本章节我们将讨论 JavaScript的使用误区。 赋值运算符应用错误 在 JavaScript程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。 if 条件语句返回 false (是我们预期的)因为 x 不等于 10: var x = 0; if (x == 10) if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10,10 为 true: var x = 0; if (x = 10) if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0,0 为 false: var x = 0; if (x = 0) Note 赋值语句返回变量的值。 比较运算符常见错误 在常规的比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = 10; var y = "10"; if (x == y)
4个月前
HTML&HTML5
王军 于 4个月前发表 646 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 web storage和cookie的区别 Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。 除此之外,Web
4个月前
HTML&HTML5
王军 于 4个月前发表 627 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍 style、currentStyle、getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
4个月前
HTML&HTML5
王军 于 4个月前发表 668 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— Prototype 引用 Prototype 如需测试 JavaScript库,您需要在网页中引用它。 为了引用某个库,请使用 [removed] 标签,其 src 属性设置为库的 URL: 引用 Prototype <!DOCTYPE html> <html> <head> <script src=" http://apps.bdimg.com/libs/pro [http://apps.bdimg.com/libs/pro] ... gt; [removed] </head> <body> </body> </html>Prototype 描述 Prototype 提供的函数可使 HTML DOM 编程更容易。 与 jQuery 类似,Prototype 也有自己的 $() 函数。 $() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。 与 jQuery 不同,Prototype
4个月前
HTML&HTML5
王军 于 5个月前发表 473 0 0
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 函数参数 JavaScript函数参数 JavaScript函数对参数的值(arguments)没有进行任何的检查。 函数显式参数与隐藏参数(arguments) 在先前的教程中,我们已经学习了函数的显式参数: functionName(parameter1, parameter2, parameter3) { code to be executed } 函数显式参数在函数定义时列出。 函数隐藏参数(arguments)在函数调用时传递给函数真正的值。 参数规则 JavaScript函数定义时参数没有指定数据类型。 JavaScript函数对隐藏参数(arguments)没有进行检测。 JavaScript函数对隐藏参数(arguments)的个数没有进行检测。 默认参数 如果函数在调用时缺少参数,参数会默认设置为: undefined
5个月前
HTML&HTML5
王军 于 5个月前发表 459 0 0
本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 完整的指令内容可以参阅 AngularJS 参考手册。 AngularJS 实例 在输入框中尝试输入: 姓名:<input type="text" ng-model="firstName"></p你输入的为: {{ firstName }} 教程,主要介绍:JavaScript强化教程 —— AngularJS 指令 ng-app 指令告诉 AngularJS, 元素是 AngularJS 应用程序 的"所有者"。 Note 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 数据绑定 上面实例中的
5个月前
HTML&HTML5
zzbozheng 于 5个月前发表 1133 2 0
原生的HTML5 API fetch并不支持 timeout 属性,习惯了jQuery的ajax配置的同学,如果一时在fetch找不到配置 timeout 的地方,也许会很纠结。fetch 的配置 API 如下: 语法 fetch(input, init).then(function(response) { ... }); 参数 * input 定义要获取的资源。这可能是: 一个 USVString 字符串,包含要获取资源的 URL。 一个 Request 对象。 * init 可选 一个配置项对象,包括所有对请求的设置。可选的参数有: method: 请求使用的方法,如 GET、POST。 headers: 请求的头信息,形式为 Headers 对象或 ByteString。 body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
5个月前
HTML&HTML5