div的初步认识

DIV的初步认识,Web标准的网站最大的特点就是实现了数据与表现相分离。传统的Table布局因它的局限性很难实现。为达到这样的目的，人们开发了CSS，让它来处理表现方面的事情。理论上说，有了CSS的帮助，任何一个标签都可以作为容器出现。而此时我们要介绍的是一个在Web标准设计的网页中经常要用到的标签DIV。,一、什么是DIV,DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV也是XHTML所支持的标签之一；在布局上，可以把DIV看成是一个大的容器，里面可以是内容也可以是其他的容器。DIV决定了整体页面的结构，而CSS决定了网页的表现，是排版、效果等不再依赖Table。开发一个简单局部的网页只需要DIV和CSS就可以了，所以也有人称之为Div+Css布局。现在的浏览器都支持DIV标签。,二、如何使用DIV,同其他XHTML标签一样，要有开始和关闭标签，如：。也可以为其定义其他属性，如：id、class等。正确写法为：.或.。id是对象的选择符，用于指定具体的对象，在一个页面中id值是唯一的。如果遇到样式相同的多个标签（如宽高、浮动方式等），建议使用class定义，可以避免编写相同的CSS代码。,三、DIV布局与传统Table,TABLE的属性：Table 简单的说就是“表格”我们可以方便的将它划分为N个单元格，甚至每个单元也可以继续划分，是一种比较灵活，操作也相对简单的元素，因为表格的这种特有属性，尤其在列表方面，几乎就是Table的强项，我们可以非常方便的将内容整齐的排列。再加 上tr td ，完全能满足一般网页布局的需求，-这里请大家先注意一点：Table也是Web2.0元素。全部使用Table布局，只要语法，样式。属性书写符合规范，照样能通过W3C标准检测。但是我们也应该清楚的知道一 点，表格最优秀的地方其实还是“列表”。所以Table在相当长的一段时间都被网页设计，制作者所钟爱， 一个简单的页面用Table来布局其实是一个比较合适的方法。,TABLE的属性：虽然表格，乃至单元格的背景，边框，全部可以定义特定样式，通过DW等网页编辑软件的属性栏就可以随意定义，但是不要忘记了一点，那就是相当一部分样式代码全部是包含在网页代码当中, 再加上我们为了制作出特定效果的风格，经常需要将表格层层镶套，然后按照需要划分出N个单元，最后呈现在浏览者面前的也是一个相当完美的页面。但是当你需要修改页面的时候就会非常遗憾的发现这些页面的代码相当复杂，而且杂乱，HTML 加上N多 tr td 再加上我们定义的样式代码. 的确是一件让人头大的事情. 而且并不是修改完一页就完成的, 如果考虑到整体风格,我们可能需要逐一修改N多页面. (当然了,用CSS控制样式也会比较方便) 只不过与DIV相比,表格的优势也只是体现列表性质的地方布局,DIV的属性：,DIV 也可以说是一个容器,一个比Table更简单的元素. 代码形式也就是 . ，不必象Table一样随意划分为几行几列,N个单元格,单独一个DIV在页面其实是一个没有什么多大意义的 块状元素而已.所以如果说它有什么优秀的地方,那么 一: 它够简洁,代码量少 二: 它适合.也只能用于 页面整体布局, 因为当你插入一个DIV以后它甚至连边框,背景,都无法显示 ,完全依赖 CSS 来实现 , 至于我们需要划分出几列,显示内容,加上美化图片. 也是依赖比如 ul ol li h1 .之类的元素来实现 , 这就是为什么用DIV 布局的原因,因为它比table更简洁,更容易控制,甚至也只适合布局: 然后充分发挥其他 网页元素的特有属性来实现我们想达到的效果, 换句话说,这就叫发挥每一种元素最优秀的特性, 然后把它用到最适合它用的地方,包括table , 然后再发挥CSS能将内容与 样式分离控制的优势来实现一个 ,代码简洁,便于维护,改版,利于收录,搜索,解析的,科学,合理的优秀页面大家应该能看出了吧: DIV 没有什么了不起.在web2.0.W3C这些概念,标准. 它不过就是一个比表格更合适布局的 元素而已。,四、优缺点比较,1、精简代码：大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS（样式）所占用，而这些样式大多用于控制DIV的排版布局。那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。,四、优缺点比较,2、重用性与下载量：统一使用一个.css的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。但是请大家换一个角度想，如果所有页面在加载时都要访问一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。很多人会问，这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。,四、优缺点比较,3、HTTP通讯：统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端（大家可以看看sohu和sina的页面，大多都是采用这样的形式），而不是作为外部调用的形式，也是为了尽量避免给服务器增加消耗。,四、优缺点比较,4、页面缓存：每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。,四、优缺点比较,5、兼容性：对于CSS（样式表）并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以