精华内容
下载资源
问答
  • Kiwi浏览器是知名网站XDA-Developers的团队成员开发的一款基于Chromium开源浏览器的网页浏览器,最新版引入对chrome商店插件的支持。 kiwi browser软件特色 速度很快 支持安装插件 自带夜间模式、广告拦截 网页...

    下载地址:Kiwi Browser Phi CHS arm.apk

    微信图片_20190519173118.png

    Kiwi浏览器是知名网站XDA-Developers的团队成员开发的一款基于Chromium开源浏览器的网页浏览器,最新版引入对chrome商店插件的支持。

    kiwi browser软件特色

    速度很快
    支持安装插件
    自带夜间模式、广告拦截
    网页翻译60种语言
    导入导出html书签
    底部地址栏

    展开全文
  • 浏览器介绍 常用的浏览器 IE浏览器,火狐浏览器,谷歌浏览器,Safari和Operad五大浏览器 浏览器内核 渲染引擎:取得网页内容,图像,HTML,XML,CSS,输入打印机 JS引擎:通过解析Javascript语言,执行JS语言来...

    常用浏览器介绍及HTML5一些标签

    • 浏览器介绍

      • 常用的浏览器
        • IE浏览器,火狐浏览器,谷歌浏览器,Safari和Operad五大浏览器
      • 浏览器内核
        • 渲染引擎:取得网页内容,图像,HTML,XML,CSS,输入打印机
        • JS引擎:通过解析Javascript语言,执行JS语言来实现网页效果
      • 常见的内核
        • Trident(IE内核)
        • Gecko(firefox)
        • webkit(Safari)
        • Chromium/Bink(chrome):Bink其实是Webkit的分支
        • Presto(Opera)
        • 移动端的浏览器内核:常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
      • web标准: Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。
        • 结构(Structure) HTML(gujia)
        • 表现(Presentation) CSS(衣服)
        • 行为(Behavior) JS(动作)
    • HTML5

      • 常用新标签

        • header:定义文档的页眉 头部
        • nav:定义导航链接的部分
        • footer:定义文档或节的页脚 底部
        • article:定义文章。
        • section:定义文档中的节(section、区段)
        • aside:定义其所处内容之外的内容 侧边
        • datalist 标签定义选项列表。请与 input 元素配合使用该元素
        • fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用, legend:标题
      • 新增inputb标签

        email******输入邮箱格式
        tel******输入手机号码格式
        url******输入url格式
        number******输入数字格式
        search****搜索框(体现语义化)
        range******自由拖动滑块
        time******小时分钟
        date******年月日
        datetime******时间
        month******月年
        week******星期 年
      • 常用新属性

        placeholder******占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回
        autofocus******规定当页面加载时 input 元素应该自动获得焦点
        multiple******多文件上传
        autocomplete******规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
        2.这个表单您必须给他名字
        required******必填项 内容不能为空
        accesskey*****规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式
    • 多媒体标签

      • 音频audio

        1.HTML5通过标签来解决音频播放的问题。使用相当简单,如下图所示
        并且可以通过附加属性可以更友好控制音频的播放,如:autoplay 动播放
        controls 是否显不默认播放控件loop 循环播放 loop = 2 就是循环2次 loop
        或者 loop = “-1” 无限循环

      • 视频video

    1.使用也相当简单,同样,通过附加属性可以更友好的控制视频的播放
    autoplay 自动播放
    controls 是否显示默认播放控件
    loop 循环播放
    width 设置播放窗口宽度
    height 设置播放窗口的高度

    展开全文
  • webkit手机浏览器的一些bug汇总

    千次阅读 2014-11-30 15:03:20
    小米3系统原生浏览器:浮层中使用kimi的tap事件时会产生穿透,click则不会。小米3中的chrome浏览器tap也不会穿透 部分原生android浏览器执行 JSON.parse(null )时会报js错误 部分Android上面浏览器动态...

    日期解析

    下面格式的时间字符串iOS(包含iOS7)不支持解析,android一直支持

    Date.parse("2010-03-15 10:30:00");//会返回NAN
    

    简单的解决方案是

    var arr = "2010-03-15 10:30:00".split(/[- :]/),
    date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
    

    fixed定位

    android:

    2.2+开始支持fixed定位,但需要把页面缩放关闭

    ios:

    5.0+开始支持 页面缩放开启之后fixed不会失效,但页面缩放之后fixed失效

    onscroll事件

    ios:

    在mobile safari下在页面滑动时js进程会停止,所以onscroll事件也是在页面停止滑动之后才会执行一次。

    android

    android下页面滑动不会阻止js进程,但可能是性能问题,事件执行周期不稳定,甚至有时候也会出现滑动停止才会执行一次onscroll的情况

    多点触摸

    gesture

    android 3.0之前不支持

    touch

    android上存在bug

    :::javascript
    window.addEventListener(‘touchstart’,function(e){
        console.log(e.touches.length)
    },false);
    

    touches数组始终只有一个值,所以用touch事件模拟gesture也是不可行的

    demo中body元素添加了touch事件,图片添加了gesture事件

    scroller

    元素内部滚动(-webkit-scroll-touch)

    目前只有ios5+支持(据说android4+支持,但测试后发现木有)

    元素内部滚动,目前网上有不少解决方案,主要是通过scrollTop属性或者translate模拟实现,比如iscroll4等,但大都存在以下问题。

    a. 在android上滑动效果较差,特别是内部元素dom结构相对复杂时,都会出现无法滑动或者滑动很卡的情况

    b. 更新内部元素内容时会出现页面闪烁的情况,让人非常不爽

    scrollIntoView

    很多android浏览器不支持这个方法,拿了一个android4.0的原生浏览器做测试,发现支持的也不好,但window.scrollTo属性支持的都还不错,可以选择替代方案,先算出元素据页面顶部的距离y,再使用window.scrollTo(0,y)来实现

    地理定位

    在一些android浏览器上存在bug,主要分为两种情况

    1. 浏览器直接无法定位(错误事件中e.code为2),但本地应用的定位功能正常

    2. 一直显示定位中(传入的success和fail事件都不会执行)。所以定位时设置超时属性是很有必要的

    伪类

    1.hover和active伪类都存在bug

    2.设置了点击事件的元素在点击时会有一个阴影效果(-webkit-tap-highlight-color),这种点击效果在很多android机器上没有,但android上的a元素点击有点击效果

    屏幕旋转

    orientationchange从android2.2开始支持,但事件会在旋转屏幕之前触发,需要通过setTimeout去修复。

    圆角边框出现虚框

    通过border-radius=width/2原理实现圆形容器时,在android下圆形边框会出现齿形虚框

    本地存储

    在混合App中(基于webview),若使用localStorage或者webSQL存储数据,数据是永久存在的(当更新程序或者程序被强制关闭时重新打开程序数据都会存在),但从ios5.1开始这个数据不再是永久的,它会被当作临时数据,ios随时可以删除,而且不会出任何警告,所以ios5.1之后在HyBrid App中本地存储功能只能通过phoneGap这些壳去调用原生的存储接口实现。目前这个bug已在ios6中解决

    浮层

    在android上最好不要出现浮层,目前已发现以下bug

    1. 链接点击位置不正常(点击效果会出现在浮层下方元素上)

    2. 浮层内容较多时可能需要实现元素内部滚动,so……

    touchend

    这是一个非常恶心的bug,在一些andorid的机型中,发现很多时候轻微滑动时不触发touchend事件

    background-size

    在android2.1上要加-webkit-前缀,但是2.2之后去掉-webkit-前缀才识别,所以要在两个系统都支持的话需要把两种都写上

    background:url(...) center center no-repeat;
    backround-size:100% 100%;
    -webkit-backround-size:100% 100%;
    

    background-size有两个比较有用的值:contain cover

    这两个属性的作用是保持背景图片比例不变,放大或缩小背景图片 cover是保证铺满全屏幕,多余的宽或者高被隐藏 contain是保证容器包含整个背景,比例较小的宽或者高会留白

    .bc{
        width:320px;
        height:240px;
        background:#000         url(http://imgsrc.baidu.com/baike/pic/item/a044ad345982b2b72550766c31adcbef77099b4f.jpg) center center no-repeat;
        background-size:cover;
        /*-webkit-background-size:contain;*/
    }
    

    经测试,这两个属性值在android2.2+支持

    ios 4.3.5上contain实现无bug,cover底部会出现留白 ios5+无bug

    页面闪动

    高端版开发过程中有时候会出现页面闪烁的情况,归纳有以下几种可能

    a.android下使用了translate而不是translate3d

    b.url中多了#号(比如很多人链接当按钮使用时href喜欢写成#号,要杜绝这一点,全部写成'javascript:;')。加个题外话,高端版中不要使用hash进行锚点定位,使用window.scrollTo(0,y)或者el.scrollTntoView()替代.

    c.经常在旋屏的时候出现,这个一般是控件逻辑问题,比如导航栏控件,很多写法是在orientationchange事件里面重新算宽度,而屏幕旋转过程中样式也有一个默认变化,当两者冲突时,会产生闪烁现象。

    hashchange

    android 2.2+才支持

    JavaScript 中json属性名不能为class

    在IOS4.X系列中,当json属性名为class的时候会出现奇怪的语法错误,如:

    :::javascript
    {
        class:'button'
    }
    

    input maxlength

    android 2.1中input 元素不能加入maxlength 否则会出现无法输入的情况,但textarea无此问题

    Anroid 4.0.3系统发现,直接使用css(display,block),设置dom节点显示状态有时失效。但执行了getComputedStyle函数后,则不会出现此bug。推荐:直接使用kimi的show,hide方法

    其它

    • iTouch4 iOS5.1 app的webview中,若在a元素的点击事件中修改其display属性,会导致webview crash

    • 小米3系统原生浏览器:浮层中使用kimi的tap事件时会产生穿透,click则不会。小米3中的chrome浏览器tap也不会穿透

    • 部分原生android浏览器执行 JSON.parse(null )时会报js错误

    • 部分Android上面浏览器动态插入link元素时不触发load事件,这样导致一些require实现lib(如seajs)无法正常工作,目前发现机型:ZTE U930 原生浏览器

    展开全文
  • http://chaoskeh.com/blog/some-experience-of-using-zepto.html... ... 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动

    http://chaoskeh.com/blog/some-experience-of-using-zepto.html

    前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。
    为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的。
    而 Zepto 只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低。

    但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,所以写篇文章记录下,希望对后来者有帮助
    注意,本文撰写时 Zepto 版本为 1.0 正式版

    从哪里下载 Zepto

    这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢?

    There are more modules; a list of all modules is available in the README.

    在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)!
    所以我的建议是,不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的模块。比如我挑选的模块是这么几个:

    • polyfill,zepto,detect,event,ajax,form,fx 这7个就是标准版包含的模块
    • fx_methods 有了这个模块之后,.show() .hide() 等几个方法才能支持动画了,比如 .show('fast')
    • data 提供对 .data() 方法的完整支持,像 jQuery 一样用内存对象存储
    • assets 移除 img 元素后做一些特殊处理,用来清理内存
    • selector 更多的选择器的支持,后面会提到
    • touch 对触摸事件的支持,比如 tap 事件

    如果你对 Node 不了解不知道如何 Build 的话,可以下载我的版本

    不要用 click 事件,用 tap 代替

    这个估计已经广为人知了,因为 click 事件有 200~300 ms 的延迟,为了更快的响应,最好用 Zepto 提供的 tap 事件
    不相信的话,可以用以下代码测试一下

    var t1,t2;
    $('#id').tap(function () {
        t1 = Date.now();
    });
    $('#id').click(function () {
        t2 = Date.now();
        alert(t2 - t1);
    });
    

    Zepto 对 CSS 选择器的支持

    郑重提醒,:text :checkbox :first 等等在 jQuery 里面很常用的选择器,Zepto 不支持!
    原因很简单,jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器,而 Zepto 是直接通过浏览器提供的 document.querySelectorAll 接口。
    这个接口只支持标准的 CSS 选择器,而上面提到的那些属于 jQuery 选择器扩展,所以仔细看看这个网页,注意一下这些选择器。

    当然也有好消息,就是上面提到的 selector 模块,如果有这个模块的话,能够支持 部分 的 jQuery 选择器扩展,列举如下:

    • :visible :hidden
    • :selected :checked
    • :parent
    • :first :last :eq
    • :contains :has

    元素的尺寸计算

    首先 Zepto 没有 .innerHeight() .outerWidth() 等四个方法,其次,它的 .height()/.width() 方法也不完善,对于 display:none 的元素,计算出的高宽都是 0
    而这在 jQuery 里面是没有问题的,因为 jQuery 针对这种元素,会先设置其 css 样式设置为position: "absolute", visibility: "hidden", display: "block" 
    计算完高宽后再恢复,参见 https://github.com/jquery/jquery/blob/master/src/css.js#L460
    如果遇到这种特殊情况,可以参考 jQuery 写一个类似的方法

    .prop() 方法的陷阱

    有次我要把一个文本框置为只读,写了这么一行 $('#text').prop('readonly', true) 结果死活不工作
    找了半天才发现,正确的写法是这样 $('#text').prop('readOnly', true) ,如果你居然看不出两者的差别,那么悄悄提示你:注意大小写!
    翻了一下相关的文档,原来只读属性的正确拼法确实是 readOnly,可是在 jQuery 里面上一段代码却能正常工作
    于是到 jQuery 源码里面一找才发现,还有这么一段 https://github.com/jquery/jquery/blob/master/src/attributes.js#L466

    jQuery.each([
        "tabIndex",
        "readOnly",
        "maxLength",
        "cellSpacing",
        "cellPadding",
        "rowSpan",
        "colSpan",
        "useMap",
        "frameBorder",
        "contentEditable"
    ], function() {
        jQuery.propFix[ this.toLowerCase() ] = this;
    });
    

    从这里也能看到,jQuery 的成熟度真是难以超越,因为他把我们都惯坏了……
    考虑到这段代码比较简单,我厚颜无耻地抄袭了一下然后给 Zepto 提了一个 pull request ,如果你们喜欢这种无脑的用法,可以去评论表达支持(记得用英文)

    .show() 的动画效果

    如果没有 fx_mehods 模块的话,.show() 方法是不支持动画的,不过有了这模块后,动画的支持还是有点小问题,比如这么一段 HTML

    <div style="background:black;opacity:0.7;display:none">
        test
    </div>
    

    如果你调用 $('div').show('fast') ,那么动画完成后你看到的不会是一个半透明的元素,而是全黑不透明的
    因为 Zepto 的 .show() 动画实现的很简单,没有高宽的变化,而是将透明度从 0 逐渐变为 1,所以元素上原来设置的透明度就被替代了。
    这种情况下,可以用 .fadeIn() 方法来替代 .show()

    结语

    看到这里相信你已经了解为什么我说” Zepto 还远未成熟“,目前它其实还仅仅处于“能用”,远未达到 jQuery “好用”的地步
    最后,关于整个 HTML5 触屏版的前端开发,我有篇 Slide 做了总结,本文只是其中关于 Zepto 部分的详细阐述,感兴趣的可以去看看

    展开全文
  • 看下你名字炫不炫

    2013-04-26 14:46:21
    看下你名字炫不炫 一直在动哦 使用技术:JS+CSS3 浏览器支持:支持CSS3的浏览器都行,像IE9,Chrome,FireFox...
  • ,通过上面的公式,计算出基准值rem,然后写入样式,大概如下(代码参考自kimi的m-base模块) var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement( 'style'); ...
  • dubbo-arthas-demo 下面的排查分享基于这个dubbo-arthas-demo,非常简单的一个应用,浏览器请求从Spring MVC到Dubbo Client,再发送到Dubbo Server。 Demo里有两个spring boot应用,可以先启动server-demo,再启动...
  • 下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。 代码如下,可复制。另外,请注意此解决方案仅供同域名下使用。 ...
  • 缺点是传递的值会显示在浏览器的地址栏上,有被篡改的风险,不能传递对象,只有在通过URL 请求页时查询字符串才是可行的。 2.利用隐藏域 隐藏域不会显示在用户的浏览器中, 一般是在页面中加入一个隐藏控件, ...
  • Android 4.0 CTS

    千次阅读 2012-05-02 21:10:40
     当所有的测试执行完毕后,可以通过浏览器()察看[android-cts/repository/results/<session-name>/testResult.xml]这个目录下的测试报告,以便根据结果调整开发设计方案; 刚开始了解Android CTS,感觉...
  • 一、导入静态资源 1、新建一个项目 创建:new-project-(修改以下三项)-next-选择web模块 (2)删除多余不用文件,新建一个controller ...(2)获得静态资源的路径的方式:访问/*这几个路径下的内容都能找到..
  • HTTPS 的七个误解

    2011-02-15 10:09:00
    HTTPS的七个误解译者:阮一峰误解七:HTTPS无法缓存许多人以为,出于安全考虑,浏览器不会在本地保存HTTPS缓存。...比如,如果头命令是Cache-Control:max-age=600,那么这...(其他浏览器在这方面的行为不一致,取决于你使
  • 下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。 代码如下,可复制。另外,请注意此解决方案仅供同域名下使用。 ...
  • "div class=/"kimi_modifysty/">" );  Matcher m;   for  (String s : parts) {  m = p.matcher(s);   if  (m.find()) {  System.out.println( "<tr><td>"  + m.group( 1 )  +  "</td><td> ...
  • JavaScript修改css样式style 用JavaScript修改网页样式 ...kimi at 2008-04-04 19:08:32 in Div+CSS 版权声明:原创作品,欢迎转载,转载时请务必以 超链接 形式标明文章原始地址、作者信息和本声明。
  • 为了方便在各个浏览器显示,上面使用了截图,而非把代码粘贴出来。不知道有多少人看出来是法拉利的跃马标志? Text-Image 提供在线的图片转换服务,可以把图片转换为Html, ASCII, Matrix等代码。在什么场合用到?...
  • SQLite使用

    2015-01-05 22:11:39
    1.创建表,以及更新表结构。public class MySQLiteOpenHelper extends SQLiteOpenHelper{ public MySQLiteOpenHelper(Context context) { super(context, "mengface.db", null, 1);//最后一个参数是数据库版本号...
  • IE与Firefox中Cookie域的不同

    千次阅读 2010-04-07 15:39:00
    kimi at 2008-07-14 01:23:14 in CSS 版权声明:原创作品,欢迎转载,转载时请务必以 超链接 形式标明文章原始地址、作者信息和本声明。 “IE与Firefox中Cookie域的不同” 4条回复 ...
  • PHP批量下载图片文件(抓取css中图片)

    千次阅读 2011-09-26 11:34:04
    Author: kimi Documentation: 下载样式文件中的图片,水水专用扒皮工具 */ //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent=file_get_contents('images/style....
  • BeginningXML

    2019-01-16 11:29:48
    浏览器通过xml样式表文件或xml样式转换插件来处理xml文件 8.xml目标之一将数据与显示完全分离开来,不像html一样有内嵌的数据显示方式。 9.使用CDATA来是我们可以直接使用“>”“<”等符号而不需要使用“>”“<”等...
  • html/css/javacript

    千次阅读 2019-01-16 11:27:17
    define head for ,notice: differ it from :when need many title ,you can use it to organize them : ’s foot :in this elements can contain many :use in as it title For example: Yummy Food writer:kimi wa!...
  • 开源漏洞扫描器合集

    千次阅读 2018-09-19 10:12:34
    https://github.com/lcatro/KiMi-VulnBot_Framework KiMi 漏洞感知机器人扫描框架 =========================================== https://github.com/superfish9/fuck_sqlinjection-xss pytesser.py Main module ...
  • Chrome浏览器的审查功能。 错误1:选择器写错了,压根没有选择上; 如果写了一个错误的选择器, <style type="text/css"> dvi p{ color:red; } </style> Chrome审查一下,就能看见没有任何选择器选择...
  • → z-index:无论是多少肯定能压住kimi因为父亲z-index大 8 兼容问题 最好的判断一个浏览器能力的测试,就是HTML5的支持测试。 www.html5test.com 满分555分,是所有HTML5、CSS3的新特性,支持就得1分,不支持不得分...
  • CSS(5)

    2017-09-07 19:50:18
    如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角 : 面试题: 答案: 用bottom的定位的时候, 参考的是浏览器首屏大小对应的页面左下角 。 以盒子为参考点 一个绝对...
  • JavaScript输入输出

    2016-05-25 10:46:56
    kimi post in  JavaScript教程  at 2008-05-27 23:46:26.  永久地址: http://www.ijavascript.cn/jiaocheng/javascript-jiaocheng-422.html   在百度中搜索《 JavaScript输入输出 》。
  • 当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。 注:具有相同的Origin,也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中...
  • 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:   如果用 bottom描述,那么就是浏览器首屏窗口尺寸,对应的首屏的页面的左下角那个点 (同样是相对于页面...
  • 关于前端高级面试题

    千次阅读 2019-04-25 12:02:54
    1:简述前后端通讯的过程(三次握手,四次挥手)? TCP(Transmission Control Protocol) 传输控制协议   1、TCP三次握手和四次挥手的过程图    ...tcp的6种标志位的分别代表: SYN(synchronous建立...
  • web前端高级工程师,面试题

    千次阅读 2018-09-05 19:46:49
    1:简述前后端通讯的过程(三次握手,四次挥手)? TCP(Transmission Control Protocol) 传输控制协议   1、TCP三次握手和四次挥手的过程图     tcp的6种标志位的分别代表: ...RST(rese...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 317
精华内容 126
关键字:

Kimi浏览器