Heluyao's Blog

你会使用html5 doctype吗？

heluyao — Sat, 20 Mar 2010 20:55:55 +0800

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

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

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

记录一下：

html5 的 doctype：

<!DOCTYPE html>

html5 的其他标签：

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

最优的解决方法：

img{vertical-align:middle} /*or bottom top and so on*/

补充：

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

补习:跨平台的javascript事件

heluyao — Sat, 20 Mar 2010 16:19:36 +0800

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

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

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

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

添加、移除事件：

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

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

火狐：

oTarget.addEventListener(sEventType, fnHandler, false);

oTarget.removeEventListener(sEventType, fnHandler, false);

解决方法：

获取事件对象：

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

window.event

火狐：

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

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

解决方法：

function getEvent(){
   if(window.event){
   return window.event;
   }else{
   return getEvent.caller.arguments[0];
   }
}

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

获取事件属性：

相同处：

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

不同处：

获取目标(事件源)：

IE：oEvent.srcElement

火狐：oEvent.target
获取字符代码：

IE：oEvent.keyCode

火狐：oEvent.charCode
阻止事件发生：

IE：oEvent.returnValue = false

火狐：oEvent.preventDefault()
停止事件冒泡：

IE：oEvent.cancelBubble = true

火狐：oEvent.stopPropagation()
还有一些属性仅有火狐支持，比如eventPhase、isChar、pageX、pageY、

解决方法：

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

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

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

补习:激活浏览器模式的doctype

heluyao — Fri, 19 Mar 2010 21:15:02 +0800

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

　　原文：Activating Browser Modes with Doctype

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

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

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

补习:CSS盒模型

heluyao — Fri, 19 Mar 2010 16:42:03 +0800

正常盒模型：

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

IE 5.x及更前的版本：

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

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

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

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

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

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

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

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

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

笔记：文字排版行缩进

heluyao — Wed, 10 Mar 2010 17:50:20 +0800

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

text-indent: -12pt; margin-left: 12pt;

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

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

Juniper VPN报“nc.windows.app.23711”解决办法

heluyao — Mon, 01 Mar 2010 17:50:49 +0800

今天，连接Juniper VPN，报错：

“The Network Connect session terminated. Do you want to re-connect?” “nc.windows.app.23711”

思来想去不得其解，上google搜了一下，结果就有了以下方法：

去到任务管理器，是否发现mDNSResponder.exe这个进程？如果有，直接结束该进程项，问题即将解决；如果没有，那还请移步他处，再找其他答案。

何为mDNSResponder.exe：

mDNSResponder.exe是一款名为Bonjour的音乐分享软件相关程序。不是毒也不是马，相当安全。它很多时候是安装了ADOBE CS3系列软件而捆绑进去的。apple的一些产品（如 Safari 浏览器）中也捆绑有它。百度百科：mDNSResponder.exe

春运首日即上演了戏剧性的一幕

heluyao — Mon, 01 Feb 2010 10:54:25 +0800

号称是深圳首趟“实名制”列车，又是这个词，最近很火爆。话说这趟车原本一早票就卖光光了，发车时车厢里上座率仅达到“可悲”的8%，原因乃9成旅客没请到假，赶不上车。比较的戏剧化吧！而且是10年代全新搞笑类。“被请不到假赶不上车”，浪费了“我”辛辛苦苦高价买来的车票啊！

以下腾讯的原文地址，来晚了可能就“河蟹”了。

http://news.qq.com/a/20100201/000191.htm

方向-2010

heluyao — Tue, 26 Jan 2010 15:30:51 +0800

克服自己的心理弱点和性格缺陷。多疑，敏感，天真（贬义，并不可爱），犹豫不决，胆怯，多虑，脸皮太薄，心不够黑，教条式思维……这些性格弱点必须改变。最毒的…
知识涉猎。多看看其他方面的书，金融，财会，进出口，税务，法律等等。一味的看技术相关书籍是不行的。
培养自己多方面的能力。包括亲和力，察言观色能力，攻关能力。适当增强一下下综合能力。

如果你也喜欢apple的壁纸

heluyao — Mon, 25 Jan 2010 10:50:31 +0800

rt，向你推荐以下站点，好多漂亮的apple壁纸啊！看准你屏幕的分辨率再下载，如果没找到适合的大小，刚好你又会PS，那么裁一裁也是不错的！

APPLE MAC WALLPAPERS

买黄金or买房

heluyao — Tue, 19 Jan 2010 11:49:48 +0800

民国初年，一两黄金可以买二亩良田，五两黄金买北京一个四合院。一百年后的今天，一公斤的黄金等于25万元人民币，只能买北京四合院落的一个厕所。如果你在一百年前没有买四合院，而保存五两黄金，那你今天是一个非常贫穷的人。这么一比大家就可以理解，为什么我们中华民族有这种置产的观念。这种观念不是空穴来风，而是从历史资料来看，历朝历代，对于一个战乱颁仍的国家，房地产相对而言是比较保值的。为什么当我们经济碰到危机的时候，房地产价格总是涨。
黄金并不保险。

原文来自：郎咸平官方博客