学习内容

Ø        XHTML 的发展历程

Ø        XHTML 和 HTML 的区别

Ø        XHTML的DOCTYPE和基本标签

Ø        CSS 常用属性

能力目标

Ø        熟练掌握XHTML 和 HTML 的区别

Ø        理解XHTML的DOCTYPE

Ø        掌握创建简单的XHTML页面布局

本章简介

在上一阶段我们全面地学习了客户端页面技术的实现——HTML，内容包括：HTML 基本标签、表单和框架的使用、模板的制作和应用以及常用的网页布局特效等。通过学习，我们已经可以使用所学技术完成企业级门户网站的静态页面设计。但在实际应用过程中，设计师设计的页面在不同浏览器中的浏览效果不够一致，将导致页面不能兼容的问题，例如：在页面中定义一个层，使用 width 和 height属性设计层的大小，IE浏览器在解析 width 和 height 属性时将包含边框和内边距的大小，而使用符合 W3C标准的浏览器FireFox 在解析时不包含边框和内边距的大小。为保证设计出符合 Web标准的页面，兼容多种浏览器版本包括信息家电产品，如手机、PDA 、平板电脑等，我们将在本阶段学习 XHTML 的相关知识，以及如何使用 XHTML + DIV + CSS 技术对客户端页面进行重构，从而保证浏览效果完全一致。

核心技能部分

1.1 .XHTML简介

1.1.1      . 为什么使用 XHTML

HTML发展到目前主要存在以下几个缺点：

1.  代码简单 随着科技的发展，可以接入网络的设备越来越多；智能手机、网络电视等。HTML不能适应现在越多的网络设备和应用的需要，智能手机、PDA、信息家电等都不能直接显示HTML。

2.  结构臃肿由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML。显然手机上装一个IE8是不可能的，空间不够，运算速度也跟不上。

3.  可扩展性差可扩展标记语言允许应用程序开发者为具体的应用环境定义自定义的标记，但是在HTML环境中，开发人员被浏览器开发者和W3C组织定义的标签集所限制。

4.  数据与表现混杂网站要改变显示样式，就必须重新制作HTML。对不同的网络设备显示同样的数据都需要制作不同的HTML。

HTML 只有不断地发展才能解决这些问题，因此W3C制定了XHTML；XHTML是 HTML 向XML过渡的一个桥梁。

1.1.2      什么是 XHTML

XML是一种可扩展性标签语言，用来描述数据，其中所有的内容都要被准确地定义，才能产生格式良好的文档；而 HTML 则用来显示数据的。由于运行在用户机器上的浏览器种类繁多，在技术实现细节上难免存在差异。为了解决浏览器的兼容性，W3C 组织结合HTML 和 XML各自的长处，形成了一种新的 HTML语言规范——XHTML。

XHTML (Extensible HyperText Markup Language) 指可扩展超文本标签语言，是 W3C 组织在HTML 4.0 的基础上，利用XML 的规则对其进行重构，得到的 XHTML。 建立 XHTML 的目的是实现HTML 向XML的过渡。XHTML可以广泛应用于各种平台和终端，如图1.1.1 所示。

图 1.1.1  XHTML应用各种平台和终端

1.2 XHTML特点及发展优势

XHTML产生的原因，一方面是为了迎合未来的XML大量的应用，另一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者，开发者相兼容；于是便出现了XHTML。在HTML编写的网页中，标记使用有些混乱。由于许多浏览器都有自己的私有标签，而私有标签的大规模应用，就导致了不同浏览器上访问同一个网页的结果不同。举个例子iframe标签，就是IE的私有标签。

XHTML的产生正是为了统一这种标记使用混乱的局面，浏览器厂商将联合采用“严格的错误防御标准”，如果XML代码不兼容，浏览器将不再显示。 这可以说也是对浏览器的一个改变，目前的浏览器，为了最大限度的容错，把网页中的内容，最大限度的显示出来。而改变之后，变成只要不符合标准就不显示。就像代码编译中的警告信息一样，目前是忽略有可能导致问题的警告，而将来会把警告也作为错误来处理。

XHTML特点：

Ø        标签要配对出现；

Ø        标签名及其属性名小写；

Ø        单独标签也要使用 /> 关闭，例如
变成
；

Ø        属性值用双引号引起来，属性缩写被禁用；

Ø        使用id代替name等。

1.3 如何过渡到 XHTML

制作 XHTML页面，首先要声明符合需求的DOCTYPE，浏览器会根据页面声明的DOCTYPE 规则显示页面效果，保证在任何类型的浏览器中页面显示风格的一致性，DOCTYPE是 document type (文档类型)的简写，表明页面所采用的是XHTML版本。XHTML的基本结构如下：

DTD (例如上例中的 xhtmll-transitional.dtd)称作文档类型定义，其中包含了页面文档的规则，浏览器会根据用户声明的DTD来解析页面上的标签，并显示相应的效果。

XHTML 1.0提供 3种DTD声明可供选择：

Ø        过渡类型 (Transitional)：要求非常宽松的 DTD，兼容HTML 4.01 的版本。

DOCTYPE代码如下：

< html xmlns= "http://www.w3.org/1999/xhtml">

Ø        严格类型 (Strict)：要求严格的 DTD，不能使用在新规范中已经废除的标签和属性。

DOCTYPE代码如下：

Ø        框架类型 (Frameset)：包括过渡类型的所有内容及页面框架部分。

DOCTYPE代码如下：

过渡类型兼容以前版本定义，可以继续使用在XHTML新规范中已经废除的标签和属性；严格类型则不兼容已经废除的标签和属性。在实际开发中建议使用过渡类型的 DTD。

1.4 XHTML与HTML区别

如何快速地将 HTML页面转换成XHTML页面？它和HTML之间究竟有什么不同之处？需要再重新学习、记忆一些新标签吗？答案是否定的。XHTML是在HTML基础上经过改进而制定的一套规范，即编写XHTML页面时，遵循 XHTML规范就可以轻松地制作出 XHTML 页面。

以下是编写XHTML时需要遵循的一些规范。主要包括：

Ø        HTML元素必须正确地嵌套；

Ø        XHTML元素必须被关闭；

Ø        标签名必须用小写字母；

Ø        XHTML文档必须拥有根元素；

Ø        属性名称必须小写；

Ø        属性值必需加引号；

Ø        属性不能简写；

Ø        用 id属性代替name属性；

Ø        XHTML DTD 定义了强制使用的 HTML元素。

1.4.1  . 标签必须严格嵌套

HTML：

XHTML：

1.4.2  . 标签名称必须小写

HTML：

这是一个文本段落

XHTML：

这是一个文本段落

1.4.3  . 属性名称必须小写

HTML：

test 页面

XHTML：

test 页面

1.4.4  . 标签名称必须封闭

HTML：

这是一个文本段落

XHTML：

这是一个文本段落

即使是空元素的标签也必须封闭。

HTML：

这是一个文本段落

XHTML：

这是一个文本段落

1.4.5  . 属性值用双引号括起来

HTML：

NBA快讯

XHTML：

NBA快讯

1.4.6  . 属性值必须使用完整形式

HTML :

XHTML：

1.4.7  . 用 id 属性代替 name 属性

在XHTML 中不建议使用 name属性，应该使用 id取而代之。

HTML：

XHTML：

1.4.8  . 强制使用的 XHTML 元素

所有 XHTML 文档必须进行文档类型声明  (DOCTYPE declaration)，文档中必须存在 html、head、body元素，并且 title元素必须在 head元素中。

下面是一个完整的 XHTML文件结构：

1.4.9  . XHTML文档必须拥有一个根元素

所有的 XHTML 的元素必须嵌套于 根元素中，其余所有的元素可以有子元素，子元素必须是成对的且被嵌套在其父元素之中，基本结构如下：

. . . . . .

1.5 XHTML基本标签

从布局角度可以将标签分成两大类：block (块状)和 inline (行内)。本章列举了标题、项目列表、水平线、段落、换行、超链接层、行级容器等标签。

1.5.1  . 块状标签

默认状态下，块状元素的宽度为 100%，且后面隐藏附带有换行符，所以块状元素始终占据一行。以下列举一些常用的块状标签：

1. 标题标签 到

标题标签用于分隔正文、总结正文内容，到

标签可定义标题，定义最大的标题，

定义最小的标题。

1.1

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

在浏览器中预览的效果如图 1.1.2所示。

图 1.1.2  标题标签

2. 段落标签

标签用于将长文本分段落显示，其中可以加入文字、列表、表格等；该标签需成对出现。

段落内容

3. 水平分割线标签

---

---

标签用于在网页上插入一条水平分隔线。

< hr/>

1.2

欢迎学习XHTML页面设计

---

默认状态下，块状元素的宽度为 100%,

块状元素始终占据一行。

在浏览器中预览的效果，如图 1.1.3所示。

图 1.1.3  段落和水平线标签

4. 项目列表

标签用于列举没有先后顺序的项目元素，故又称无序列表。

• 项目元素

1.3

• 唐僧
• 猪八戒
• 孙悟空
• 沙悟净

在浏览器中预览的效果如图 1.1.4所示。

图 1.1.4  无序列表

其中type还有 circle（圆圈）、disc（圆点）两个常用选项。

5. 项目编号

标签用于列举有先后顺序的项目元素，故又称有序列表。

1. 项目元素

1.4

1. 唐僧
2. 猪八戒
3. 孙悟空
4. 沙悟净

在浏览器中预览的效果如图 1.1. 5 所示。

图 1.1.5  有序列表

6. 层标签

标签用于在页面上定义一个内容块，其中可以存放任何内容，如文本、表格、图像等。

文本内容

1.5

CSS样式代码：

HTML 代码片段：

导航栏

在浏览器中预览的效果如图 1.1.6所示。

图 1.1.6 

标签

1.5.2  . 行内标签

行内标签在默认情况下没有宽度和高度，其宽度和高度由行内标签中的内容决定，所以定义它的 width和 height属性无效，可以修改行内标签的 CSS样式属性 display为 block来更改其显示方式为块状显示。

1. 换行标签



标签用于在同一个段落中换行。

< br/>

1.6

这是第一段落中的第一行，

这是第一段落中的第二行

这是第二段落中的第一行，


这是第二段落中的第二行

在浏览器中预览的效果如图 1.1.7所示。

图 1.1.7 

标签

2. 超链接标签

（1） 超链接 通过使用 href属性，可以创建指向另外一个文档的链接。

链接文字

（2）锚点 通过使用 name 或 id属性，创建一个文档内部的书签 (即可以创建指向文档片段的链接)。

返回顶部

（3）发送电子邮件 链接到某个指定的电子邮件地址，此用法可以打开邮件客户端程序，用于给指定帐户发送邮件，但是在用户机器上需要安装邮件客户端软件才可以使用此功能。

联系我们

1.7

网易

后台管理

联系我们

在浏览器中预览的效果如图 1.1.8所示。

图 1.1.8  标签

3. 行级文本标签

标签一般被用在文本行中修饰特定文本的显示属性，或者局部辅助div标签完善页面布局。

行级文本内容

1.8

CSS样式代码：

HTML代码片段：

CSS的概念

---

CSS（Cascading Style Sheet，可译为"层叠样式表"或"级联样式表"）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。

在浏览器中预览的效果如图 1.1.9所示。

图 1.1.9span标签

1.6 CSS常用样式属性

XHTML用来显示页面数据，CSS 则可以提供更多的网页样式，并控制页面元素的外观，使网页元素更加丰富多彩。以下是一些常见的 CSS 布局属性。

1.6.1      显示属性(display)

display属性用于设定对象如何显示。

display : value;

display取值说明：

Ø        none：设置页面元素不显示

Ø        block：设置页面元素以块状方式显示

Ø        inline：设置页面元素在一行显示

1.9

CSS代码：

HTML代码：

使用了display:block;

没有使用display:block;

在浏览器中预览的效果如图 1. 1. 10 所示。

图 1. 1. 10display 属性

1.6.2      漂浮属性(float)

float属性定义元素在某个方向上浮动。

float：value;

float取值说明：

Ø        left：设置元素漂浮到父级容器的左侧

Ø        right：设置元素漂浮到父级容器的右侧

Ø        none：设置元素不使用漂浮

1.10

CSS代码：

HTML代码片段：

• 首页
• 博客
• 日记

在浏览器中预览的效果如图 1. 1. 11 所示。

图 1. 1. 11float 属性

1.6.3      外边距 (margin)和 内边距(padding)

margin属性用来定义块状容器四周的空白大小，padding属性用来定义块状容器内部的内容距离四周边框的空白大小 (图 1.1.12)。

图 1.1.12  margin 和 padding

margin：value ;

padding：value ;

margin和padding值使用计算机的相对单位或绝对单位。例如外边距的值需要设置5个像素应写为 margin：5px。其中：padding 不允许为负值，

padding: 2px; /* 定义元素四周内边距为2px */

padding: 2px 4px; /* 定义元素上下内边距为2px， 左右内边距为4px */

padding: 2px 4px 6px; /* 定义元素上内边距为2px， 左右内边距为4px ，下内边距为6px*/

padding: 2px 4px 6px 8px; /* 定义元素上内边距为2px， 右内边距为4px ，下内边距为6px，左内边距为8px*/

1.11

CSS代码：

HTML代码片段：

网页banner部分

热卖商品

在浏览器中预览的效果如图 1. 1. 13 所示。

图 1.1.13   边距应用

1.7 建立第一个XHTML布局页面

建立一个简单的上中下三行的XHML布局，请执行以下步骤：

Ø        打开 Dreamweaver 网页开发工具；

Ø        选择“文件”→“新建” →“文档类型”，选择“XHTML 1.0 Transitional”，如图 1.1.14所示；

图 1.1.14  选择 DOCTYPE

Ø        编写代码；

导航栏部分