HTML 入门和XHTML初级编程.docx

《HTML 入门和XHTML初级编程.docx》由会员分享，可在线阅读，更多相关《HTML 入门和XHTML初级编程.docx（15页珍藏版）》请在冰豆网上搜索。

HTML入门和XHTML初级编程

HTML入门

HTML英文是HypertextMarkedLanguage，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。

用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。

超文本文件中可以包含图片、声音、动画、影视等内容，而不仅仅是文本信息。

另外，超文本文件还可以通过链接从一个页面跳转到另外一个页面，从而实现与世界各地的主机相连接。

第1章认识HTML

1.1HTML的基本结构

HTML是一种标记语言，它的所有部分都是由标记<…>和标记包括起来的。

它的基本结构为：

这里是HTML的体部

这是HTML最基本的格式，都是不可缺少的。

在HTML中，标记命令是不区分大小写的。

还要说明的是HTML可不像Java一样那么智能，当标记命令出现错误时，HTML不会显示错误信息，这时候就需要自己去寻找错误。

1.2HTML的标记

HTML标记有一对尖括号以及其包含的标记元素组成，例如和就是一对标记。

在HTML文件中包含三种不同的标记，分别称为单标记、双标记以及标记属性。

1．单标记

某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思。

这类标记的语法是：

<标记名称>

最常用的单标签是
，它表示换行。

2．双标记

双标记由“开始标记”和“结束标记”两部分构成，必须成对使用。

其中开始标记告诉浏览器从此处开始执行该标记所表示的功能，而结束标签则告诉Web浏览器在这里结束该功能。

在开始标记的标记名称前加一个斜杠（/）即成为结束标记。

这类标记的语法是：

<标记名称>内容

其中，“内容”就是要被这对标记施加作用的部分。

例如想要对某段文字加粗显示，就可以将这段文字放在一对标记中，如下：

需要加粗的文字

3．标记属性

许多单标记和双标记的开始标记内可以包含一些属性，通过这些属性可以对这些标记进行更进一步的设置。

其语法是：

<标签名字属性1="属性值"属性2="属性值"属性3="属性值"…>

在这段语法中，各个属性之间没有先后次序，属性的值一般使用引号（""）括起来。

当属性值为数字的时候，例如设置字号级别时，一般则不使用引号。

另外，属性也可省略，当某一属性省略的时候，将取其默认值。

例如，单标记

如果给这一标记添加一些属性，如下：

在这段代码中，ALIGN属性表示线条的对齐方式，可取LEFT（左对齐），CENTER（居中，默认值），RIGHT（右对齐），这里设置为右对齐。

WIDTH属性定义线条的长度，可取相对值（由一对""括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=200），默认值是"100%"。

这段代码表示的效果如图1所示。

如果取消代码中ALIGN的属性，即将这段代码更改为：

那么将会取其默认值，线条将会采用默认的居中对齐方式，其效果如图2所示。

说明：

在源文件中，标记是不区分大小写的。

因此，与的写法都是正确的，而且其含义是相同的。

第2章一个简单的HTML实例

2.1编写HTML代码

HTML文件对其编写工具的要求并不高，可以在最简单的文本编辑工具中实现。

代码1-1第一个简单的HTML实例

第一个HTML文件

下面跟我进入HTML的领域

来领略这个奇妙而多彩的世界！

！

在这段代码中包括如下几个元素：

􀁺HTML的基本标记：

包括文件类型标记、文件头标记和文件主体标记。

􀁺HTML的标题：

一般通过页面标题来区分不同的页面，这里设置为“一个简单的HTML实例”，需要使用结束，是一个双标记，成对出现。

其语法是：

在HTML文件中，页面的标题只能有一个，用于帮助浏览者更好地识别页面。

XHTML初级编程

第1章Web、HTML和标记语言

1.6HTML

1.6.1元素和标记

在继续讨论前，应该明确我们所用的术语。

看一下以下代码；

＜hl＞Thisisaleveloneheading<／hl＞

这个条目整体上被称为元素。

‘N，是开始标记，‘／h1）是结束标记。

这两个标记之间的文本（Thisisaleveloneheading）是元素的内容。

元素具有类型，类型用标记的名称命名，所以以上例子是h1元素类型。

图1—8说明了这些术语之间的关系。

1.6.2标记属性

标记还可以有一个或多个属性，属性是关于元素内容应该如何显示的附加倍息。

例如，段落标记包含align属性，align属性的合法值是left、center或right。

1.7标记和标记语言

HTML是标记语言。

你可能想知道“标记”这个术语究竞是什么意思。

当我们将标记应用于文档（即，添加HTML标记）时，就是给文档添加了某些含义。

使用计算机术语来说“标记就是语义.

1.7.1语义标记

HTML被设计为一种既适合计算机读取又适合人阅读的标记语言cHTML标记适合由浏览器软件读取。

所有的浏览器都了解标记的含义，并且能够以标准的方式显示内容。

HTML只是由一种称为SGML（标准通用标记语言）的元语言（创建语言的模板）所创建的许多标记语自之一。

SGML通过称为DTD（文档类型定义）的规则集来创建这些语言。

这些语宫包括DocBook、TEI和MIL—sTD，它们分别用于有限的特定场合。

HTML流行起来的主要原因

首先是它容易学，因为标记语言中没有visMaIBask、Java或c?

t今的那些复杂的编程结构。

其次，许多第三方编辑器可以自动产生HTML代码，所以不必学习任何HTML知识就可以创建Web页面.

第三，当浏览器遇到它所不理解的HTML代码时．它不像大多数其他编程语言那样抛出一个错误，而只是跳过它并转到下一行。

当然，这也是因为Web本身惊人的发展.

1.7.2HTML标记

任何基于SGML的语言的概念都是很简单的。

基于sGML的语言（如HTML）都由一组来自于针对此语言的标记字典的标记组成。

浏览器包含一个分析器．它可以判断哪些标记组成了标记字典。

工作原理：

分析

浏览器中的分析过程做以下上作：

1）浏览器从头到尾读取文档，寻找标记。

具有<[标记名称]>）格式的标记称为开始标记，具有<／[标记名称]>格式的标记称为结束标记。

2）每当浏览器遇到“<”时，它知道将读取一个开始标记，每当遇到“<／”时，它知道将读取一个结束标记。

3）一旦捌览器读到“<”，它就会检查下一个“<”在哪里：

这两个字符之间的文本就是标记的内容。

此内容的第一个单同是标记名称，也就是元素类型的名称。

4）一旦浏览器读取了标记名称，浏览器会判断它是否认识这个标记名称。

如果浏览器认识这个标记名称，它就决定府该对开始标记和结束标记之间的内容做什么。

5）浏览器具有一个它所支持的所有标记的字典，这个字典包含关于如何处理（显示）标记内容的细节。

如果浏览器不能识别某个标记，它仍然需要以某种缺省方式显尔标记内容，这通常就是以缺省字体、不加任何样式地显示文本。

简单地说，这个策略使浏览器在新标记产生时可以保持向后兼容，并且防止编程中的拼写错误导致文档内容的显示发生重大变化：

6）当浏览器遇到时，它知道这是HTML文档的开头.

7）当浏览器遇到标记时，它知道从此处开始的信息是关于文档头部的总体信息，如标题。

1.7.3结构性的、样式性的和描述性的标记

我们在本章前面曾经提到，HTML本来只打算定义文档的结构，但后来也定义文档的表示方式。

结果，出现了三种HTML标记。

上面的简单例子已经显示了这三种标记：

1）结构性的标记。

这种标记布置文档的结构。

段落标记

和标题标记

属于这一类。

2）样式性的标记。

相当多的HTML（和xHTML）标记用于显示的样式化。

粗体标记（）属于这一类。

以后我们会看到，不鼓励使用此类标记，因为当文档在非可视媒体中表现时它会造成问题。

3）描述性的标记。

这也称为语义标记，但“捆述性”这个术语更好。

描述性的标记描述元素内容的性质如＜title＞和＜address＞属于这一类。

1．结构性的标记

结构性的标记总是有用的，实际上这就是XHTML存在的理由。

结构性的标记给出了文档的内容形式和完整性.

2．样式性的标记

样式性的标记描述显示元家内容时应该采用的祥式。

但是，样式性的标记是一把双刃剑，而且实际上它们只能应用于被显示在屏幕上或汀印出来的文档。

“明信片式”屏幕的设计概念与“信件式”页面非常不同。

所以，屏幕或页面的分辨李不同致使在一种媒体上看起来很好的字体在另一种媒体上效果可能非常差I专业设计人员会为这两种不同的媒体建立两套设计。

当然，对于声音浏览器和布莱叶点字法（盲文）阅读器，需要完全不同的设计。

因此．文档的样式设置最好留在样式单中。

我们将在本书后面详细讨论文档的样式设置。

一些祥式性的标记已经得到广泛使用．所以几乎不可能不用它们。

我发现我自己会不自觉地使用它们。

但是，如上所述，为了保持可访问性和跨媒体兼容性．最好使用描述性的标记。

3．描述性的标记

web标记的发展趋势是越来越多的标记变成描述性的。

原因之一是，这使得对web上无数文档的搜索变得更容易。

这也是引入XML的主要原因。

1.8总结

HTML是用于编写web页面的标记语言，本章讨论了它的基本知识。

但是HTML有些问题，这导致开发出一种新的称为XHTML的Web语言。

xHTML基于HTML和xML.我们将在下一章中讨论这些主题。

第2章从HTML到XHTML

我们将讨论以下主题：

．SGML，HTML的父亲。

·为什么HTML的生命不长了。

．XML，新语言。

．XML和HTML：

XHTML。

．XHTML以及它与HTML的差别。

2.1SGML

标准通用标记语言（SGML）从1986年以来就——直是”’种国际标准。

它最初用于重要的文档工作并定义对文本进行标记的通用方式。

SGML定义信息片段是什么。

例如，将标题定义为标题，将段落定义为段落。

利用sGML的语言（如DocBook、TEI和MIL—STD）用于非常复杂和专用的文档类型。

从标记的观点来看，这种完全被包围的语言非常强大。

文本中所有信息的类型都被明确地定义并被加上标记。

这使特定的信息可以被非常容易地找到、操作和格式化。

但是．从Web文档作者的观点来看，sGML的主要实力也就是它的主要缺点：

这种详细的标记使它生来就非常复杂。

精通sGML很费劲，以致于只有很少人掌握了它。

因此．对于打算设计web站点的人来说，SGML是不实用的，对技能的要求太高。

除了总体上不实用以外，要想让浏览器能够解释SGML标记的含义，SGML文档需要包含一个非常详细的DTD（文档类型定义）。

另外，任何基于SGML的语言也必须包含一个DTD。

这也是不实用的。

这位我们回到HTML。

我们在第1章中提到过，HTML是依照SGML而建立的许多标记语言之一.HTML使用了SGML的语法。

用计算机的术语说就是：

HTML是一个SGML应用程序。

还有其他几种依照SGML建立的语言，但HTML是其中最流行的，这主要是因为它比SGML和其他语言简单得多。

HTML中每个标记的规则在一个DTD清楚地说明，这个DTD依照SGML规则编写。

如果没有这个DTD，浏览器就不知道如何显示用H川L做标记了的页面。

实际上，HTMLDTD被嵌入在浏览器中，这样浏览器就知道‘b，标记的用途，而不需要到其他地方寻找DTD并在其中进行查找。

为什么HTML的生命不长了

既然HTMUbsoML易于使用，那么我们为什么不继续使用HTML呢?

问题是，Web的客户正在扩展到各种用户代理（即具有连接到In比rnet的软件的设备），而不再局限于桌面计算机上印web浏览器。

当前的浏览器在遇到不精确的HTML标记时允许许多“误差”，因为web浏览器司以花费处理时间来报算出HTML的实际含义。

这种对“坏”标记的容忍来源于HTML和浏览器9（发展历史。

对web的流行产生深远影响的Mosa5c浏览器采用与传统的SGML应用程序大不相同的方式来解释标记。

它并没有定义信息的类型．而是将标记当作构造格式的命令。

例如，Mosaic不认为

标记是在结构上标明一个段落，它只认为每次遇到

标记时应该插入空行。

Mosaic也对标记语法采用非常松散的方式。

例如，如果使用一个开始标记，如用让以于文本以粗体显示，那么任何强调结束标记都会关闭此样式：

Mosaic尽量恰当地显示你交给它的东西，这使编写Web页面非常容易。

不需要查看烦人的手册，只需使用MosaZc的viewsource菜单选项看看别人的代码，再考虑一下自己的内容。

你很可能可以记过复制别人的代码来完成自己的工作。

这很快导致许多人忙于编写HTML，而不计较语法对错。

如果HTML页面在Mo：

aic中看起来没问题，那么页面编写者就不会再深究语法了。

在生活中也是这样的，如果你的话不符合语法，但别人能够听懂，那么你就会一直使用这种不严谨的语言。

毕竞我们说话是为了交流，而不是参加语文考试。

随着新浏览器的出现以及越来越多的人开始使用HTML，他们希望对其文档的外观拥有更多的控制能力。

浏览器开始引入它们自己的新标记，同时保留和增强了显示不严谨酌HTML的功能。

浏览器越来越大．每个新版本都适应所有不同的D1D．并且可以解释松散的HTML语法。

你现在看到的大多数HTML（从严格意义上说）不是“正确”的HTML，因为它们不符合H1ML的规则。

但是，既然它们在浏览器中正常显不．没人会深究。

但是现在我们遇到真正的问题了：

虽然桌面浏览器具有破解不完整标记所需的资源，但是新型用户代理（如蜂窝电话、汽车、掌上电脑等等）不能浪费处理能力来推算不严谨的HTMI。

的含义。

另一个问题是Web的规模和复杂性在扩大。

你可以确信某个地方有你所需要的信息，另一个问题是怎么找到它呢?

web上无数的页面都是用非描述性的标记进行标识的。

最好有一个搜索引攀可以查看文本中的各个单词，这是一项“海量”的搜索工作。

这个问题限制了人们利用Web的效率。

如果Web页面用描述性（而不是结构性）的标记进行标识（这就是SGML的思路），搜索会更容易.这将意味着更多的应用程序可以只传递数据本身，这会提高Web连接的利用率。

数据传递之后，应用程序自己决定对这些数据做什么事。

这个解决方案就是XML，即可扩展标记语言。

2.2XML

我们将在第8章中详细讨论XML．但是现在我们来看看xML与我们已经讲到的概念的关系.主要解释XML和HTML何结合起来形成XHTML。

特别是，我们将解释创建所谓的“良构”文档的简单规则。

记住．XML的规则也应用于XHTML，因为XHIML本质上是用XML编写的。

W3C对XML提出的要求主要是：

它应该易于学习，易于在Internet上使用。

进一步的要求是：

它应该符合sGML及其思想，即标记是描述性的．而非结构性的。

XML标记并不定义某些东西看起来是什么样，而是定义它是什么，这就是SGML的优秀思想。

这意味着，谈取数据的系统自己决定对数据做什么。

它可以在表格里显示描述性信息，也可以对此数据进行计算，还可以将其写进数据库。

你所做的只是标明数据结构。

所以XML被设计为一种更简单、更易于使用的SGML版本，而且不复杂。

XML的另一个关键之处是它的可扩展性。

换句话说，任何人如果需要都可以建立新标记。

但是如果任何人都能创建新标记，浏览器如何能够解释这些标记呢?

为了使用新标记集，文档需要一个DTD吗?

这会使本已很大的浏览器变得更大吗?

最“酷”的事在这里!

因为XML实际上比SGML更严格，所以只要你遵循规则（我们称你的文档是良构的），就不需要DTD来解释它。

如果文档是良构的，那么用户代理（浏览器、蜂窝电话或你用来连接Internet的任何设备）不用DTD也能够成功地分析此文档。

如果浏览器被配置为识别特定的XML规则．那么不用独立的DTD也能够分析文档。

这将大大减小用户代理处理文档所需的处理能力。

因为它应该易于在Intemet上使用，所以文档应该不用DTD就能够分析。

在SGML中．用户代理总是需要内置的知识（如内置于HTML浏览器的DTD）或外部提供的DTD，才能分析文档。

XML文档应该是独立的，这个要求就是XML与SGML的最大区别。

2.2.1良构的XML文档

良构的XML文档就是遵循以下简单规则的文档。

不必担心，我们将在xHTML环境下重申这些概念，现在只是让你看一下：

●所有元素必须具有相匹配的开始标记和结束标记。

●空元素必须具有特殊形式。

●所有元素必须正确地崩套。

●必须只有一个根元素，它包含其他所有元素。

与SGML和HTML不同．则XML是大小写敏感的。

1．所有元素必须具有相匹配的开始标记和结束标记

开始标记和结束标记必须匹配。

在HTML中，有的标记可以不使用结束标记，例如

标记．在XHTML中，必须包含结束标记：

SGML和HTML中隐含的结束标记（如上面第1例中的

标记）是不被允许的。

2．空元素必须具有特殊形式

空元素不是由开始标记和结束标记组成的，而是只有一个标记，例如HTML中的

---

标记（它画一条横跨页面的水平线）。

它不封闭任何内容，只有结构性作用。

表示空元素的正确方式是在结尾处加一个斜线，例如：

---

.

在SGML中，这些元素采用开始标记的形式。

用户代理会查看DTD来了解元素是否是空元素这种新的更明确的形式使用户代理不必使用DTD就能识别空元素。

3．所有元素必须正确地嵌套

所有元素必须嵌套，也就是说，一个元素必须包含在另一个元素中，而且它们不能重叠。

4．必须只有一个根元素，它包令其他所有元素

必须只有一个根元素．它封闭整个文档主体。

这样．分析器或用户代理就可以知道什么时候已经读完了整个文档。

2.2.2XML分析器

在第1章中，我们已经讲到过分析器以及它们如何处理标记过的文档。

读取XML文档需要XML分析器。

XML分析器分为两种：

进行合法性检查的分析器和不进行合法性检查的分析器。

我们将在第8章中讲解进行合法性检查的分析器。

在这里，我们只介绍不进行合法性检查的分析器。

XML文档可以像SGML文档那样具有DTD。

进行合法性检查的分析器将检查XML文档是否符合DTD中的所有规则。

而不进行合法性检查的分析器只检查XML文档是否是良构的。

不进行合法性检查的XML分析器将获取XML文档，并且检查它是否是良构的。

分析器可以对XML文档做几件事。

简单地说，它将分析后的文档传递到软件的另一部分（通常在同一个应用程序中），以便以某种形式显示文档。

有几种xML分析器可用。

在本书中，我们将一直使用IE5浏览器作为不进行合法性检查的分析器。

这并不是说它比其他分析器出色，只是因为它容易获得。

实践——编写一个筒单的XML文档

后缀XML很重要的，因为它告诉我们的不进行合法注检查的分析器（IE5）：

我们正在处理一个XML文档。

3）现在，通过在此文件上右击并选择OPEN，在IE5中打开它。

屏幕如图2，2所示。

4）你会注意到，在具有子元素的元素（即firsdoc和footer）的左边有一个减号。

如果点击此减号，树型结构破折叠，减号变成加号。

点击footer旁边的减号后，屏幕如图2、3所示。

工作原理

这里有几点需要注意。

首先，IE5不对文档加任何样式，只是将它显示为一个树型结构。

让我们看看这个XML文件的几个方面。

我们已经粗略了解了XML，现在来看看XML和HTML加在一起会发生什么。

2.3XHTML

我们已经讨论过基于SGML的HTML．它是一种得到广泛使用的语言。

我们也讨论了XML，它几乎是万能的，可以进行复杂的数据显示和数据操作。

下一步是将这两种语言结合起来．形成一种更好的语言：

XHTML。

XHTML采用HTML的词汇表和XML的语法。

它的标记和元素几乎与HTML完全相同（只有几处例外）；同时，因为它具有XML语法（而不是SGML语法），所以XML用户代理可以显示或解释它。

它结合了XML和HTML的长处。

下面介绍XHTML的优点。

1HTML已得到广泛使用

我们曾说过，HTML已不能满足快速发展的电子世界的需求。

小型可移动设备不具有处理针对桌面机器所编写的页面所需的内存和网络带宽。

另外，它们常常青要特殊的编码。

原先通用的方式不再适用。

但是，使用一种语言的人越多．它作为交流工具就越有用。

有非常多的人在使用HTML。

无论xML在理论上多么好，也不可能说服所有人都转而使用“纯”XML。

W3C的解决