一起感受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的。
猜你喜欢
- 阅读上一节:无序列表信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤
- 统计平均数SELECT AVG() FROM 语法用于从数据表中统计数据平均数。语法:SELECT AVG(column) FROM tb_
- 最近在学习Python的时候遇到一个知识点,在此记录下来可变参数会自动填充前面的同名默认参数比如下面这个函数def add_student(
- python开启debug模式的代码如下所示:import requests session = requests.session()imp
- 记得以前写过一篇文章 php有效的过滤html标签,js代码,css样式标签: <?php $str = preg_replace(
- 前言前段时间看到有人问如何使用Python实现多张图片组成文字的效果?觉得还挺有意思,于是尝试做了一下,刚好赶上端午节,所以打算从网上下载1
- 一、绘制成品二、绘制代码实现本文效果的整体思路是:加载库—选择背景音乐—绘制心的外轮廓&md
- 在图片处理中,霍夫变换主要是用来检测图片中的几何形状,包括直线、圆、椭圆等。在skimage中,霍夫变换是放在tranform模块内,本篇主
- 自动抢课脚本使用手册@danteking dating from 2021.12.7 and last updating at 2021.1
- 一 Insert 语句1.在数据中只插入默认值:insert into [DBTrain].[dbo].[log_info]default
- 每次写博客都是源于纳闷,python解析pcap这么常用的例子网上竟然没有,全是一堆命令行执行的python,能用吗?玩呢?pip安装sca
- 最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示。在HTML中可以通过<br/>标签换行,也可
- 关于Python语言,众说纷纭,但无外乎两种,强大,垃圾。大多数人还是对Python持肯定意见,认为它很强大。前些天和两个的大学同学聊天,一
- 我的代码的哪些部分运行时间最长、内存最多?我怎样才能找到需要改进的地方?”在开发过程中,我很确定我们大多数人都会想知道这
- 一、简介urllib.request.urlopen()函数用于实现对目标url的访问。函数原型如下:urllib.request.urlo
- 区别1let和var用来声明变量,const用来声明常量。变量就是赋值后可以改变它的值,常量就是赋值后就不能改变它的值。当声明为对象时,可以
- setup语法糖 最大好处就是所有声明部分皆可直接使用,无需return出去注意:部分功能还不完善,如:name、render还需
- 对于内容驱动的网站,设计好坏的关键是关系型数据库。在这个教程中,我们已经使用了MySQL关系型数据库管理系统(RDBMS)建立了我们的数据库
- reduce 方法(升序)语法: array1.reduce(callbackfn[, initialValue])参
- 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取