HTML5 - 随笔分类 - var_obj

摘要：https://www.cnblogs.com/hhhhhh/p/5758167.html 阅读全文

posted @ 2018-06-11 07:35 var_obj

摘要：基本概念 1、HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件 2、可配置需要缓存的资源，网络无连接应用仍可用，本地读取缓存资源，提升访问速度，增强用户体验，减少请求，缓解服务器负担 3、使用上只需要一个普通文本文件，其中列出了浏览器应缓存以供阅读全文

posted @ 2017-12-26 11:39 var_obj

html5——网络状态

摘要：我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值注意事项：如果在加载网页前就已经处于在线状态是不会触发程序的在线事件，同理离线也是阅读全文

posted @ 2017-12-26 11:06 var_obj

html5——全屏显示

摘要：基本概念 1、HTML5规范允许用户自定义网页上任一元素全屏显示 2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示 3、不同浏览器兼容性不一样 4、全屏伪类div:-ms-fullscreen，表示在全屏后的状态阅读全文

posted @ 2017-12-26 11:04 var_obj

html5——web存储

摘要：基本概念 1、传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便 2、h5存储设置、读取方便，而且容量较大，sessionStorage约5M、localStorage约20M 3、h5存储只能存储字符串，可以将对象JS 阅读全文

posted @ 2017-12-26 10:47 var_obj

html5——地理位置

摘要：获取地理位置地理坐标抓取百度API展示阅读全文

posted @ 2017-12-26 10:29 var_obj

html5——拖拽

摘要：基本情况在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。拖拽元素页面中设置了draggable="true"属性的元素目标元素任意元素都能成为目标元素事件监听默认事件拖拽案例阅读全文

posted @ 2017-12-24 17:04 var_obj

html5——多媒体（四）

摘要：全屏兼容阅读全文

posted @ 2017-12-24 16:59 var_obj

html5——多媒体（三）

摘要：自定义进度条 1、video标签是内联块，可以设置宽高，但是需要用大盒子将其包裹起来进行定位 2、小盒子设计成进度条样式，并进行定位 3、进度条样式中的特殊按钮可以用web字体 4、通过点击实现视频的暂停/播放改变按钮的样式 5、获取视频的总时长，放到totalTime中 6、当视频播放的时候，阅读全文

posted @ 2017-12-24 16:53 var_obj

html5——多媒体（二）

摘要：基本方法基本属性基本事件全屏方法更多介绍阅读全文

posted @ 2017-12-24 15:22 var_obj

html5——全屏滚动

摘要：鼠标滚轮基本描述 1、我们使用插件fullpage，为了更好的兼容性 2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类 3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加网址：http://www.d 阅读全文

posted @ 2017-12-22 16:38 var_obj

html5——web字体

摘要：基本介绍 1、自定义网页特殊字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。 2、支持程度比较好，甚至IE低版本浏览器也能支持。 3、web字体的大小鉴定是字体的高度字体格式 1、.eot格式：IE专用字体，支持浏览器IE4+ 2、.ttf格式：Windo 阅读全文

posted @ 2017-12-22 14:54 var_obj

html5——伸缩比例案例（携程）

摘要：1、有图片的盒子，最好是父盒子设置伸缩属性，a标签设置伸缩比例1，img标签宽度100% 2、不要见到父盒子就设置伸缩属性，而是根据子盒子是否占据一行，若是子盒子占据一行，那么只要给子盒子设置伸缩比例就行了 3、父盒子设置伸缩属性，子盒子的盒子模式就会变成box-sizing：border-box 阅读全文

posted @ 2017-12-22 14:36 var_obj

html5——伸缩比例

摘要：基本概念 1、父盒子设置了伸缩属性，子盒子设置伸缩比例 2、以上设置完之后子盒子会按照比例分布在父盒子中 3、当设置伸缩比例时默认会按照x轴方向分配，因为默认情况下伸缩布局主轴方向是x轴方向 4、设置伸缩属性，没有设置具体宽度，默认是100% 5、父盒子设置了伸缩属性，子盒子设置伸缩比例，子盒子不会阅读全文

posted @ 2017-12-22 11:51 var_obj

html5——伸缩布局

摘要：基本概念 1、主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 2、侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 3、方向：默认主轴从左向右，侧轴默认从上到下 4、主轴和侧轴并不是固定不变的，通过flex-direction可以互换效果特征 1、设置了伸缩属性，在没有设置宽度的情阅读全文

posted @ 2017-12-22 11:11 var_obj

html5——多列布局

摘要：基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量阅读全文

posted @ 2017-12-21 12:00 var_obj

html5——动画案例（时钟）

摘要：1、秒钟转360度需要60s分60步 2、分针转360度需要3600s分60步 3、秒钟转360度需要43200s分60步阅读全文

posted @ 2017-12-21 11:55 var_obj

html5——动画案例（无缝滚动）

摘要：无缝滚动：是两组拼在一起的阅读全文

posted @ 2017-12-21 11:51 var_obj

html5——动画案例（大海）

摘要：太阳的发散效果主要是利用transform: scale(1.3)，将物体变大阅读全文