我们的故事 » css3 http://blog.ihandu.com i Hand u - dUcky's Blog Sat, 13 Aug 2011 04:21:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 html5 带来了什么？ html5 与 css3 http://blog.ihandu.com/2010/03/html5-css3/ http://blog.ihandu.com/2010/03/html5-css3/#comments Wed, 03 Mar 2010 14:46:26 +0000 dUcky http://blog.ihandu.com/?p=458 html5

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

html5 的标签

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

那么用 html5 该怎么写呢？

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

1
2
3
4
5
6

<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 会是什么样呢？看代码：

1
2
3
4
5
6
7
8
9

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

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

1
2
3
4
5
6
7
8
9

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 的惊喜。

相关文章

]]> http://blog.ihandu.com/2010/03/html5-css3/feed/ 1