wlsy

找出Flickr照片的作者以及他/她/它的更多页

wlsy — Wed, 18 May 2011 22:43:29 +0800

flickr图床提供不限量的外链功能等等，不愧为目前最棒的图床服务之一，虽然好的互联网服务或多或少会被防火墙认证。

当你看到某些被外链的flickr图片时，你是不是对它的作者很感兴趣？是不是想看她/他/它的更多照片呢？

flickryou能够帮你找出该图片的作者，点这里访问。

其实这个简单的工具诞生有几天了，放出来供大家使用吧。有问题欢迎联系我。

黄山印象

wlsy — Thu, 07 Apr 2011 00:43:03 +0800

早有所闻黄山据说不错，仗着名气大，离杭州又近，在一个节假日时就决定拿起背包，捆着帐篷睡袋，跟几个同事，去黄山上露营，一探究竟。

黄山分为前山后山，从后山上山人少，因时间安排上问题，决定做索道上去。

那天天气不太好，隔着窗还能看到雨珠，能见度很低。上山之后基本上也是雾蒙蒙一片。等到北海之后便在那个“著名”的篮球场集营地点，交了30块钱的类似管理费便开始扎营。

天公不作美，半夜下雨又下雪，因为防潮垫质量比较一般，加上人为噪音比较多，很艰难的小睡。期待着择日雨后放晴的日出。

早上5点半就匆匆起来，找到一个人挤人的号称著名观景点后作罢，另外找个较少人角度一般的地方开始等候。云没有完全散开，很庆幸能看到日出，不过时间很短，不久后便进云层了。

往人少的地方走。趁着雾气云海未散开，开始攀爬在悬崖峭壁上，很惊险刺激。。

偶然还能看到小家伙，恨焦距太短。另外副厂镜头性价比很高，不过还是有1cm左右的跑焦现象。。

西海大峡谷的奇松。话说黄山门票3分之二的价值就体现在西海，但因悬崖陡峭，危险系数高，旅游团不会领团进来，所以人会比较少。

黄山的日落也是一美景。

剩下的三言两语

此次行程变数很多。下雨下雪日出日落等景象很庆幸能看到。在第二天的晚上，一伙人到达谭家桥镇的东黄山青年旅舍，或许因为太累，或许因为迫切想念青旅。到达之后匆忙下车，甚至连背包都忘记拿下。

感谢靠谱的老板帮忙想办法和提供额外的物品以及好心的司机，第二天早上就收到来至汤口派出所的通知去取背包。

出外背包旅行，青旅永远是最好的选择，虽然早之前对于青旅有些负面的消息，但对于节俭的背包客而已在国内应该没有更好的更有性价比选择。

黄山名气很大，名气越大人也就越多，人也就参差不齐。几步之内便见诸如”文明观看，误丢垃圾“之类的标语，以及凌晨半夜，集营外少许人大声说笑，唱歌，提醒后不改的游人。素质问题又被提上来。

或许真的是后遗症，在那次翻山从云南到四川看到的那云海相比，黄山的云海给我惊喜但没有兴奋。就像好比去过九寨沟后，国内的水就没什么感觉了。

不过总体而言黄山还是很不错的，值得一去！

它适合旅游，不适合旅行。

我在滇川路上的16天

wlsy — Tue, 09 Nov 2010 15:43:20 +0800

回来有一周多了，趁着有时间好好整理下这感触颇多的一路。这次行程也算是对去年的继续。请一次长假不容易，不过还是挺感谢那帮靠谱的同事，能帮我实现计划了一年的想法。是的，除了工作，还有生活。这16天到底发生了什么？接下来用真实的图文来讲述这次行程，有翻页，GR里面估计不能看到。。

出发前的准备

对于自助行，你需要对你的行程有充分的准备，避免无趣的做无头苍蝇。这包括对行程地尽可能多的了解，突发情况下的替换行程，以及考虑自身体质情况下的时间安排等等。其实这次路线跟我预定的还是有些出入，正是因为一些客观因素导致的。一些必要的物品：日常洗漱用品、衣服、一份出行计划、钱包、基本证件、手机及充电器、50L以上的背包、防晒霜（不是晒黑的问题，是晒伤的问题）、雨伞、垃圾袋（放置换洗衣服或坐车不适时）… 一些可选的物品：小挎包、帽子、口罩、相机、抗高反物品、运动水壶、花露水、无极膏、创口贴、手电筒、纸巾、湿巾、一些书和糖果（当你碰到一些贫困区的孩子，你能把你行程无聊打发时间的书给他们，他们会很高兴）… 当然这些只是比较适用于高原较贫困的山区，如果你是阔爷，或城市休闲游的话这可以忽略。。还有，最重要的就是保持一份好的心情和一份纯真的心。对于住，强烈推荐在青年旅舍，不仅价格便宜，而且氛围和交流是那些经济酒店无法比拟的。

短暂接触的春城昆明

Day1

将近半个多月订的来去机票很给力，下午两点多在机舱准备起飞时被告知交通管制，痛苦的憋了2个小时，以至于到达昆明(海拔1891)是已经是晚上了，临时决定露宿一宿。住的房间里面，有一个日本人和一瑞士人，我用蹩脚的英文居然他们都能听懂。。因为太晚了，怕影响他们休息晚上也就没出去。早睡早起。

Day2

原本不想在昆明多呆，机会难得，花了一个上午去逛逛。翠湖边，这里似乎麻雀很多，可惜没有看到传说的红嘴鸥屋檐上的麻雀翠湖上的鸭子，为什么不是红嘴鸥翠湖边上就是云南大学本部，据说是大四和研究生用的，所以。。。很少。。这张冒着生命危险拍的。。昆明呆的时间不在，翠湖给我感觉有些杭州西湖影子，包括景点命名上等，但还是比不上后者，不过印象比较深的就是看到一辆加长的林肯车了，对于旅行者来着这里作为物品补给地再好不过了。

大理

中午的时候离开昆明，前往大理，到达的时候已接近傍晚。在我印象里面，跟大理有关系的就是那部天龙八部，来之前在对它进行背景了解时，其实它拥有着很丰富的文化底蕴。夜晚的大理城门上的牌匾,晚上在洋人街那块的酒吧热闹非凡，人也挺多。

Day3

早早的起来了，是的必须在一大帮旅游团过来之前好好逛逛。图为非中心地带的大理古镇。白族民居屋顶一角非古镇中心的一条街古镇里的居民古镇有点点商业化，建筑的风格也有些刻意的最求都城的感觉。更让我感兴趣的还是普通的白族居民的生活，于是前往15公里外的喜洲镇。镇很小，那里有个市集。图为座马车前的讨价。在交易的当地居民喜洲镇市集一角喜洲镇里面有个景点，买门票进去之后我就后悔了，一个很干净的白族民居，然后看表演神马的，这种针对旅游团的商业表演一向很无趣，远远没有更为自然的当地风情另我有随拍欲望。喜洲走了两圈回来大理古镇，然后出发去丽江。是的之后的行程就是重点

懒懒的丽江

下午从大理离开前往丽江(海拔2410)，在丽江我没选择在古镇里面住宿，而在浓缩版的丽江丽江古镇-束河古镇住下，两者相差不选。接下来会讲述我住在这里的原因。

Day4

在丽江有首歌很流行。打开这里可在新窗口试听。人少，清静，精致，写生的好场所多品种的狗的存在，让这更有懒洋洋的感觉人说丽江是个适合发呆的地方，第一次到束河古镇我赞同了，相对丽江古镇有时拥挤的人群，在这里休憩再好不过了因为住在束河，所以不急一次逛完，下午就去了不远的丽江古镇。手织的摩梭围巾，摩梭族人较常见的服饰丽江古镇一角，人较少古镇里面卖的很具东巴文化的小玩意被纳西族名扬中外古镇七一街的猜字墙，其实它是东巴象形文字的一个美化版本，有人说淘宝口碑卡上几个图案跟它有点像。。。古镇的天空下着小雨，爬到狮子山上看古镇全景，快日落的时候，然后就在那边座到晚上。。丽江古镇的晚上是热闹的，四方街那块到处都是酒吧，到处都是表演、歌声。艳遇之都嘛。图为酒吧桌子上的蜡烛晚上回束河古镇，旅舍里面在放鞭炮，在庆祝他们的一朋友从西藏骑自行车回来，然后在讲述他的这段经历，很佩服他。

Day5

在丽江的第三天早上起来，束河古镇的狗很有爱束河古镇深处有个叫人子生活馆的公益团体，听他们说有7年了，挺不容易的。坐了会听了听他们的音乐，跟他们合照，然后买了张CD回去。很可惜原本准备徒步虎跳峡，并绕过哈巴雪山到哈巴村耗时3天的路线也因为天气原因取消了，这也让我后面在成都多安逸了几天～

心中的日月，香格里拉

下午的时候就从丽江依依不舍离开，前往中甸（3240米），这片被人描述得绚烂多姿，真的是这样吗？从丽江一路翻山，特别在夕阳照在哈巴雪山是，令人敬畏。晚上到中甸住的地方已经很晚了。住的地方，我选择的离县区有6公里的草原上，所以生活上不方便，但这里更贴近自然。晚餐旅舍里面点了份牦牛肉盖饭。然后就里面的一藏族小伙聊了很久，这里的人挺淳朴的。

Day6

果然该来的还是要来，早上起来时，不知是昨晚那牦牛盖饭有问题，还是真的有些高反，在加上这里干燥，冷，不仅位胃些不适，头感觉有些重，嘴唇也起了些皮。好吧身体重要，一整天也就躺在床上，住一起的两个北京哥们和一丽江女孩，也笑话俺能躺一天。然后几天之后，一北京的哥们他也躺一天了，听他说高反了。。

Day7

早上起来好转，要多转转才精神，今天的目标松赞林寺和石卡雪山。号称小布达拉宫的松赞林寺外围旁边的一山坡上，阴天那天据说是个特别日子，香火很旺，不过我对这种不是很感兴趣在那呆了一上午，离开寺，回到住的地方反方向去石卡雪山沿着这路往前走，不经意的回头的景致让我很震撼路边的的一个湖，难怪那北京男强烈推荐我骑自行车环湖。缆车上从半山腰往下看上了山顶，人很少，很冷，风雪很大，海拔4500米短暂的云雾散开，终于有光了往下看所在的县区，居高临下的感觉真好，不自禁的高喊了一声风雪中的风马旗可想它有多冷，栈道开始结冰时间关系不舍的下山了，右边的房子就是我住的地方晚上时候认识了一台北女，跟她讲了几句闽南话，顿时感觉特亲切。

Day8

当天晚上睡的挺好，跟一新来的哥们打算明天和人包车去普达措。早上醒来时，得知那哥们联系好了和其他一对夫妻一起，我也因为时间比较匆忙，忘记带干粮，要知道那个地方吃的不方法，还打算走一段较长的路。不过很感谢那对夫妻，不仅中午给我饼干和火腿，傍晚回来还请我们吃牦牛火锅。。吃的我泪流满面。属都湖，天气不错静，跟九寨沟不相上下湖面上的水草和枯木 “树胡子”学名长松萝天气真不错。。碧塔海及周边让人惊叹的精致，挺不错的，快傍晚是我们又包车回去了中甸给我的印象挺深刻，受助于给我的那些食物让我撑住了大半天，想想去年在稻城的时候也得到别人帮助，挺感谢的他们的，背包客在外需要互助。原本打算去德钦梅里那块，可得知在修路，天煞的三天通一次车，时间上安排不过来，取消吧

翻山在滇川

Day9

昨天买了车票，是到四川稻城，也就是说开始离开云南了向四川前行，而这行程有一天的翻山之路让我印象更深刻。因为顺路，跟我一起的还有那个台北女，除了沿途风景别致，还有人可以说话哈哈。途中差点出事故，翻山的拐弯处，应该一辆货车，货车司机没有听到汽车鸣笛声，差点给亲密接触了，好在两位司机经验丰富。时候司机更是小心翼翼，但丝毫抑制不住我的兴奋。天气有些阴天，开始起云雾，开始车程的一段时间就是在云雾里穿行彩虹！从未这边近的距离看到彩虹何其壮观，只恨方寸的相片表达不出我们当时的兴奋其中的一段路况，很惊险。这个季节，满山都是红叶绿叶黄叶。不相信？有下面就有视频司机人很好，中途停下车让我们休息。高清版视频随后会上传到flickr 翻山总感觉里天空很近很近整个车程基本就在几座上绕车子就走在这种路上，不小心翻车？后果不堪设想车子中途加水，图为当地的孩子继续行驶在风光如画的滇川翻山之路一路上美不胜收，一天的时间也不知不觉过去，到达四川稻城的时候已经很晚了

重回稻城

到达稻城青年旅舍，跟老板说到俺去年来过一次，老板相当热情说房价要跟我打半价。一般到达稻城的背包客都回去亚丁，我也因为去过，这次也没打算在去。同行的那台北女计划去亚丁，晚上一起吃了拉面，拿了些红景天给她，因为之前在中甸的北京男在亚丁时短信过来说高反了。。

Day10

早上睡到自然醒，然后一个人去里县区不远处，旅舍的老板笑着的对我说那树叶都掉光了，没啥好看，但呆着也是浪费时间，就去看看吧。青杨树，树叶掉的不是很多不远处就能看到雪山虽说有一片区域是枯木，但是还是能看到红叶的整一大篇区域貌似就我一个人，很安逸河旁边有个简易的木桥是的，并不是多有品种的树叶子都掉光天上还有飞的，时不时能听到叫声，乌鸦？老鹰？漂亮的地貌树的张力临近下午，光线很好第二次来稻城，住了住熟悉的旅舍，见到熟悉的人，看到不一样的景色，挺安逸的。晚上的时候台北女给我短信说到亚丁那块很漂亮很漂亮，可惜我已经订了次日去康定的车票，也就没在去了。

出发去康定

Day11

早上6点就爬起来去车站，天还未亮，买了些食物打算撑过着一天的车程。因为比较晚去买票，这次买到的是后排的座位，有种预感可能会不太好受，果然车颠簸很厉害，每一次人和座椅的撞击都能听到抱怨和欢笑声。这段是川藏南的路线，路上出了些意外翻山在川藏路线上，试想有人骑自行车行走在这样路线，从成都到拉萨，至少我是相当佩服他。当然自驾也是个好方法车子在新都桥加水，这里号称的是是光和影的天堂。上学？放学？的学生，很友好的向我招手当地的居民在采摘神马东西一路上查了至少4次身份证，晚上的时候到达康定去的那天康定作为甘孜藏族自治州的首府在庆祝建州60周年，非常热闹。原本打算去跑去二道桥泡温泉，可惜路管制了。在康定补给的下物品，好好的吃了个饭，洗了个澡（洗一半没热水。。我。。。），隔日就准备出发去成都

天府成都

半天的车程，终于到成都，因为之前有些路线取消，这也让我在成都多呆了几天，很舒服。之前呆了4年在这，离开一年，让我很想念这，虽然在这有太阳的日子很少，这是一个慢节奏的城市。

Day12

除了半天车程，剩下的就是玩，吃 “好大好满足。。”是的我好久没吃鸡肉了。。所以跑去德克士，确切的说是桂纶镁销魂的声音吸引我

Day13

除了很爽的睡到自然醒，剩下的就是玩，吃锦里的糖人四川脸谱面具另外我很奢侈的吃了份DQ的冰激凌。。另外成都终于把地铁建好了，不过只有一条线现在 Day14 除了睡到自然醒，剩下的就是玩，吃晚上，武侯祠前的大街吃吧另外今天我很奢侈的又吃了份DQ的冰激淋，在另外我又去德克士了。

Day15

周六了，老同学应该在家休息吧。联系了几个老同学，得知都在加班，不过他们还是请了假。很高兴一起吃了火锅，很爽。然后当然得去学校逛逛。在操场踢球的童鞋们，真幸福

Day16

中午的飞机，然后，然后就是回来杭州了。

剩下的三言两语

翻山去四川的时候，那个台北女跟我说自助游会上瘾，我很赞同的这观点。驴香有毒，不过无悔于在自己还年轻的的时候能到处走走，感谢这些照片承载的我那些美好的回忆，并在以后一次次回味。买门票进去的景点多了些人工干涉，更美的还是在路上。更多照片和原图随后会跟新到我的Flickr，当然如果有朋友打算行走于这条线路，我会乐意给你提供一些帮助。听说川藏北到川藏南的路线不错。。。累了的话，出去走走吧。

CSS Animation PPT Demo

wlsy — Mon, 05 Jul 2010 16:10:36 +0800

在几天前的一次内部分享中，因为内容涉及到css3 Animation 。因此也用了些CSS3 Animation 搞了一个PPT。各位将就着看来着，装备webkit核心浏览器，然后猛击看这里看这里。

迎新年换域名

wlsy — Thu, 31 Dec 2009 15:26:28 +0800

是的，换域名了，原来的域名做跳转，新域名为wlsy.me 。更加和谐，更加清纯。打打住，俺对天发誓wlsy真的不是你们想的wlsy，好了大家元旦快乐。

使用CSS3 创建动画效果

wlsy — Sun, 06 Dec 2009 14:35:23 +0800

在CSS3中新增了几个很好玩的东东：CSS Animation，CSS Transition 和 CSS Transform，顾名思义就是通过CSS来实现动画，过渡和变形。

它们的出现足以让我很兴奋了，我不必要在去写那些复杂的JS代码，运用它们我能更简单的创建自己的想要的动画。

应用前景

伴随着CSS3的普及，这些特性被各大浏览器支持也只是时间上的问题。有消息称在Internet Explorer 9 中将更好的支持HTML5和CSS3 从IE9预览版上看已经支持了。所以各位围观群众不必担心这只是昙花一现。以下是我就目前的浏览器支持状态统计的一个表格：

	IE8 -	chrome&safair	firefox 3.5.5 *(3)	opera 10.10- *(4)
CSS Transiton	X	O	X	X
CSS Animation	X	O	X	X
2D Transform	*(1)	O	O	X
3D Transform	X	*(2)	X	X

备注

(1): IE可以通过滤镜来实现部分变形
(2): 目前Windows下的webkit因不能调用GPU而不能支持部分3D Transform。
(3): firefox3.7称将支持更多CSS3特性，不过最终是否支持Animation和3D Transform还不是很确定
(4): oprea已经在表示在Presto2.3(opera内核)中将支持Transtion。可查看wiki

接下来要开始了，各位看官准备好chrome或safair，演示和代码使用webkit的私有属性，let’s 干吧。

CSS Transition

这个能实现很舒服的过度效果，先看CSS代码片段：



    .box {

        width: 200px;

        height: 200px;

        background: #ccc;

        -webkit-transition: all 1s ease-in-out; /*实现hover状态是backround的过渡*/

    }

    .box:hover {

        background: #333;

    }

你可以在这里看到这个演示，务必请用基于webkit的chrome或safair（以下同）。看完演示是不是很有兴趣想去学如何去使用了？

transiton属性有这几个值：

transition-property :* //指定过度的性质，比如transition-property：backgrond 就是只指定backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过度类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

小贴士

linear //线性过度

ease-in //由慢到快

ease-out //由快到慢

ease-in-out //由慢到快在到慢

timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在这里看到 cubic-bezier曲线图

Transiton和下面的Animation都是支持CSS伪类

同样的，这些我们可以简写，拿上面的代码 -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。

参考资料：
CSS Transitions Module Level 3 （这个是w3c的官方文档，英语好的可以详细看看）
http://webkit.org/blog/138/css-animation/ （这个webkit官方博客上的讲解，也有例子）

怎么样，赶紧打开编辑器自己写写吧

CSS Animation

顾名思义，这个就能实现元素的动画效果，那时我就被震惊了，无数次那尼感叹。可以先看下演示，代码如下

@-webkit-keyframes title { 0% { text-shadow:0px 0px 15px #000; } 50% { text-shadow: 0px 0px 30px #3995bd; color: #aac7d4; margin-top:200px; } 100% { text-shadow: 0px 0px 15px #000; } } h1 { -webkit-animation: title infinite ease-in-out 3s; }

animation有这几个属性：

animation-name//属性名，就是我们定义的keyframes
animation-duration //持续时间
animation-timing-function //同上面的transition-timing-function
animation-delay // 设置动画延迟
animation-iteration-count //定义循环次数，infinite为无限
animation-direction //定义动画方式

这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)，简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。

你是不是已经开始蠢蠢欲动了？

参考资料：http://www.w3.org/TR/2009/WD-css3-animations-20090320/

Transform

transform就是实现元素的变形，为什么放到最后？如果跟上面的CSS Animation结合起来是不是更酷呢？先看看这样一个演示，相信你不敢相信这只用CSS写出来的效果吧。

transform有几种类型：

scale(num,num) //尺寸，scale(2,3)即x轴方向放大两倍，y轴方向放大3被，同样的可单独写scaleX(2),scaleY(3)
rotate(*deg) //旋转的角度

在2d transform中旋转角度俺当前的平面顺时针或逆时针旋转。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转，同样可以简写称rotate(*,*)。目前已被chrome和safair支持
skew（*deg）//倾斜角度，同样的有skewX和skewY 可简写为skew（*,*）
translate //移动

在2d transform中分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离，而在3dtransform中新增了一个translateZ 及实现Z轴的移动，实现透视效果。目前在Windows系统上还没有浏览器支持，同样的这些可以简写。

了解完这些用法后在去看看那个演示的源码，相信你肯定会惊叹transform和animation配合的动画效果了吧

参考资料：

http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ （w3c文档）
3D Transforms （webkit博客上的文章，所以在Windows下没法看到，不过那里有截图过过瘾，并有一个很酷在Windows下打了折扣的demo哦）
http://www.zachstronaut.com/lab/isocube.html(这个就是用transfrom实现的立方体)

结语

看到这些，你是否跟我一样期待HTML5和CSS3的快点普及呢？在运用这些新特性能快速而简单的创建原本需要复杂js来实现的动画效果，这是多么让人兴奋的。

不过这些还是有那么些缺点的，CSS Animation的确很酷，但不得不提及它的资源占用问题，CSS transform的确很神奇，但不得不提及它的锯齿问题，当然了这些问题相信浏览器的开发者会逐渐改善的。

有关web前端中的语义化

wlsy — Sun, 28 Jun 2009 17:35:16 +0800

作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念，于是乎也就花点时间搞搞它。语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意，哇哈哈，其实我也就算只比较老的菜鸟而已，本文不是说教，只是分享有关语义化的一些东西。

那什么是语义化呢？

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”娘的，太抽象了。其实在那个用4000W打造的超级防猥琐的绿坝就有个叫语义分析的功能，如果发现不健康信息，立马对其进行关闭，哼哼。

通过强大的拆字我们可以简单的理解它为：用特定的语言来定义特定的事物。在web前端中语义化标记也可以这样理解。

绿坝它全家靓照

你是不是特别特别喜欢div标签？

在刚开始学习web前端时想必你肯定听说div+css布局，说的那是如此好如此妙如此呱呱叫，于是乎你就div+css了，div套div，div何其多，去w3c验证发现还能通过，仰天长呼，so easy，so easy。

然而堂堂的(X)HTML就一个div标签？答案肯定不是，那其他的标签是不是没有用？答案更不是。任何事物存在亦有它的价值所在滴。在初学XHTML时，我曾经犯了一个很傻的错误，在定义几个行列表项时我是这样写的：

<div id="list">

虫下米<br />

wlsy<br />

虫下米wlsy合体<br />

</div>

你别笑，我当时真的是这样写的，只不过其中的文字记不清了，写完后发现在浏览器中是我想要的结果也就认为代码是正确的。代码是正确的吗？代码当然是正确的但是不规范。在XHTML中有个专门定义列表的标签ul（无序列表），ol（有序列表），dl（定义列表）。所以更加规范，更加有语义的我们可以这样写：

<ul id="list">

<li>虫下米</li>

<li>wlsy</li>

<li>虫下米wlsy合体</li>

</ul>

在学习XHTML时，应尽量能够熟悉有定义到的标签，并在特定的内容加以应用，比如我们可以用strong(用strong来替代b)标签来强调内容，用Hx(h1,h2…..)来定义标题等等。我可以吐血奉献我搜刮到一些资源：XHTML Cheat Sheet（这是常用的XHTML标签表格，可以下下来看，不过是英文的），HTML 4.01 / XHTML 1.0 参考手册（这里面有标签的详细用而且还配有实例），在早些时候我有写过一篇：几个不太常见的(X)HTML标签。

另外关于语义化标签蓝色理想上有篇帖子很不错：http://bbs.blueidea.com/thread-2658231-1-1.html

所以呢相对于叫div+CSS布局，我更喜欢叫做(X)HTML+CSS布局。

结构命名中的语义化

这里说的结构就是就是我们平常编写的XHTML代码，而命名就是我们为id或class所取的名称。

有个例子是这样的，你是不是有时会类似这样来写代码（代码比较粗糙演示用）：

<div id="left">

<p>今天是个好天气呀</>

</div>

<div id="right">

<p>我的一些照片</p>

</div>

CSS代码：

#left{float:left;display:inline;width:50%;}

#right{float:right;display:inline;width:49%;}

但是某天我突然闲着没事想换个布局来增加新鲜感，比如对掉左右边的内容，那么我仅仅要在CSS里面这样改：

#left{float:right;display:inline;width:50%;}

#right{float:left;display:inline;width:49%;}

结果呈现的效果确实是你想要的，但是为其id命名是不是违背的你的原意？你原本命名id=“left”的div内容的意思就是要在左边显示，而现在却显示在右边了。虽然结果是你想要的，但是命名好像很别扭的跟你做对。所以如果要对其进行语义化的命名我们可以这样来：

<div id="content">

<p>今天是个好天气</p>

</div>

<div id="sidebar">

<p>我的一些照片</p>

</div>

这样命名为content就是内容，命名为sidebar就是边栏，管它上窜下跳，左躲右藏，命名内容块始终为包含内容，命名边栏块也始终包含边栏。这个例子就是语义化命名的实例，很好理解吧。

看看我是怎么给自己的网站结构命名的：

结构命名为常用的英文单词，多词之前用-来分割。因为是个人博客所以命名也就没什么其他特殊要求了。如果想看看其他的网站的命名推荐各位用firebug，这是在Firefox的一个插件，能很方面的查看，修改和调试代码。

这里有一些有用的文章能够让你更加理解结构命名中的语义化：

CSS类命名的语义化VS结构化方式（这篇文章有很好的配图帮助你理解语义化命名）

语义化有什么优势吗？

当你写完代码后在浏览器调试，如果呈现的结果是你想要的，你是不是就不会再去检查你的代码了呢？访客能看到浏览器解析后的实际页面，但是你想过流量的另一个重要来源：搜索引擎吗？

语义化更有利于SEO

有个很常见的例子是这样的：在初学SEO的时候你是不是经常用h1来突出你的标题，用strong来突出你的关键字，或许你不太在意，但这确实是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析的你源码来体现或猜测网站要表达的内容。比如你想表达某篇文章的标题，你或许会这样写：

<div id="title">文章的标题</div>

访客或许能理解你的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

<h1>这是标题</h1>

小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

当然语义化还有其他优势：

正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解你的代码。语义化代码也更能帮助视障的人通过设备来理解你的内容等等。当当然语义化代码也是你能力的体现。

一些资料：semantic code: what? why? how?，

4 Ways CSS Can Improve Your SEO

语义化的更高体现-微格式

什么是微格式呢？维基百科这样给它定义的：

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。

从技术上来说，这些数据是一些语义标记，用标准的(X)HTML中的class名称设置。他是开放、可用、自由的，可以被任何人使用。

维基百科上还有一个实例我就不贴了，你可以到这里看到。

在往后，当搜索引擎越来越重视微格式，在你的网站上应用微格式肯定会为你加分不少。在应用和推广微格式上面，我觉得wordpress做的非常的好，在之前应用了诸如：rel=”tag”，rel=”nofollow”,rel=”license”后，在升级到wordpress2.8后我发现它在header处新增了这几个：

根据字面意就是帮助搜索引擎理解本页的主页，开始页，上一篇和下一篇。不过目前有些微格式还处于草案当中，并不能确保它在最后时还在。要想关注微格式你可以看看它的官方网站

微格式还有个很经典的例子就是名片的应用，它也就是通过一些很有语义的标记来描述个人信息，如果你想折腾微格式还是有得折腾的，为了避免篇幅过长下面给出写有用的了链接方便有兴趣的继续折腾。

微格式全功略Hcard、hCalendar、hReview、XFN 轻松掌握（这几个微格式也就是主要来体现个人信息，这篇来自ued163）。这里也还有一系列的翻译译文http://www.mijia.org/blog/?p=152能够帮助你很好的理解微格式。

end～

对“优化网站速度”的几点补充

wlsy — Sat, 23 May 2009 23:22:53 +0800

如果你对标题感到了深深的疑惑，来这里（优化网站速度的几种方式）看看先:-)

首先要补充解释下一个叫“性能黄金法则”的东东：

只有10%～20%的最终用户响应时间花在了下载HTML文档上。其余的80%～90%时间花在了下载页面中的所有组件上。

这里说的组件就是网站中的图片，CSS和脚本等等。所有着重优化的地方就在这些组件上面了。

第8点：把JavaScript和CSS放到外部

把JavaScript和CSS放到外部的优势我就不用讲了，不过我确看到在诸如像腾讯，淘宝，网易等这样的访问量巨大的网站中的首页使用了内联，并非把脚本和样式外置，而令我疑惑不解的是这种现象只在首页上出现，在查找和翻页相关资料后我找到了答案。

在这些网站中，首页的布局和内页有着很大的区别，也就是首页上的组件重用率很低，而且也有很大一部分的访客只访问了首页。首页的访问量是巨大的，很多企业都希望能有更快的访问速度，使用内联的会比外置来的快些，毕竟减少了HTTP请求次数，当然这也要考虑到缓存的影响，拥有缓存的访客和空缓存的访客（也包括喜欢关闭浏览器清楚缓存的人）这个也比较难以量化。

到底是用外置还是内联这个也没有明确的答案，还有挺多门户网站使用了外置，所有这个主要还是要看企业的决策，但是对于访问量不是很大很大的网站我还建议使用外置。

第7点：避免使用CSS表达式（Expression）

现在大部分的人都会说使用使用CSS表达式会影响性能问题，不过有个和简单的方法解决了这个性能问题，在这里查看（需要*代*理，可恶的文×字@狱），简单的引用：

因为我发现，第一个缺点是可以解决的。方法就是，在 expression 语句体里面，将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));}，执行这段 CSS 会发现，alert 只跑了一次。

没有了性能问题，那么就能解决了很多IE6的bug，但是我还是建议不要用，首页微软已经在IE8取消了对CSS表示的支持，这也表明了微软也打算放弃这个了，另外如果要修复IE6的一些BUG或增加功能等，推荐使用IE7.js。在早些文章你能找到。

第10点：压缩和削减JavaScript和CSS

目前压缩JavaScript主要有混淆和精简。混淆能比精简多压缩些，不过这样得不偿失，特别是在通过了Gzip压缩后效果都是差不多。

在早些时候我也有过这样的疑问，如果启用了gzip压缩，是否要对脚本进行精简。这里简单的说下，如果你启用了gzip压缩后在对脚本进行精简的话还是能减小大小。

最后跟新下：推荐使用YAHOO的Yslow

从例子中看栅格系统设计

wlsy — Sat, 16 May 2009 05:39:30 +0800

其实叫栅格系统还是网格系统（Grid System）也没有明确的说明，早些看到一些关于栅格设计的文章，不过理论性偏强，不太容易理解，自己很早就想写篇相关文章，不过前几天去了灾区，所以就拖到现在了。我还喜欢从实际的例子中来了解，如果你对栅格有了初步了解可以直接跳至下面，那里有延续阅读，链接到众多业界人对栅格系统设计的理解。

好吧，折磨开始。栅格设计有嘛好的？维基百科中给栅格设计的定义特征和原则为：

栅格设计的特点是重视比例、秩序、连续感和现代感。以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。

我个人认为栅格设计主要有这几个特征：

既然是以“格子”来设计，那么就要有一定的规范和比例性，也就是能够快速的对页面进行重组而不失比例。比如你有好几个方块，你向别人介绍的时候说的是这个宽有5个方块的宽而不会在精确的说我的宽是540px，这在团队合作的时候优势的很明显的，界面设计师不必要想前端工程师说具体的数值，他们在这个栅格系统下就好比如有共同语言，而且在保持页面的规范也很有帮助，当然栅格设计的优势不仅仅这些。

不过我不认为栅格设计都适用与所有网站，对于诸如没有重复设计的个人网站博客或者其他网站来说根本没必要把简单的问题复杂化，可以很直观的设计比如主体宽多少，边栏宽多少，但是对于大型门户网站来说应用栅格设计效率的提升是明显的。

好吧，说的我都想睡觉了，看例子。

在第一张图中我们看到这个网站的界面设计并没有什么特别的，普通的三栏设计。在第二张图中很清晰的看到的，网站三栏设计都是很规则的按照比例来，也就是它具有很明显的栅格设计特征。横向有12栏，每个栏宽度60px，栏之间的间距（可以叫槽Gutter）为20px，实际上是每个栏的左右空白边为10px。

这样算下来Full Width=12×（60+10+10）=960px，而实际的Content Width:为940px，因为扣掉左右两边各10的空白边。为了能够更直白的理解可以看这张图：

如果曾经有稍微研究过的童鞋应该会发现这个貌似应用了960GS。是的确实是这样的。960GS是我比较喜欢的一个栅格系统设计框架，主要是代码清晰易懂，而且在第一行和最后一行不需要进行特别的处理。960GS官方给出的演示有12栏和16栏，栏数越多也就是代表着在同样的宽度下栏宽越小，灵活性也就越大，能够组合数也就越多。

好的现在来看看960GS这个栅格系统框架的主要代码：

        1: <div class="container_12">

       2:     <div class="grid_8">

       3:             ...

       4:     </div>

       5:     <div class="grid_4">

       6:             ...

       7:     </div>

       8: </div>

container_12代表为主体为12个栏，grid_n这个代表有几个栏宽的宽度。从上面的代码可以看出这个是个两栏的布局，左边有8个栏（注意这些栏的宽度是包含空白边的），右边有4个栏。根据上面知道在12栏中每个栏的实际宽度为：80px=60px+10px+10px，这样我们就很容易的算出演示代码中左边的宽度为640px，右边的宽度为320px。

我想有人会问了不就是两个栏的布局吗，何必弄的这么复杂呢？在上面我就说了，对于小型网站确实没必要这样，但是对于大型网站的前端工作者来说可以大大提升他们的效率，在团队合作中亦是这样。在代码中我们看到在传递宽度的大小的时候已经从精确多少px转变成了是几个栏的问题，而且在以后想改变某个布局的宽度的时候也很简单，比如左边可以变为grid_9,右边为grid_3。如果说当时css的出现并取代table布局大大的方便的前端工作者，那么栅格的出现也就是更进一步的方便了前端工作者。

当然960GS不止这么简单，想进一步了解的话可以访问官方网站http://960.gs/

好了，我们现在返回去理解栅格系统设计。

1：在上面那个例子中的第二张图我们可以通俗的讲网站的设计是基于某个宽度的“格子”来设计。

2：在基于这种“格子”来设计，它看起来很规范和易读的。

3：在基于这种“格子”来设计，它看起来是相当的灵活，在想改变布局的时候也是很简单的。

从CSS框架上理解栅格是个好方法，另外目前大部分的栅格系统布局都是定宽的，如果需要流体布局可以参考960GS的衍生版本Fluid 960 Grid System。类似960GS这样的框架还有：blueprintcss，YUI Grids CSS，等等，而在进行画图是如果需要配合栅格来画图可以在这里下载到psd分层模板。

当然这篇文章只是初步的介绍栅格系统设计，如果有兴趣可以继续阅读我整理的资料：

栅格：1）从混乱到秩序2）一以贯之3）灵活应变（这个系列文章能帮你初步了解栅格，并劝告你在设计栅格系统时应该让栅格去适应元素的混合，而不是要强制元素去适应栅格）

网页的栅格系统设计（这一篇更加深入的讲解栅格系统设计）

网页栅格系统研究：960的秘密，蛋糕的切法，粒度问题，技术实现（这是淘宝玉伯对栅格的研究）

如果英文比较好的可以看这些：

Five simple steps to designing grid systems：Subdividing ratios，Ratios and complex grid systems，Grid systems for web design: Part 1，Part 2 Fixed，Part 3 Fluid。

或者其实你完全可以自己在Google输入栅格或grid system，看看国内外的人们对栅格的理解。

汶川大地震一周年，我的灾区三天行程

wlsy — Thu, 14 May 2009 05:13:46 +0800

前言：去年5月12号的汶川大地震依然记忆犹新，毗邻灾区，很早就打算在一周年祭的时候进行一次特别的旅行，亲自到灾区去看看，感受他们一年后的生活。行程从成都开始，5月11号出发，历时三天。

早前打算从成都到都江堰绕一圈在从绵阳回来，但是在得知都江堰到映秀的那条高速在12号才通车，而且也得知北川到茂县的那条路还没修好，也就是北川和汶川只能去一个地方或者沿途返回从另一个方向去另一个地方。我打算先从绵阳出发去北川，到时候在见机行事，回来的时候证明了这条路的选择是正确的。

第一天：

从成都做火车到绵阳，绵阳火车站稍显的冷清，细看主楼也有很多裂痕，车站周围也有很多板房。

绵阳也是一个旅游城市。到绵阳的时候很感谢霖子MM带到车站并很顺利的买到了到北川的票。

沿途很多类似这样的励志宣传牌。

这桥估计是震后新修的，行驶中拍摄不是很清晰。

行驶了2个多小时，终于来到北川羌族自治县，车在北川中学旁停下了。北川中学校门。

进入校门，第一眼看到的便是这个悼念横幅。进去后开始下小雨，“校园”很清静。

爬到一座老楼看了现在的北川中学，旁边是一位老教师给我们介绍情况，那天他正好去了成都。

菊花，代表着对过往的人们的思念。

小女孩很天真可爱

“亲人安息了，我们还忍心惊扰他们吗？”

这就是已经成废墟的北川中学教学楼。

找了家饭店吃了晚饭，在吃完饭后找旅社时，看到了这个来之前没留意到的。

北川县城封锁了，我们只能到山中间的望乡台俯视已成废墟的北川县城。

地震的时候，整个县城是毁灭性的下陷。这也是这次地震受灾最严重的地方。

还是没在北川找到住的地方,不过很幸运我们搭到了便车可以到安县去找旅社,司机人非常的好。这是在路上人们在跳锅庄舞，他们没有因为一周年而哀伤，相反的很快乐幸福，司机给我们解释说，他们经常往返安县和北川却很少看到这种庆祝活动，主要是为了感谢人民的关心让灾区能够快速的重建。司机看我们很好奇，于是就停下车让我们去拍照。

小女孩相当的可爱漂亮。

在我的提议下司机和同行的人很爽快的答应合照。为了避免引起骚动，我决定对我的脸蛋进行和谐处理。

在北川的时候我们也得到了一个消息，可以在擂鼓镇做jeep翻山转车去茂县在到汶川，而且明天新北川也将举行奠基仪式，新北川择址在永昌。

第一天结束

第二天

第二天早早的起来，从安县到擂鼓镇，在做jeep翻山去禹里乡，过程实在艰险。耗时大概2个小时。

从禹里乡在转车做面包车到茂县，面包车颠簸实在厉害，耗时大概2个小时

到达茂县的时候已经是下午2点了，原本打算在2点28分的时候能赶到汶川，看来是来不及了，于是就现在茂县吃饭并逛逛。

茂县在这次地震中的灾情相对去其他地方还算比较好。

茂县人民政府

很多当地的居民都围在灾后重建宣传栏，遐想着重建后的美好景象。

茂县的地理环境或者可以说四川阿坝州的县区的地理环境大部分都是四面围山，中间有河流贯穿整个县区

广场上人们休息玩耍着，很高兴能看到他们已经恢复了以往平静的生活。不过小朋友还是不要那样，很危险的说。

当地信奉，他们很多房子也都会有羊角。

这个家伙叫什么我实在搞不懂，知道还希望能告诉了解下。忧郁的眼神，我想起了神兽。。

从这里开始出发去汶川。

汽车耗时两个小时左右到达汶川县。比我想象的要平静的多，得知原来胡哥去了映秀。

汶川县城的伤痕

街道两旁随处可见这样的标识，看来重建是个漫长的过程

不过更多的是正在建设的施工队。正在建设的汶川一小，预计8月完成

建设中的汶川二小。教育是根基。

汶川县人民政府

政府前挂的签名横幅。

经过的一所临时幼儿园，鲜花盛开

在三轮车夫的带路下，来到了河对岸的施工地，那里在调试晚上的纪念活动，没记错好像是广州市电视台。主持人不认识。

“2008年5月12日14时28分汶川发生里氏8.0级地震”

记忆与希望，时钟永远停在了2点28分

在工地旁边有个展览馆。

这天晚上我们就在汶川休息了，很累。本来打算想去映秀镇，不过胡×锦@涛去了那估计我们也进不了。映秀也属于汶川，而且也是这次大地震的震中。

第二天结束

第三天

已经是13号，不过来映秀的很还是很多。

隔着围栏看到，映秀小学的学生快乐在进行课间活动

地震遗址

漩口中学的校门。注意看们左边的那个导游牌，很高兴映秀逐步的开发成旅游区，这或许是不幸中的万幸了。

漩口中学里面的地震纪念碑

菊花，寄托思恋的信物

漩口中学教学楼遗址。时钟亦永久停在2时28分

都是地震遗址

遗址旁边渐渐有了生机

灾区的人们住的都是这种板房，包括政府单位等等

几个老兵的到来，人们都凑上去想他们询问和了解曾经的这里。

哀念

爬到半山腰，俯瞰现在的映秀镇。

在山腰中的渔子溪观景台看到的废墟中的映秀

山坡上有一个灾区安置点

安置点的人们都很悠闲，小朋友发现我在拍他腼腆的比着v字形手势

看得出来他们的生活还是很不错的

这就是那块天崩石，是这次大地震掉下来的最大的石头，为了证明它很大，本人决定再次上阵当参照物，这次不和谐了，反正你们也看不清。:-)本人身高180

从这里掉下来，中间那个是国道213

离开了映秀，来到了都江堰，几处受灾严重的都有武警护着，禁止进入。自己走了走，晚上的时候就会成都了

第三天结束

结束：三天的行程很快就结束了，很高兴的看到灾区的人们都很快乐的生活着。祝福淳朴的四川人民。