我想网 » HTML

HTML5未来发展的六大趋势

seasun — Tue, 20 Dec 2011 12:43:54 +0000

HTML 5从根本上改变了开发商开发Web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。

在移动领域，大家争论不休的一个问题就是开发Web应用还是原生应用？而随着HTML 5标准的发展，两者之间的差异已经逐渐变得模糊，今天各大媒体都争相报道与HTML 5有关的东西，那么，HTML 5未来的发展趋势到底是什么？

1）移动优先

前天，appMobi获选ReadWriterWeb2012最具前途的的公司，作为一家初创公司，这个奖公司首先专注于在移动平台上如何实现HTML 5的简单易用和无处不在。

从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

如上文所说，此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今，我们看见一些大型企业如《金融时报》在冲着HTM L5进军移动市场过程中，从App Store撤掉iPad原生应用而开发Web应用，同样表现出色。

许多游戏开发商也将在移动Web应用中扮演中重要角色，移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用，不管是Web应用还是原生应用，只要好用就可以了。

2) 游戏开发者领衔“主演”

其实移动游戏开发商是从HTML5获益最多的一方，他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。在某种程度上，游戏就是移动平台销量最好的应用，也是吸引人们购买移动设备的一个重要因素。

许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。

3) 响应式设计&自动变化的屏幕尺寸

在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。

响应式设计最好的一个例子就是今年上线的BostonGlobe.com（观看视频），其屏幕能够根据任何内容而调整尺寸大小，在访问过其开发商Filament Group后才了解到，响应式设计也并非易事，一些基本概念设计必须从头开始，比如处理媒体库的RespondJS，而且处理来自第三方的图片和广告也是恼人的问题。

要想做好响应式设计，就必须洞悉内容与屏幕之间的反馈关系，一家来自硅谷的响应式设计公司ZURB称，其实在过去的16年中，开发商就意识到响应式设计就要完全离开“流”，转而注重内容是如何在网页和移动设备中被处理的，这一过程还在继续，HTML 5会让它最终成为可能。

4 )设备访问

消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，比如照相机，通讯录，日历，加速器等，利用HTML5实现此能力方面，上文中提到的appMobi算是行业翘楚，在感恩节后开源了所有API。Mozilla也一直在努力通过移动浏览器Fennec来将强设备访问能力。

对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包，游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如能整合到游戏中的加速器。

这就开启了另一个可能的世界，比如能与云更好地整合（这有利于应用内购买，消息推送等）并提高游戏可玩性，有了HTML5这个平台，开发商可以不再依赖于Java语言，CSS3，HTML及其它程序语言。

5) 离线缓存

这个概念相当新潮，离线情况下，app也能照常运作，算是HTML 5充满魔力的一面，今年最好的离线缓存例子就是亚马逊Kindle的云阅读器，可以通过Firefox6以上版本，Chrome11以上版本，Safari5以上版本及iOS4以上版本浏览器将内容同步到所有Kindle系列设备，并能记忆用户在kindle图书馆的一切。

亚马逊就这么实现了离线使用Web应用，许多专家人声称原生应用的末日即将到来，因为Web应用的使用变得简单，无摩擦，适用于任何一个平台或者无需平台。当然Mozilla的触角也伸到了这里，实际上，Mozilla想涉足任何一个HTML 5能渗透的领域，从Mozilla的移动蓝图，可以了解更多。

6) 开发工具的成熟

在今年八月份，Brian Fling曾写过一篇博文叫HTML5 Web应用开发剖析，提出了几点建议供从事HTML 5应用的开发者参考：
要耐心，HTML5项目可能比开发其他任何项目好是都要长
做好预算，这不像建网站那么简单，可能会耗费你大量资金
找对开发者，你要记住，这对许多经验丰富的专家来说都非常难的事，那么你的团队也会觉得困难，所以一定要找对人，找到正确的方向
要自食其力，你要知道，开发HTML 5项目，许多工具都要自制，不是现成的
在技术界，按部就班的教条风格在这里行不通，会花掉许多不必要的资金，在移动领域，没有对与错，只有是否适合，一切以用户体验为重。

在工具方面，除了appMobi提供的工具以外，还有Sencha及Appcelerator提供的框架及IDE供应用开发商们使用，虽然这些工具现在算不上成熟，也不如Android和iOS上的开发商框架及工具那般简单强大，但至少它们在演进，将会变得越来越好用。

总结

HTML 5的其它功能，如表单和新标准还在快速演进，而随着标准化工作的进行，HTML 5有可能变回HTML。HTML 5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。

不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。

Feed enhanced by Better Feed from Ozh

iframe自适用高度代码

seasun — Mon, 07 Feb 2011 15:49:08 +0000

有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

HTML代码如下所示：

web" width="80%" frameborder="0" scrolling="no" allowTransparency="true" src="http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html">

使用代码：

window.onload = function(){
     adjustIframe("js_sub_web");
}

推荐几篇关于Iframe的文章：

Feed enhanced by Better Feed from Ozh

HTML中的IE条件注释

seasun — Mon, 07 Feb 2011 09:28:25 +0000

IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是：

而只有IE可读的IE条件注释是：

“非IE条件注释”：

 non-IE HTML Code

“非特定版本IE条件注释”（很少用到）：

Code for browsers that match the if condition

简而言之，除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE 条件注释是很有用的对IE隐藏或者展现特定代码的方法，比起在CSS中用诡异的_/制造bug，利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的。

条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>，从而开始解释接下来的代码直到遇到

通过“比较操作符”可以更灵活地对IE版本进行控制，用法是在IE前面加上“比较操作符”。合法的操作符如下：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

示例:

/ 如果IE版本大于5.5 /
/ 如果IE版本小于等于6 /
/ 如果浏览器不是IE /

虽然看上去当你第一次使用条件注释的时候会更费时，但当你以后调试你的CSS的时候，就会发现非常方便。用条件注释你只需要写一遍HTML注释，而用bug你需要为每一条规则都写上又长又丑的代码，而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别：

Hacks是基于浏览器的bug，而这些bug最终可能会被修复。
条件注释是基于IE特定代码，这种识别机制任何时候都不会被移除。
每一个浏览器都能看见你的hacks，或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
只有IE才能看到条件注释，通过额外的“IE文件”来影响页面，其他浏览器根本就不会下载它。
Hacks不能确保对哪些浏览器生效而对哪些不，用的hacks越多，代码越混乱。
条件注释利用版本匹配使得作者可以容易地对特定版本写代码。

参考资料：http://haslayout.net/condcom

Feed enhanced by Better Feed from Ozh

30个必记的选择器

seasun — Mon, 06 Dec 2010 14:39:06 +0000

久没翻译。英语水平本就不高，不敢乱译。博客不能再荒芜下去了，只能硬上。还好这篇我感兴趣，又对CSS有一些了解，有错大家多多指正。
—————————————————————–正文———————————————–
了解基本的id选择器，类选择器和子选择器，如果就此收手，那你会错失很多灵活方法。虽然本文提及的部分选择器属于CSS3范围内，只在一些时新的浏览器有效，不过还是有必要记得这些选择器。

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先进的选择器之前，为初学者之便，先把常见的选择器解决掉。
星号符会选择页面每个元素。很多开发者用它把所有margin和padding归零。这当然是快捷测试方法。不过我建议你不使用它，它给浏览器带来太多的负担，这不必要。
通配选择器也可以用到子选择器上。

#container * {
 border: 1px solid black;
}

它会选择#container层中的子元素。不过，也不需要经常用这个技巧。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

把哈希符号前缀于选择器就成了ID选择器。这是很普通的方法。不过使用之也需要谨慎。先问自己：为了定位元素就绝对需要赋予id？僵硬刻板的id选择器不能重复使用。如果可能，先试使用标签方法，如html5元素，或者伪类。（不过id选择器的渲染速度是最快的，有得有失，译者注）。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

3. .X

.error {
  color: red;
}

这是类选择器。ID选择器与类选择器的差别是，后者可以用于多个元素。使用类选择器可以把同样的样式赋予一群元素，相反，id选择器只能作用于特定的单一元素。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

li a {
  text-decoration: none;
}

后代选择器是使用很多的选择器。它作用处于X元素内的所有的y元素。不过如果你的选择器像X Y Z A B.error，那你的方法就错了。这开销太大了。（后代选择器的渲染速率不快，特别是在有很长的前缀元素时，译者注）

兼容性

IE6+
Firefox
Chrome
Safari
Opera

5. X

a { color: red; }
ul { margin-left: 0; }

类型选择器会选择页面中同一类型的标签。比如说ul{…}会选择页面中所有的ul。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

:link作用于没有访问过的链接，:visited作用于访问过的链接。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

ul + p {
   color: red;
}

相信选择器只作用于同一父级元素下的第一个元素。例子中的只有紧邻ul中的第一个p的字体会是红色的。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

div#container > ul {
  border: 1px solid black;
}

X Y和X>Y不同的地方后者只选择X的第一级子元素。例如下面

   
      
          List Item
           
               Child 
           
         
          List Item 
          List Item 
          List Item

选择器#container>ul只选择直接位于#container层下的ul,不会作用于li中的ul。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

ul ~ p {
   color: red;
}

这个相邻选择器与X+Y相似，不同的是，ul+p只选择与ul相邻的第一个p,而x~Y选择所有与ul相邻的P。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

a[title] {
   color: green;
}

一种属性选择器。上例中，只选择带有title属性的链接标签。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

T上例中样式只会作用于链接到http://net.tutsplus.com的a标签。其他没有链到这个网址的a标签不会变成绿色。

这个很有用，不过有点死板，也许我想把所有的nettuts.com链接都变成绿色。在这种情况下，可以使用一些表达式。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

对了，就是这个。href后面加上星号(通配符)使网址出现nettuts的所有链接都变成绿色。比如说 nettuts.com,tutsplus.com。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

有些网站用这个方法在某些链接上加一些图标说明这些链接到其他网站。它经常用于表达式中显示字符串的开始。如果我们想选择那样带有http的a标签链接，我们可以使用类似上面的CSS。(这不是搜索http://,这不必要，对https://没起作用)。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

又一次，我们使用了一个表达式的符号，$,查找字符串的尾部。这个例子中，我们查找所有链接到图片的链接，或许说以.jpg结尾的链接。这当然不对 gif和png格式的起作用。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

 Image Link

在适当的地方加上钩后，我们就可以使用一个标准的属性选择器选择这些标签。

a[data-filetype="image"] {
   color: red;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

这是一个让人印象深刻的选择器。了解这个技巧的人不多。~符号允许我们选择带有有空白间隔属性的标签。

就像第15个选择器一样，这里，我们可以使用能用间隔符列出需要瓢东东的data-info属性。举例来说，我们给外链些记号吧。

" Click Me, Fool

在适当地方使用标记，然后就可以选择任何带有这些属性的标签。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

这个伪类选择器只会作用于被选中的用户界面元素(user interface element)，比如说单选按钮，或者复选框。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

这个伪类和:before一样，主要是用来清除浮动的。不过现在人们都能在它们身上找到新的用法。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

这是一个动态伪类。当元素有鼠标移在其上面时样式就会起作用。一般用于链接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

a:hover {
 border-bottom: 1px solid black;
}

兼容性

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

div:not(#container) {
   color: blue;
}

这个否定伪类非常有用。比如要选择除#container层外的所有层。上面的代码就非常有效。
又比如我要选择除了段落标签外的所有元素(不建议这样做)，可以这样做：

*:not(p) {
  color: green;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

使用这类伪类(用::指定)可以设计一个元素的一片断，比如说第一行，或者第一个字。需要记住的事，这伪类只能作用于块元素。

选择段落的第一个字符

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

这代码片断先提取页面中的所有段落，然后再查找段落中的第一个字。
这方法经常用于制作报纸风格的页面。

选择段落的第一行

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

兼容性

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

过去我们无法从一堆元素中选择具体的几个。nth-child伪类可以解决这种问题。
nth-child接受整数参数，不过它不是基于零开始，如果你要选择列表中的第二个，就使用li:nth-child(2)。
我们还可以使用这个伪类选择几个子类。比如，用li:nth-child(4n)来选择4倍数的列表。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

如果列表项非常多，但只是需要选择倒数第三个。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一样，nth-last-child是从后面倒着数。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

选择子类也许不如根据类型选择元素更方便。比如说现在有5个无序列表，但只需选择第三个，这时可以使用ul:nth-of-type(3)。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

对了，我们也可以使用nth-last-of-type选择倒数第几个元素。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

ul li:first-child {
   border-top: none;
}

这个结构性伪类选择父级元素的第一个子对象。这个经常用于移除列表的第一个和最后一个元素的边框。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

ul > li:last-child {
   color: green;
}

这个伪类选择父级元素的最后一个对象。

例子

用一个简单的例子来说明这样选择器，首先，我们制作一个列表。

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

设置好背景，去掉ul默认的内边距，再给每个li加上边。

就像图片中显示的一样，我们需要去掉第一个和最后一个的边。这时就可以使用:first-child和:last-child。

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

div p:only-child {
   color: red;
}

确实，这个你可能很少用。不过这个真的很有用。
在下面的例子，只有第一层中的p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。

 My paragraph here. 

    Two paragraphs total. 
    Two paragraphs total.

兼容性

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

和28个结构性伪类相似，这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。这种情况，你也可以使用ul li，不过这样就会选择所有列表项了。

ul > li:only-of-type {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

first-of-type允许我们选择同级元素的第一个。

一个测试

为便于理解，做个测试。复制下面的标签


    My paragraph here. 
   
       List Item 1 
       List Item 2 
   

   
       List Item 3 
       List Item 4

现在，尝试去选择list Item 2,当你找到方法或者放弃时，请接着看一下。

办法1

有几种的不同的方法。我们评审其中几个。首先用first-of-type

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

这个代码的意思是，在页面中找到第一个无序列表，然后再找到其直接的子级元素(也就是li)，最后找到第二个li。

方法2

p + ul li:last-child {
   font-weight: bold;
}

在这个例子，先查找与p标签直接相邻的ul标签，然后再找倒数第一个li(也就是第二个li)。

方法3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

Feed enhanced by Better Feed from Ozh

HTML, JavaScript,CSS简述

seasun — Wed, 01 Dec 2010 13:39:16 +0000

HTML, JavaScript,CSS 等等，这可不是你妈口中的AJAX

众所周知，网页是用超文本标记语言（HTML）编写的，这种网页编程语言告诉浏览器怎样在网页中输出并展现内容。换句话说，HTML就是网页这个建筑的一砖一瓦。长期以来，这些“砖瓦“都相当简单而且是静态的：仅有几行文字，或一些链接，或几张图片。

而今，网页中远不止文本，链接和图片了。我们期望能够在线下象棋时，每走一步不必等待网页重新加载，或者查看一下我们周边的地图时，每拖到一下网页也不用重新刷新。

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的网页浏览器都支持JavaScript，这就意味着网页能够加入一些更有意义的实时互动。例如，当你在线填一些表格时，点击“提交“按钮，网页可以调用 JavaScript代码来实时检查表格是否填错，如果有错误，网页马上就能提示你。

但今天我们所熟知的动态网页，是当XHR(XML Http Request)引入到JavaScript后才生机焕发，也是首次应用在像微软网页版Outlook，Gmail和Google地图这样的网页程序中。 XHR可以单独改变网页中的独立元素而无需重新加载整个网页，像网页中的游戏，地图，视频，或是个小调查。因此，网络应用程序运行地更快，更及时。

CSS（层叠样式表）的应用也使得网页显示更为生动。CSS给网页程序员提供了一个简单，有效的方式来定义网页的布局，可以使用颜色，圆角，渐变和动画等设计元素来美化网页。

网页程序员通常把JavaScript, XHR, CSS 和其他诸如AJAX （异步JavaScript和XML）等网页技术结合，形成一个强有力的组合。随着增加的更多功能和改进整合在一起，HTML 也继续发展出一个新的标准版本。

今天，网页在全体技术专家，思想家，程序员和一些组织的不懈努力下不断发展，这些组织不但创造了网页技术，而且要确保这些技术能被诸如 IE，Firefox, Safari和Google Chrome等浏览器中支持。网页技术专家和浏览器之间的相互关系，对网页开发者来说，使得网页成为既开放又友好的制作平台，他们给我们的生活带来更多有用而且有趣的网页应用程序。

Feed enhanced by Better Feed from Ozh

50个展示HTML5特性的演示

seasun — Sun, 28 Nov 2010 08:31:07 +0000

Flash和HTML5都是目前WEB应用上最新的技术，不过HTML5的运用需要浏览器厂商们的支持，但是FLASH就不一样了。今天的分享：50个展示HTML5特性的演示。希望你可以从中体会到HTML5的力量。

8. Lines go all over the place.

19. The tristan washing machine

32. 3D Landscape on HTML5 canvas

HTML5 小游戏展示

seasun — Fri, 24 Sep 2010 16:02:59 +0000

使用 HTML5 的 Canvas可以搞出一些很有趣的东西，如2D图形，位图，动画等。而使用Javascript来操作这些东西，可以设计出很多的小游戏。下面是一些用 HTML5做出来的小游戏，让我想得了我小时候的那些游戏。

顺祝大家中秋节快乐！以及进入史上最混乱的长假调休。呵呵。

超级玛丽卡丁车

A small but fun racing game built in html5 canvas and javascript.

俄罗斯方块

Galatic Plunder

这个游戏使用了Canvas 和 Audio，主要是为了证明，没有Flash，用HTML5一样行。

Rainbow Blocks

SameGame 和JT的另一种变种。

Feed enhanced by Better Feed from Ozh

10 个奇幻的HTML5和Javascript效果

seasun — Sun, 12 Sep 2010 14:50:04 +0000

又10款令人惊奇的 HTML5和javascript效果，今天网游的时候，又偶然踫到的这几款很不错的效果。回到几年前，这些效果是根本不可能实现，只能用Flash做，但是现在，已经很轻松的就可以实现了。
之前也发布了几篇此类的文章，但觉得这几款效果确实很让人难以割舍，它们奇幻、炫丽，还是收藏了和大家一起分享吧。:-p
等会，大家要记得用高版本的一些浏览器哦，要不看不到效果的，我用的是Firefox3.5.11。

个人非常喜欢Breathing Galaxies和FlowerPower，真得很炫，你喜欢哪款呢？

Breathing Galaxies

使用键盘来改变形状中的线条样式，或移动鼠标来创建一个新的形状。

Noise Field

移动鼠标来改变粒子的运动。点击随机产生参数。

Keylight

根据按键放置的位置不同来产生不同的单调。

Swirling Tentacles

循环产生彩色不同颜色的三维线。

FlowerPower

来自于大自然另一个灵感 – 使用贝赛尔曲线做为笔刷绘图工具花朵，使用鼠标点击或拖动均可看到效果。

Blob

一滴可以在屏幕上抛掷的柔软的水泡，它可以在浏览器窗口中弹跳。这个水泡可以分割成许多小水滴（双击），如果他们碰撞小水滴们还会合并成一个大水滴。

Rotating Spiral

你是越来越困，很困…. 独立旋转螺旋的效果 – 简单，但视觉吸引力。点击开始，停止和扭转旋转。

Magnetic

磁点是用来控制粒子流。如果有很多粒子围绕磁铁，它会辐射的颜色和大小的增加。鼠标双击操作。

Trail

五颜六色的粒子跟随鼠标并在鼠标周围旋转，同时生成一个有机的痕迹，然后慢慢地淡出。

Graph Layout

一种交互式力向图的布局。

Feed enhanced by Better Feed from Ozh

提高Firefox的innerHTML()的性能

seasun — Sun, 12 Sep 2010 14:36:42 +0000

function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/
return newEl;
};

可以直接用el=replaceHtml(el, newHtml)代替el.innerHTML=newHtml。

速度到底有多大提升，还得测试说话。作者提供了一个测试页面：http://stevenlevithan.com/demo /replaceHtml.html

此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。

对于 Opera 也依然有性能提高，只是提高幅度没有上面两种浏览器惊人而已，

唯在 IE 中，则原始的 innerHTML 的方法更效率点。

扩展阅读：

《When innerHTML isn’t Fast Enough》| 《innerHTML and DOM Methods》| 原文链接

Feed enhanced by Better Feed from Ozh

实用HTML，CSS和JavaScript速查表

seasun — Sat, 11 Sep 2010 16:12:07 +0000

速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。

事实上，速查表就是来帮助我们把日常中最常用到的信息聚集起来，方便使用，使我们做工作时更有效率。有了它们，免去了你的大脑花额外时间去记忆它们的烦恼——你只需要打开简表，马上能查到你想要的信息。

这篇文章里，你可以看到最实用的HTML，CSS，JavaScript速查表，它们可以当作参考资料，备忘录，能帮助你以最快的速度找到想要的信息。

看看这些简表是不是你想要的，请在文章下面留下你的建议，谢谢！

HTML

HTML帮助手册

HTML速查手册

HTML 特殊字符速查表

Dreamweaver

Dreamweaver 快速参考指导

CSS

CSS 3 速查表

Blueprint CSS

YUI Grid CSS

CSS 速记简表

CSS速查表 (V2)

CSS速记表

CSS2参考指导(V2)

实用CSS速查表

Javascript

jQuery 1.4.2 直观速查表

JavaScript 速查表

JavaScript 参考单

JavaScript 真经

常用 DOM方法

JavaScript 快速参考单

Mootools 1.2速查表

jQuery速查表

Prototype速查表

希望你能喜欢我收集到的这些速查表，并请分享给你的做开发工作的朋友们。

Feed enhanced by Better Feed from Ozh

你必须知道的28个HTML5特征、窍门和技术

seasun — Fri, 27 Aug 2010 16:05:35 +0000

//zxx:以下为翻译全文，本着语言生动和本土化之原则，内容有编辑

注意：每周有那么几次，此列表会更新一些新的窍门，最终，本文会成为超级有用的资源。
//zxx:丑话说在前头，我可没功夫更新，所以，即使到您女儿出嫁那天，本文还是28项内容。

前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。

一、新的Doctype

//zxx:”doctype”中文意思指“文档类型”
仍在使用麻烦的，不可能记得住的XHTML文档类型？

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果是，为什么还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的

我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一个特定的 doctype（文档类型）。浏览器如果不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。所以，妹妹你大胆的向前冲，把小心谨慎都抛到九霄云外，去拥抱新的HTML5文档类型吧。

二、图形元素(The Figure Element )

看看下面给图片添加的标示：

Image of Mars.

文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5通过采用

元素对此进行了改正。当合

元素组合使用时，我们就可以语义化地联想到这就是图片相对应的标题


    
    
        This is an image of something interesting.

三、重新定义

还在不久前，元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，可以正确地包裹这些信息。

small元素专指“小字”。

四、脚本(scripts)和链接(links)无需type

您可能现在仍在给link和script标签增加type属性。

这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。

五、引号还是不要引号

…这确实是个问题。记住，HTML5不是XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就是如此。

Start the reactor.

对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。

六、内容可编辑

最新的浏览器有个很赞的新属性可以应用到元素上，叫做contenteditable。顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。


    悼念遇难香港同胞 
    深圳特区30周年
    伊春空难

或者，根据前面所学到的一些技巧，我们可以把它写成：

七、Email输入(Inputs)

如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。


    邮箱:

//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是合法邮箱格式，点击“确定”按钮是没有反应的；当输入为合法邮箱，点击“确定”按钮才会提交刷新页面。

目前而言，我们不能依赖浏览器验证，客户端/服务器验证还是必须的。
还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如，Opera似乎支持电子邮件验证，但仅在name属性被指定的时候。而且，它不支持占位符属性，这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！

八、占位符(Placeholders)

//zxx:此处内容非直译，有删改
Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。如下图所示：

这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果。当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。

邮箱:

根据我的测试，目前仅webkit核心的浏览器支持placeholders属性，像是Chrome5，Safari4，结果如下所示：

九、本地存储(Local Storage)

多亏了本地存储(非正式的HTML5，本着方便归纳的目的)，我们可以让高级浏览器记住我们的编辑后的内容，即使浏览器被关掉或是页面刷新。
//zxx:原视频默认展示的是YouTube视频，不翻墙看不了，所以，这里展示来自另外一个网站的video。建议全屏观看，以看清其中的HTML与JavaScript代码

//zxx:根据视频内容，我自己做了个demo，关于本地存储的。

IE8浏览器已经支持了本地存储，如下截图所示：

尽管显然不支持所有的浏览器，我们可以在Internet Explorer8时，Safari 4和Firefox 3.5下期待此工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定window.localStorage是否存在。

十、语义的Header和Footer

那些过往的日子：


	...



	...

div嘛，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML5，我们可以使用

和

元素。以上的代码可以替换成：


	...



	...

它完全适合您有多个页眉和页脚的项目。

尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。

十一、更多HTML5表单特征(More HTML5 Form Features )

通过下面视频学习更多有用的HTML5表单特征：//zxx:TouTuBe视频，需要翻墙

十二、IE和HTML5(Internet Explorer and HTML5)

不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。

所有元素，默认的，都有个inline的display

为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：

header, footer, article, section, nav, menu, hgroup {
    display: block;
}

不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。幸运的是，有一个简单的解决办法：

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

奇怪的是，这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML5 shiv。该脚本同样修复了些显示问题。

十三、文档某一部分的信息(hgroup)

想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。虽然我们可以使用一个

和

标签，为其分别创造标记，但是依旧没有（因为HTML4）一个简单的方法来语义上说明了两者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。


    
         Recall Fan Page 
         Only for people who want the memory of a lifetime.

十四、必要的属性(Required Attribute )

表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。

或者，使用更结构化的方法：

两种方法都行。有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。


    姓名:

您可以狠狠地点击这里：HTML5 必要属性Demo

如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果

十五、Autofocus属性

同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。

有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。HTML5提供了元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。

    
    
    Download this file.

Mozilla和WebKit的还没有完全相处，当涉及到音频格式， Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。

当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。请注意IE，每往常一样，不支持这些格式，Opera 10和以及以下版本只能使用.wav文件。

十七、Video支持

与元素很类似，在新的浏览器中也存在Video！事实上，就在最近，YouTube 宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然 Safari和Internet Explorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。

Your browser is old. Download this video instead.

无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码
还有一个值得注意的一些事情：

我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。
不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。
controls和preload属性就会在下面提及。
有方法可以让所有的浏览器支持video标签。

十八、视频预载(Preload Videos)

预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

十九、显示控制条

如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。

请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。


    姓名:

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。

您可以狠狠地点击这里：HTML5 正则表达式Demo

//zxx:我自己小测了下，貌似目前只在Chrome下有效(win系统)

注意到，我们已经开始组合使用这些很棒的属性。

如果您对正则表达式概念模糊了，可以参见这里。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段 JavaScript到我们的页面上：

alert( 'pattern' in document.createElement('input') ); // boolean

事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的 pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。

谨记此方法依赖于JavaScript。

二十二、mark元素(Mark Element )

试想元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索 “北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

搜索结果

我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做北川景子。

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer，还有机会使用div…吗？当然可以。

div应该用在没有更好的元素的时候。

例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用

和

元素，因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。

//zxx:YouTuBe视频，需要翻墙。

二十五、哪些不是HTML5(What is Not HTML5)

那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。

SVG:不是HTML5，至少5岁了。
CSS3:不是HTML5，它是…CSS。
Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。
Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。
Web Sockets:不是HTML5，同样的，有着自己的一套准则。

不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。

二十六、data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

 小样，胆儿挺肥的呢

…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片段

 巴拉巴拉，lady 嘎嘎

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代码：
不要碰我，雅蠛蝶~~

如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：

要查看上图所示的效果，您可以狠狠地点击这里：CSS 与HTML5自定义属性demo

还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行。

二十七、Output元素

正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到 output元素中。

举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。


    
        10 + 5 = 
    
    


(function() {
    var f = document.forms[0];

    if ( typeof f['sum'] !== 'undefined' ) {
        f.addEventListener('submit', function(e) {
            f['sum'].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert('你的浏览器尚未准备好！');
    }
})();

自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：

如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：HTML5 结果输出框demo

此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。

二十八、使用区域input创建滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

最值得注意的是，它可以接收 min, max, step, 和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！

参见下面的快速演示：

第一步：标签
首先，创建标签


    音量控制

第二步：CSS
下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

input { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

第三步：JavaScript
最后，我们

检测我们的浏览器是否认识range input，如果不，显示提示。
当用户移动滑块的时候，动态改变output的值。
监听，当用户离开滑块，插入值，同时本地存储。
然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(function() {
    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 

    // 检测浏览器是否是足够酷
    // 识别range input.
    var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');

    // 设置初始值
    // 无论是否本地存储了，都设置值为5
    range.value = cachedRangeValue;
    result.value = cachedRangeValue;

    // 当用户选择了个值，更新本地存储
    range.addEventListener("mouseup", function() {
        alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
        localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
    }, false);

    // 滑动时显示选择的值
    range.addEventListener("change", function() {
        result.value = range.value;
    }, false);

})();

您可以狠狠地点击这里：HTML5 range input炫酷效果demo

我的电脑是xp系统，默认主题，在滑块松开后Opera下的效果如下图所示，酷吧：

感谢您的阅读！我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助！

（本篇完）

Feed enhanced by Better Feed from Ozh

20+ 个开发人员必知的 HTML5 技巧

seasun — Thu, 12 Aug 2010 16:12:08 +0000

互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5 的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

你还在使用上面这个既麻烦又难记的XHTML文档类型吗？如果还是这样的话，现在该切换到新的HTML5文档类型了。

只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html 文件的第一行。）

2. 图形（Figure）元素

考虑用下面的代码来标记图片？

Image of Mars.

很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进

元素，改进了这一点。当结合

元素使用时，我们就可以将图形标题与图形配对起来。代码如下：

This is an image of something interesting.

3. 重新定义

4. 不再需要脚本、链接类型

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

css” type=”text/css” />

在HTML5中，这已经不再需要了。意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：

5. 使用还是不使用引号

记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

Start the reactor.

在这点上，你可以自己决定。如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。

6. 使你的内容可编辑

HTML5其中一个非常强大的功能就是”contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

untitled

To-Do List

Break mechanical cab driver.

Drive to abandoned factory
Watch video of self

或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：

7. 电子邮件输入

如果我们应用”电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种”电子邮件”类型，它们只会简单地返回到普通的文本框。

untitled

在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。

8. 占位符

此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。

9. 本地存储

多亏了HTML5的 local storage ，我们可以让高级浏览器”记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8， Safari 4， Firefox 3.5.都支持。

10. 语义性的Header和Footer

上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。

而在HTML5中，我们可以使用

和

元素，上面的代码就可以替换为：

…

不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

11. IE和HTML5

IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

header, footer, article, section, nav, menu, hgroup {

display: block;

}

就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

document.createElement(”article”);

document.createElement(”footer”);

document.createElement(”header”);

document.createElement(”hgroup”);

document.createElement(”nav”);

document.createElement(”menu”);

12. 群组标题（hgroup）

假设一个网站有名称、副标题分别用

、

标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

Recall Fan Page

Only for people who want the memory of a lifetime.

13.必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

或者，更严谨：

上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话，输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：

Your Name:

如果输入是空的，表单将无法提交，突出显示文本框。

14. 自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被”选择”或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

15. 音频支持

我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素。目前，只有最新的浏览器支持HTML5音频。此时，最好还是提供一些向后兼容性。

Download this file.

说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。

16. 视频支持

与音频元素非常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。

17. 视频预先加载

你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频，或者之间添加preload也可以。

18. 显示控件

你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。

19. 正则表达式

对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。

Create a Username:

name=”username”

id=”username”

placeholder=”4 <> 10″

pattern=”[A-Za-z]{4,10}”

autofocus

required>

如果你比较熟悉正则表达式的话就会注意到这个新模式：［A-Za-z］{4，10}只接受大小写字母。这个字符串最少必需有四个字符，最多是十个字符。

20. 检测浏览器对属性的支持

前面提到过并非所有的浏览器都支持这些属性，那是否有什么方法能够判断浏览器是否能够识别它们呢？这个问题问得非常好，这里给大家介绍两种方式，第一个选择是使用Modernizr来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript：

alert( ‘pattern’ in document.createElement(’input’) ) // boolean;

实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里，我们创建了一个新的输入元素，并确认pattern属性是否能够被识别。如果能够识别的话，浏览器就支持这个功能，否则就不支持。

记住，这将需要依靠 JavaScript来实现！

21. Mark元素

元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索”Open your Mind” ，我可以使用在标签里使用JavaScript 来包裹每一次动作。

Search Results

They were interrupted, just after Quato said, ”Open your Mind”.

22. 何时使用

是否还需要使用

标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，

将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用

和

40个高质量的CSS、XHTML网页布局模板下载

seasun — Tue, 03 Aug 2010 14:26:28 +0000

无论您下载和解剖预建模板是为了学习最新的CSS布局技术，或者下载的目的是为了易于编辑制作现成的独立网站，您都不应该仅限于免费且可用的一个拥有众多克隆版本、陈旧的且往往是枯燥的模板。网页设计的流行趋势和技术总是在千变万化，因此，您所挑选的模板选择应该是能够反映出这一点的。

这一轮的CSS和XHTML模板，我们正是基于这一原则(符合最新的设计趋势、采用最新的技术)而筛选的。他们创建的都是相当专业的，且一切都是符合标准的，以他们独特的方式，组成为一个现代化独立的Web站点。

立即下载
 在线预览

Blog Layouts

Magazine Layouts

Minimalist Resume : A Free Web Template

立即下载
 在线预览

CSS3 CV/Resume Template

立即下载
 在线预览

Feed enhanced by Better Feed from Ozh

20个免费的高品质XHTML/CSS模板下载

seasun — Tue, 03 Aug 2010 13:12:54 +0000

互联网上有许多非常漂亮的的网站和作品。有一部分构建在诸如Joomla，Drupal等比较复杂的平台上面，而另外的一些则是基于XHTML和 CSS构建的，简单，易用，又不乏传奇性色彩的模板。

在这里，我们收集整理了一些高品质的XHTML和CSS模板，不仅可以下载和使用，而且还都是免费的。真的，不需要支付任何服用就可以免费使用这些令人叹服的高品质模板。

唉，你，对，就是你！还等什么呢？赶紧的，去下载吧！！

Feed enhanced by Better Feed from Ozh

Iframe自适应高度

seasun — Thu, 29 Jul 2010 14:06:08 +0000

同域、子页面高度不会动态增加

这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可。但有二点必须注意：

如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括Webkit内核的浏览器，具体请看这个Demo。所以你要么进行浏览器检测，要么用Math.max计算一个最大值，要么你想别的方法。
iframe所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是，IE下必须使用微软事件模型obj.attachEvent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。


(function(){
    var frame = document.getElementById("frame_content_parent"),
        setIframeHeight = function(){
            var frameContent = frame.contentWindow.document,
                frameHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);

            frame.height = frameHeight;
        };
    if(frame.addEventListener){
        frame.addEventListener("load",setIframeHeight,false);
    }else{
        frame.attachEvent("onload",setIframeHeight);
    }
})();

同域、子页面高度会动态增加

原理与第一种情况一样，多一个计时器，一直检测字页面高度，当子页面高度和iframe的高度不一致时，重新设置iframe的高度。这边也可以加一个try在js出错时，加一个足够的高度。


(function(){
    var _reSetIframe = function(){
        var frame = document.getElementById("frame_content_parent")
        try {
            var frameContent = frame.contentWindow.document,
                bodyHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);
            if (bodyHeight != frame.height){
                frame.height = bodyHeight;
            }
        }
        catch(ex) {
            frame.height = 1800;
        }
    }
    if(frame.addEventListener){
        frame.addEventListener("load",function(){setInterval(_reSetIframe,200);},false);
    }else{
        frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
    }
})();

同域、子页面高度会动态增加、脚本可能完全失效

第二个例子中，考虑到了脚本出错的情况，但是万一脚本根本不执行了呢，那iframe中的内容就会因为iframe的高度不够而显示不了。为此我们通常事先设置一个足够的高度，为了前端控制方便，我觉得写在CSS文件中比较合适，需要修改时只改CSS就行了。这里我设置了selector{ height:1800px; }。需要注意的是，写在样式表里的样式，不能直接用node.style[property]来取，对于微软模型，要用node.currentStyle[property]（题外话：悲剧的IE模型不支持CSS伪类），对于W3C模型，要用window.getComputedStyle(node,null)[property]来取。我这里图方便直接用了YUI。

这里又有一个问题，设置iframe的高度大于其包含页面的高度时，各个浏览器的处理不一样。例如在Firefox下，必须计算body元素的高度，而html元素的高度等于iframe的高度，然而当恰巧这个页面又有绝对定位、未清浮动元素时，又不能通过body元素来取，显然第一种方法缺点更小一些。具体请看这个Demo。

从上面这个Demo可以看到，除IE浏览器外，别的浏览器计算出来的都是iframe的高度，即CSS里设置的#frame_content_parent{ height:1800px; }。而IE计算出来的是iframe所引用页面的实际高度。


#frame_content_parent{ height:1800px; }


(function(){
    var $ = YAHOO.util.Dom,
        frame = $.get("frame_content_parent");
    function reSetIframe(){
        var frameContent = frame.contentWindow.document,
            bodyHeight = Math.max(frameContent.documentElement.scrollHeight,frameContent.body.scrollHeight);
        if (bodyHeight != $.getStyle(frame, "height")){
            $.setStyle(frame, "height", bodyHeight + "px");
        }
    }
    if(frame){
        $.setStyle(frame,"height","auto");
        setInterval(reSetIframe,300);
    }
})();

跨域

这里提供一个Iframe代理的方法，简单地说一下原理。假设有3个页面，分别是主页面A.html，字页面B.html，代理页面C.html。其中A与B是跨域的，而A和C是同域的。它们的关系：A包含B，B包含C。很显然A和B，以及B和C，因为跨域不能相互通信，而A和C同域，可以相互通信。为此我们就想到让C页面告诉A页面，B页面到底有多少高。因为B和C也是跨域的不能相互通信，所以想在C页面中，直接window.parent.document.body.scrollHeight这样是行不通的，所以我们只能让B页面自己计算自身的高度，然后通过某种方法告诉C页面，再由C页面告诉A页面。这里的一个方法就是在B页面生成一个Iframe节点，然后设置它的src属性，在这个地址上附加一个参数，即B页面计算出来的高度，然后C页面就可以通过window.location获取这个地址栏中的地址，提取出高度值，通过window.top找到A页面，设置A页面的Iframe的高度。基本的原理就是这样，看代码吧：

DEMO


//B页面脚本
//任务：计算其实际高度，然后生成一个iframe节点，将高度作为代理页面C的地址的一部分赋值给Src属性
(function(){
    var agent_iframe = document.createElement("iframe"),
        b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
    document.body.appendChild(agent_iframe);
    agent_iframe.style.display = "none";
})();


//C页面脚本
//任务：获取请求地址中的高度值，将其赋值给A页面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

跨域、字页面高度动态变化

这里结合了第2、第4两种方法，我的想法是在B页面通过一个计时器，不停计算B页面的高度，一但变化，马上修改iframe标签的src属性，而C页面也有计时器不断监听src的变化，改变Aiframe标签的高度。需要注意的是仅仅修改src属性后面的锚点值（如“#1234”），页面并不会刷新，不会重新请求，这也是在C页面增加计时器的原因。

DEMO


//B页面脚本
(function(){
    var getHeight = function(){
        return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    };

    var preHeight = getHeight(),
        agent_iframe;

    var createIframe = function(height){
        agent_iframe = document.createElement("iframe");
        agent_iframe.style.height = "0";
        agent_iframe.style.width = "0";
        agent_iframe.style.border = "none";
        agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height;
        document.body.appendChild(agent_iframe);
    }

    createIframe(preHeight);

    var checkHeight = function(){
        var currentHeight = getHeight();
        if(currentHeight != preHeight){
            agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight;
            preHeight = currentHeight;
        }
        setTimeout(checkHeight,500);
    }

    setTimeout(checkHeight,500);
})();


//C页面脚本
(function(){
    var preHeight = parseInt(window.location.hash.substring(1),10),
        ifrmae = window.top.document.getElementById("frame_content_parent");

    ifrmae.height = preHeight;
    setInterval(function(){
        var newHeight = parseInt(window.location.hash.substring(1),10);
        if (newHeight !== preHeight){
            ifrmae.height = newHeight;
            preHeight = newHeight;
        }
    },500);
})();

这里还有另一种方案，就是让iframe每一次都重新请求，这样C页面就不需要计时器了，但是如果2次计算高度重复的话，就会导致src属性的值相同，这样浏览器就很可能不重新请求该页面了，那么C页面中的脚本也就不运行了。要修复这个问题很简单，只要在每次计算出来的src属性上增加一个随机数的参数就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563


//B页面关键脚本
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;


//C页面脚本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

Feed enhanced by Better Feed from Ozh

HTML代码的美感

seasun — Thu, 29 Jul 2010 05:02:12 +0000

每当我访问精美的网站，我都情不自禁地会去查看源代码。这就好比你拥有一副X光眼镜，能够看到任何人——甚至透视他们的遮羞布。这简直是天经地义的事情嘛！我迫不及待地想了解，这个精美的网站，是不是由同样具有美感的代码所写成，而或者只是金玉其外败絮其中。代码？美感？当然！归根结蒂，代码如诗。（译注：“Code is poetry”为著名博客系统 WordPress 的宣传语。）这仅仅是最基础的 HTML 而已，自然不如其它动态语言般复杂而优雅，但它依旧保持了它的创造者所赋予的艺术笔触。

这就让我不禁开始思考，如何让代码具有美感？对于 HTML 而言，这一切都是手工活。让我们看看标记语言如何能达到具有美感的境界。

图片有足够大（译注：2000×2000），你大可以把它打印出来并贴在你的个人储物箱中，并让你的朋友留下深刻印象。话说回来，这的确是个令人纠结的大小。我会放出 PSD 原图方便大家修改。

HTML5 – HTML5 及其新元素带来了前所未有的美感。
DOCTYPE – HTML5 拥有最佳的文档类型。
Indentation – 制表符与空格用于缩进代码，以正确显示标签之间的父子关系，强调层级结构。
Charset – 在所有内容之前，必须在头部进行字符集声明。
Title – 网站标题简单而清晰。首先表述该页面的功能，在分隔符之后，用网站标题结尾。
CSS – 只用了一个简单的样式表（媒体类型已在样式表中声明），并且仅面向于优良的浏览器。IE6 及更低版本将获取通用的样式表。
Body – 为主体赋予 ID，便能在无需更多标记的情况下，给不同页面设定独有的样式。
JavaScript – 从 Google （谷歌）调用了 jQuery（最具美感的 JavaScript 脚本库）。仅加载了单个 JavaScript 文件。各脚本都在页面底端进行引用。
File Path – 为提高效率，站点资源使用相对路径。从适应转载的角度考虑，内容性文件（如图片）则采用绝对路径。
Image Attributes – 图片包含替换文字，主要是为图片缺失情况而服务的，但同时也可用于验证。为了提高渲染效率，图片的宽度与高度最好也要说明。
Main Content First – 页面的主要内容应在，基本的标示及导航之后，而在任何辅助内容（如：边栏）之前。
Appropriate Descriptive Block-Level Elements – HEADER、NAV、SECTION、ARTICLE、ASIDE ……这些新出现的“描述区段”，都将比从前的 DIV 更好地描述内容。
Hierarchy – 大写标题标签将起到实效，并跟随着清晰的“层级结构”。
Appropriate Descriptive Tags – 根据不同的需要，列表被标记为：未排序、已排序，以及并不常用的自定义列表。
Common Content Included – 在不同页面所出现的相同内容，最好能从服务器端包含到页面中。（无论通过任何对你行之有效的方式、语言、CMS，等等。）
Semantic Classes – 不仅需要设立正确的元素名称，还更应做到类和 ID 的命名符合语意：即使没有特定说明，它们也能起到描述的作用。（如“col”比“left”更好）
Classes – 当多个元素需要用到类似样式的时候，尽量为它们定义相同的类。（重用性）
IDs – 当页面中该元素仅出现一次的时候，尽量为它们定义 ID，而请勿为不同元素定义相同 ID。
Dynamic Elements – 动态效果仅在确实所需的时候加入。
Characters Encoded – 当出现特殊字符的时候，请注意字符编码。
Free From Styling – 页面上的一切无关样式，甚至无需指明需要怎样的样式。页面上的一切仅限以下三项：所需的站点资源、内容、描述。
Comments – 在查看代码的时候，那些并不需要特别强调，或者不是格外明显的内容，将会被包括在评论之中。
Valid – 全站的标记符合 W3C 验证。注意标签闭合，保证必要属性，避免废弃方法，等等。

【相关资料】 1、原文 2、原 PNG 3、原 PSD 4、原 HTML

Feed enhanced by Better Feed from Ozh

HTML5如何改变互联网

seasun — Tue, 27 Jul 2010 14:01:08 +0000

HTML5，下一代用来制作网页的标记语言，它能不借助插件（如Adobe的Flash）的情况下在浏览器中播放视频的能力已引起人们的关注。但是其鲜为人知的那些特性最终或许会对互联网体验起到巨大的影响。

专家说HTML5在屏幕背后处理的事情——如网络通信和浏览程序储存特性——能让网页加载更快（特别是在速度比较慢的移动设备上），能让互联网应用运行的更流畅，甚至能让浏览器更容易的读取旧的网页。

如今许多网站就像桌面应用——如网络Offce套件，图片编辑工具。但是这些网站应用的许多高科技的特性是开发者运用不同互联网开发技术的结合开发出来的，如HTML，Javascript,和CSS——但这些技术的结合并不总是运行得完美。因此，网站变得很慢，在不同的浏览器上也许表现得不同，并且很容易被攻击。

在Opera软件上传播开放性互联网标准的BruceLawson曾说要让网站运行那些本不是互联网原本设计中的功能，开发人员就要编辑非常复杂的代码，这些代码很容易出现错误导致应用失败。

Lawson说，开发HTML5的小组被任命了很高的要求，需要让HTML5比其前身更加兼容以至于老版本或者编码不正确的网站也能在HTML5为核心的浏览器上运行良好。他们也希望拓展这些特性来支持目前主流的趋势如富应用。他还说：“HTML5的基础是非常务实，它是为人们正在做什么而设计的。”

专家指出，其中一个特性互联网通信接口就是一个HTML5可以提供的改进方案。互联网通信接口为网站提供API来打开一个页面和服务器端正在通信的连接使得信息可以实时的在其中进行传递。通常情况下，每次需要更新的时候浏览器需要发出一个请求。

互联网开发网站Ajaxian.com联合创始人，Palm开发关系总监BenGalbraith说，互联网通信接口的效果就好像把通过e-mail进行的对话变成了一个即时的消息。e-mail，每条消息通过单独的事件进行发送，然而即时消息允许流畅的持续不断的对话。

互联网开发人员先前设计了许多方法使得浏览器和服务器端保持通信，但是Galbraith把这些技术称为“设计独特的破解”，他们运行起来非常复杂并且延展性不佳。他说，互联网通信接口可以为开发者提供一个简单的方法来帮助他们创建那些即时改变的页面——随着越来越多的即时信息的传递这个变得更加重要，如来自于社交网络用户即时的状态更新。用户可以看到即时信息传递的互联网应用运行得更加流畅并且无误。

CarbonFive（一家旧金山专门开发应用的公司）的拥有者，AlonSalant说，当设备与互联网断开连接或间歇性连接时（智能手机环境下非常普遍），HTML5可以帮助互联网应用运行的更加出色。互联网存储这个特性可以使互联网应用在浏览器中存储更多的数据，智能地获取这些数据并且控制浏览器如何来存储这些数据来加快页面的重新加载

Gallbraith对于几个与HTML5共同工作的最新设计的CSS特性兴奋不已。这些特性使得网页对于用户更加具有交互性并且允许高质量的图形界面——这个是目前网页不擅长的地方。HTML5允许开发者在页面中内嵌动画，但是，Galbraith说新的CSS将会工作的更加出色

Lswson说用户将会看到HTML5其他的一些特性所带来的性能的改善。例如，在浏览器处理表单方面的改善将减少大量的Javascript代码来加快页面的加载，特别在移动设备中。

Mozillar首席传播者，ChrisBlizzard指出HTML5分析器的重要性。一个浏览器的分析器读取制造网页的标记来算出如何展现它。Blizzard说这是标准说明的最重要的一个部分之一。它意味着能让浏览器更加具有可操作性，特别在处理拙劣代码的方法上，解析器定义了应该如何响应错误来代替让各个浏览器制造者决定如何来处理这些不完美的代码，这让用户不论在使用哪个浏览器，都可以获得相同的用户体验

如今许多网站就像桌面应用——如网络Offce套件，图片编辑工具。但是这些网站应用的许多高科技的特性是开发者运用不同互联网开发技术的结合开发出来的，如HTML，Javascript,和CSS——但这些技术的结合并不总是运行得完美。因此，网站变得很慢，在不同的浏览器上也许表现得不同，并且很容易被攻击。

在Opera软件上传播开放性互联网标准的BruceLawson曾说要让网站运行那些本不是互联网原本设计中的功能，开发人员就要编辑非常复杂的代码，这些代码很容易出现错误导致应用失败。

Lawson说，虽然看上去HTML5好像呈现了非常多的巨大的改变，但是其主要目的是为开发者正在做的事情提供一个更加容易的解决方法，使得错误减少。程序越是简单，它就越是健壮，因此终端用户体验也就越佳，这个就是我的感受。

Feed enhanced by Better Feed from Ozh

使用框架建立富联网应用

seasun — Tue, 27 Jul 2010 13:41:38 +0000

JavaScript库，ICEfaces，Adobe Flash，微软Silverlight，现在还有HTML5，全球性的网络支配地位的竞争已经进入了崭新的时代——一个富网络应用（简称RIA，中文也有叫富互联网应用）的时代。本文目的是界定什么是RIA，解释为何网络已经开始向RIA靠拢，探索今天已经存在的不同RIA框架，对每个框架作出一些优点和缺点的概述，并讨论这些新技术在未来将是怎么样的生存态。

RIA是何物?

所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意，你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多共存的技术组成，就像现在。

Feed enhanced by Better Feed from Ozh

15 个非常值得收藏的 HTML5 资源

seasun — Tue, 20 Jul 2010 13:40:58 +0000

HTML5 越来越引起人们的关注，苹果甚至将 HTML5 视为 Flash 的掘墓人。然而，作为一种尚未成型的技术，HTML5 对很多人来说仍然是陌生的。本文收集了 15 个非常值得收藏的 HTML5 资源，这些资源可以让你同 HTML5 的发展保持一致，并始终处于这门技术的最前沿。

1. WTF is HTML5

这是一个关于 HTML5 Infographics 的站点，包含诸如 HTML5 同 Flash 的对比，HTML5 不同浏览器支持情况，HTML5 最受欢迎的功能等资料。
2. Dive Into HTML 5

Mark Pilgrim 是知名软件开发师与博客作者，他在线编写了一本有关 HTML5 的书，侧重 HTML5 的编程方面的功能。
3. HTML5 Doctor

发布 HTML5 相关的文章，介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目，也是 HTML5 相应技术的最佳注解，如 dl element ，article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design 大会相遇相识的开发人员共同创办。
4. When Can I Use…

这个简单的单页式站点是一份 HTML5 各种功能同当前主流浏览器（以及它们的不同版本）的兼容清单。
5. HTML5 W3C Specifications (Editor’s Draft)

这是 HTML5 的最新的草案，由 W3C 起草，如果你想对 HTML5 的方方面面有个权威的了解，这是最好的资源。
6. Yes, You Can Use HTML 5 Today!

SitePoint 有一篇非常出色的文章，鼓励开发和设计者现在就开始部署使用 HTML5，还讲述了改如何编写代码，以适应那些尚不支持 HTML5 的浏览器，如 IE8。
7. Coding A HTML 5 Layout from Scratch

这是来自 Smashing Magazine 的一篇文章，讲述了如何使用 HTML5 的新元素进行页面布局设计。
8. HTML5 presentation

这是一份关于 HTML5 的演示，是一份有关 HTML5 非常超前的资料，原本是为 Google Chrome用户设计，因此，在某些浏览器上可能无法观看。
9. HTML5 Gallery

这是一个 HTML5 站点展示站点，定期推出一些基于 HTML5 的站点介绍，你可以藉此借鉴先行者们的技巧和经验。
10. A Web Developer’s Guide to HTML 5

这篇来自 W3C 的文章面向 Web 开发者，介绍了HTML5 的语法，API，术语以及各种开发者们关心的资源和技术。
11. HTML5 Demos and Examples

Remy Sharp 是一位来自英国的 web 开发者，他编译了这套 HTML5 演示，包括简单的，基于浏览器的聊天程序，地理位置信息程序等等。
12. Web Designer’s Checklist: HTML5 Support Tables

一份非常全面的 HTML5 和 CSS3 浏览器兼容清单。
13. HTML 5 differences from HTML 4

HTML5 和 HTML4 到底有什么区别，这是 W3C 官方对比清单。
14. HTML5 – Wikipedia

维基百科上有关 HTML5 的词条，非常权威，文章下方还提供了大量 HTML5 的权威资源。
15. The HTML5 test

这个站点可以帮您测试你的浏览器对 HTML5 的支持情况，并为你打出分数。

Feed enhanced by Better Feed from Ozh

我想网 » HTML

HTML5未来发展的六大趋势

1） 移动优先

2) 游戏开发者领衔“主演”

3) 响应式设计&自动变化的屏幕尺寸

4 )设备访问

5) 离线缓存

6) 开发工具的成熟

总结

iframe自适用高度代码

HTML中的IE条件注释

30个必记的选择器

1. *

兼容性

2. #X

兼容性

3. .X

兼容性

4. X Y

兼容性

5. X

兼容性

6. X:visited and X:link

兼容性

7. X + Y

兼容性

8. X > Y

兼容性

9. X ~ Y

兼容性

10. X[title]

兼容性

11. X[href="foo"]

兼容性

12. X[href*="nettuts"]

兼容性

13. X[href^="http"]

兼容性

14. X[href$=".jpg"]

兼容性

15. X[data-*="foo"]

兼容性

16. X[foo~="bar"]

兼容性

17. X:checked

兼容性

18. X:after

兼容性

19. X:hover

兼容性

20. X:not(selector)

兼容性

21. X::pseudoElement

选择段落的第一个字符

选择段落的第一行

兼容性

22. X:nth-child(n)

兼容性

23. X:nth-last-child(n)

兼容性

24. X:nth-of-type(n)

兼容性

25. X:nth-last-of-type(n)

兼容性

26. X:first-child

兼容性

27. X:last-child

例子

标签

兼容性

28. X:only-child

兼容性

29. X:only-of-type

兼容性

30. X:first-of-type

一个测试

办法1

方法2

方法3

兼容性

1）移动优先