|
网页学习网《CSS教程布局实例》教程假设读者已经对HTML有所掌握，如果读者了解以下HTML标记中大多数标记的含义，就可以开始学习本教程。 <html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、 <ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。 如果读者还不清楚上面这些标记的含义，请先跟随网页学习网《HTML教程入门经典》，学习一下最基础的知识，然后再开始学习本教程。 此外，本教程将不再占用篇幅抽象地讲解使用css布局所具有的优势，相信大部分读者对此已经有所了解。如果对这个问题感兴趣。可访问http://www.lodidance.com/html/jc/552.html，清晰地阐速了从传统布局方式到css布局的采龙去脉，并给出比较深入的分析。 本章将就一些在工作中，会遇到的实际问题进行讲解，作为学习css设计的必备基础。 HTML与XHTML是一种语言还是两种语言？基本上可以认为，它们是一种语言的不同阶段，有点类似于文言文和白话文之间的关系。因此它们也经常被写作(X)HTML。下面首先从它们的渊源和区别开始本教程的讲解： 一、追根溯源 (X)HTML是所有上网的人每天都离不开的基础，所有网页都是使用(X)HTML编写的。随着网络技术日新月异的发展．HTML也经历了不断的改进。可以认为XHTML是HTML的“严谨版”。 HTML在初期，为了它更广泛地被接受，大幅度放宽了标准的严格性，例如标记可以不封闭，属性可以加引号，也可以不加引号，等等，导致出现了很多混乱和不规范的代码。这 为此，相关规范的制订者——W3C组织．一直在不断地努力，逐步推出新的版本规范。从HTML到XHTML．大致经历了以下几个版本。 ◆ HTML 2.0: 于1995年l 1月发布。 ◆ HTML 3.2: 于1996年1月14日发布． ◆ HTML 4.0: 于1997年12月18日发布。 ◆ HTML 4.01（微小改进）: 于1999年12月24日发布， ◆ XHTML 1.0: 于2000年1月发布，后叉经迂修订于2002年8月1日重新发布。 ◆ XHTML 1.1: 于2001年5月31日发布。 ◆ XHTML 2.0: 正在制定中。 在正式的标准序列中，没有HTML1.0版，这是因为在最初阶段．各个机构都推出了目己的方案，没有形成统一的标准。因此．W3C组织发布的HTML 2.O是形成标准以后的第一个正式规范。lodidance.com 这些规范实际上主要是为浏览器的开发者阅读的，因为他们必须了解这些规范的所有细节。而对于网页设计师来说，并不需要了解规范之间的细微差别，这与实际工作并不十分相关。因此，网页设计师通常只要知道一些大的原则就可以了。而且这些规范的文字也都比较晦涩，并不易阅读。当然．如果设计师真的能够花一些时间把HTML和css的规范仔细通读一遍，将会有巨大的收获。因为这些规范是所有设计师的“圣经”。 知识：W3C组织就是World Wide Web Consortium（全秋万维网联盟）的简称。W3C组织创建于l994年．研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。W3C的主要职责是确定来来万维网的发展方向，并且制定相关的建议（Recommendation．由W3C是一个民间组织，没有约束性，因此只提供建议）。 HTML 4.01规范建议（HTML 4.01 Specification Recommendation）就是由W3CF制定的。它还负制CSS、XML、XHTML和MathML等其他网络语言规范。 二、DOCTYPE（文档类型）的含义与选择 从Dreamweaver MX 2004版开始，在使用Dreamweaver新建一个网页文档的时候，默认情况下生成的基本网页代码是这样的：
可以看到最上面有两行关于“DOCTYPE”（文档类型）的声明，它就是告诉浏览器，使用哪种规范来解释这个文档中的代码。 设计师可以在新建文档的时候选择使用哪种文档类型。在Dreamweaver的新建文档对话框中，在右下方有—个文档类型下拉框，如图1所示。  图1 在Dreamweaver中选择文档类型 对于HTML 4.01和XHTML 1.0分别对应于一种严格（Strict）类型和一种过渡（Transitional）类型。过渡类型兼容以前版本定义的，而在新版本已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。 注意：目前，建议读者使用XHTML 1.O transitional（XHTML 1.0过渡类型），这样设计师可以按照XHTML的标准书写符合Web标准的网页代码。司时在一些特蛛情况下还可以使用传统的做法。 三、XHTML与HTML的重要区别 尽管目前浏览器都兼容HTML．但是为了使网页能够符合标准，设计师应该尽量使用XHTML规范来编写代码，需要注意以下事项。 1.在XHTML中标记名称必须小写 在HTML中，标记名称可以大写或者小写。例如，下面的代码在HTML中是正确的。
但是在XHTML中，则必须写为：
2.在XHTML中属性名称必须小写 HTML属性的名称也必须是小写的。例如，在XHTML中下面的代码的写法是错误的。
正确的写法应该是：
3.在XHTML中标记必须严格嵌套 HTML中对标记的嵌套没有严格的规定。例如，下面的代码在HTML中是正确的。
然而在XHTML中，必须改为：
此外，经常被忽略的是对列表标记的嵌套写法。例如，下面的写法在XHTML中是错误的。
正确的写法是：
4.在XHTML中标记必须封闭 在HTML规范中，下列代码是正确的。
上述代码中，第2个<p>标记就意味着前一个<p>标记的结束，但是在XHTML中，这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。
5.在XHTML中，即使是空元素的标记也必须封闭 这里说的空元素的标记，就是指那些<img>，<br>等不成对的标记，它们也必须封闭，例如下面的写法是错误的。
正确的写法应该是：
6.在XHTML中属性值用双引号括起来 在HTML中，属性可以不必使用双引号，例如：
而在XHTML中，必须严格写作：
7.在XHTML中属性值必须使用完整形式 在HTML中，一些属性经常使用简写方式设定属性值，例如：lodidance.com
而在XHTML中，必须完整地写作：
8.在XHTML中，应该区分“内容标记”与¨结构标记” 例如<p>标记是一个内容标记，而<table>标记是结构标记，因此不允许将<tabIe>标记置于<p>内部。而如果将<p>标记置于<td></td>之间，则是完全正确的。 有时这种错误不容易被注意到，在Dreamweaver中也得不到提示。但是在微软公司新推出的网页制作软件Expression Web中。则会给出明确的提示，如图2所示。  图2 在Expression Web中提示错误 在<table>标记的下方出现红色波浪线，表示存在错误。将鼠标指针移动到<table>标记上，则会出现提示文字“在XHTML 1.0 Transitional中，标记<p>不能包含标记<table>”。有兴趣的读者可以尝试一下这个新的网页设计软件。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/652.html |
