html中如何理解表现与格式分离

html-css034

html中如何理解表现与格式分离,第1张

当讨论到Web标准时,一些事情总是被提及,那就是结构和表现分离的重要性。

刚开始的时候理解结构和表现的不同之处可能很困难,特别是如果你不习惯于思考文档的语义结构时。

然而,理解这点是很重要的,因为,当结构和表现分离后,用 CSS 文档来控制表现就是很容易的一件事了。

结构

是由文档中的主体部分,再加上语义化、结构化的标记。

表现

是你赋予内容的一种样式。在大多数情况下,表现就是文档看起来的样子,但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。

尽可能的把结构和表现相分离。

理论上讲,你应该用一个 HTML 文档来保存内容与结构,用一个 CSS

文档来控制整个文档的表现。

如今表现与结构的未分离的网站还是很普遍的。

所以我们刚开始学习要养成好的习惯,把它们分别放到分开的文件中,XHTML文件可以链接并共享外部的CSS和JavaScript文档的

好处1、div css有利于搜索引擎爬虫:一般而言相同网页页面html文件table布局字节大于div+css布局的字节,所以可以节约搜索引擎爬虫爬行下载页面内容时间。2、重构页面修改方便(div css改版方便):一般DIV+CSS页面都是html和css文件分开的也就是说一个网页的内容与表现形式的分离,一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面,如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。3、div+css页面增加网页打开速度:这里是特性决定了他们的性能,因为div css页面是div的html和css文件分开的,而浏览器打开该网页的时候是同时下载html和css,所以可以提高网页打开速度,而table还有个特性就是浏览器打开的时候必须是浏览器下载以结束后才显示该块的内容,而div的html是边加载边将内容呈现到浏览器上,div css网站大大增强用户体验作用。大家都知道网页多等1秒钟都会降低浏览者等待时间。解析谷歌将网页加载速度快慢作为影响排名重要因素。缺点:1、开发技术高:要求开发div css的技术较高,兼容各浏览器及版本浏览器要求较高。2、开发时间长:div css布局相对table布局开发制作时间长。3、开发成本相对table高点:因为技术性及时间性就决定了div css页面比table页面成本高。

把所有的样式用一个CSS文件使用一个单独的文件来保存,在html中引入这个文件

<link rel="stylesheet" type="text/css" href="css/style.css"/>

这样引用