Heluyao的博客 {11gz.com}

预览效果：demo

上图，可不是用画图软件制作的，而是浏览器生成。惊讶吧！css3的威力，巧妙的运用了圆角边框，阴影，背景渐变…等css3新特性。赞叹之余，我也亲自的动手制作了一下，就当学习一下了。以前了解过css3，但没动手写过，发觉有些属性还真是不好记，要区分三类浏览器(Gecko 、Presto、WebKit)，就越发的麻烦了。

其中不少地方的写法很新颖，充分的利用了伪类(before和after)，伪类配合绝对定位，双倍边框、椭圆、三角形等写法也很受教，真真切切体会到了css3的强大，希望css3时代早日到来。

原文地址：Pure CSS social media icons

推荐阅读：pure CSS speech bubbles

　　光说HTML 5的强大了，贴几个应用，感受一下(请使用支持HTML5的浏览器)。

1. Gordon

   　　号称：An open source Flash runtime，一个JS＋SVG应用。解析SWF文件，然后播放。不需要Flash插件，不可思议！但并不是所有的flash都能解析播放的。

2. 基于HTML 5的在线画板

   　　酷毙了!功能强大，画图毕后还能保存一张PNG格式的图片。

3. SublimeVideo

   　　HTML 5视频的一个强大的应用。播放器的操控很便捷，播放、暂停、拖动进度、时间显示，甚至还能够全屏播放，这里的全屏是浏览器窗口的范围，不是整个屏幕。全屏后播放器的控制条还能随鼠标的状态渐隐渐显，体验真是great！

4. HTML 5的YouTube(需要翻个“围墙”)

   　　最后我们再来看看伟大的YouTube，看她是如何将HTML 5付诸现实的。当然你需要有支持HTML 5的浏览器，还有H.264编码器。

　　HTML 5究竟离我们还有多远，我相信不会很快。直到IE9的普及，HTMl 5才能说真正意义上的敢派上“战场”！IE6这个绊脚石都还没瓦解，谈其它的，显得有点荒谬！IE6这个话题扯远了，罢了。保持那份期待还是美好的！

　　HTML5现在火，不火就怪了。很好，很弓虽大，哈哈！希望是个“喜剧”，而且不断的“演”下去。

　　先了解一下HTML5：

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

　　记录HTML5标签元素相对HTML4.01标签的不同处：

记录HTML5标签元素相对HTML4.01属性的不同处：

记录HTML5标签元素相对HTML4.01事件属性的不同处：

　　总结：HTML5提供了一系列新的元素和属性，并新增了新的视频和音频功能(<audio>、<video>)，取消了一些过时的标签、属性、事件属性。强化了网页的表现性能，追加了本地数据库等Web应用功能。

推荐阅读：

1. 5 Exciting Things to Look Forward to in HTML 5
2. 各浏览器对css3和html5的兼容表
3. 维基百科：HTML 5
4. W3C：HTML 5
5. Google 发布介绍 HTML 5 新特性的视频

taobao的head里一些标签“瘦身”了！doctype、meta、script、style…让我好奇的主要是doctype的写法。

后来仔细一查，google，百度，口碑，支付宝，阿里巴巴都是这样。

为了解疑，在淘宝ued陈成的blog找到新首页开发PPT详解 —— HTML规范一文，再一对照Doctype和渲染模式对照表，疑惑解决了，同时也学到了不少的新知识。

记录一下：

html5 的 doctype：

html5 的其他标签：

这种格式，所有主流浏览器都进入标准模式。这样一来就不会出现明显的兼容事件，也就无后顾之忧。不过问题还是有的，html5 doctype与图片多余空白一文就有提到——除IE7和IE6，其他支持HTML5的浏览器都在图片与容器之间出现了多余空白，并且给出了解决方法，很赞。另，iframe也受到影响，解决方法和图片一致！

最优的解决方法：

补充：

秦歌：不仅 html5 的 doctype 会引发此类问题，还有 html4.01 Strict ，这应该是标准与准标准之间的问题。

推荐阅读：

1. 给HTML文档设置XHTML Doctype是有害的
2. Optimizing Optimizing HTML

javascript的事件模型有三种：netscape、IE、W3C/Safari。

事件流又分冒泡型事件和捕获型事件。主要的浏览器代表是netscape、IE7及以下版本。

DOM事件流：同时支持冒泡型事件和捕获型事件。火狐、Safari、IE8等支持DOM事件流的浏览器。

以下内容仅以IE和火狐作为代表进行对比及处理。

添加、移除事件：

IE

oTarget.attachEvent("on" + sEventType, fnHandler);

oTarget.detachEvent("on" + sEventType, fnHandler);

火狐：

oTarget.addEventListener(sEventType, fnHandler, false);

oTarget.removeEventListener(sEventType, fnHandler, false);

解决方法：

获取事件对象：

IE

IE中，事件对象是window对象的一个属性event。

window.event

火狐：

DOM标准中，event对象必须作为唯一参数传给事件处理函数。

arguments[0] 或者 直接传入参数

解决方法：

注：针对火狐的方法请参考 JavaScript 获取事件对象的一个注意点

获取事件属性：

相同处：

1. 获取事件类型(名称)：oEvent.type
2. 获取按键代码(keydown/keyup事件)：oEvent.keyCode
3. 检测是否按下了Shift、Alt、Ctrl键：oEvent.shiftKey、oEvent.altKey、oEvent.ctrlKey
4. 获取客户端鼠标事件坐标：oEvent.clientX、oEvent.clientY
5. 获取鼠标距屏幕边沿坐标：oEvent.screenX、oEvent.screenY

不同处：

1. 获取目标(事件源)：

   IE：oEvent.srcElement

   火狐：oEvent.target

2. 获取字符代码：

   IE：oEvent.keyCode

   火狐：oEvent.charCode

3. 阻止事件发生：

   IE：oEvent.returnValue = false

   火狐：oEvent.preventDefault()

4. 停止事件冒泡：

   IE：oEvent.cancelBubble = true

   火狐：oEvent.stopPropagation()

5. 还有一些属性仅有火狐支持，比如eventPhase、isChar、pageX、pageY、

解决方法：

最后综合起来，EventUtil对象封装起来，就很好的解决了事件的跨平台兼容了。下载：eventutil.js。

此文中涉及到的浏览器检测功能，超出了本文的范围，略过！detect.js 提供代码方便下载测试。

本文参考自《javascript高级程序设计》，详细可翻阅该书籍。

　　内容太多，copy过来也没意思，决定留个链接，以后忘了随时再跳过去阅读。好文总是让人受益匪浅的！由衷地感谢原文作者——Henri Sivonen。

　　原文：Activating Browser Modes with Doctype

　　译文：用doctype激活浏览器模式 – 感谢秦歌的翻译。

　　主流浏览器的引擎：Names of Browser Engines

　　下节准备补习：javascript事件中IE与火狐的不同之处

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

做个笔记，具体实现效果看下面图片，偶不知如何用语言来描述了。具体原理偶也说不清了，反正能解决了问题就是王道。

具体数值是随行内缩进的距离变动的，上图的距离需要12pt，距离越远数值也就跟随着越大，反之，亦然。

利用li配合list-style-type的decimal来实现固然简单，但是如果需要复制文字再粘贴后保留前面数值，那么就…