第一章 HTML概念

标签

标签的用途

  在所有标注语言中,标签无疑是最重要的部分,HTML也不例外。标签的作用就是格式化文本。例如,你可以使用<B>标签来命令所有在该标签当中(一般标签都是一对)的所有文字成为粗体。

标签格式

  绝大多数标签都是一对。第一个是开启标签,第二个是关闭标签。开启标签告诉浏览器说,嗨,老兄,从这里开始要怎么样怎么样,而关闭标签则告诉浏览器说,好了朋友,从这里开始恢复正常了。一般来说,关闭标签总是比开启标签多一个/。例如刚才的<B>标签,<B>是开启标签,</B>就是它的关闭标签,而在这两个标签中的所有东西,都会变成粗体字:

<B>I'm bold!</B>I'm normal!

  这时,浏览器中就会把”I'm bold!”这些字符用粗体显示,而"I'm normal!"则不会改变。
  第二种标签则只有开启标签而没有关闭标签。<BR>就是其中最具代表性的一个。这个标签的作用是换行。虽然浏览器会自动换行,但当你需要另起一行时,就必须使用这个标签。这个标签没有关闭标签。
  最后一种则是可以有关闭标签但也可以没有。关闭标签是选择性的。<P>就是其中之一。当你需要使用关闭标签时,你告诉浏览器在开启与关闭标签之间的所有东西都算做一个段落。而当你只使用开启标签时,你则告诉浏览器你要开始新的一段。<P>和<BR>有一点相似,这个我们以后还会讨论。现在你需要知道的只是三种标签的不同使用方式。
  很多标签还有参数(parameter)。参数就是进一部定义。再拿<P>来做例子,这个标签可以加入一个参数ALIGN,用来定义段落的对齐方式,因此,

<P ALIGN="center">我要居中!</P>

就是告诉浏览器,"我要居中!"这个段落应当放在浏览器的正中。

第一个标签

  现在我们要讲第一个,也是所有HTML文本中都不可或缺的标签:<HTML>。它当然还有一个关闭标签,</HTML>。这对标签其实并没有任何实质含义,它们只是告诉浏览器这对标签中的所有字符都应当读成HTML,而不是普通纯文本文件。他们应当放在所有标签的最外面。HTML标签本身也没有任何参数。

<HEAD>标签

  第二个标签就是<HEAD>和</HEAD>标签。它们本身也没有任何意义。它只能包含其他具有意义的标签。它唯一的作用是告诉浏览器,这里面的东西都属于文本的开头,都不要显示在浏览器的主体部分。但这对标签还包含了另一对标签:<TITLE>标签。这个标签则定义了文本的题目。这个题目会出现在浏览器的最顶部。

Title定义
Fig 1.1
红圈之内的文字就是<TITLE>标签所定义的

  除了<TITLE>,在<HEAD>还可以包含其他一些标签,最主要的就是<META>。<META>标签也只能有开启标签而没有关闭标签,它是一个非常特殊的标签,这里不做详细介绍,大家只需要将以下标签拷贝到自己的HEAD里就可以了:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

  这个标签其实就是告诉浏览器这个文本是用简体中文写成的,(大家可以注意到,HTTP-EQUIV和CONTENT都是这个META的参数)因此要它自动切换到简体中文模式。更详细关于META以及其他HEAD标签的问题请参考第九章。

<BODY>标签

  现在就进入非常重要的一个标签:<BODY>标签了。它同HEAD一样,本身没有任何实质意义,但缺包含了其他有意义的标签。换句话说,其他所有用于定义文本、图像、多媒体等等的标签,都必须在BODY的开启与关闭标签中。它就是告诉浏览器,从现在开始直到BODY关闭标签为止,当中所有的东西都应当以HTML的形式显示在浏览器的主体部分。
  <BODY>标签有许多参数。其中一个就是BGCOLOR。这个参数定义了整个文本的背景颜色:

<BODY BGCOLOR="yellow">

  这样就将这个网页的背景颜色设成了黄色。除此之外,还有一个BACKGROUND参数,它设置了文本的背景图案。你需要找一张图片(这里假设图片名称是image.jpg):

<BODY BACKGROUND="image.jpg">

  这样,背景图案就是image.jpg了!你甚至可以两个一起用:

<BODY BGCOLOR="yellow" BACKGROUND="image.jpg">

  这时,浏览器会先将背景设置成黄色,然后再将image.jpg覆盖上去。因此,背景仍然是image.jpg。但是如果你将BACKGROUND参数放在BGCOLOR参数的前面,则浏览器会先设置背景为image.jpg图片,然后再将黄色覆盖上去。

加入注释

  在写HTML时加入一两句注释往往是非常有用的。它可以提醒你自己正在干些什么,也可以帮助其他需要查看你网站源代码的人更快地了解你在干些什么。注释就是会被浏览器忽略的文字,你可以放心地在注释里写上任何文字而不被浏览器显示。注释的格式如下:

<!--这里是我的注释,浏览器会跳过!-->

  "这里是我的注释,浏览器会跳过!"这段话就是注释了。注释也可以跨多行:

    <!--跨
          多行的
         注释!
    -->
   

  在HTML4.0当中,W3C又定义了一个相似的标签:<COMMENT>标签:

<COMMENT>这是我的注释</COMMENT>

文本宣告

为什么要宣告

  很简单:文本宣告是HTML文本不可分割的一部分。如果你曾经编写过网页,肯定会对我的这句回答剔出质疑,不过事实就是如此。在W3C颁布的HTML规范建议中,文本宣告是必须写入的。因为HTML是由SGML所定义,所有SGML的子集都必须进行文本宣告,以宣告在哪里可以找到这个子集的解释文档(即DTD)。但是由于浏览器都可以自行编译而不需要解释文档,所以文本宣告往往被浏览器忽略。但是这并不能使文本宣告不再成为HTML文本的一部分。

Transitional

  Transitional DTD是最常用到的HTML DTD。它包含了整个HTML规范内所定义的标签(当然,一些FRAME标签除外,这些标签在Frame DTD中被定义,关于Frame请参见第六章)。定义应该如下(将以下内容拷贝到每一份HTML的第一行,在所有标签----包括HTML----之前):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  这等于是告诉浏览器说,你写的是一个HTML文件,它采用的版本是由W3C所发布的HTML 4.01的英文版,如果你找不到那个DTD的话,可以到以下的网址去下载一个。但是由于绝大多数浏览器都可以自行阅读HTML(不然怎么叫浏览器呢?),W3C只要求文本宣告的前半部分,至于后面的网址不是必须的,因此你也可以写成这样:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  令人遗憾的是,大多数的HTML教材都忽略了文本宣告。虽然文本宣告不是必须的,但在W3C的HTML规范建议当中,文本宣告是必须写入的一项。而且当你在未来编写XML时,你不再会对文本宣告感到困惑。

Strict

  除了Transitional之外,还有一个Strict DTD。这个DTD包含了除了HTML规范中被反对(depricated)的元素(element)之外的所有标签。由于它是要求最严格的DTD,使用它的人很少。格式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  同样地,最后的网址不是必须的。

Frameset

  最后要介绍的就是Frameset DTD。这个DTD的作用我们以后在第六章还会讲到,目前也没有要使用这个DTD的需要,你只要了解一下这个DTD的宣告方法就行了:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd>

第一个网页

  等了那么久,终于到写第一个网页的时候啦!其实第一个网页蛮简单的,只要上面教的你都完全掌握的话,不用我教你自己也可以写。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>第一个网页</TITLE>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
 </HEAD>
 <BODY>
  这是我的第一个网页!
 </BODY>
</HTML>

  细心的你可能已经注意到,我写HTML的时候有时缩进一格,有时凸出。仔细瞧瞧,就会发现这些都是有层次的:文本宣告与HTML标签在最外面,然后里面是HEAD和BODY,HEAD里面再有TITLE和META。这是W3C推荐的编写方法,让其他人(也包括你自己)更快了解整个文档的结构。当然,如果你不选择这种写法,也不会对网页本身产生任何影响。
  写完后,就要保存了。记住,网页的后缀名是.html或者.htm。我们把它存成FirstWebpage.htm。下面就是这个HTML文件在浏览器中的情况。


第一个网页
Fig 1.2
第一张网页在Linux Konqueror浏览器中的情形

WAI AA认证 HTML4.01认证 CSS认证 本文内容开放 专门为您的浏览器设计
Made with Bluefish Graphics with GIMP K Desktop Enviroment Powered by Linux Powered by Redhat