HTML+CSS网页设计指南

来源：互联网发布：如何查询淘宝被降权编辑：程序博客网时间：2024/05/23 00:05

互联网上最常用的两款浏览器是Internet Explorer和Mozilla Firefox，它们基于不同的内核，各有特色，难分伯仲。

超文本标记语言HTML----------------------

•HTML是一种用来制作超文本文档的简单标记语言。用其编写的超文本文档称为HTML文档，能运行在各种操作系统平台（如Unix，Windows等）上。

•自1990年以来，HTML一直都是WWW的信息表示语言，用于描述Homepage的格式设计和它其他Homepage的连结信息。使用HTML语言描述的文件，需要通过浏览器显示效果，是一种最为基础的语言。

•所谓超文本，因为它可以加入图片、声音、动画、影视等内容，并可以从一个文件跳转到另一个文件，与世界各地主机上的文件连接。HTML的作用是用来展示页面的表现形式，如页面的布局、页面的颜色、页面中的内容等。

•所谓标记，是因为它采用了一系列指令符号来控制输出效果，这些指令符号用“<标签名字属性>”来表示。

可扩展标识语言XML------------------------

•HTML的焦点主要集中在信息应如何显示上，而不是信息的内容和结构。所以在新规则中引入了XML。XML和HTML的作用不一样，区别也很大。

•XML目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0。和HTML一样，它同样来源于SGML，但却是一种能定义其他语言的语言。它最初的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，但后来逐渐用于网络数据的转换和描述。目前，在网站信息传递过程中常见的RSS就是典型的XML应用。

•如果说HTML是用来设计页面的布局和视觉效果的，XML就是用来描述页面的数据形式和结构的。

•需要注意的是，XML并不是标记语言，所以它不是HTML的升级。它更大的用途是对HTML的部分功能进行补充。所以说，仅仅使用XML是无法来写出页面的。

可扩展超文本标识语言XHTML--------------------

•XHTML是2000年由W3C公司发行的，不需要编译就可以由浏览器直接执行（属于浏览器解释型语言），是一种增强了的HTML。它的可扩展性和灵活性能适应未来网络应用的更多需求，是基于XML的应用。可以说XHTML就是HTML的一个升级版本，它们之间的区别很小，在使用中很难分清它们之间的界线。

•XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此开发者在HTML4.0的基础上，用XML的规则对其进行了一些扩展，由此得到了XHTML。简单地说，XHTML的出现就是为了实现HTML向XML的过渡。

新旧方法对比--------------------------

•在早期的HTML版本中，常使用一些特殊标签来编辑文本，如<em>...</em>标签，就是用来突出文本，使文本具有斜体字效果的。但这种方法非常繁琐，编辑不同段落时需要重复使用，工作量很大，修改时也很麻烦。

•1994年，一位叫哈坤·利的设计者提出“层叠式”概念的样式表来编辑文本。1996年底，这种方法被正式推出。就是现在大家比较熟悉的CSS。

•CSS就像是哈里波特的魔法一样，令本来需要一步步完成的繁琐工序，只要念动一下咒语瞬间就能改头换面。

图像与文本的对齐方式--------------

•在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图片的旁边放入文本内容，就需要考虑如何处理文本和图像对齐方式呢。在HTML文档中，分为4种：

•使图像的顶部和同一行的文本对齐，使用代码如，

•<imgstyle="vertical-align:text-top"/>

•使图像的中部和同一行的文本对齐，使用代码如，

•<imgstyle="vertical-align:middle"/>

•使图像的底部和同一行文本对齐，使用代码如，

•<imgstyle="vertical-align:text-bottom"/>

•使图像的底部和文本的基线对齐，使用代码如，

•<imgstyle="vertical-alignbaseline"/>

不寻常的图像应用------------------

•网页中常见的图像格式包括JPEG、GIF和PNG。

JPEG图像就像生活中的照片一样，没有什么特别之处。而GIF 图像和 PNG图像则有一些特殊的效果。GIF图像可以制作成简单的动画，PNG图像则带有透明通道，可以制作出透明图像

表格--------------

•<caption>标签是用来给表格添加标题的。这个标签需要置于<table>标签中，具体写法如下：

<table>

<caption>表格的名字</caption>

…

•<caption>表示标签添加的标题，默认情况下将位于表格上方居中的位置，且会根据表格的宽度自行调整位置。

创建框架结构的页面------------------------

•使用<frame>框架在HTML页面中设置框架。那么，当一个浏览器被分成很多个框架的时候，这些框架放在一起，既称之为框架集。框架集的HTML标签为<frameset>，也称之为框架结构标签。所以，如果要在框架中放入内容，采用的方式是通过引用所放内容的路径，来加载对象。它的代码如下写法。

•<frameset ......> //表明这是一个框架集

• <framesrc=...> //这是其中一个框架中的页面路径

• <framesrc=...>

•...

•</frameset>

需要注意的是，不能将<frameset>标签和<body>标签一起使用。原理上，因为框架集分割的是浏览器，也就是说，框架集至少也需要有2个框架组成。所以，不存在只有一个框架的页面。而且，框架集的作用是将多个页面同时展示在浏览器中，同样，也不存在包含框架的独立页面。因为这样，<frameset>标签和<frame>标签是不能放在<body>标签内的，这样做没有意义。

当CSS样式表遇到层----------------

页面中的层

•CSS样式表通过被封在DIV上这种方式是指当设计者将文本、图像、超链接或者其他内容放在DIV中时，便称之为CSS-layer，或者称之为Layer（层）。层是Web设计中的一枚利器。

层的叠加

•层不同于表格、框架的最大优势在于层是可以叠加的。这是因为层具有一个“Z轴”的特性，Z轴好比3D坐标中的Z轴，是一个上下层级的关系，就是说一个层是可以覆盖在另一个层上面，如图10.4所示。

CSS Hack：解决浏览器兼容的问题----------------

•市面上有许多浏览器，比较流行的有IE浏览器、Firefox浏览器、Opera浏览器和Google浏览器。它们基于不同的内核，对CSS的解析也就不一样，这就导致最终生成的页面效果不同。最明显的就是在框模型中，不同浏览器对距离的理解不同。

•

•浏览器兼容的问题，对设计者来说是一件很伤脑筋的事。唯一的解决方法，就是针对不同的浏览器编写不同的样式表。这种做法被称之为CSS Hack。

•

•例如，在解决IE浏览器和Firefox浏览器中布局不同的问题时， Hack提供了一个最常用的!important语句。!important语句在IE浏览器中无法解析，而其他浏览器基本都可以支持，因此可以用来解决很多问题。

图像替换技术--------------------

YAHOO公司的 “YUIGrids CSS”推广的布局思路。这是一种很好的布局页面的思路，通过这些可以学习到出色布局经验，先解决什么问题，再解决什么问题。

YUI Grid CSS的重复嵌套的布局方法。