不够语义网页设计和语义的网页制作

副歌K

副歌K

2016-02-19 23:32

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的不够语义网页设计和语义的网页制作,过去的都会过去,迎接崭新的开始,释放更美好的自己。

这个时代DIV+CSS已经创造着新的神话,不久的将来,也许你所访问的互联网将不再出现Table。

作为一个身处2008年末的Web设计师,你是否好意思承认自己的代码中使用了Table,如果是,你是一个有勇气的人,Web设计是个奇怪的行业,你可以将自己的网站设计得像晚报的分类广告,或者楼道里的开锁广告,但千万别让人知道你使用了Table,在你的源代码中发现Table就像一个销售被人掀起裤脚发现穿了白袜子一样。

Table是如此丑陋,臃肿,哪怕只显示一段简单的内容,你也需要tabletrtd这三个基本的标签,每个标签里面还要加上一堆乱七八糟的属性,不像div,既简单,又整洁,又时尚,它和CSS珠联璧合,琴瑟和谐,它们构成最完美的Box模型,他们象现实中的箱子,你把东西放进去,然后,很自由地对他们进行排列,厌烦了一种布局,没关系,简单地改动一下CSS定义,一种全新的布局便诞生了;不象Table,Table像食堂里的餐具柜,一排排,一列列,土里土气,油腻腻的,象我们的父辈,邋遢,什么都往家里拿,胡乱堆在角落里,如果Div是小资,Table就是老三届,他们不属于这个时代。

也就是近几年的事,至多不过三五年,W3C是一个人人都认为重要但人人都不喜欢的组织,他们的官方网站十分丑陋,我敢说平生没见过这么丑陋的网站,但他们的网站是为数不多的可以通过全部W3C标准验证的网站,这意味着,他们的网站在语法上,在结构上,在可访问性上是完美的,虽然依旧十分丑陋。不过这是笑谈,W3C非常重要,否则微软会把全体Web开发工程师带到万劫不复的境地,还好,Netscape死后,涅磐出Firefox,而Opera在Firefox横空出世之后虽然没得到任何好处,至少得到了精神上的支持,看到没,终于有大哥出来收拾你。乔布斯复出后,苹果重返昔日的光芒,这时人们才知道世界上还有一个叫做Safari的浏览器,所有这一切加在一起,让W3C真正有了存在的必要。

W3C说,Table可以用来容纳文字,格式文字,图片,链接,表单,以及其它Table。..但是,Table不应该单纯用来做网页布局(Tables should not be used purely as a means to layout document content),理由是,当Web被非可视化设备渲染的时候,Table会出现问题,他们指定是屏幕阅读器以及盲文浏览器,另外,Table在大型显示设备上会强迫用户左右滚动,因此,Web设计者应该使用CSS而不是Table。参见W3CHTML4.01关于Table的定义。W3C说这段话的时候,是1999年12月24日,那时尽管CSS早已诞生,但并没有多少人使用,最初的Web像一个在线版的文档,并没有成为现在这样的平台,不需要过多过多地考虑布局问题,随着互联网第一次泡沫的形成,涌现出大量的门户网站,门户网站是Table布局的始作俑者,因为他们的首页比一整份报纸的所有版面拼接在一起还复杂,Table在这方面十分顺手,结合colspan和rolspan,你几乎能够实现任何复杂的版面。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

这种布局风格在2000年代初,一直到中期仍然十分流行,尤其国内,在大为美的潜意识下,人们把所有能塞到一个页面的东西都塞进了首页,Table就像一个旧时代的管家,把所有东西虽不能井井有序,但至少是一样不少地编排起来。然而这样的Web终于到了让人厌恶的地步,随着搜索,RSS订阅,以及以博客为代表的个性化Web的出现,人们有更多渠道获得信息,而不必去访问那几个让人几乎要晕过去的门户的首页,于是出现了一种清新的,轻量的Web风,使用更简单的布局,更明快的配色,大图标,大Banner,以及更容易阅读的大字体,同时,在这个时候,CSS已经非常成熟,而Firefox,Opera,Safari为代表的浏览器,在遵守W3C标准方面要远远好过IE,人们终于认识到CSS的威力。因为CSS在布局上,其核心是一个Box模型,人们必须为CSS找一个可以依附的容器对象。

Div成为幸运者一方面因为它天生就是Box的最佳原型,在语义上,Div代表页面的一个区域,在外形上,它四四方方,更重要的是,它不像P或a那样事先已经被赋予特殊的语义(虽然它们也能用于Box模型);另一方面,则出于人们对Table统治一个臃肿时代的憎恶,一个时代的结束,继任者都会努力抹去旧时代的痕迹,那些旧时代的象征或代表的命运多半如此,人们并不是简单地忘却它们,而是断然划清界限。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

Table的一切不公平待遇就此开始。为什么说不公平,W3C不建议Table布局的时候,只说应使用CSS代替,这是什么意思,Table不支持CSS吗?当然支持,而且,由于Table作为老牌的HTML对象,它的地位曾如此重要,任何浏览器都对Table提供了最完美的支持,包括CSS支持。当人们拥抱Div的时候,似乎忘记了Table也是Box,而且是一个拥有多个内格的Box,Table作为一个整体,和Div在Box模型方面没有任何区别,而它的内格,除了Margin之外,仍然是一个Box,内格不含Margin概念这是应该理解的。Div很优秀这不必说,然而当人们说Div+CSS的时候,似乎暗示着Table无法CSS,这是天大的误会。

Div支持的所有CSS属性,Table全部支持,事实上,在Div大红大紫之前,那些Div的早期采用者曾信心不足地表示,Table能做到,Div都能,而他们也为自己的话付出了代价,企图在Div中实现垂直居中的人明白我的意思,企图在IE6中不经CSSHack而实现100%Div布局的人更明白我的意思。100%Height问题,几个Div之间的宽度自适应问题,相信任何从事Div+CSS设计的人会遇到。Table在这方面的优势并不是因为它本身多么优秀,而是因为它老牌,没有浏览器敢忽视,也因为它的特性原本如此,人们发明表格,是因为希望数据显示得整齐,就这么简单。

展开更多 50%)
分享

猜你喜欢

不够语义网页设计和语义的网页制作

Web开发
不够语义网页设计和语义的网页制作

网页CSS优化使网页具有语义化

Web开发
网页CSS优化使网页具有语义化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

为网页内容添加结构和语义的hAtom微格式

Web开发
为网页内容添加结构和语义的hAtom微格式

通过语义化的标签减少DIV简化网页代码

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
通过语义化的标签减少DIV简化网页代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页排版中10种致命的语义错误

Web开发
网页排版中10种致命的语义错误

XML 编程思想:XML和语义

Web开发
XML 编程思想:XML和语义

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Web标准和网站重构只是一种思想

Web标准和网站重构只是一种思想

网页开头部分的声明DOCTYPE

网页开头部分的声明DOCTYPE
下拉加载更多内容 ↓