HTML 入门和XHTML初级编程.doc

html 入门html 英文是hypertext marked language，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。用html 编写的超文本文件称为html 文件，它能独立于各种操作系统平台。超文本文件中可以包含图片、声音、动画、影视等内容，而不仅仅是文本信息。另外，超文本文件还可以通过链接从一个页面跳转到另外一个页面，从而实现与世界各地的主机相连接。第1 章 认识html1.1 html 的基本结构html 是一种标记语言，它的所有部分都是由标记和标记包括起来的。它的基本结构为：这是html 头部中，内容为名称这里是html 的体部这是html 最基本的格式，都是不可缺少的。在html 中，标记命令是不区分大小写的。还要说明的是html可不像java 一样那么智能，当标记命令出现错误时，html 不会显示错误信息，这时候就需要自己去寻找错误。1.2 html 的标记html 标记有一对尖括号以及其包含的标记元素组成，例如和就是一对标记。在html 文件中包含三种不同的标记，分别称为单标记、双标记以及标记属性。1单标记某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思。这类标记的语法是：最常用的单标签是，它表示换行。2双标记双标记由“开始标记”和“结束标记”两部分构成，必须成对使用。其中开始标记告诉浏览器从此处开始执行该标记所表示的功能，而结束标签则告诉web 浏览器在这里结束该功能。在开始标记的标记名称前加一个斜杠（/）即成为结束标记。这类标记的语法是：内容其中，“内容”就是要被这对标记施加作用的部分。例如想要对某段文字加粗显示，就可以将这段文字放在一对标记中，如下：需要加粗的文字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 实例”，需要使用标记。 html 的页面内容：在页面中插入了3 种html 元素，分别是一个二级标题、一条水平线以及两段文字。这3 种元素使用的标记不同，显示的效果也不同，这在后面的章节中还将有详细的介绍，这里不再赘述。第3 章 html 基本标记一个html 文件所包含的基本标记主要包括文件类型标记（也称为html 标记）、文件头标记、页面标题以及文件主体标记。3.2 文件头html 文件头标记是以为开始标记，以为结束标记的双标记。它用于包含当前文件的相关信息，一般包括标题、基底信息、元信息等。一般情况下，css 样式也是定义在头元素中的。通常在文件头标记之间的内容被称为html 的头部。定义在html 头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用。例如，定义在html 头部的标题不会显示在页面中，但是却会在页面的标题栏中出现。在文件的头部通常包含表1-1 中的部分或全部标记。当然，这些标记也可以省略。在表中列出的这些标记中，标记是最常用的，一般的页面中都会进行设置。3.3 文件主体html 文件主体标记是以为开始标记，以为结束标记的双标记。它用于包含当前文件的页面内容。也就是说，在该标记之间的内容是页面中真正要显示的内容，包括文字、图片、表格等。在标记中可以包含多种属性，用于设置页面的背景、字体等属性。第4 章 页面标题title页面标题标记是特殊的一个标记，它设置的内容并不显示在页面中，而是显示在浏览器的标题栏，用来说明文件的用途。因此，在设置该标记的时候，要使其能够体现整个页面的主题。一般情况下，每个html 页面都应该有标题。说明：对于html 文件来说，该标记不是必需的。但这一标记很重要，因此作为本书的第一个具体标记来介绍。在html 文件中，标题信息设置在页面的头部，也就是位于与标记之间。标题标记以开始，以结束，是一个双标记，成对出现。其语法是：标题内容在html 文件中，页面的标题只能有一个，用于帮助浏览者更好地识别页面。xhtml初级编程第1章web、html和标记语言1.6 html1.6.1元素和标记 在继续讨论前，应该明确我们所用的术语。看一下以下代码； hlthi s is a level one headinghl这个条目整体上被称为元素。n，是开始标记，h1)是结束标记。这两个标记之间的文本(thi s is a level one heading)是元素的内容。元素具有类型，类型用标记的名称命名，所以以上例子是h1元素类型。图18说明了这些术语之间的关系。1.6.2标记属性标记还可以有一个或多个属性，属性是关于元素内容应该如何显示的附加倍息。例如，段落标记包含align属性，align属性的合法值是left、center或right。1.7标记和标记语言 html是标记语言。你可能想知道“标记”这个术语究竞是什么意思。当我们将标记应用于文档(即，添加html标记)时，就是给文档添加了某些含义。使用计算机术语来说“标记就是语义.1.7.1语义标记html被设计为一种既适合计算机读取又适合人阅读的标记语言c html标记适合由浏览器软件读取。所有的浏览器都了解标记的含义，并且能够以标准的方式显示内容。 html只是由一种称为sgml(标准通用标记语言)的元语言(创建语言的模板)所创建的许多标记语自之一。sgml通过称为dtd(文档类型定义)的规则集来创建这些语言。这些语宫包括docbook、tei和milstd，它们分别用于有限的特定场合。html流行起来的主要原因首先是它容易学，因为标记语言中没有vismai bask、java或c?t今的那些复杂的编程结构。其次，许多第三方编辑器可以自动产生html代码，所以不必学习任何html知识就可以创建web页面.第三，当浏览器遇到它所不理解的html代码时它不像大多数其他编程语言那样抛出一个错误，而只是跳过它并转到下一行。当然，这也是因为web本身惊人的发展.1.7.2 html标记任何基于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.1 sgml 标准通用标记语言(sgml)从1986年以来就直是”种国际标准。它最初用于重要的文档工作并定义对文本进行标记的通用方式。sgml定义信息片段是什么。例如，将标题定义为标题，将段落定义为段落。利用sgml的语言(如docbook、tei和milstd)用于非常复杂和专用的文档类型。从标记的观点来看，这种完全被包围的语言非常强大。文本中所有信息的类型都被明确地定义并被加上标记。这使特定的信息可以被非常容易地找到、操作和格式化。但是从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做标记了的页面。实际上，html dtd被嵌入在浏览器中，这样浏览器就知道b，标记的用途，而不需要到其他地方寻找dtd并在其中进行查找。为什么html的生命不长了既然htmubsoml易于使用，那么我们为什么不继续使用html呢?问题是，web的客户正在扩展到各种用户代理(即具有连接到in比rnet的软件的设备)，而不再局限于桌面计算机上印web浏览器。当前的浏览器在遇到不精确的html标记时允许许多“误差”，因为web浏览器司以花费处理时间来报算出html的实际含义。这种对“坏”标记的容忍来源于html和浏览器9(发展历史。对web的流行产生深远影响的mosa5c浏览器采用与传统的sgml应用程序大不相同的方式来解释标记。它并没有定义信息的类型而是将标记当作构造格式的命令。例如，mosaic不认为标记是在结构上标明一个段落，它只认为每次遇到标记时应该插入空行。mosaic也对标记语法采用非常松散的方式。例如，如果使用一个开始标记，如用让以于文本以粗体显示，那么任何强调结束标记都会关闭此样式： mosaic尽量恰当地显示你交给它的东西，这使编写web页面非常容易。不需要查看烦人的手册，只需使用mosazc的view source菜单选项看看别人的代码，再考虑一下自己的内容。你很可能可以记过复制别人的代码来完成自己的工作。这很快导致许多人忙于编写html，而不计较语法对错。如果html页面在mo：aic中看起来没问题，那么页面编写者就不会再深究语法了。在生活中也是这样的，如果你的话不符合语法，但别人能够听懂，那么你就会一直使用这种不严谨的语言。毕竞我们说话是为了交流，而不是参加语文考试。随着新浏览器的出现以及越来越多的人开始使用html，他们希望对其文档的外观拥有更多的控制能力。浏览器开始引入它们自己的新标记，同时保留和增强了显示不严谨酌html的功能。浏览器越来越大每个新版本都适应所有不同的d1d并且可以解释松散的html语法。 你现在看到的大多数html(从严格意义上说)不是“正确”的html，因为它们不符合h1ml的规则。但是，既然它们在浏览器中正常显不没人会深究。但是现在我们遇到真正的问题了：虽然桌面浏览器具有破解不完整标记所需的资源，但是新型用户代理(如蜂窝电话、汽车、掌上电脑等等)不能浪费处理能力来推算不严谨的htmi。的含义。另一个问题是web的规模和复杂性在扩大。你可以确信某个地方有你所需要的信息，另一个问题是怎么找到它呢?web上无数的页面都是用非描述性的标记进行标识的。最好有一个搜索引攀可以查看文本中的各个单词，这是一项“海量”的搜索工作。这个问题限制了人们利用web的效率。如果web页面用描述性(而不是结构性)的标记进行标识(这就是sgml的思路)，搜索会更容易.这将意味着更多的应用程序可以只传递数据本身，这会提高web连接的利用率。数据传递之后，应用程序自己决定对这些数据做什么事。这个解决方案就是xml，即可扩展标记语言。2.2 xml 我们将在第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环境下重申这些概念，现在只是让你看一下： l 所有元素必须具有相匹配的开始标记和结束标记。l 空元素必须具有特殊形式。l 所有元素必须正确地崩套。l 必须只有一个根元素，它包含其他所有元素。与sgml和html不同则xml是大小写敏感的。1所有元素必须具有相匹配的开始标记和结束标记开始标记和结束标记必须匹配。在html中，有的标记可以不使用结束标记，例如标记在xhtml中，必须包含结束标记：sgml和html中隐含的结束标记(如上面第1例中的标记)是不被允许的。2空元素必须具有特殊形式空元素不是由开始标记和结束标记组成的，而是只有一个标记，例如html中的标记(它画一条横跨页面的水平线)。它不封闭任何内容，只有结构性作用。表示空元素的正确方式是在结尾处加一个斜线，例如：.在sgml中，这些元素采用开始标记的形式。用户代理会查看dtd来了解元素是否是空元素这种新的更明确的形式使用户代理不必使用dtd就能识别空元素。3所有元素必须正确地嵌套所有元素必须嵌套，也就是说，一个元素必须包含在另一个元素中，而且它们不能重叠。4必须只有一个根元素，它包令其他所有元素必须只有一个根元素它封闭整个文档主体。这样分析器或用户代理就可以知道什么时候已经读完了整个文档。2.2.2 xml分析器在第1章中，我们已经讲到过分析器以及它们如何处理标记过的文档。读取xml文档需要xml分析器。xml分析器分为两种：进行合法性检查的分析器和不进行合法性检查的分析器。我们将在第8章中讲解进行合法性检查的分析器。在这里，我们只介绍不进行合法性检查的分析器。xml文档可以像sgml文档那样具有dtd。进行合法性检查的分析器将检查xml文档是否符合dtd中的所有规则。而不进行合法性检查的分析器只检查xml文档是否是良构的。不进行合法性检查的xml分析器将获取xml文档，并且检查它是否是良构的。分析器可以对xml文档做几件事。简单地说，它将分析后的文档传递到软件的另一部分(通常在同一个应用程序中)，以便以某种形式显示文档。有几种xml分析器可用。在本书中，我们将一直使用ie5浏览器作为不进行合法性检查的分析器。这并不是说它比其他分析器出色，只是因为它容易获得。实践编写一个筒单的xml文档后缀xml很重要的，因为它告诉我们的不进行合法注检查的分析器(ie5)：我们正在处理一个xml文档。 3)现在，通过在此文件上右击并选择open，在ie 5中打开它。屏幕如图2，2所示。4)你会注意到，在具有子元素的元素(即firsdoc和footer)的左边有一个减号。如果点击此减号，树型结构破折叠，减号变成加号。点击footer旁边的减号后，屏幕如图2、3所示。工作原理这里有几点需要注意。首先，ie 5不对文档加任何样式，只是将它显示为一个树型结构。让我们看看这个xml文件的几个方面。我们已经粗略了解了xml，现在来看看xml和html加在一起会发生什么。2.3 xhtml我们已经讨论过基于sgml的html它是一种得到广泛使用的语言。我们也讨论了xml，它几乎是万能的，可以进行复杂的数据显示和数据操作。下一步是将这两种语言结合起来形成一种更好的语言：xhtml。 xhtml采用html的词汇表和xml的语法。它的标记和元素几乎与html完全相同(只有几处例外)；同时，因为它具有xml语法(而不是sgml语法)，所以xml用户代理可以显示或解释它。它结合了xml和html的长处。 下面介绍xhtml的优点。1 html已得到广泛使用 我们曾说过，html已不能满足快速发展的电子世界的需求。小型可移动设备不具有处理针对桌面机器所编写的页面所需的内存和网络带宽。另外，它们常常青要特殊的编码。原先通用的方式不再适用。但是，使用一种语言的人越多它作为交流工具就越有用。有非常多的人在使用html。无论xml在理论上多么好，也不可能说服所有人都转而使用“纯”xml。w3c的解决方案将html重新定义为一组模块，可以和其他标记集结合使用。第一步是将html重新整顿为xml应用程序。这个应用程序就是xhtml，它兼容html和xml。2让浏览器可以适应如果现在完全转到xml，那么所有使用旧式浏览器的人就会遇到麻烦。让75的网