网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 手机学院 | 邮件系统 | 网络安全 | 认证考试
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > HTML教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.shtml网页SSI使用详解.
.利用HTML服务器控件设置使用Mast.
.使用Web标准建站第9天:CSS布局入.
.Email地址在网页中的保护.
.HTML彻底剖析:一般概念.
.层(div)的上下滚动 .
.通向web标准之路.
.HTML组件(HTML COMPONENTS)之十一.
.HTML之字体标记.
.在html文件引入其它html文件的几.
.XHTML标签写法应该注意的问题.
.使用Web标准建站第7天:CSS入门.
.HTML之影像地图.
.使用Web标准建站第8天:CSS布局入.
.表单name与id的区别和相似之处.
.HTML学习的本质.
.HTML用INS和DEL标记文档改变.
.在IE中为abbr标签加样式.
.中文网页制作中段落缩进的方法.
.让网页里的提交按钮变得更靓丽.

HTML文档结构对Div+CSS布局的意义

发表日期:2008-9-7

  主要就是我对结构和开发效率之间的矛盾的一个思考,css框架怎样才能不破环结构的一个疑问。而且对于结构和效率我的观点就是“拥有合理的结构,才是你web标准化的根本动机”,web是承载信息的,没有理由为了视觉效果,而破坏合理的结构。 

  Web标准的要把握几点:

  使用结构化,语义化的标签
  使用CSS分离出(X)HTML文档中的表现元素
  依靠Javascript去增强,而不是替代,网站的特征(举个例子就是如果css做不了的,交给Javascript而不是替代css去做他能做的)

  对于多样式组合的结构我一直是很反感的,可能我理解的不够深入,体会不到他的好处,或许合理的组合可以兼顾结构和开发效率,可是我没有发现,我就要抵触。

  对样式组合方式是这样的
  <div class=”class1 class2 … classn”></div>
  举个布局例子
  <div class=”f-left w400 bgfff”>
  几个类组合成一个左浮动,宽400 背景为白色的一个区域

  你可能拥有一个庞大的库,页面只需要任意的class的组合就可以完成,省去大部分花费在css上的时间,可是带来的是结构的混乱,改版的困难,甚至向后兼容受到限制。这样做和table布局没什么两样,只是代码看着好看而以,而且代码量相差也不会太大。在应用web标准初期,合理的table布局也是允许的。

  如此多的class让我想起了table冗长的属性

  <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100%>

  难道辛辛苦苦就是想使用div配合css模拟出一个table很容易实现的效果?而且达到和table布局一样的拙劣?

  语义化也是结构的一个部分,语义除了合理的使用(X)HTML标记语言,id也是一个语义组成的部分,div的id就像一个即时贴,告诉你某个div的语义,告诉你这个区块的意义。

  微格式(Microformat)是在标准 XHTML 代码中嵌入结构化数据的一种新方法。他的诞生也很明确的说明了web的结构永远是第一位,语义化的优势很现实的体现出来,div的属性规划也体现着语义,而不仅仅是一个传递给样式工作的接口。可以去看看ibm文档中心的一篇“使用 microformats 分离数据与格式”了解它的工作原理。

上一篇:告诉你html的几个小技巧 人气:3983
下一篇:HTML:WEB标准从头开始 人气:467
浏览全部Div+CSS的内容 Dreamweaver插件下载 网页广告代码 2009年新年快乐