随笔分类 -  html5

html5新特性
canvas实现芝麻信用评分效果
摘要：1，我们需要做的是画线。2，循环调用画线实现动画效果。3，将像素设置高调节毛边。 完整代码： 阅读全文
posted @ 2018-03-13 16:22 艾路 阅读(326) 评论(0) 推荐(0)
SVG可伸缩矢量图
摘要：SVG是响应式设计中十分重要的一项技术。它是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术。 web领域中的图像，png,jpg都是它们的可视数据保存为像素形式。放在两倍宽高上，就会有局限性。除了最小的图片资源，如果可能的话，使用svg替换png。这样可以产生和分辨率无关的图片，而且大小也比位图 阅读全文
posted @ 2018-02-06 16:58 艾路 阅读(156) 评论(0) 推荐(0)
2018前端学习路线
摘要：引用：https://github.com/kamranahmedse/developer-roadmap 引言： 前端路线图 后端路线图 DevOps路线图 阅读全文
posted @ 2018-01-18 16:06 艾路 阅读(366) 评论(0) 推荐(0)
媒体查询以及flexbox，响应式图片
摘要：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width.height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适应不同的设备。 媒体查询的使用方式：在css文件输入@media screen。在Link标签中使用媒体查询。<link rel="sty 阅读全文
posted @ 2018-01-04 16:40 艾路 阅读(570) 评论(0) 推荐(0)
gif safari img标签播放mp4
摘要：gif可以实现动态效果，但是质量和性能不好。gif采用8位压缩，最多只能处理256种颜色。gif对网络性能来说糟糕。它们体积庞大，需要更多的CPU和内存资源来重新绘制，是电池杀手。 gif也有许多优点：它们由浏览器预加载立即请求的，它会自动播放和循环播放，而且是无声的。 使用video标签可以实现效 阅读全文
posted @ 2017-12-13 11:15 艾路 阅读(1426) 评论(0) 推荐(0)
网页当前滚动位置
摘要：浏览器兼容问题会导致document.body.scrollTop或者document.documentElement.scrollTop永远为0，那我们做个判断，然后赋值就可以了。 阅读全文
posted @ 2017-12-04 18:38 艾路 阅读(241) 评论(0) 推荐(0)
网页自适应的几种方式。
摘要：微信小程序的像素大小使用rpx，rpx换算px屏幕宽度/750。 传统的自适应布局有几种： 响应式，根据屏幕大小配置多个样式文件。 使用em,rem.rem是页面的font-size尺寸，不同的页面设置不同的font-size。 使用百分比或者flex，铺满屏幕，高度字体还使用px. scale通过 阅读全文
posted @ 2017-12-04 18:35 艾路 阅读(2549) 评论(0) 推荐(0)
iphone x 网页兼容
摘要：默认的显示内容在安全区域，不会在圆角和设备的传感器内显示。 第一个新功能是扩展到现有的视区 meta 标记, 称为视区匹配, 它提供对镶行为的控制。视区适合在 iOS 11 中提供。设置viewport-fit可以全屏显示。 设置完viewport-fit=cover后，会发现title位置上移，这 阅读全文
posted @ 2017-11-17 14:24 艾路 阅读(247) 评论(0) 推荐(0)
chrome 手机debugger模式 width超出
摘要：添加 user-scalable=0 即可。 阅读全文
posted @ 2017-06-30 12:43 艾路 阅读(167) 评论(0) 推荐(0)
html5 画布 属性以及快捷模块
摘要：创建循环使用的创建圆角矩形函数： 阅读全文
posted @ 2016-10-11 21:29 艾路 阅读(120) 评论(0) 推荐(0)
HTML5 表单 input属性以及验证
摘要：autofocus属性可以在页面loading完后，自动将光标固定在Input元素上。 placeholder属性可以给予用户一个快速提示，它并不会取代标签元素。 required是一个布尔型属性，包含此属性的表单元素必须被填写。 元素Mete被作用于图形化表示已知范围内的测量标准。 元素progr 阅读全文
posted @ 2016-10-10 23:50 艾路 阅读(644) 评论(0) 推荐(0)