DIV+CSS教程.docx

《DIV+CSS教程.docx》由会员分享，可在线阅读，更多相关《DIV+CSS教程.docx（54页珍藏版）》请在冰豆网上搜索。

DIV+CSS教程

实战DIV+CSS网页布局

第一章web标准

一、W3C标准

我们在用浏览器打开任何一种网页页面都是最终通过浏览器解析后呈现在我们的电脑屏幕上的，而浏览器最终解析的只是html代码，这就存在一个标准问题。

Web标准是由W3C（WorldWideWebConsortium万维网联盟）和其它标准化组织制定的一套规范集合，WEB标准不是某一个标准，而是一系列标准的集合，其目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器向用户展示信息内容。

Web标准制定的核心目的：

表现与内容分离，这是网站设计和开发的长期努力目标。

Web标准的执行其目的在于今后十多年里，能够在桌面浏览器、文档浏览器、屏幕阅读器及手持设备上都能很好的运作。

采用网站标准的好处

1、对网站浏览者的好处：

●文件下载与页面显示速度更快；

●内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

●内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、）；

●用户能够通过样式选择定制自己的表现界面；

●所有页面都能提供适于打印的版本；

2、对网站所有者的好处：

●更少的代码和组件，容易维护；

●带宽要求降低（代码更简洁），成本降低。

例：

当ESPN.com使用CSS改版后，每天节约超过两兆字节的带宽。

●更容易被搜寻引擎搜索到

●改版方便，不需要变动页面内容；

●提供打印版本而不需要复制内容；

●提高网站易用性。

在美国，已经有严格的法律条款（Section508）来约束政府网站

必须达到一定的易用性，其他国家也有类似的要求。

二、Web标准的构成

是由结构（Structure）、表现（Presentation）、行为（Behavior）三大部分组成的标准集。

1、结构：

对网页中用到的信息进行整理与分类。

（用HTML、XML、XHTML进行结构化设计）

（1）HTML（HyperTextMark-upLanguage超文本标词语言）是WEB的基本描述语言。

更多请查看：

HTML语言剖细

（2）XML（XML是TheExtensibleMarkupLanguage可扩展标识语言）XML是一种能定义其他语言的语言。

XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

（3）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。

因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。

简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2、表现：

即对已被结构化的信息进行显示上的控制。

它包含版式、颜色、大小等形式控制。

我们采用CSS进行表现设计

CSS是CascadingStyleSheets层叠样式表的缩写。

目前推荐遵循的是W3C于1998年5月12日推出的CSS2。

W3C创建CSS标准的目的是以CSS取代HTML表格式布局和其他表现的语言。

纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3、行为：

是指对整个文档内容的一个模型定义及交互行为的编写，用于编写用户可进行交互式操作的文档（表现行为的Web标准技术有：

DOM（文档对象模型）、ECMAScript（JavaScript扩展脚本语言）

（1）DOM

DOM是DocumentObjectModel文档对象模型的缩写。

DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。

简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

（2）ECMAScript

ECMAScript是ECMA（EuropeanComputerManufacturersAssociation）制定的标准脚本语言（JAVAScript）。

用于实现具体的界面上对象的交互操作

三、XHTML基本介绍

XHTML是HTML的严格和紧凑版。

XHTML表示扩展HTML（超文本标记语言）

XHTML目的为了是替换HTML

XHTML基本等同于HTML4。

01

XHTML是定义为XML应用程序的HTML

XHTMLW3C推荐使用

XHTML是W3C推荐标准

XHTML1.0在2000年1月26号成为W3C标准

W3C把XHTML定义为最新的HTML。

XHTML将逐渐替代HTML。

所有新浏览器都支持XHTML

XHTML和HTML4。

01相兼容。

所有新浏览器都支持XHTML

http:

//validator.w3.org/check/referer

验证页面的XHTML部分.

http:

//jigsaw.w3.org/css-validator/check/referer

验证页面的CSS部分.

1、为什么要使用XHTML

XHTML是HTML和XML的混合体。

XHTML包含所有HTML4.01的所有元素并使用了

我们在网站中会发现一些站点存在许多错误的HTML。

学习HTML

以上代码虽然可以在浏览器中正常工作，但不遵循HTML的语法规则。

●XML是一种标记语言，但标识严格，文档内容具有严格的语法。

●XML用于描述数据而HTML用于呈现数据内容。

今天的市场包含了多种浏览器技术，有些浏览器运行于电脑上的互联网，而有些运行于手机上和便携手掌机上。

后者没有太多资源去解释错误的标记语言。

因此结合HTML和XML他们的优点，产生了便于未来使用的标记语言XHTML.XHTML页面可以被所有支持XML的设备所读取，XHTML让你编写良好语法格式的文档，便于文档在所有浏览器中可以工作。

2、XHTML和HTML之间的区别

XHTML和HTML4.01区别不是很大。

因此，知道HTML4.01标准对你认识XHTML认识非常有帮助。

另外，现在开始你编写HTML代码必须使用小写字母，不要忘了写结束标记。

比如（

）

最重要区别

●XHTML元素必须正确嵌套

在HTML中可以出现以下代码，虽然没有正确的嵌套，但也可以正常显示。

灯火工作室

在XHTML中，必须正确嵌套

灯火工作室

注意:

列表中常见错误就是忘了配对li标签.

●XHTML元素必须最后关闭

错误:

灯火工作室

灯火工作室

---

正确:

灯火工作室

灯火工作室

---

●XHTML元素必须小写

错误：

灯火工作室

正确：

灯火工作室

●XHTML文档必须只有一个根元素

所有XHTML元素必须嵌套在根元素中。

3、XHTML的基本语法

编写XHTML需要清晰的HTML语法，以及额外的XHTML语法规则：

●属性名必须小写

●属性值必须用引号括起

●不允许属性缩写

错误:

正确:

HTML和XHTML缩写属性对应表

HTMLXHTML

compactcompact="compact"

checkedchecked="checked"

declaredeclare="declare"

readonlyreadonly="readonly"

disableddisabled="disabled"

selectedselected="selected"

deferdefer="defer"

ismapismap="ismap"

nohrefnohref="nohref"

noshadenoshade="noshade"

nowrapnowrap="nowrap"

multiplemultiple="multiple"

noresizenoresize="noresize"

●id属性将替代name属性

HTML4.01为标签a,applet,frame,iframe,img和map定义了name属性。

在XHTML中name属性由id替代,name属性过期。

错误:

正确:

注意：

为了考虑旧版本的浏览器，应当两个属性都写出来，值设置为一致内容:

重要的兼容性提示:

为了使你的XHTML兼容现在的浏览器，应当在“/”之前多一个空格。

lang属性

lang属性基本应用所有XHTML标签。

指定标签内容的语言种类。

如果你使用lang属性，

你必须添加xml:

lang属性，如下：

lang="no">HeiaNorge!