关注前端开发微信微信号web007007

HTML5语音输入(淘宝语音搜索)方法

HTML5语音输入(淘宝语音搜索)方法

谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可,例子如下: <input type=”text” x-webkit-speech /> 这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示 这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。 语音输入其他...

阅读全文...

jQuery选择器大全

jQuery选择器大全

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过...

阅读全文...

程序员如何保持优秀

程序员如何保持优秀

1. 小范围的选择一些有用技术,透彻的学习它们,拥抱它们。然后不断的扩展这个范围。 2. 理解各种数据结构的优点和缺点,包括它们在内存中和在硬盘上的各自表现。 3. 理解各种算法的优点和缺点。 4. 了解你的工作领域。关上电脑,去做你的用户们在做的事。 5. 有准备,有愿望,有能力在任何时候投入到多种技术层面中。你必须知道表象下的技术原理。在“各个技术层面的掌握程度”和“编程能力”上有着...

阅读全文...

让pre标签自动换行

让pre标签自动换行

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行。 下面介绍一个方法让 <pre > 标签中的内容自动换行并符合 W3C 标准(多浏览器支持) pre{ whi...

阅读全文...

什么是好的用户体验?

什么是好的用户体验?

说今天是一个体验为王的时代,一点也不过分。 做大众消费品的人可能已经感觉到,今天消费者的话语权越来越强,如果你的产品做得好,不久就会口口相传;如果你的产品做得烂,不久就会骂声一片。所有这一切在过去是不可想象的。但今天,每个人都可以发布信息,每个人的声音即使弱小,也总能被别人听到。在互联网时代,产品是否能够成功,用户体验越来越变成一个关键,用户买了你的产品,并非是与你...

阅读全文...

深入浅出Node.js(一):什么是Node.js

深入浅出Node.js(一):什么是Node.js

【编者按】:Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹。从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟Joyent获得企业资助,再到今年发布Windows移植版本,Node.js的前景获得了技术社区的肯定。InfoQ一直在关注Node.js的发展,在今年的两次Qcon大会(北京站和杭州站)都有专门的讲座。为了更好地促进Node.js在国内的技术推广,我们决定开设“深入...

阅读全文...

浏览器渲染原理

浏览器渲染原理

基本概念 WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程。 渲染过程 1. 用户输入网址(假设是个 HTML 页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回 HTML 文件; 2. 浏览器开始载入 HTML 代码,发现 <head> 标签内有一个 <link> 标...

阅读全文...

reflow(回流)

reflow(回流)

基本概念   浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow(回流)。有时 reflow 页面中的一个元素会 reflow 它的祖先元素以及所有子元素。   由于 reflow 的开销非常之大,因此要尽可能的避免 reflow 的发生。   产生 reflow 的原因   ● 调整窗口大小; ● 改变字体; ● 增加或者移除样式表; ● 内容变化,比如用户在 ...

阅读全文...

监听文本框输入(input & textarea)

监听文本框输入(input & textarea)

基本概念 Firefox、Chrome、IE9&IE9+ 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。 onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl ...

阅读全文...

阻止事件(取消其默认行为并阻止其传播)

阻止事件(取消其默认行为并阻止其传播)

功能描述 取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播。 实现代码 function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } } 只阻止事件继续传播(不取消默认行...

阅读全文...

让IE也支持html5标准

让IE也支持html5标准

相信HTML5标准在全球广泛的使用已经是大势所趋。HTML5能为我们的网页带来更高效简洁的代码,但是IE8以下版本仍然不支持HTML5标签。不过我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5标签支持的问题。 可以从网上直接加载下面的脚本: <!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> 这是...

阅读全文...

让IE也支持圆角

让IE也支持圆角

css3的圆角属性,能为开发者提高开发的效率。可惜主流的ie6 7 8并不支持该属性。下面介绍一种让ie也支持圆角的方法。 1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。 下载地址:百度网盘下载 使用方法: .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

阅读全文...

HTML5须知十件事

HTML5须知十件事

一两年前,HTML5似乎还是一个模糊的概念,只有少数几个互联网的书呆子才会关心。而现在,却感觉仿佛HTML5无所不在了。感谢Mozilla 和Chrome的快速发布,以及微软IE9的部署(IE 10现在也处于“技术预览”状态了),数量有限(或者说比有限要更好些)的支持HTML 5的浏览器已将近人人皆可享受。开发人员开始利用那些得到广泛实现的功能特性。不出1年HTML 5就将得到完全支持,而规范也正在迅速到达稳定...

阅读全文...

z-index不生效的原因和解决方法

z-index不生效的原因和解决方法

运行下面代码看看 <div style="z-index:4;width:560px;background-color:Aqua; ">不生效 <a href="http://www.web92.net">www.web92.net</a></div> <div style="z-index:3;width:360px;background-color:Fuchsia; position:absolute;">有效 <a href="http://www.web92.net">www.web92.net</a></div>...

阅读全文...

HTML5 jQuery 绘图插件

HTML5 jQuery 绘图插件

Websanova Paint 是一个利用 HTML5 画布(canvas)技术的 jQuery 插件。它能够让你自由的在画板区域使用各种颜色画出任意的形状,还能够涂改。它能让你设定所画形状的边框,然后用颜色填充。你还能调整画笔的粗细。它的一个最有趣的功能是能让你把画好的作品保存成图片,日后你还能载入这个图片进行二次修改,但有个限制,图片只支持 PNG 格式的。下面是演示: 这个 jQuery 插件的下载地址是:http...

阅读全文...

选择jQuery的理由

选择jQuery的理由

随着 Web 前端技术的发展,Javascript 框架层出不穷,jQuery 就是其中之一。最近,国内外社区针对 jQuery 的优缺点做了深入的分析,其中不少内容值得 Web 开发人员借鉴。 Richard Hein 在“6 Things You Need to Know About jQuery”一文中列举了推荐 jQuery 的托干理由,包括: jQuery 简化工作——开发人员会发现学习 jQuery 比较容易,因为该框架的代码简洁精练,语法简单、编码标准开发等特点帮...

阅读全文...

网页浏览新天地–谷歌字体服务

网页浏览新天地–谷歌字体服务

近日,google提供了一项新的服务,google在线网页字体服务。这是一个高品质的网页字体集合,同时提供了使用相关的API。对于网页设计师和web开发人员来说无疑是个好消息,从此我们将不需要担心客户机器上是否有我们想要放到网页中的字体啦。 谷歌API提供的字体使用起来非常简单,只需要在HTML代码中添加一两行,如下demo: <html> <head> <link href='http://fonts.googleap...

阅读全文...

HTML5入门(第三课)HTML5网站布局

HTML5入门(第三课)HTML5网站布局

&lt;!DOCTYPE html&gt; &lt;htmlang = &quot;en&quot;&gt; &lt;head&gt; &lt;meta charset = &quot;utf-8&quot;&gt; &lt;title&gt;<a href="http://www.web92.net/tag/html5-2" title="查看 HTML5 中的全部文章" target="_blank">HTML5</a> Demo&lt;/title&gt; &lt;bo...

阅读全文...

HTML5入门(第二课)HTML5标签语法介绍及新增标记

HTML5入门(第二课)HTML5标签语法介绍及新增标记

1、语法标签: (1)不允许写的结束符的标签:area、base、br、col、command Embed、hr、img、input、keygen、link、meta、param、source、 Track、wbr (2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option Colgroup、thread、tbody、tr、td、th (3)可以完全省略的标签:html、head、body、colgroup、tbody   2、新增标签: <article>  标记定义一篇文章 <aside>...

阅读全文...

HTML5入门(第一课)了解HTML5的理由和新特性

HTML5入门(第一课)了解HTML5的理由和新特性

理由: 1、兼容性,老版本的浏览器上也可以运行(不是很靠谱) 2、实用性,简化了标签,细分了功能,增加了移动互联网元素 3、革命性,HTML不再是简单的标签语言,增加了API、渲染等 新特性: 1、微数据与微格式等方面的支持 , 2、本地存储,离线应用 3、API调用,地图,位置,LBS等 4、连接通讯,后台线程, 5、多媒体 , 6、三维、图形及特效, 7、支持CSS3

阅读全文...