一起感受HTML5和CSS3的能量[译]
作者:暴风彬彬 来源:彬Go 发布时间:2009-09-04 16:29:00
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…
跟<div>说再见,欢迎语义化标签
曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局,并且开始调用外部样式表。但不幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:
<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>
尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5解决“<div>-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的<div>标签,并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:
<section>
<section>
<article>
<header>
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Tangential Information</h1>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>
正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<div>标签。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上,CSS3也是可以然通过我们忽略掉所有class和id的。
猜你喜欢
- 我们可能会出现这种情况,某个表原来设计不周全,导致表里面的数据数据重复,那么,如何对重复的数据进行删除呢?重复的数据可能有这样两种情况,第一
- 本文实例介绍了asp对access数据库常见操作方法,查找记录,添加记录更新记录,删除记录等。一、查找记录find.htm<HTML&
- 从文本文件中调出记录出现丢失换行?解决方法:<%Dim fsDim tsset fs=Server.Cr
- 现在有一个xml,格式如下: <date> <item> <id> 1 </id> <
- 1概述 SQL语言的本质就是一串伪代码,表达的是做什么,而不是怎么做的意思。如其它语言一样,SQL语句需要编译之后才能运行,所以每一条SQL
- 本文将演示如何使用SQL 7.0服务器的Enterprise Manager创建、配置一个示例数据库。我们还会演示如何增加具有合适权限的用户
- 常用Mysql查询语句记录一、授权1.授权本地用户对所有数据库具有所有权限> grant all privileges on
- jQuery是一个非常优秀的JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效
- HTML 的空白符处理规则HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。我们知道,在默
- 随着网络的发展,人们通过各种方式使用它。今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等。事实
- 由Oralce8.1开始,Oracle增加了一个新的特性就是Stored Outlines,或者称为Plan Stability(计划稳定性
- 因为正则不够完善,所以代码中不能直接出现 <? 和 ?>如果是字符串,可以拆开写 "<" + &quo
- 触发器权限和所有权CREATE TRIGGER 权限默认授予定义触发器的表所有者、sysadmin 固定服务器角色成员以及 db_owner
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 我们可以利用 Cookie collection 来刪除客户端的Cookies: <%
- 如何用SQL 建表? 如下:CREATE TABLE statement
- 下面就是解决方案: 1- From the command prompt, stop isqlplus: c:\>isqlplusct
- 注释:在大多数的情况下,修改MySQL是需要有mysql里的root权限的,所以一般用户无法更改密码,除非请求管理员。方法1使用phpmya
- 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。下面是html测试代码:<!DOC
- 块级元素块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们