第 2 章 HTML 基础

第2章 HTML基础 学习目的与要求：本章主要介绍Html语言的基本知识，包括文本编辑方法、多媒体和超级链接、制作表格等，通过理论和实例相结合，使读者掌握使用Html语言编辑网页。要求认识Html语言中的常见网页标记，掌握Web文本编辑的基本方法，掌握Web多媒体、超链接、表格的编辑方法

第2章 HTML基础 • 2.1 HTML基本构架 • 2.2 超链接 • 2.2 多媒体效果 • 2.4 TABLE表格 • 2.5 表单 • 2.6 实训 • 2.7 习题

2.1 HTML基本构架

从结构上讲，Html文件由元素组成，组成Html文件的元素有很多种，用于组织文件的内容和指导文件的内容和指导文件的输出格式。刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。从结构上讲，Html文件由元素组成，组成Html文件的元素有很多种，用于组织文件的内容和指导文件的内容和指导文件的输出格式。刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。 • 超文本中的标签有两种，单标签和双标签。 • 1. 单标签某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： < 标签名称> 最常用的单标签是<BR>, 它表示换行。

2. 双标签 • 另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。 • 这类标记的语法是： • <标签> 内容</ 标签> • 其中“内容” 部分就是要被这对标记施加作用的部分。

例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中： <EM>第一：</EM> • 在起始链接签和结尾链接签之间的部分是元素体。每个元素都有名称和可以选择的属性，元素名称和属性都在起始链接签内标明。许多单标记和双标记的始标记内可以包含一些属性，其语法是： • < 标签名字属性1 属性2 属性2 … > 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： <HR SIZE=2 ALIGN=LEFT WIDTH="75%"> • 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=200），缺省值是"100%"。

HTML文件以<HTML>标记开始，以</HTML>标记结束，中间的部分是HTML的元素体，HTML的元素体分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

一个HTML文件应当具有以下结构： <HTML> <HEAD> 头部信息 </HEAD> <BODY> 文档主体，正文部分 </BODY> </HTML>

其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。 • <HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。 • <BODY> 标记一般不省略，表示正文内容的开始。

2.1.1 常用页面标记 • 1. <html></html> • <html>标签用于Html文档的最前边，用来标识Html文档的开始。而</html>标签恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标签必须一块使用。 • 2. <head></head> <head>和</head>构成Html文档的开头部分，在此标签对之间可以使用<title></title>、<script></script>等等标签对，这些标签对都是描述Html文档相关信息的标签对，<head></head>标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用。 • 2. <body></body> <body></body>是Html文档的主体部分，在此标签对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。<body>标签中还可以有以下属性：

4. <title></title> <body></body>是Html文档的主体部分，在此标签对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。 <body>标签中还可以有以下属性：

表2.1 <body>标签中的属性

注意：以上各个属性可以结合使用，如<body bgcolor=“red” text=“#0000ff”>。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标签对中的文本使用蓝色显示在浏览器的框内。

例如： <BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed"> 其中： text="#000000" 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。 link="#0000FF" 设定一般文字链接颜色。 alink="#FF0000"

设定刚按下时文字链接颜色。 vlink="#0000FF" 设定链接后的颜色。（被按过）。 • background="bg1.gif" 设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。 bgcolor="#FFFFFF" bgproperties="fixed" 固定背景墙纸，当卷动文字时墙纸不会跟著卷动。

设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。 • leftmargin=2 • 设定整份文件显示画面的左方边沿空间，单位为像素。 • topmargin=2 • 设定整份文件显示画面的上方边沿空间。

5. <frameset></frameset> 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色标题栏部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标签对之间加入您要显示的文本即可。注意：<title></title>标签对只能放在<head></head>标签对之间。

帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html文件显示在另一个帧中。帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html文件显示在另一个帧中。

<frameset></frameset>标签对放在帧的主文档的<body></body>标签对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标签对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用<frameset>标签时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，<frameset></frameset>标签对放在帧的主文档的<body></body>标签对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标签对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用<frameset>标签时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，

<frameset></frameset>标签对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号(“*”)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的帧按照rows和cols的值从左到右，然后从上到下排列。示例如下：

<frameset rows="*,*,*">总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/2 • <frameset cols="40%,*,*">总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧 • <frameset rows="40%,*" cols="50%,*,200">总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素

<frame>标签放在<frameset></frameset>之间，用来定义某一个具体的帧。<frame>标签具有src和name属性，这两个属性都是必须赋值的。src是此帧的源Html文件名(包括网络路径，即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此帧的名字，这个名字是用来供超文本链接标签<a href="" target="">中的target属性用来指定链接的Html文件将显示在哪一个帧中。

例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是<frame src="jc.htm" name="main">，当您有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。

此外，<frame>标签还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标签中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。此外，<frame>标签还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标签中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。

6.<noframes></noframes> <noframes></noframes>标签对也是放在<frameset></frameset>标签对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标签对之间先紧跟<body></body>标签对

2.1.2 文本格式标记 • 1. 标题 • 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： <H1>…</H1>　　　　　第一级标题 <H2>…</H2>　　　　　第二级标题 <H2>…</H2>　　　　　第三级标题 <H4>…</H4>　　　　　第四级标题 <H5>…</H5>　　　　　第五级标题 <H6>…</H6>　　　　　第六级标题

2. 段落标记 不同于多数字处理器中的文档， HTML 文件中的换行是不重要的。你不用担心你的文本中行的长度 ( 当然最好不要超过 72 个字符)，在你的源文件中任何地方可以使用换行，多个空白在你的浏览器中被重叠成为一个空白。

源文件中各行之间有换行，但是Web 浏览器忽略这些换行，只有遇到另一个<p>标记时才开始新段落<P>。用<P>标记指明段落，浏览器忽略源文件中的任何缩进或空行，如果没有 <P> 元素，文档将被看作一个大段落处理。 • 注意：结束标记</P>可以省略，这是因为当浏览器遇到一个<P>标记时，它认为前一个段落到此结束。

2. 文字的字体与样式 • HTML提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但是，只有使用浏览器的电脑中装有相同的字体才可以在的浏览器中出现你预先设计的风格。 • 经常使用 WORD 的人对这三对标签对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出；<i></i>用来使文本以斜体字的形式输出；<u></u>用来使文本以下加一划线的形式输出。

<tt></tt>用来输出打字机风格字体的文本； • <cite></cite>用来输出引用方式的字体，通常是斜体； • <em></em>用来输出需要强调的文本(通常是斜体加黑体)； • <strong></strong>则用来输出加重文本(通常也是斜体加黑体)。这些标签对的示例也将在后边综合的例子中出现。

<font></font>是一对很有用的标签对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 • size属性用来改变字体的大小，它可以取值：-1、1和+1； • 而color属性则用来改变文本的颜色，颜色的取值是我们在前面讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。

为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下： • <B></B>　　　　　粗体　　　　　　　　　　　　　　HTML语言 • <I></I>　　　　　斜体　　　　　　　　　　　　　　HTML语言 • <U></U>　　　　　加下划线　　　　　　　　　　　　HTML语言 • <TT><TT>　　　　　打字机字体　　　　　　　　　　　HTML语言

<BIG> </BIG>　　　　大型字体　　　　　　　　　　　　HTML语言 • <SMALL></SMALL>　　　小型字体　　　　　　　　　　　　HTML语言 • <BLINK></BLINK>　　　闪烁效果　　　　　　　　　　　　HTML语言 • <EM></EM> 　　　　表示强调，一般为斜体　　　　　　HTML语言 • <STRONG></STRONG>　　表示特别强调，一般为粗体　　　　HTML语言 • <CITE></CITE>　　　用于引证、举例，一般为斜体　　　HTML语言

4. 文字的大小设置 • 提供设置字号大小的是属性SIZE，可以通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为2。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

5. 文字的颜色的设置 文字颜色设置格式如下： <font color=color_value>…</font>

6. 定义性列表 • 采用定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签<DT>标明，说明性文字使用<DD>表示。在定义性列表中，还有一个属性是COMPACT，使用这个属性后，说明文字和列表项将显示在同一行。 • <DL> • <DT>第一项 <DD>叙述第一项的定义 • <DT>第二项 <DD>叙述第二项的定义 • <DT>第三项 <DD>叙述第三项的定义 • </DL>

7. 序号列表 • 序号列表和无序号列表的使用方法基本相同，它使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： <OL> <LI>第一项 <LI>第二项 <LI>第三项 </OL>

8. 无序号列表 无序号列表使用的一对标签是<ul></ul>，每一个列表项前使用<LI>。其结构如下所示： <UL> <LI>第一项 <LI>第二项 <LI>第三项 </UL>

9. 位置控制 • 通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下： <DIV ALIGN=#>#＝left／right／center 另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：<P ALIGN=#> <HR ALIGN=#>#＝left／right／center <H1 ALIGN=#〉

10、Div标签<DIV>称为区隔标记，没有任何内容上的意义，表示一块可显示 HTML 的区域。它被用来组合一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来，并与CSS结合使用。 • 属性 align 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 • <DIV align="center"> 的作用和居中标记<CENTER>一样。

下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。 This example uses two DIV elements to align two sections of text differently. <DIV> 此文本代表一段。 </DIV> <DIV ALIGN=CENTER> 此文本代表另外一段，其中文本居中显示。 </DIV>

2.2 超链接

超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。 • 链接的基本格式： <A HREF="资源地址">链接文字</A> 标签<A>表示一个链接的开始，</A>表示链接的结束；属性“HREF”定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。

2.2.1 本地链接 • 对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。

2.2.2 URL链接 • 如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。 • URL链接的形式是：协议名：//主机.域名／路径／文件名

2.2 多媒体效果

alt=value • border=n • height=n • width=n • hspace=n • vspace=n • ismap=image • usemap=url

onload=function • onabort=function • onerror=function • dynsrc=../../url • controls=controls • loop=n • start=type>

各参数的具体含义： align：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，即align＝top。在图文混排时，这个参数很有用。 class和id：分别指定图像所属的类型和图像的id号。 name：用于设定图像的名称。 src：规定插入的图像的url地址，也就是含路径的图像文件名。 title：设定图像的标题。

第 2 章 HTML 基础