IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化)。该标准简化了HTML页面代码,获得了一个较优秀的网站结构,有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用DIV布局,例如数据页面、报表之类的页面,还是使用HTML的表格会比较方便,Web标准里并没有说要抛弃Table。

DIV+CSS对页面布局的优势

DIV+CSS是一种网页的布局方法,在HTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。DIV+CSS是网站标准(也称“Web标准”)中的常用术语之一,可实现网页页面内容与表现相分离。采用DIV+CSS对网站进行构建越来越被网页设计者重视,因为在DIV+CSS结构的网页中,几乎每个元素的属性都是使用CSS定义的,所以对于网页区域和元素的调整起到了很大的作用。这种DIV+CSS模式的网站设计具有以下优势。

1.表现和内容相分离

在HTML文件中只存放文本信息,而将设计部分放在一个独立样式文件中,使我们能够对页面的布局施加更多的控制,HTML代码仍然可以保持简单明了的初衷。

2.代码简洁,提高页面浏览速度

CSS的极大优势表现在简洁的代码。对于一个大型网站来说,不仅可以节省大量的带宽、提高页面的浏览速度,而且增加了有效关键词占网页总代码的比重。因此使用DIV+CSS的Web标准制作的网站,对搜索引擎抓取页面具有一定的优势。

3.易于维护和改版

网页内容和设计样式的分离,减少了一些重复构建的方法,使页面和样式的调整变得更加方便,只要简单地修改几个CSS文件,就可以重新设计整个网站的页面。很多问题只需要改变CSS而不需要改动程序,从而降低了网站改版的成本。

4.提高搜索引擎对网页的索引效率

使用DIV+CSS方式构建的网站容易向W3C标准靠拢,因为网站是否符合W3C标准是搜索引擎对网页排名的一个影响因素。另外,网站源代码简洁,除了几个div、span、ul、li之类的标签,几乎不用其他标签,而且使用DIV+CSS可以把网页中的主要内容放在前面。这样网站的内容完全裸露在搜索引擎面前,便于搜索引擎抓取关键内容。

原文地址:https://www.cnblogs.com/itxdl/p/11993147.html

时间: 2024-12-11 01:50:04

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势的相关文章

DIV+CSS网页标准化布局(二)之浮动布局

盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 先上图: 上图清晰的表明了盒模型的具体表现样式: margin外边距+border边框+padding内边距+content内容: 既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包

DIV+CSS网页标准化布局(一)

1.DIV+CSS定义及优势 Div+css 是什么? Div+css 是一种目前比较流行的网页布局技术 Div 来存放需要显示的数据(文字,图表..) , css 就是用来指定怎样显示, 从而做到数据和显示相互的效果 Div+css 优势 采用DIV+CSS模式的网站具有以下优势: 表现和内容相分离 代码简洁,提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率 我们可以简单的这样理解div+css: div 是用于存放内容(文字,图片,元素)的容器. css 是用于指定放在div中

(16/06/10) DIV+CSS网页标准化布局 DIV+CSS的兼容性问题小结。

1.兼容性问题的产生:个别浏览器的开发商对一些CSS属性的解析没有按W3C的标准设计. 一个好的网站布局需要在所有的浏览器上呈现相同的界面,即使不能完全一致也要大致相同.浏览器进行页面布局调试将其分为IE和非IE两种.主要原因是因为微软公司的IE浏览器没有按W3C的标准设计,而非IE浏览器几乎是符合W3C标准的.目前IE浏览器占有很大的市场份额,IE5使用人群很少,基本不用考虑,一般IE浏览器兼容性只针对IE6,IE7,IE8就可以了,IE的新版本向标准化迈进.非IE浏览器以Firefox浏览器

DIV+CSS网页标准布局入门到精通视频教程

DIV+CSS网页标准布局入门到精通视频教程,一共28讲完整的教程,有齐学网整理免费提供下载. 下载地址:http://bbs.it1717.com/thread-77-1-1.html

IT兄弟连 HTML5教程 使用盒子模型设计页面布局

布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1  居中设计 区块框居中的设计是在网页布局中常用的技术,例如将网页内的主体内容设置为一定的宽度,然后在页面内居中占据屏幕的一部分显示,而不是横跨整个屏幕宽度.这样设计的目的是因为现在的显示器尺寸越来越大,网页的可读性问题就变得越来越重要,因而需要创建比较短的.容易阅读的行.另外,不要让使用分辨率比较低的显示器用户,通过反复拖动浏览器的水平滚动条来查看

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上

div标签-HTML5精讲 课时ID:6.7 【表严肃】#HTML教程 #HTML5教程 #div标签#

6.7 <div>标签-HTML5精讲 课时ID:6.7 [表严肃]#HTML教程 #HTML5教程 #div标签 是什么 <div>是用于在网页中划分区域的(division的缩写),通常作为容器而存在,用于包含网页中的内容,是最常用的网页元素之一. 怎么用 <html> <body> <div>你好,我是序员.</div> <div> <div> <div> <div> <di

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note