土人老徐

发言者通过秘密百科网站希望得到这样的信息：他们的错误是可以得到宽恕的，因为那可能是别人也有的人性的某些弱点。

在电影《2046》里，梁朝伟说：在以前，当一个人心里有个不可告人的秘密，他会跑到深山里，找一棵树，在树 上挖个洞，将秘密告诉那个洞，再用泥土封起来，这秘密就没有人知道。

如今，梁朝伟的这段台词再次在网上流行。在百度和谷歌中键入“秘密百科”，你能搜出一堆类似的站点——他们无一例外地 号称帮助网友分享秘密发泄情感。上面那段关于秘密的经典台词，成了这堆孪生网站最醒目的相似点。站长们都爱把这段话作为网 站公告，最后加上一句：现在，你可以把秘密留在这里。

在秘密百科的官方介绍中，网站定位为“分享各种秘密的平台”，当然里面不只是一些情感类的秘密，还包括一些生活中的糗事，冷笑话，和一些互联网上比较火的热点内容，网站的目的是让网友能在这个网站得到快乐，让不快乐的人发泄秘密快乐起来，让快乐的人看到别人的糗事和秘密更加快乐。情感类的分享比较多，爱情、友情、亲情，每一个秘密都是一个小故事。

秘密百科有些敏感的东西都会删掉或省略，比如两性话题，有些描写过于挑逗、露骨的文字，在秘密百科用户不用担心身份被暴露，网站会为每一位会员保守秘密，所以很多会员很乐意很放心在秘密百科上分享，不仅发泄了自己的烦恼，还能得到一些热心会员的帮助，可谓一举两得。

“有一个帖子，我自己都看哭了。A喜欢B，但一直没说出来，现在也没有可能，因为B已经有自己的幸福，本来B 是给了他机会的，就是没把握好。”秘密百科的站长回帖说：我是站长，你这篇文章是我办这个网站以来看过的最感动的文章 。

据站长介绍，网站访问的高峰时间在晚饭后的8点到凌晨，“可能因为大家都下班了，有心思来写东西”。让张久春意外的是网站 每天20%的访问者来自国外，“欧美、日本、马来西亚、新加坡的都有，可能是留学生或者当地华人”，秘密百科站长开玩笑说， 来自异域的访问记录，说明网站已经有了“国际影响”。

笔者认为，通过秘密百科，困惑者只能得到最基本的宣泄，而彻底解开心结，最好的办法还是接受正规心理咨询 ，或者主动学习心理学基本知识，“毕竟自己是最好的心理医生”。

“从商业的角度来讲，我觉得这种秘密网的创办者很聪明，创意很好，有商机。说不定就有心理咨询公司会去他们的 网上投放广告，在销售上来说，可以说找到了那些最饥渴的人群。”

本文来自：天涯     文中提到的网站：www.mimibaike.com

字符实体

完整的 WML DTD：

<!--
Wireless Markup Language (WML) Document Type Definition.

Copyright Wireless Application Protocol
Forum Ltd., 1998,1999.
                      All rights reserved.  

WML is an XML language.  Typical usage:
   <?xml version="1.0"?>
   <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
          "http://www.wapforum.org/DTD/wml_1.1.xml">
   <wml>
   ...
   </wml>

Terms and conditions of use are
available from the Wireless
Application Protocol Forum Ltd. web site at

http://www.wapforum.org/docs/copyright.htm.

-->

<!ENTITY % length  "CDATA">
  <!-- [0-9]+ for pixels or [0-9]+"%"
   for percentage length -->
<!ENTITY % vdata   "CDATA">
  <!-- attribute value possibly containing
   variable references -->
<!ENTITY % HREF    "%vdata;">
  <!-- URI, URL or URN designating a
   hypertext node. May contain variable references -->
<!ENTITY % boolean	"(true|false)">
<!ENTITY % number  "NMTOKEN">
  <!-- a number, with format [0-9]+ -->
<!ENTITY % coreattrs  "id    ID     #IMPLIED
                       class CDATA  #IMPLIED">

<!ENTITY % emph
 "em | strong | b | i | u | big | small">
<!ENTITY % layout  "br">

<!ENTITY % text     "#PCDATA | %emph;">

<!-- flow covers "card-level" elements,
 such as text and images -->
<!ENTITY % flow
 "%text; | %layout; | img | anchor | a | table">

<!-- Task types -->
<!ENTITY % task   "go | prev | noop | refresh">

<!-- Navigation and event elements -->
<!ENTITY % navelmts "do | onevent">

<!--============= Decks and Cards =============-->

<!ELEMENT wml ( head?, template?, card+ )>
<!ATTLIST wml
  xml:lang        NMTOKEN        #IMPLIED
  %coreattrs;
  >

<!-- card intrinsic events -->
<!ENTITY % cardev
 "onenterforward  %HREF;          #IMPLIED
  onenterbackward %HREF;          #IMPLIED
  ontimer         %HREF;          #IMPLIED"
  >

<!-- card field types -->
<!ENTITY % fields
 "%flow; | input | select | fieldset">

<!ELEMENT card (onevent*, timer?, (do | p)*)>
<!ATTLIST card
  title           %vdata;       #IMPLIED
  newcontext      %boolean;     "false"
  ordered         %boolean;     "true"
  xml:lang        NMTOKEN       #IMPLIED
  %cardev;
  %coreattrs;
  >

<!--============= Event Bindings =============-->

<!ELEMENT do (%task;)>
<!ATTLIST do
  type         CDATA       #REQUIRED
  label        %vdata;     #IMPLIED
  name         NMTOKEN     #IMPLIED
  optional     %boolean;   "false"
  xml:lang     NMTOKEN     #IMPLIED
  %coreattrs;
  >

<!ELEMENT onevent (%task;)>
<!ATTLIST onevent
  type         CDATA       #REQUIRED
  %coreattrs;
  >

<!--======== Deck-level declarations ========-->

<!ELEMENT head ( access | meta )+>
<!ATTLIST head
  %coreattrs;
  >

<!ELEMENT template (%navelmts;)*>
<!ATTLIST template
  %cardev;
  %coreattrs;
  >

<!ELEMENT access EMPTY>
<!ATTLIST access
  domain       CDATA       #IMPLIED
  path         CDATA       #IMPLIED
  %coreattrs;
  >

<!ELEMENT meta EMPTY>
<!ATTLIST meta
  http-equiv     CDATA      #IMPLIED
  name           CDATA      #IMPLIED
  forua          %boolean;  #IMPLIED
  content        CDATA      #REQUIRED
  scheme         CDATA      #IMPLIED
  %coreattrs;
  >

<!--================ Tasks ================-->

<!ELEMENT go (postfield | setvar)*>
<!ATTLIST go
  href            %HREF;           #REQUIRED
  sendreferer     %boolean;       "false"
  method          (post|get)      "get"
  accept-charset  CDATA           #IMPLIED
  %coreattrs;
  >

<!ELEMENT prev (setvar)*>
<!ATTLIST prev
  %coreattrs;
  >

<!ELEMENT refresh (setvar)*>
<!ATTLIST refresh
  %coreattrs;
  >

<!ELEMENT noop EMPTY>
<!ATTLIST noop
  %coreattrs;
  >

<!--============= postfield =============-->

<!ELEMENT postfield EMPTY>
<!ATTLIST postfield
  name         %vdata;           #REQUIRED
  value        %vdata;           #REQUIRED
  %coreattrs;
  >

<!--============= variables =============-->

<!ELEMENT setvar EMPTY>
<!ATTLIST setvar
  name         %vdata;           #REQUIRED
  value        %vdata;           #REQUIRED
  %coreattrs;
  >

<!--============= Card Fields =============-->

<!ELEMENT select (optgroup|option)+>
<!ATTLIST select
  title        %vdata;           #IMPLIED
  name         NMTOKEN           #IMPLIED
  value        %vdata;           #IMPLIED
  iname        NMTOKEN           #IMPLIED
  ivalue       %vdata;           #IMPLIED
  multiple     %boolean;         "false"
  tabindex     %number;          #IMPLIED
  xml:lang     NMTOKEN           #IMPLIED
  %coreattrs;
  >

<!ELEMENT optgroup (optgroup|option)+ >
<!ATTLIST optgroup
  title      %vdata;    #IMPLIED
  xml:lang   NMTOKEN    #IMPLIED
  %coreattrs;
  >

<!ELEMENT option (#PCDATA | onevent)*>
<!ATTLIST option
  value      %vdata;    #IMPLIED
  title      %vdata;    #IMPLIED
  onpick     %HREF;     #IMPLIED
  xml:lang   NMTOKEN    #IMPLIED
  %coreattrs;
  >

<!ELEMENT input EMPTY>
<!ATTLIST input
  name       NMTOKEN           #REQUIRED
  type       (text|password)   "text"
  value      %vdata;           #IMPLIED
  format     CDATA             #IMPLIED
  emptyok    %boolean;         "false"
  size       %number;          #IMPLIED
  maxlength  %number;          #IMPLIED
  tabindex   %number;          #IMPLIED
  title      %vdata;           #IMPLIED
  xml:lang   NMTOKEN           #IMPLIED
  %coreattrs;
  >

<!ELEMENT fieldset (%fields; | do)* >
<!ATTLIST fieldset
  title           %vdata;      #IMPLIED
  xml:lang        NMTOKEN      #IMPLIED
  %coreattrs;
  >

<!ELEMENT timer EMPTY>
<!ATTLIST timer
  name       NMTOKEN           #IMPLIED
  value      %vdata;           #REQUIRED
  %coreattrs;
  >

<!--============= Images =============-->

<!ENTITY % IAlign "(top|middle|bottom)" >

<!ELEMENT img EMPTY>
<!ATTLIST img
  alt        %vdata;      #REQUIRED
  src        %HREF;       #REQUIRED
  localsrc   %vdata;      #IMPLIED
  vspace     %length;     "0"
  hspace     %length;     "0"
  align      %IAlign;     "bottom"
  height     %length;     #IMPLIED
  width      %length;     #IMPLIED
  xml:lang   NMTOKEN      #IMPLIED
  %coreattrs;
  >

<!--============= Anchor =============-->

<!ELEMENT anchor
 ( #PCDATA | br | img | go | prev | refresh )*>
<!ATTLIST anchor
  title        %vdata;      #IMPLIED
  xml:lang     NMTOKEN      #IMPLIED
  %coreattrs;
  >

<!ELEMENT a ( #PCDATA | br | img )*>
<!ATTLIST a
  href         %HREF;       #REQUIRED
  title        %vdata;      #IMPLIED
  xml:lang     NMTOKEN      #IMPLIED
  %coreattrs;
  >

<!--============= Tables =============-->

<!ELEMENT table (tr)+>
<!ATTLIST table
  title       %vdata;    #IMPLIED
  align       CDATA      #IMPLIED
  columns     %number;   #REQUIRED
  xml:lang    NMTOKEN    #IMPLIED
  %coreattrs;
  >

<!ELEMENT tr (td)+>
<!ATTLIST tr
  %coreattrs;
  >

<!ELEMENT td
 ( %text; | %layout; | img | anchor | a )*>
<!ATTLIST td
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!--== Text layout and line breaks ==-->

<!ELEMENT em     (%flow;)*>
<!ATTLIST em
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT strong (%flow;)*>
<!ATTLIST strong
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT b      (%flow;)*>
<!ATTLIST b
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT i      (%flow;)*>
<!ATTLIST i
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT u      (%flow;)*>
<!ATTLIST u
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT big    (%flow;)*>
<!ATTLIST big
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ELEMENT small  (%flow;)*>
<!ATTLIST small
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ENTITY % TAlign "(left|right|center)">
<!ENTITY % WrapMode "(wrap|nowrap)" >
<!ELEMENT p (%fields; | do)*>
<!ATTLIST p
  align       %TAlign;     "left"
  mode        %WrapMode;   #IMPLIED
  xml:lang    NMTOKEN      #IMPLIED
  %coreattrs;
  >

<!ELEMENT br EMPTY>
<!ATTLIST br
  xml:lang        NMTOKEN       #IMPLIED
  %coreattrs;
  >

<!ENTITY quot  "&#34;">
 <!-- quotation mark -->
<!ENTITY amp   "&#38;#38;">
 <!-- ampersand -->
<!ENTITY apos  "&#39;">
 <!-- apostrophe -->
<!ENTITY lt    "&#38;#60;">
 <!-- less than -->
<!ENTITY gt    "&#62;">
 <!-- greater than -->
<!ENTITY nbsp  "&#160;">
 <!-- non-breaking space -->
<!ENTITY shy   "&#173;">
 <!-- soft hyphen (discretionary hyphen) -->

<!--
Copyright Wireless Application Protocol
Forum Ltd., 1998,1999.
                      All rights reserved.
-->

        我的工作中经常会遇到这样一个场景：季度绩效考核的时候，leader给下属根据上季度制定的KPI计划进行评分，分别评优秀、超出预期、符合预期、低于预期，往往对于这样的评价主观性可能占的比例可能会多一些，比如某同事跟领导关系好、平时加班多、表现比较活跃人际关系处理比较好，等等，这些都可以增加领导对他的考核结果。在平常的工作中没有量化，没有量化的KPI就是在扯蛋，不能算一个合格的领导。

        网站前端这个职位做到量化可能比较有难度，业界没有一套统一的考核标准。我想，可以把工作分为看的到(display:block)和看不到的(display:none)两部分：别人看的到的即工作的态度、页面是否完整的还原设计稿、浏览器兼容性是否OK、团队合作是否默契、等等……这些属于非专业性的，非专业人员都可以评估的。而在看不到的部分(display:none)，专业性方面，非专业人员看不到的部分即代码部分，比如HTML是否符合语义化、代码是否符合规范、HTTP请求数是否最优、JS CSS IMG文件是否经过压缩、项目文档是否完整、CSS&&HTML&&JS性能是否OK、等等……都可以作为专业方面的量化标准，这些量化可以在平时的codereview环节来测评，有了平时积累的这些测评量化的数据，作为一个团队的leader就不会每次在绩效考核的时候感到手忙脚乱了，对于每一个成员都可以做到公平公正，有了这些量化标准也会更加激发成员工作的积极性。

        刚才说到“看得到的”和“看不到的”，看的到的部分属于非专业性的部分，交给合作方来评估：设计师、产品经理、开发工程师

       非专业人员看不到的部分即代码部分，看团队的资源情况，可以成立虚拟评测小组，由这一组人在平时的工作中抽时间对成员完成的每一个需求进行codereview，对最终结果进行评分，有问题还可以对代码及时纠正和修改。

       除了以上两方面，我想对于员工的个人成长在KPI中应该体现一些关注，让团队成为一个不断学习成长的团队，每个季度让成员自己制定学习计划，每个月进行跟踪反馈，季度结束对成员的学习成果考核，最终成绩体现到KPI量化中。

      下面是我做的”看的到的(display:block)”KPI量化评估调查表，交给设计师、产品经理、开发工程师进行公平评估，最终取平均分。希望同行能给出一些宝贵的意见和建议，让我们在管理上做的更好。

——————————————————————————————————————

项目评分：

1、网页的浏览器兼容性（主流浏览器）

   S.优秀  A.超出预期  B.符合预期  C.低于预期

2、网页与设计原图的还原程度（准确性，最终完成页面是否和设计图一致）

   S.优秀  A.超出预期  B.符合预期  C.低于预期

3、项目完成的准时性（实际完成时间和计划完成时间的差距）

   S.优秀  A.超出预期  B.符合预期  C.低于预期

4、服务意识

   S.优秀  A.超出预期  B.符合预期  C.低于预期

5、项目内团队合作

   S.优秀  A.超出预期  B.符合预期  C.低于预期

附加评分（如果有）：

1、对产品的关注度（比如专业性建议，专业上的创新）

   S.优秀  A.超出预期  B.符合预期

2、对于性能方便的优化

   S.优秀  A.超出预期  B.符合预期

等等………………

经常很多童鞋不知道鼠标focus状态出现的虚线边框有什么作用，甚至有的产品经理和开发同学觉得这个很难看，强烈要求前端开发的同学将这个去掉，无奈，我需要给大伙扫扫盲了。

在按钮和链接上鼠标focus状态出现的虚线边框问题，我总结如下：

如果有focus：
1、用户如果打开一个页面可以看到他刚才打开的是哪个链接
2、残疾人和没有鼠标的用户可以很方便的按Tab键选中他想要的链接并打开。
3、美国还有专门的机构立法要求网站必须有focus等状态，不能歧视残障用户
正常的按钮和链接的交互流程是： normal – hover – press – release
这始终状态应该都紧密的联系在网站的整个用户体验过程中，希望广大的网站从业人员多多关注。

如果没有focus：
以上用户体验就缺失了。

要或者不要，focus始终在那里；
牛或者不牛，你的网站始终与这个字无缘。

另外转一下我同事的一句话：以前读书的时候我妈怕我晚上不睡觉把鼠标藏起来了，我每天晚上上网就是靠键盘的TAB键盘、Enter键和focus活命的。

我们的网站尽量多考虑残障人士的体验，这个社会才够和谐！前端攻城师们任重道远。

老子几年前进了互联网圈！！！！！！！成了前端工程师，名字是不是很拉风，有木有！！！！！！！！
尼玛跟老子讲前台代码简单！！！出入高级写字楼，薪水高！！！！！！！！！！！！！！！！
入行才2K起啊！！！！2K在帝都都够毛用啊！！！！
尼玛简单个毛线啊！！
HTML、XHTML、XML、json…有木有！！！
CSS要写一堆兼容代码有木有！！！！图片素材要合并有木有！！！
JavaScript、OOP、什么线程、请求、异步、优化！！内存泄漏！！有木有啊有木有！！！！！！

尼玛说你呢！！！就你张嘴傻乐的！！！！
不用IE6会死啊！！！！升级下浏览器会死啊！！！！
还有IE6/7/8/9！！！！！！！神马Firefox、Chrome、Safari！！！神马Android、iPhone、iPad！！！
全尼玛是浮云啊！！浮云啊！！！
为毛这么多浏览器！！还要都兼容啊！！！！坑爹呢啊！！！

后台开发只扔一堆数据就不管了啊！！！！！！！！
设计哥扔下PSD就完事了啊！！！
尼玛哥要高保真还原啊！！！尼玛领导要1px对齐啊！！！
尼玛残品哥要这样那样的动态效果啊！！！
尼玛都是要做死啊！！
为毛做后台开发就高级啊！！！
前端开发就没技术含量啊！！！
残品哥很淡定的说：这个很好搞嘛！！
好搞你妹啊！你以为哥是拿意念写代码的啊！！
哥要一行一行写几千行代码啊！！！

尼玛天天赶项目要加班啊！！！！
加班比吃饭还正常啊！！！！
最恶心的是辛辛苦苦写的代码啊！！！
尼玛上线了还要改啊！！！
最后改的面目全非啊！！！！！！

技术更新比翻书还快啊！！
神马HTML5、CSS3啊！！！！！！
离线、圆角、动画、视频、音频尼玛想让前端把活都揽了啊！！！！！！！！

尼玛英文能力还要好啊！！！
要不看不懂大老外写的博客啊！！！
尼玛哥又不是英语专业的啊！！！！！

尼玛产品出BUG了先查前端代码啊！！！
是不是前台的问题都丢给前端啊！！
哥是超人吗！！？尼玛提供的数据就是那个操行，哥能去改服务器啊！！！
尼玛当初不是说你说这么改的吗
最后尼玛又让哥改回去！！！！！！！！！！
坑爹啊！！！

总之
做前端的尼玛你伤不起啊啊啊啊啊啊！！！！！

　　　　最近比较多的关注名字方面的研究，人名、域名、公司名、品牌名等等，越来越发现名字太太太重要了。

　　　　说说人名吧，人名不是随便取的，其中有很多讲究，我对未来宝宝的名字做了以下要求：

　　　　1、名字要叫的顺口响亮，男孩名字最后一个字发音一定要响亮，口型一定要大。女孩名字叫起来尽量婉转，清脆。

　　　　2、读音方面不能有歧义，以免日后闹笑话，如：夏建、范坚强（反过来读）

　　　　3、名字也要讲究韵律，如，二声-四声-二声 、三声-一声-二声，韵律这个东西也没个什么定性，毕竟是两三个字，关键是看发音的感觉吧，尽量不要两个字和三个字的音调一样。如徐童仁，三个字都一个音调，叫起来还很压抑，个人觉得这样不怎么好。

　　　　4、名尽量简单，一个字两个字都可以，一个字的名重名的会很多，字尽量简单，不要出现普通人难以识别的字。

　　　　5、尽量有意义，可以说出来龙去脉。

　　　　6、如果更深的要求还要符合五行生辰八字，这个太难研究了，暂且不考虑，如果名字中加入金木水火土之类对冲的字可能把名字搞定不好听。

（未完待续）

　　　　再感概一下域名，就是浏览器地址栏www后面的名字。哥玩域名的时间不长，才七八年吧，至今都没有一个让我很得意的域名，经常是域名注册了，后来越来越不满意然后不续费就过期了，让我一直在琢磨什么样的域名才是好域名，能用少的钱注册到好域名是最好不过了，有钱的话就不愁没有好域名。

　　　　个人觉得要网站做大做好当然还是首选.com的国际域名，成功的网站十有八九是这种域名的，受众率高一些。

　　　　域名也要讲究好记，好记的同时还要讲究品牌，取域名的方法可以从我总结的一下几点参考，可能说的不够全面：

　　　　1、短、小、精。 如：qq.com 。 最好是在四个字母以内。

　　　　2、域名尽量符合自己推出的品牌，如百度公司的域名就叫baidu.com，新浪公司的域名就叫sina.com，其实很多公司是先有域名再有公司名的，这样的顺序比较容易注册好域名。

　　　　3、现在双拼的域名也越来越受国人接受了，如douban.com豆瓣网，虽然豆瓣和他的网站没有任何关系，但用户想到豆瓣就想到这样一个网站，潜意识的就把两者联系起来，从而节省了一些树立品牌的成本，现在双拼的好域名已经很难找了，已经被注册完了，从别人那里转手买进来价格会很贵，少则几百，好的多则几十万甚至几百万。域名不一定要符合自己网站的主题，如果有番茄、豆腐、大米、包子、等等这样与自己生活很紧密的双拼很适合做为网站域名，而且是全能的域名，做神马网站都可以。

　　　　4、除了名词的双拼，还有形容词的双拼也不错的哦，形容词可能要求要高一些了，要符合网站的一些属性，如开心网，是一个让人玩的开心的SNS社交网络网站。创业初期没有钱，kaixin.com也就落入他人之手了，如果自己把好好的品牌建立起来，然后别人用真的kaixin.com也做个一样的网站，粘上你已经打好的品牌，那你就亏大了，现在的开心网就是个典型的例子，所以不建议用双拼+数字之类的域名，如kaixin001.com，有钱没钱尽量搞个独立的双拼域名。

　　　　5、然后再说下有钱的公司做网站的首选在中国当然是数字域名了，最初的如163.com网易，到后来的17173.com、4399.com、56.com、3721.com，受欢迎的程度是多么大，数字域名其实在国外、欧美那些地方都是没人要的，别人都不太喜欢数字域名，宁愿用长达十几个字母的双英文单词。数字域名的价格很贵很贵，2数字的高达几千万一个，三数字的最高高达五六百万，但如果是888.com这样的域名肯定得再加几个数量级了，四数字的好域名不多，最便宜也得几万甚至几十万。五数字就便宜了，一般的是上千元，好的是上万。不过到了5数字就不好记忆了，如果不是一个好数字不建议使用。当然六数字七数字也有好域名，比如某一个城市的邮编号码。

　　　　6、数字域名和双拼域名说完了，再说说杂域名，所谓杂米是指一些没有实际意义的字母或数字、符号组成，如京东商城360buy.com，当然这样的域名可以算是比较次品的域名了，真想不通京东那么有钱干嘛不多搞点钱买个好域名，京东的域名很难记，但是当一个网站的品牌建立起来了，域名的作用就不那么明显了，用户的黏性大，再垃圾的域名都会记得。杂米也有好的，如cctv.com ccav.com，已建立起的品牌，杂点也无所谓。

（未完待续）

淘宝网首页已经改用HTML5技术了，淘宝的前端攻城师好给力！不知不觉的HTML5就悄悄来到了我们的身边。

其实关注HTML5很久了，还没有尝试HTML5的项目会发觉自己很OUT了，近期准备拿个小项目小试牛刀，下面对使用HTML5写一些心得和分享：

1、HTML5与HTML4和XHTML比，增加了一些新的实用性和语义化的标签，如:section,article,aside,header,footer,nav,dialog,figure,video,canvas……

2、HTML5做好了向前和向后兼容，XHTML标签在HTML5里也能很好的渲染。

3、IE1至IE8都不支持HTML5（Fuck）

4、想到HTML5当然就想到了CSS3，他们像两个亲兄弟，HTML5和CSS3相互支持的还不错，暂时没发现神马BUG，但IE还是对CSS3支持不好（继续fuck IE）

5、如果想强力fuck IE让IE也支持HTML5，就需要引用谷歌的一个JS文件，这个JS文件可以让IE对HTML5的新标签重新识别，引用方法如下：

<!--[if IE]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->

6、如果之前已经收藏过一些css reset文件，直接拿来用会出问题的，还需要对HTML5
新标签重新reset，如对header,section,article,aside,footer等重新设置成block.
7、如果想让IE也支持canvas，需要页面调用谷歌推出的for IE的canvas JS文件，google一下你就知道。
8、DOCTYPE会和以前有一些不一样哦，标签更简约，只用定义 <!DOCTYPE HTML>，再也不用像以前一样Ctrl+c然后Ctrl+v了。
在CSS3的样式设计上，做了一些渐进增强的体验，如在IE非标准浏览器用户打开页面会看到一个简约的没有圆角边框的页面，firefox、safari、oprea、IE9 等标准浏览器用户可以体验到CSS3带来的惊喜体验，如圆角边框、圆角带阴影的边框、渐变色背景、HTML5视频动画、HTML5表单验证等等……我们干这一行虽然不能强迫用户去升级或更换浏览器，但有义务去引导用户使用最符合标准的浏览器，享受更VIP的用户体验。

其实还有很多内在的新技术还没有能展示，希望这是2011年在前端开发新技术方面的一个良好的开端。

项目演示     下载DEMO到本地查看

本文主要收藏和自己摸索出一些自己经常会用到但又不太好记的一些奇技淫巧，以便不时之需。

这些奇技淫巧我会不断的迭代更新。

1、在IE6浏览器下使用CSS滤镜使PNG24背景图片实现半透明效果

.ooxx{

background-image:url(../images/a.png);

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=”images/a.png” );

}

2、CSS hack

#test{

color:red; /*所有浏览器都支持*/

_color:red; /*IE6支持*/

*color:red; /*IE6、IE7支持*/

*+color:red; /*IE7支持*/

color:red\9; /*IE6、IE7、IE8支持*/

color:red\0; /*IE8支持*/

}

#element {
color:orange;
}
#element {
*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8+9 */
}
:root #element { color:pink \0/IE9; } /* IE9 */

CSS Hack：单独针对Firefox

把针对Firefox的CSS代码写在下面CSS函数的大括号之间

@-moz-document url-prefix(){ /*CSS代码*/ }，如：

@-moz-document url-prefix(){

#main {background: red; }

}

*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

CSS Hack：单独针对Opera

把针对Opera的CSS代码写在下面CSS函数的大括号之间

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){

#content {background: url(http://guandian.co/logo.jpg) no-repeat center top;}

}

*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8：针对Safari和Google Chrome

把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间

@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

@media screen and (-webkit-min-device-pixel-ratio:0){

#picture {background: url(http://guandian.co/mypic.gif) no-repeat center top;}

}

3、半透明全屏遮罩层样式

#mask{position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;background-color:#000;-moz-opacity:0.2;opacity:.20;filter:alpha(opacity=20);

_position:absolute;_height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);}

4、CSS清浮动

.ooxx{zoom:1;}

.ooxx:after{content:”";display:block;height:0;clear:both;}

5、CSS兼容标准浏览器的圆角

.ooxx{ border:1px solid #AEAEAE; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

6、让IE8用IE7的模式来渲染CSS

只用在head部分加上以下代码

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

7、解决IE6背景图片缓存的BUG

<!–[if IE 6]>

<script type=”text/javascript”>

// <![CDATA[

document.execCommand("BackgroundImageCache", false, true);

// ]]>

</script>

<![endif]–>

8、IE下让网站变成黑白的

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

9、图片垂直居中（方法一）

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>无标题文档</title>
<style type=”text/css”>
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>

<body>
<div>
<li><div><img src=”http://mat1.qq.com/www/images/allskin/wmlogo.gif” ></div></li>
<li><div><img src=”http://img1.cache.netease.com/cnews/netease/logo_w.gif” ></div></li>
</div>
</body>
</html>

10、让IE6也完美实现position:fixed

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

例：  .mod_back_top{ width:60px; height:55px; background:url(../img/theme_a/back_top.png) no-repeat; position:fixed; _position:absolute; right:2px; bottom:2px; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

童鞋们都知道图片没办法在IE中用普通方法垂直居中，本文主要是为了解决我们大多数人平时容易遇到的这个问题，其中还附加了一段JS让图片宽高等比例调整，让至少有图片一边与边框的宽高相等。

本文介绍的方法是通过IE的font-size方法模拟实现的，网上有人精确的计算过font-size和实际宽度之间的汇率大约是0.873，在本实例中宽高为200px，那么font-size应该设置为200*0.873=175px，其他的就请看代码，我就不多啰嗦了，你懂的。

查看DEMO

请收藏图片垂直居中方法时请麻烦附上本文的网址，谢谢，冲PR中……

本文出处：http://k.css6.com/?p=41