第二章: HTML基础
综述
这一章包含了一个半小时的HTML之旅可以教你超文本标记性语言(HTML)的结构和编辑。如果你已经熟悉HTML，那么你可以直接跳过本章，并且直接阅读第三章，“动态网络应用指南”。如果你还不了解HTML，那你就应该读一下这章并且使用包含的文件作文一个起点来练习创建HTML。你应该觉得在开始创建C#应用程序之间学习HTML是对的。就像其他的想法一样，HTML就是一个你可以应用，组合并且扩展来创建非常复杂的结构的想法。
什么是HTML
HTML是一种标识语言，尽管它最初的目的是设计一种内容描述语言。像是一个文字处理器，它包含了一些命令，这些命令可以在很宽泛的范围内告诉计算机文档的内容是什么。例如，使用HTML，你可以告诉计算机当前的文档包含一个段落，一个项目符号利润表，一个表格或者是一个图片。HTML转发引擎符合显示文字和图像到屏幕上。HTML和文字处理器的不同在于文字处理器工作在一个私有的格式上。因为它们是私有的，所以一个文字处理器通常不能直接阅读另一个文字处理器的文件格式。相反的，文字处理器会使用一个特殊的程序，叫做导入(Import)/导出(Export)来把一种文件类型翻译成另一种。
相比较而言，HTML是一个开放的，世界范围的标准。如果你使用在版本3.2中的命令创建一个文件，它可以在世界的任何地方的任何操作系统的几乎所有的浏览器上显示。HTML最新的版本4.0现在已经在90%的浏览器上使用。
HTML是一个叫做标准通用标识语言(SGML)的一个子集。SGML已经被开发了大约15年并且包含许多HTML缺少的特性，但是也造成它实现起来非常复杂。这种复杂性使得它既难被创建也难被恰当的显示。
作为SGML语言的一个子集，HTML被用来在一个很慢的拨号网络链接(Dial-up Connection)——互联网——中提供轻量级的文字和图像显示标准。最开始，HTML只有很少的特性——在过去的几年中，它增长的非常缓慢。然而，你可以在几个小时之内学到HTML的核心命令集。
HTML只包含两种信息：标识(Markup)，它包括在尖括号(<>)中所有的文字，以及内容(Content)，它是所有的不包含在尖括号中的文字。这两点的不同是浏览器不会显示标识，相反的，标识包含了告诉浏览器怎样显示内容的信息。
例如，以下的HTML:
<html>
<head><title></title></head>
<body>
</body>
</html>
是一个完全正确的HTML文件。你可以保存这组命令为一个文件，并在你的浏览器中看一下，它会显示一个没有错误的文件——但是你不会看到其他的任何东西，因为这个文件不包含任何内容。所有的文字都是标识。
相反的，下面的文件不包含标识：
This is a file with no markup
尽管大部分浏览器会显示这个没有任何标识的文件的内容，但这并不是一个合法的HTML文件。
在尖括号之间的独立部分的标识叫做标签(Tag)，有时也叫做命令(Command)。这里有两种类型的标签——开始标签和结束标签，而且他们通常是成对出现（尽管他们可能分散在文件的两个部分）。唯一的不同就是结束标签以斜杠”/”(Forward Slash)开始，例如</html>。除了斜杠，开始标签和结束标签是完全相同的。
HTML可以做什么
HTML可以让你创建半结构化(Semi-structured)的文档。头部的命令可以划分并且分类你的文档。HTML也有基本的命令来格式化和显示文本，图片，接收用户输入，并且发送用户信息到服务器去接受后端处理。另外，它也可以让你创建一个特殊的文本或者是图片域，当这个域被点击的时候，会跳到或者是从一个HTML文件超链接到另一个文件。因此，这就可以创建一系列相互关联的页面。
这一系列通过超链接创建的网页叫做一个程序；然而，这个程序并不像你要在这个书中要学到的程序因为这一系列的页面没有只能也不能做出任何判断。所有的功能都存在于HTML的作者所选择的标签集里面（那些主要工作是创建HTML文档的人们被叫做作者(Author)，而不是程序员(Programmer)）。在一个或者一组路径中把一系列的文件链接在一起叫做一个站点(site)，或者是一个网站(Web site)。
尽管缺少决策制定能力，一个网站有两个主要的目的：
它为非程序员提供了一种创造功能完全的包含有用信息的吸引人的网站的方式。（当然，它也为人们提供了一种创造充满无用信息的毫无吸引力的网站的方式，但是我并不想谈论它。）
通过互联网，使得网站信息可以全球推广。
为什么HTML那么重要
在HTML出现之前，在屏幕上显示一个任何人使用任何操作系统都可以读的充满文本和图片信息的页面并不是那么容易。事实上，还没有任何简单的可以不用你自己写程序或者使用类似于PowerPoint的陈述程序就显示任何东西的方法。这种限制意味着只有那些在相同程序上使用相同程序——通常是使用相同版本的程序的——用户才能看到。
HTML之所以重要是因为它给千百万人提供了一种他们以前从没有看到过的访问在线信息的方式。HTML是第一种让非程序员可以在屏幕上用以显示文本和图片的方法，该方法不会只把读者局限于与内容的作者拥有相同的程序(或者是阅览器)的人群。在某种意义上说，浏览器是一个通用的内容阅览器，而且HTML是一个通用的文件格式。事实上，直到今天，HTML和文本曾经是唯一的两种通用文本模式；然而，现在我们可以加上XML了，XML可以解决许多文本和HTML没有办法解决的信息表达问题。
HTML的局限性
尽管HTML有广泛的应用并显示了强大的能力，事实上是它的通用文件模式，作为一种布局语言，以及文件模式，HTML还是在创建结构化文档的问题上有极大的限制。首先，平面HTML没有办法制定内容在页面中的特定位置，例如，是否水平，是否垂直，是否要沿着Z轴(z-axis)布局，这个Z轴可以用来控制对象出现的“层“。第二，正如我说的，HTML不是一个编程语言，所以它没有判断能力。第三，HTML是一种固定的标识语言。换句话说，所有的标签都是提前定义好的，你不能制定你自己的标签。万维网，或者说是W3C，定义了组成HTML的标签。 除非W3C扩展了标准，否则标签集是不会变的。这既有优点又有缺点。优点是大部分浏览器都能显示大部分的HTML。缺点是因为标签集被限定下来了， 这也鼓励——不对，是促使——许多公司会创建新的扩展标签集来增加更多的功能。
在如今，许多在HTML中有用的概念，例如表单，表格，脚本，框架，以及层叠样式表，都是以私有扩展的方式出现，但是之后被W3C采用并被加入到其标准之中（请参考www.w3.org来获取更多信息）。这些扩展最终变得很普遍，并且促使W3C重新评价并且更新HTML的标准。经过这种扩展以及修正过程，许多曾经是私有的扩展变成HTML标签集的一部分。因为这个，HTML已经有好几个版本。最近的就是HTML 4.01。
语法：标签和属性
一个合法的HTML文件只有少数几个要求。请看一下这个例子：
<html>
<head>
<title>Hello World</title>
</head>
<body>Hello World
</body>
</html>
这个例子既包含标签，也包含内容。标签就是在尖括号(<>)中的文本。如果你在浏览器中看一下这个文件，你会看到一个类似于图2.1显示的图像。
图2.1：Hello World文件(HelloWorld.htm)
HelloWorld.htm文件是一个很短但是完整的HTML文件。所有的HTML文件都以<html>标签为始，并以</html>为终（读成“html终结”或者“html结束”）。在这两个标签之间是其他标签以及内容。所以<html>标签包含其他标签。包含其他标签的标签被叫做包含标签(Containing Tags)，或者更确切的说是块元素(Block Element)。在本书中，我将使用块元素来命名包含其他标签的标签。注意，<head></head>标签也是一个块元素，除此以外，它还包含一个<title></title>标签。
HTML标签分为两个部分——起始标签(Start Tag)以及结束标签(End Tag)。尽管并非所有的浏览器都要求在所有的情况下都要加上结束标签，你还是应该立刻养成这样做的习惯。因为当你使用XML的时候（也许你以后某个时候会使用XML），所有的类都需要结束标签。现在，我将不会对于每个标签都写上起始标签和结束标签。例如，当我要写一个标签</head><head>时，我会仅仅写成<head>。你可以假设结束标签还是存在的。
注意：HTML文件是文本文件。他们只包含两种类型的条目：指令（也叫做标签或者是标识）以及内容。你可以使用任何文本编辑器来编辑HTML文件。我比较喜欢使用网景浏览器来编辑小文件，用一个知道HTML的文本编辑器，例如VS HTML编辑器，HomeSite，Frontpage，或者是Dreamweaver来编辑大文件。因为这些编辑器会把标签染色，自动插入结束标签，通过IntelliSense或者是标签/属性列表来预测语法，并且可以提供许多能帮助编辑的特性。
什么是标签
根据你可以擅长的领域，你可以对标签有如下不同的理解方式。例如，一种方式是把标签想成一个嵌入式命令(Embedded Command)。标签制定了一部分文本，这部分文本会被浏览器做特殊的处理。处理方式会从“让下一个字符变成粗体”到“把下一行当作代码”等不同。另一种方式是把标签想成是隐藏信息的包装器。浏览器不会显示标签里面的信息。事实上，如果浏览器不理解那个标签类型，那它就会忽略它。如果你想要放一些信息在文件中，但是又不想让它在屏幕上显示出来，那你会发现这个非常方便。第三种方式是把标签想成一个对象。例如，<p>标签包含了一段话。一段话会有很多属性——缩排，词或字符计数器，样式——我保证当你使用一个单词处理器时，你一定会运行一个能够把段落当成对象的扫描程序。
什么是结束标签
结束标签只是很简单的标记文档的结束。计算机并不聪明——一旦你决定开始用粗体，那它会一直开到你关为止。就是一个警告：大部分浏览器会让你跳过许多通用的结束标签，但是一定要接受我的建议：不要忽略它们。在未来，你可能需要转换这些文档为XML格式——在XML中，结束标签是必不可少的。
为什么HTML看起来像<这样>
在HTML使用的尖括号是有一个很长的历史的。HTML从SGML中继承了语法，但是那并不是尖括号的唯一用途。在19世纪80年代末，我第一次在XyWrite中看到它们。XyWrite是一个文字处理器，该处理器使用HTML样的嵌入式指令并且它在作者之间非常流行。它流行的原因是它使用位和字节来表达信息，但是这是一个有趣的故事，所以请慢慢听我讲。
你在计算机里面输入的每一个字符其实都是一个特定的数字。对于不同的计算机系统，有几种不同的数字集。但是在今天，最常用的就是美国标准信息交组(ASCII)。例如，A的ASCII编码值就是65，空格的编码值是32，0的编码值是48。计算机并不会按照你做的来表达数字——它使用二进制记数法。由于历史原因，大部分现代的微型计算机只会操作8的倍数。每一个8位组叫做一个字节——一个字节可以有256种不同的值，对于表达字母，数字以及标点，一些控制字符，一些重读字符，以及少数可以用来画简单图像的线条是足够的。
所有可见字符都有一个低于128的值。大部分的文件类型，包括那时候的文字处理器，使用大写字母作为嵌入式指令。例如，一种文件类型可能会使用157作为一个段落开始的标记，158作为一个段落结束的标记。这个的原因是如果指令能够限定到一到两个字符，那么文件本身会小很多——当然，这些字符是需要在大部分文本文件中不常出现的。你必须记得，在那时，内存非常贵并且是限量供应的。相反的，XyWrite的指令最少可以用3个字节长来表达，而且很多人认为这是对空间的一种浪费。
让我们回到故事中来。记者是第一批通过电话系统来使用电子计算机通讯去发送文件。早期版本的通讯程序可以只使用7个位来表达信息——最后一位是停止位(Stop Bit)。因为如果你通过电流传输文件，那文件的格式化信息会丢失，所以他们不会使用那个需要大写字符集的程序。但是因为XyWrite使用尖括号，那就可以使用普通字符在7位内表达指令，所以就可以为XyWrite文件传输文本和格式化信息。所以XyWrite就通过把尖括号变成文字处理器的第一个字符来做标记。
好了，故事讲够了。其实HTML使用尖括号的真实原因是比较无趣的——这个模式已经在SGML被定义了。这种模式非常利于人们的读写，并且这种模式也非常容易让程序来解析——也就是说把他们分成几个部分。
属性语法
标签可以包含一个主要的指令以及无限的相关值，叫做属性(Attribute)。每个属性都有一个名字和对应的值。你必须把属性从指令或者是前面的属性中通过空白字符分离出来。空白字符包含空格符，制表符，以及回车符/换行符。浏览器会忽略空白字符(除非不存在)。对于浏览器而言，泛空格符就是另一种指令，叫做分隔符。分隔符通过字符或者是字符串来区分项目(Item)。使用泛空白符是非常自然的因为我们就是用它来分隔单词。
不同类型的分隔符有不同的含义。例如，除了在单词间使用空白符，我们也会在句子间使用句号。在HTML，尖括号区分标签，空白符区分属性，等号会把属性的名称从值中分离出来。类似的，HTML使用引号来区分值，因为属性值可能包含任何的分隔符：空白符，等号或者是尖括号。
这里有一些例子：
<font face="Arial" size=12>
<font>标签有两个属性——face和size，他们的每一个都有一个对应值。并非所有的值都是这么简单的。看一下下面这个标签：
<input type="hidden" name="txtPara" value="He was a codeslinger, lean and nervous, with quick hands that could type or shoot with equal accuracy.">
再一次说，并不是所有的浏览器需要用引号来包含每一个属性值。再再一次，即使并不需要，你也应该强制你自己每次都添加上。我保证如果你不这样做，在你用.NET的编程生涯中一定会被引号引发某种问题。这里有两种HTML标签的版本，一个有引号，一个没有：
<input type="text" value="This is my value.">
<input type=text value=This is my value.>
在浏览器中，这些标签会以文件输入控件的方式来显示——等价于Windows应用程序里面的当行文本框。第一个输入控件包含了文字“This is my value”。但是第二个版本只包含一个单词“This”。这是因为，没有引号，浏览器必须退到下一个分隔符来标记属性值的终结。在这种情况下，下一个分隔符就是空格。浏览器会忽略接下来的三个单词“is”，“my”和“value”，因为这三个单词不能被认为是关键字，而且他们也不是符合格式的属性——因为他们既没有等号也没有值。
你可以使用单引号或者双引号来分割属性值；换句话说，下面两个是完全相同并且是合法的：
<script language='VBScript'>
<script language="VBScript">
你能使用三种方法来在值中包含引号：
You can embed quotes in a value three ways:
把外面封装的引号变成相反的类型；例如，value="Mary's socks"或者是value='The word is "important"'。
把在里面出现的引号输入两次：'value=Bill''s cat'。
使用实体(Entity)——实体就是那些可以代替不合法的字符的字符。有很多特殊的实体；例如，能表达引号的实体是六个字符"。但是在大部分浏览器中，你都可以使用实体来显示任何字符——包括Unicode字符。方法是这些实体要包含一个(&#)，一个你想要显示字符的二进制值，以及一个分号。你也可以使用16进制值但是需要放置一个x在#之后。所以，单引号（ASCII值39）的实体值是'，或者使用16进制值，'。因此，另一种嵌入单引号的方法是"value='Bill's cat'"或者是16禁止的"value='Bill's cat'"。
更多HTML语法
属性值有最复杂的语法。对于HTML的其他语法都很直接。
空白符是可选的 除非你特意包含一个标签来强制浏览器包含空白符，否则浏览器会忽略它。当把语句"Welcome to Visual C# and ASP.Net!" and "Welcome to Visual C# and ASP.NET!"提交给浏览器，二者会在屏幕上显示完全相同的结果。
大小写是无关的 HTML解析器会忽略大小写，所以你可以用大写(<FONT>)或者小写(<font>)来写标签。已经说过，你应该尽量让大小写统一（是的，XML是大小写敏感的）。使用小写字母有两个好处。第一，W3C会标准化兼容XML版本的HTML为小写，叫做XHTML。第二，小写字符需要更少的击键次数。撇开兼容性不说，选择随便大小写的一种并且让它们尽量一致。我一般是用小写字符，但是我承认，我并没有完全保持大小写一致。
标签的顺序是重要的 一个封装标签必须完全封装任何一个内置标签。例如<font size=12><b>This is bold</font></b>是一个不合法的HTML语法因为你必须在<font>标签前关闭粗体标签<b>。合法的方式是这样的<font size=12><b>This is bold</b></font>。
这些简单的规则会帮助你写出完美的HTML。
在写起始标签的时候写上结束标签 例如不要指望先写<html>之后在某个时刻补上</html>。一定要同时写出它们，并且在标签之间插入内容。
使用小写标签 因为很容易输入
使用模板 模板是提前写好的文件，你只需要插入内容即可。因为模板已经包含了需要的标签，所以会为你节省很多时间。
适当缩排标签 在你的编辑器中把Tab或者是缩排的值设小一点——我发现3个空格就很好。这会让缩排足够明显，又不会让那种比较长的行滚出屏幕。
恰当的使用注释 在HTML中，注释封装在一个特殊的结构中。该结构以左尖括号，包括一个叹号，两个小横杠为始，以两个小横杠以及右尖括号为终：: <!--This is a comment-->。注释可以帮你理解文件的内容和布局。它们可以帮助可视化的分割段落。浏览器不会去在意注释，所以你可以在任何地方使用它们。
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
