html5
文章平均质量分 79
alex8046
十年磨一贱。
展开
-
html5 viewport指令
在移动app开发中会经常使用到viewport指令, ViewPort 标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么。ViewPort 标记的content值是由指令及其值组成的以逗号分隔的列表。1 meta name="viewport" content="width=device-width, initial-scal转载 2014-10-27 17:56:37 · 1186 阅读 · 0 评论 -
IMG元素加载行为详解
一、前言 在《JS魔法堂:jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨。 二、资源加载的相关属性和事件 资源加载首先当然是确定资源位置的 src属性 、随之就是资源加载成功与否的转载 2016-01-06 15:10:06 · 3643 阅读 · 0 评论 -
HTML5 <script>元素async,defer异步加载
(译者注: 异步加载,可以理解为无阻塞并发处理.)(译者再注: 建议使用 defer,但是经测试发现 defer 属性对页面内的script无效,没有时序差别.只对外部 js文件生效 )我对于HTML5感到兴奋不已的原因之一是它实现了众多业界期待已久的特性。我们一直需要输入框显示空白提示,但都是用JavaScript来实现的。我们也想要整个块都变成可被点击,也是使用JavaScri转载 2015-12-23 00:24:24 · 472 阅读 · 0 评论 -
WebSocket 实战
WebSocket 前世今生众所周知,Web 应用的交互过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现,这种机制对于信息变化不是特别频繁的应用尚可,但对于实时要求高、海量并发的应用来说显得捉襟见肘,尤其在当前业界移动互联网蓬勃发展的趋势下,高并发与用户实时响应是 Web 应用经常面临的问题,比如金融证券的实时信息,Web 导转载 2015-12-24 11:37:03 · 722 阅读 · 0 评论 -
javascript图片预加载实例分析
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考。具体如下:lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。这是大部分人使用预加载获取图片大小的例子:转载 2015-12-25 17:00:35 · 641 阅读 · 0 评论 -
一个iframe怎样浮动在另一个大的iframe上面
1、首先两个iframe要同级2、把其中一个的iframe套在div里面3、把div浮动。转载 2016-05-19 18:24:30 · 3522 阅读 · 0 评论 -
iframe 高度设置、iframe 自适应高度方法总结
所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。如果iframe的高度没有确定,那将转载 2016-05-19 18:30:37 · 24080 阅读 · 0 评论 -
JS操作iframe里的DOM || contentWindow,contentDocument
一、父级窗口操作iframe里的domJS操作iframe里的dom可以使用contentWindow属性:contentWindow属性,是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,conten转载 2016-05-19 18:33:14 · 13847 阅读 · 0 评论 -
总结iframe高度自适应,自适应子页面高度
在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。 页面html节点上要有iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" style="padding: 0px; width: 100%;转载 2016-05-19 18:35:35 · 6398 阅读 · 0 评论 -
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小,或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确,那么就达不到想要的效果了。为什么需要使用iframe自适应高度呢?其实就是为转载 2016-05-19 18:37:44 · 219965 阅读 · 0 评论 -
深入了解viewport和px
先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位:px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下:① 什么是绝对长度单位?什么是相对长度单位? ② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度? ③ 什么是ppi、dpi、dp、dip转载 2016-07-14 17:01:03 · 539 阅读 · 0 评论 -
使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界转载 2016-07-14 17:05:45 · 1259 阅读 · 0 评论 -
[html代码] 几种美丽的分割线
一、普通1、 2、align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度 二、特效(效果并不是孤立的,可相互组合)1、两头渐变透明: 2、纺锤形: 3、右边渐变透明:转载 2016-07-15 13:48:21 · 85067 阅读 · 0 评论 -
横屏问题
移动端html开发,我们常会用到横竖屏的判断做一些事情,比如说播放视频的时候时常使用横竖屏切来切换居中显示和全屏显示,如果你无数次尝试都失败了,请你看到最后,有惊喜哦!!。一般来说,横竖屏的检测方式有以下几种:一、使用浏览器自带的事件使用浏览器自带事件orientationchange和浏览器对象window.orientation可以完美进行横竖屏幕切换。根据参考资料一,转载 2015-12-30 17:02:22 · 707 阅读 · 0 评论 -
移动前端头部标签(HTML5 head meta)
DOCTYPE html> html lang="zh-cmn-Hans"> head> meta charset='utf-8'> meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> meta name="descr转载 2015-12-30 16:56:15 · 697 阅读 · 0 评论 -
给input[text]添加icon,并且绑定事件
原创 2014-11-20 16:31:41 · 6604 阅读 · 0 评论 -
HTML5 中 postMessage sendMessage使用
Web Workers 简介至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持。其中,最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程(Web Workers)的概念,并且规范出 Web Workers 的三大主要特征:能够长转载 2015-02-28 14:53:06 · 4422 阅读 · 0 评论 -
针对webkit的HTML, CSS和Javascript
总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.HTML, 从HTML文档的开始到结束排列: 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 禁用手机号码链接(for iPhone) 设置你网页的图标, 尺寸为57X57 px 全屏启动时候的启动画面图像,转载 2015-03-20 17:26:12 · 557 阅读 · 0 评论 -
网页布局之响应式设计简明指南
一、为什么要使用响应式设计?我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用。二、一个碎片化的世界截止2013年,有成千上万种不同的设备在浏览网页,所以我们不可能设计出适应所有屏幕大小的网页。相反,我们必须得采用一种更加流畅的方式去设计。三、移动优先最近一个比较火的词叫移动优先。它的意思是,先为移动端设计样式,然后再转载 2015-03-02 16:57:21 · 930 阅读 · 0 评论 -
常用meta整理
元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相关的转载 2015-03-13 17:55:00 · 403 阅读 · 0 评论 -
HTML5 地理位置定位(HTML5 Geolocation)
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。 在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Go转载 2015-07-15 15:37:31 · 823 阅读 · 0 评论 -
History对象
window对象的history属性引用的是该窗口的History对象,该对象的属性与方法如下 length: 表示history中的个数,(对象没有Length属性,但这个对象有)IE6是从0开始的,其余的从1开始计数 go(): 在用户的历史记录中前进或后退 ie支持向此方法中传URL参数 go() || go(0) 相当于location.reload转载 2015-09-30 14:57:47 · 550 阅读 · 0 评论 -
Ajax与HTML5 history pushState/replaceState实例
一、本文就是个实例展示三点:我就TM想找个例子,知道如何个使用,使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付、贷款和领证什么的。HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布,精气神实在不够用,这里,直接一个实例。二、ajax载入与浏览器历史的前进与后退转载 2015-09-30 14:50:19 · 819 阅读 · 0 评论 -
HTML5 history新特性pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。从HTML5开始,我们可以开始操作这个历史记录堆栈。 1.History使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退前进和后退后退:window.history.back();转载 2015-09-24 19:41:22 · 1483 阅读 · 0 评论 -
移动端的头部标签和 meta
使用 HTML5 doctype,不区分大小写更加标准的 lang 属性写法html lang="zh-cmn-Hans">meta声明文档使用的字符编码meta charset='utf-8'>优先使用 IE 最新版本和 Chromemeta http-equiv="X-UA-Compatible" content="IE=edge,转载 2015-12-30 16:31:50 · 7011 阅读 · 0 评论 -
一张网页从meta标签开始
规定网页编码meta http-equiv="Content-Type" content="text/html;charset=utf-8">设置http cache时间,在快速迭代的项目中,我们可以设置max-age=604800s,也就是七天meta http-equiv="Cache-Control" content="max-age=604800" />me转载 2015-12-30 16:36:33 · 974 阅读 · 0 评论 -
常用meta整理
源引:http://segmentfault.com/blog/ciaocc/1190000002407912转载 2015-12-30 16:48:41 · 329 阅读 · 0 评论 -
前端知识普及之HTML
什么是Doctype?能吃吗?我想使用过sublime的同学,应该会有一个snippets。!+[TAB]结果就是:html lang="en">head> meta charset="UTF-8"> title>Documenttitle>head>body> body>html>没错,不知不觉中,!DOCTYPE htm转载 2016-07-21 14:34:21 · 464 阅读 · 0 评论