网页布局与显示技术

第一节　网页布局与显示技术

HTML是一种描述如何表示网页格式的超文本标记语言，重点解决如何显示数据的问题，但是，不能解决“数据和数据结构是什么”的问题。XML是描述数据和数据结构的语言，它解决了这个问题。二者同为标记语言，有着相似的语法，XML是HTML的补充，但XML不是HTML的替代品。CSS也是一种标记语言，用于增强或控制网页样式，并允许将样式信息与网页内容分离，它有效解决了HTML标记过于庞杂，以及无法统一维护的难题。

一、HTML

1.　HTML简介

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2.　XHTML简介

XHTML中的X是可扩展（exten sable）的意思，XHTML就是可扩展的超文本标记语言，它比HTML有更严格的要求。如果说HTML是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。事实上它也属于HTML家族，并且它是基于XML的，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。出于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。

二、XML

1.　XML简介

XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML（Standard Generalized Markup Language，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。可扩展标记语言（XML）是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要多，但XML极其简单，易于掌握和使用。

2.　XML的特性

XML与Access、Oracle和SQL Server等数据库不同，数据库提供了强有力的数据存储和分析能力，例如：数据索引、排序、查找、相关一致性等，XML仅仅是展示数据。事实上，XML与其他数据表现形式最大的不同是：它极其简单。这是一个看上去有点琐碎的优点，但正是这点使XML与众不同。

XML与HTML的设计区别是：XML是用来存储数据的，重在数据本身。而HTML是用来定义数据的，重在数据的显示模式。

XML的简单使其易于在任何应用程序中读写数据，这使XML很快成为数据交换的惟一公共语言，虽然不同的应用软件也支持其他的数据交换格式，但不久的将来它们都将支持XML，那就意味着程序可以更容易地与Windows、Mac OS、Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析它，并以XML格式输出结果。

为了使得SGML显得用户友好，XML重新定义了SGML的一些内部值和参数，去掉了大量的很少用到的功能，这些繁杂的功能使得SGML在设计网站时显得复杂化。XML保留了SGML的结构化功能，这样就使得网站设计者可以定义自己的文档类型，XML同时也推出一种新型文档类型，使得开发者也可以不必定义文档类型。

因为XML是W3C制定的，XML的标准化工作由W3C的XML工作组负责，该小组成员由来自各个地方和行业的专家组成，他们通过Email交流对XML标准的意见，并提出自己的看法（www.w3.org/TR/WD-xml）。因为XML 是个公共格式（它不专属于任何一家公司），你不必担心XML技术会成为少数公司的盈利工具，XML不是一个依附于特定浏览器的语言。

三、CSS

1.　CSS简介

CSS（Cascading Style Sheet，“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中，或作为HTML文档的某一部分（通常为文件头部分）。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简洁，缩短浏览器的加载时间。

2.　CSS的作用

层叠样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标记和颜色属性所起的作用那样。样式通常保存在外部的 *.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上Web设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动更新。

3. 使用CSS布局的优点

相对于传统的Table网页布局，采用CSS布局具有以下3个显著优势。

（1）表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

（2）提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面容量要比Table编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标记。

（3）易于维护和改版

你只要简单地修改几个CSS文件就可以重新设计整个网站的页面外观。