我们的故事

html5 带来了什么？ html5 与 css3

dUcky — Wed, 03 Mar 2010 14:46:26 +0000

html5 已经被热议了很久，什么是 html5 以及它发展的情况不去赘述，要强调的是 html5 工作组得到了 Apple 以及 Google 两巨头的支持。详细可以查看维基百科关于 html5 的描述。

html5 的标签

与 html4 或者 xhtml1 相比，html5 带来了新的标签，废弃了一些旧的。举个例子，现在我们写一个普通的新闻页面里的内容是：

<div id="header">ihandu.com 我们的故事div>
 
<div class="content">
    <div class="news">
        <h1>dUcky的blog: ihandu.com 我们的故事h1>
        <div class="detail">
            <p>i,dUckyp>
            <p>Bio:交互设计 前端 Gfans html5 带来了什么？ html5 与 css3p>
        div>
    div>
div>
 
<div id="footer">2010 ihandu.com 我们的故事 版权所有div>

那么用 html5 该怎么写呢？

<header>ihandu.com 我们的故事header>
 
<section>
    <article>
        <h1>dUcky的blog: ihandu.com 我们的故事h1>
        <section>
            <p>i,dUckyp>
            <p>Bio:交互设计 前端 Gfans  html5 带来了什么？ html5 与 css3p>
        section>
    article>
section>
 
<footer>2010 ihandu.com 我们的故事 版权所有footer>

终于，我们可以真正的摆脱所谓 “div+css” 的标准化了，省去了很多 class 以及 id …

html5 提供了更多的语义化标签，比如：

<header>页头header> 
<footer>页脚footer> 
<section>文档中的区块章节section> 
<article>文章article> 
<video>视频内容video> 
<audio>声音内容audio>

等等……

当然，html5 也抛弃了一些标签：
center, font, u, strike, s, frameset, frame, applet

我们看到 frameset 和 frame ，那么框架结构在 html5 里就不复存在了，在我看来，这是个好事情。

关于 html5 标签的详细可以参考：html5 参考手册

css3 高级选择器

那么 html5+css3 会是什么样呢？看代码：

<section>
    <section> -------------------------------- 1
        <section>section> ------------ 3
        <section>section> ------------ 4
    section>
    <section> -------------------------------- 2
        <section>section> ------------ 5
    section>
section>

CSS3 提供了很多高级选择器：

section>section{}  section 直属下级的 section (编号1和编号2)
 
section>section:nth-child(1){}  二级 section 中第一个 section (编号1)
section>section:nth-child(2){}  二级 section 中第二个 section (编号2)
 
section>section:nth-last-child(1){}  二级 section 中最后一个 section (编号2)
section>section:nth-last-child(2){}  二级 section 中倒数第二个 section (编号1)
 
section>section:only-of-type{}  section 下只出现一次的 section (只能定位到编号5)

要弄清关系必须多用，我项目中会用到 css3 的选择器来 hack ，因为现在 IE 看不懂…

CSS3 选择器相关的可以参考：css_3_selectors_explained

html5 与 css3 的浏览器兼容性

上面说到浏览器兼容性，那么哪些浏览器支持 html5 以及 css3 呢？

Safari 4+, Firefox 3.5+, Chrome 3+ 已经支持
Opera 10.5 已经部分支持
ie9 支持 css3 ，有可能支持 html5 …

html5 更多的亮点

html5 还有更加强大的其他属性，比如：canvas、本地存储和 web socket 等等。

Google 已经宣布放弃 gears 而用 html5 作为离线存储方案；youtube 以及用 html5 架构页面等等，相信未来会有更多关于 html5 的惊喜。

随机日志

嘿，我是Lucky #saveLucky

dUcky — Wed, 20 Jan 2010 13:51:24 +0000

今天是Lucky被遗弃的第四天，今天Lucky回家了，贡贡把她带回了家。

四天前，拖着带血脐带的Lucky和她的三个姐妹在南京路边的塑料袋里冻得瑟瑟发抖，如果不是我们好心的女童鞋带回公司宿舍，可能早就被冻死。虽然悉心照料，但是很不幸，狗狗太年幼，白天也没有人照顾，有两只在下班回去的时候身体已经冰冷，一动不动…

到底是谁会这么做？是不是因为这四只都是母狗狗呢？被冻死、饿死，这样是不是太残忍了？我们想找养过狗或者家里有狗的朋友收养，但是狗狗才几天大，而且别人不知道狗的来源总会有些顾虑，所以我们只能自己努力，白天为她开着空调，中午回来喂一些奶再去上班。但是仍然有两只撑不住离开了。

今天好心的贡贡顶住老婆的压力，带走一只我们称为肉包的狗狗到家里养，还特意买了婴儿奶粉、小奶瓶和奶嘴，而且家里白天有人可以照顾，相比其他两只已经离去的狗狗以及现在还缺少照顾的豆沙包，肉包很坚强，也很幸运，所以贡贡叫他Lucky。但是Lucky才4天大，不知道能撑多久。

另外，豆沙包，你的未来会是什么样呢？我们不敢猜。

我们需要帮助，告诉我们要怎么做，这两只狗狗才能活下去。

———- 2010年1月21日 ———–

两只狗狗一夜之间都走了，Lucky全身僵硬了5次，前4次都缓了过来，最后一次再也没有动…贡贡一直照料到凌晨两点，眼睁睁看着Lucky无计可施。

Lucky来到这个世界才5天，也只有5天。

随机日志

音乐爱与和平“上太空说”陶喆2009南京演唱会

dUcky — Tue, 08 Dec 2009 16:37:45 +0000

持续两个半小时的演唱会，没有华丽的灯光，没有热闹的舞美，甚至也没有一般演唱会结束时喷射的彩片。只有一张沙发？一些古旧的家居摆设？电视机？还有地球仪？欢迎来到陶喆的客厅，这里只有 music, love & peace.

由于12月上海演唱会的取消，所以很多上海的歌迷都来到了南京，在停车场还看见了上海来的大巴。几个地方歌迷聚集在五台山体育馆，来到原本应该是客人的陶喆的地盘做客。

就是这样，DT就是坐在那儿抱着吉他唱了好久。还有那首我最爱弹的寂寞的季节。

请原谅我狗血的佳能傻瓜机，相片效果很差，我已经不能忍受…

喂，你好吗？……

后面的是郭子老师吗？两人呼应的很好。

陶喆陶醉中…

你离我如此的近，我的相机如此的狗血…

下面看图不说话…

只有音乐、爱与和平

DT感谢这场异常出色的乐队，你们都是最棒的。

分享一段现场视频，飞机场的10点半&女歌迷上台，很羡慕啊，可以DT只要女生…

最后DT带着乐队向大家鞠躬，相机已经没有电了，我使劲的不眨眼睛，害怕漏掉一点什么。DT，没有音乐，还有电影，很期待！

谢谢Eason“90分的快活”陈奕迅2009南京演唱会

dUcky — Sat, 28 Nov 2009 20:28:37 +0000

谢谢Eason，带给dUcky和Lynn一个疯狂的夜晚，超过“90分的快活”。从8点开场到10点结束，南京五台山体育馆，整整120分钟，全场的观众都站着“唱”完了演唱会，一个大型的KTV。Eason保持他搞怪的风格和实力的唱功，气氛非常high。

等待着陈奕迅Eason的出场。

Eason站在舞台上，渐渐把气氛点燃。开始我的位置在3层还比较远，下面我就慢慢摸到下面去了…

全场KTV。

唱到兴头上，Eason什么动作都有了，躺着唱，坐着唱，跳着唱。我也已经成功潜入到1排啦～

全场的气氛high到极点，没有人能坐着，因为坐着就看不到了，一起跳吧！

越来越疯狂，一直在叫一直在跳，我也从3层“跳”到了2层1排，可是角度仍然不好…但是距离Eason已经非常近了，最近不过10米…

太近太近了，就快碰到了，拍了几张都特别模糊，可能是太激动太紧张了…

Eason演唱中。

Eason也有安静的时候，全场一起大合唱。

Eason竭尽全力，挥洒汗水。

华丽的结尾，谢谢Eason。

寒冷的冬夜被沸腾了，陈奕迅Eason在南京连唱两天，好像27号那场是什么集团包场，大家评价说很沉闷，开始很担心，结果给了我们一个惊喜。虽然离Eason近在咫尺，但都是右脸…杯具…所以咱们不要怕，往前蹭，大不了被赶回来呗…不过这次差点，上次阿岳演唱会我蹭到了VIP1排…

傻瓜机，所以片子质量不好，多担待…最后奉上《浮夸》（土豆审核时间好长…），Eason现场Live，有NG…

Lets Wave – 惊喜的 Google Wave 邀请

dUcky — Wed, 14 Oct 2009 13:01:11 +0000

折腾了好久的Google Wave终于折腾到我头上了…之前第一批测试用户很少，而且没有邀请。这次大概有10万用户受邀测试使用Google Wave服务。

下午还在开会的时候收到一封标题为《Your invitation to preview Google Wave》的邮件，真的是不敢相信。看了内容，应该是很久以前递交过给Google一份使用申请，没想到这次还真的排上我了…

“Thank you for signing up to give us early feedback on Google Wave.” 应该是就因为这个吧。

登录Google Wave以后会得到8个邀请的机会，邀请你的朋友也加入Wave，而且这8个邀请也是通过一条”Wave”操作的。瞬间就把邀请发光了…而且现在只有这样的第一代有邀请，被邀请者是不能再邀请别人的。

一开始联系人中没有几个在使用wave，这个时候可以在搜索框里输入 “with:public” 搜索所有公开的Wave，并且结果还在不断更新，绝对海量…点进去一个看很杂乱，不过有快捷键，按空格可以直接跳到本Wave下的下一条未读的信息。

用公开给所有用户的Wave发招聘信息是个不错的主意……

Google Wave里可以添加各种媒体以及Google的各种插件，具体的可以参照Google Wave的示例代码，每个用户的每个步骤都会被记录下来并且可以回放。刚开始用，正在摸索中，我想我都收到邀请了，应该越来越多的人都会有。这东西大家一起来用才有价值，可惜我的联系人里还没几个用Google Wave服务的，邀请已经发了，但是收到邀请的时间好像有点长…

可以在twitter与我交流： twitter @iducky

——– 2009-10-15 0:50 ——–
腾了几个小时的 googleWave 我崩溃了…好难操作…

所有的列表内容都是通过搜索条件出的结果，可以保存自己的搜索条件，比如说公开的中文Wave的搜索条件 “with:public lang:zh” ，还可以建立自己的文件夹，但是我不知道怎么把Wave拖进去…

之前拖拽到垃圾桶可以删除index里不要的Wave，但是现在不行了…不知道怎么把公开的 Wave 存进文件夹，拖拽完全不起作用…有的Wave里我写着写着就输入不了中文了…昏了昏了… via

——– 2009-10-31 22:50 ——–
时隔半个多月我又一次登录 GoogleWave ，发现怎么又多了12个邀请名额，现在还有人没有吗？另外Wave里个人资料的头像是上传到Picasa的，由于无法访问，所以没事就不要换头像了…

@方便面已经发给你了，请等待…

另外想要邀请的童鞋可以在twitter上 follow @iducky ，联系我就可以了。

Android 中的魔术师 HTC G2 Magic

dUcky — Thu, 08 Oct 2009 05:32:00 +0000

由于我之前的手机悲剧性的丢在了厦门，所以一回来以最快的速度入手了HTC G2 Magic。其实一心想入G1的，但是丹凤街G1缺货，而且G2的价格和G1几乎差不多，大概贵200左右，入的价格是2440米，要比G1轻薄很多，毕竟少了一个键盘。上面看到的是G2 Magic有趣的解锁。

G2 Magic的外观，屏幕分辨率是 320×480 px 。

还是比较轻薄的，比G1柔和很多，白色的G2 MM应该比较喜欢。

白白的轨迹球，手感很舒适，会发光…

拿来的时候刷了G3 Hero的ROM，但是由于G3 Hero在初始化的时候没有设置Google账户同步，之后在系统里是没办法成功设置Google账户的，这应该是G3 Hero的一个Bug。而且wifi也有可能没法使用。但是对于原G3的机器，选择初始化回原厂设置重新设置就可以了。对于G2刷成G3的机器，初始化以后就没法进入系统了，在Hero启动画面不停死循环。 via

没办法，重新刷回G2 Magic的最新ROM，可以随时设置Google账户的同步，但是又来了一个问题，就是由于GFW的限制，gmail同步、market程序的下载以及其他一些同步服务会无法正常使用。不过根据这几天的情况，白天是可以正常使用的，晚上就不行了… via

G2 Magic包装里没有提供光盘，你必须去下载一个驱动才可以和电脑连接，同时可以安装一个apk安装器，安装apk程序会变得非常简单。点击这里可以下载到 via

这里推荐的相关论坛是安卓网，程序、刷机、小白的问题都可以查询到。

刚入手没几天，感觉不错，由于都是烤漆，指纹比较厉害，这在考虑入一个套…

你好鼓浪屿。五昼夜（第二天）- 厦门自助游记

dUcky — Wed, 07 Oct 2009 18:02:11 +0000

早上起来，天气还是很好，终于可以在白天打量一下厦门这个城市。今天的目的地是鼓浪屿，我们将在岛上住一天，一路直奔轮渡码头。人很多，轮渡到鼓浪屿是不要钱的，但是回厦门市区每个人要8元。我们住的酒店离轮渡不远，所以边走边看，也很安逸。

厦门的建筑总很古朴，但又不是那种古典的感觉，有很多西方的元素。

被人群挤上轮渡前往鼓浪屿，一座离不开海的城市。赶上这个假期，岛上的人非常多，我们先把东西放在了客栈，订了靠海边的“听涛小筑”。

房间还可以。

站在阳台上可以看到大海，但是有树遮挡。

出门买了个椰子和莲雾，那玩意我从没吃过，很酸…

我们首先的任务是在鼓浪屿上找吃的，所以来到了这里的市中心：“龙头路”。可能有人和我们一样买了手绘地图，我建议在龙头路上的新华书店买，质量好很多，明信片印刷也好多了。但是就算有手绘地图在手，你也很难找到想去的地方，这里到处都是龙头路，走的晕头转向…

这里也有DQ哦。

潘小莲芒果酸奶。

babycat馅饼屋。

赵小姐的店。

张三疯欧式奶茶店，其实张三疯是一只猫。而且现在已经在贩卖T恤和一些周边产品。

马拉桑的榨鲜果汁，4，5个橙子榨成一杯果汁，很浓哦…

传说中的龙头鱼丸店。

吃了很多东西，比如土笋冻、炸五香、蚵仔煎等等，之后我会专门写一篇关于厦门美食的…吃饱了就到处逛逛，这里有很多老别墅，可惜我的摄术不精，不知道怎么拍。喜欢摄影的童鞋应该会很喜欢那里。

李家荘咖啡店。

破败的围墙。

鼓浪屿上人们用的水表。

毓圆里的雕塑。

之后去了菽庄花园，门票好像是30。里面有钢琴博物馆，还有亭子啊，石桥啊人造景观一堆。景色也还好，个人觉得性价比不高…

在菽庄花园里。

菽庄花园里遥望沙滩和落日。

远处就是日光岩。

晚上9点以后去皓月园是免门票的，白天的票价好像是15元。所以本着节约的宗旨，我们晚上9点才进入皓月园，里面是一尊巨大的郑成功石像在海边，翘首望着海的那一边。由于夜间拍照效果很差，照片就不放了。之后就是夜宵时间啦！

在马拉桑旁边的牛肉店，沙茶面牛肉面都不错，而且这里的卤牛肉50元一斤，最少一斤起卖…

粒粒香肉燕皮扁食，很好吃。

林记鱼丸，也很有名哦。

猪肉脯最著名的当然是黄金香了，老字号。

第三天的内容是日光岩，以及回到厦门后去集美。而且就在这一天，我把我的5800给丢了…还是在出租车上。后来接通过被挂断，再后来就关机了，很郁闷…还好昨天刚入了G2 Magic，算是安慰了…叉的有点远了，下一篇就是第三天的旅程。

未完待续…

你好厦门。五昼夜（第一天）- 厦门自助游记

dUcky — Fri, 02 Oct 2009 15:04:08 +0000

国庆，飞机晚点，到达厦门机场的时候已经19点30多了。我们第一天订的是厦门城际快捷大中路店的雅致房，打电话说：出了机场左转到汽车站，坐27路到轮渡。结果当天花车巡游，很多路都戒严…所以走了很长一段，好的地方是酒店离中山路步行街很近，也就在中山路步行街逛了逛。

南京禄口国际机场空荡荡的停机坪

19:30抵达厦门高崎国际机场

花车巡游道路戒严，步行在中山路。

中山路步行街

咖喱土豆，外酥里嫩，很好吃。其间还买了很多吃的，比如麻糍，口味还可以吧。

旅店外面的“四两绿”，喝了招牌的“四两绿茶”。其实都差不多，不过感觉在厦门还蛮红的。

到达厦门城际快捷大中店，227房间。

雅致房，还不错。

卫生间也不错。

行李丢在酒店出门坐公交（其实很近，具体的后面会提及）去轮渡附近，也是一元一人。10点多，感觉海岸边的味道，遥望鼓浪屿，明天这个时候我们就在那里。可惜相机不争气，拍的很烂…

再回到位于中山路附近的酒店已经很晚了，这里已经变成了烧烤大排档…当然也免不了买了一些肉串还有烧仙草。

————————-
这里要说的一点是在轮渡被出租车司机忽悠，那里离中山路以及大中路都很近，因为第二天早上我们走的时候发现后面有一条路直接就到轮渡，大概只有500米左右，可出租车司机载我们绕了一圈，还收了11元，怒…
————————-

这篇作业应该是10月1日昨天交，但是因为刚到厦门，走了很多路，就懒了，拖了一天。而且到达酒店安顿好以后已经很晚。所以今天10月2日才是真正开始厦门之旅，我们登上了鼓浪屿。那么就请期待下一篇吧，这里先放出今天白天刚刚出炉的热图，吊吊胃口吧～

白天相机就好多啦，这是在去鼓浪屿的轮渡上，回望厦门，真的很美。想看更多，请等待…应该要过两天，因为内容很多…

未完待续…

你好厦门。五昼夜（第〇天）- 厦门自助游记

dUcky — Mon, 28 Sep 2009 14:03:23 +0000

第〇天，因为还没有出发。都说这个时候去人多，但是怎么办呢？只有这个时间有空啊…原来打算10月2日早上出发去厦门，10月5日晚上回南京，4天时间。但是只有每天下午5点40多的机票有打折，所以就提前到10月1日下午出发。

去之前肯定要做很多功课，在网上收集了一些游记，在这里看我收集的厦门自助游攻略。没有排版，看起来很费劲，但是如果第一次自助去厦门，还是要好好看看。同时在网上找到了厦门和鼓浪屿游玩的手绘地图，当然是扫描版的，感谢提供地图的那位博主。

厦门手绘地图下载 | 鼓浪屿手绘地图下载 | via

有了这些还不够，这个时候住的地方是最难订的，我希望是在鼓浪屿岛上靠海的地方找一家客栈，可惜几乎在十一黄金周期间都没空房。最后花了很大力气和价钱，在岛上一家客栈订到了的海景客房，只有10月2日一天…还不知道怎么样，可以看dUcky后续的博文。

其他几天都是订的连锁酒店…也许看到这儿你们和我一样失望，但是没办法，以后换个时间再找那种古旧的小别墅，特别的小房子来住。希望一切顺利。

未完待续……

我们的故事

html5 带来了什么？ html5 与 css3

html5 的标签

css3 高级选择器

html5 与 css3 的浏览器兼容性

html5 更多的亮点

随机日志

嘿，我是Lucky #saveLucky

随机日志

音乐爱与和平“上太空说”陶喆2009南京演唱会

相关文章

谢谢Eason“90分的快活”陈奕迅2009南京演唱会

相关文章

推荐 Android 上 5 款有趣的应用

相关文章

Lets Wave – 惊喜的 Google Wave 邀请

相关文章

Android 中的魔术师 HTC G2 Magic

相关文章

你好鼓浪屿。五昼夜（第二天）- 厦门自助游记

相关文章

你好厦门。五昼夜（第一天）- 厦门自助游记

相关文章

你好厦门。五昼夜（第〇天）- 厦门自助游记

相关文章

我们的故事

html5 带来了什么？ html5 与 css3

html5 的标签

css3 高级选择器

html5 与 css3 的浏览器兼容性

html5 更多的亮点

随机日志

嘿，我是Lucky #saveLucky

随机日志

音乐 爱与和平“上太空说”陶喆2009南京演唱会

相关文章

谢谢Eason“90分的快活”陈奕迅2009南京演唱会

相关文章

推荐 Android 上 5 款有趣的应用

相关文章

Lets Wave – 惊喜的 Google Wave 邀请

相关文章

Android 中的魔术师 HTC G2 Magic

相关文章

你好鼓浪屿。五昼夜（第二天）- 厦门自助游记

相关文章

你好厦门。五昼夜（第一天）- 厦门自助游记

相关文章

你好厦门。五昼夜（第〇天）- 厦门自助游记

相关文章

音乐爱与和平“上太空说”陶喆2009南京演唱会