《ASP动态网站制作实例教程》第3章：HTML基础

1、第3章 HTML基础,学习目的与要求： 本章主要介绍Html语言的基本知识，包括文本编辑方法、多媒体和超级链接、制作表格等，通过理论和实例相结合，使读者掌握使用Html语言编辑网页。要求认识Html语言中的常见网页标记，掌握Web文本编辑的基本方法，掌握Web多媒体、超链接、表格的编辑方法,第3章 HTML基础,3.1 HTML基本构架 3.2 超链接 3.3 多媒体效果 3.4 TABLE表格 3.5 表单 3.6 实训 3.7 习题,3.1 HTML基本构架,从结构上讲，Html文件由元素组成，组成Html文件的元素有很多种，用于组织文件的内容和指导文件的内容和指导文件的输出格式。刚刚接触

2、超文本，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。 超文本中的标签有两种，单标签和双标签。 1. 单标签 某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标签是, 它表示换行。,2. 双标签 另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。 这类标记的语法是： 内容 其中“内容” 部分就是要被

3、这对标记施加作用的部分。,例如你想突出对某段文字的显示，就将此段文字放在一 标记中： 第一： 在起始链接签和结尾链接签之间的部分是元素体。每个元素都有名称和可以选择的属性，元素名称和属性都在起始链接签内标明。许多单标记和双标记的始标记内可以包含一些属性，其语法是： 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对

4、齐）；WIDTH 属性定义线的长度，可取相对值，（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。,HTML文件以标记开始，以标记结束，中间的部分是HTML的元素体，HTML的元素体分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。,一个HTML文件应当具有以下结构： 头部信息 文档主体，正文部分 ,其中在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略标记，因为.html或.htm文件被Web浏览器默认为是HTM

5、L文档。 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。 标记一般不省略，表示正文内容的开始。,3.1.1 常用页面标记,1. 标签用于Html文档的最前边，用来标识Html文档的开始。而标签恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标签必须一块使用。 2. 和构成Html文档的开头部分，在此标签对之间可以使用、等等标签对，这些标签对都是描述Html文档相关信息的标签对，标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用。 3. 是Html文档的主体部分，在此标签对之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏

6、览器的框内显示出来。两个标签必须一块使用。标签中还可以有以下属性：,4. 是Html文档的主体部分，在此标签对之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。 标签中还可以有以下属性：,表3.1 标签中的属性,注意：以上各个属性可以结合使用，如。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。 此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、F

7、uchsia、Silver、Red、Blue和Teal， 如表示标签对中的文本使用蓝色显示在浏览器的框内。,例如： 其中： text=#000000 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=black 。 link=#0000FF 设定一般文字链接颜色。 alink=#FF0000,设定刚按下时文字链接颜色。 vlink=#0000FF 设定链接后的颜色。（被按过）。 background=bg1.gif 设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。 bgcolor=#FFFFFF bgproperties=fixed 固定背景

8、墙纸，当卷动文字时墙纸不会跟著卷动。,设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。 leftmargin=2 设定整份文件显示画面的左方边沿空间，单位为像素。 topmargin=2 设定整份文件显示画面的上方边沿空间。,5. 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色标题栏部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在标签对之间加入您要显示的文本即可。注意：标签对只能放在标签对之间。,帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时

9、显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html文件显示在另一个帧中。,标签对放在帧的主文档的标签对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标签对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用标签时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，,标签对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分

10、数、绝对像素值或星号(“*”)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的帧按照rows和cols的值从左到右，然后从上到下排列。示例如下：, 总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3 总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧 总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素,标签放在之间，用来定义某一个具体的帧。标签具有src和name属性，这两个属性都是必须

11、赋值的。src是此帧的源Html文件名(包括网络路径，即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此帧的名字，这个名字是用来供超文本链接标签中的target属性用来指定链接的Html文件将显示在哪一个帧中。,例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是，当您有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为需要链接的文本。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。,此外，标签还有scrolling和noresize属

12、性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标签中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。,6. 标签对也是放在标签对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标签对之间先紧跟标签对,3.1.2 文本格式标记,1. 标题 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： 第一级标题 第二级标题 第三级标题 第四级

13、标题 第五级标题 第六级标题,2. 段落标记 不同于多数字处理器中的文档， HTML 文件中的换行是不重要的。你不用担心你的文本中行的长度 ( 当然最好不要超过 72 个字符)，在你的源文件中任何地方可以使用换行， 多个空白在你的浏览器中被重叠成为一个空白。,源文件中各行之间有换行，但是Web 浏览器忽略这些换行，只有遇到另一个标记时才开始新段落。用标记指明段落，浏览器忽略源文件中的任何缩进或空行，如果没有 元素，文档将被看作一个大段落处理。 注意：结束标记可以省略，这是因为当浏览器遇到一个标记时，它认为前一个段落到此结束。,3. 文字的字体与样式 HTML提供了定义字体的功能，用FACE属性

14、来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但是，只有使用浏览器的电脑中装有相同的字体才可以在的浏览器中出现你预先设计的风格。 经常使用 WORD 的人对这三对标签对一定很快就能掌握。用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出。,用来输出打字机风格字体的文本； 用来输出引用方式的字体，通常是斜体； 用来输出需要强调的文本(通常是斜体加黑体)； 则用来输出加重文本(通常也是斜体加黑体)。这些标签对的示例也将在后边综合的例子中出现。,是一对很有用的标签对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属

15、性 size 和 color 的控制来实现的。 size属性用来改变字体的大小，它可以取值：-1、1和+1； 而color属性则用来改变文本的颜色，颜色的取值是我们在前面讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下： 粗体HTML语言 斜体HTML语言 加下划线HTML语言 打字机字体HTML语言, 大型字体HTML语言 小型字体HTML语言 闪烁效果HTML语言 表示强调，一般为斜体HTML语言 表示特别强调，一般为粗体HTML语言 用于引证、举例，一般为斜体HTML语言,

16、4. 文字的大小设置 提供设置字号大小的是属性SIZE，可以通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。,5. 文字的颜色的设置 文字颜色设置格式如下： ,6. 定义性列表 采用定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT，使用这个属性后，说明文字和列表项将显示在同一行。 第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项 叙述第

17、三项的定义 ,7. 序号列表 序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： 第一项 第二项 第三项 ,8. 无序号列表 无序号列表使用的一对标签是， 每一个列表项前使用。其结构如下所示： 第一项 第二项 第三项 ,9. 位置控制 通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。 基本语法如下： #leftrightcenter 另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。 如： #leftrightcenter H1 AL

18、IGN=#,10、Div标签称为区隔标记，没有任何内容上的意义，表示一块可显示 HTML 的区域。它被用来组合一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来，并与CSS结合使用。 属性 align 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 的作用和居中标记一样。,下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。 This example uses two DIV elements to align two sections of text differently. 此文本代表一段。 此文

19、本代表另外一段，其中文本居中显示。 ,3.2 超链接,超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。 链接的基本格式： 链接文字 标签表示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的地方； 通过点击“链接文字”可以到达指定的文件。,3.2.1 本地链接,对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。,3.2.2 URL链接,如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，

20、通过它可以以多种通讯协议于外界沟通来存取信息。 URL链接的形式是： 协议名：/主机.域名路径文件名,3.3 多媒体效果,3.3.1 插入图像,其基本语法结构如下： img align=top|middle|center|bottom|left|right class=type id=Value name=value src=././url title=text,alt=value border=n height=n width=n hspace=n vspace=n ismap=image usemap=url,onload=function onabort=function onerror

21、=function dynsrc=././url controls=controls loop=n start=type,各参数的具体含义： align：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，即aligntop。在图文混排时，这个参数很有用。 class和id：分别指定图像所属的类型和图像的id号。 name：用于设定图像的名称。 src：规定插入的图像的url地址，也就是含路径的图像文件名。 title：设定图像的标题。,alt：表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最易忽略的参数，因不设定

22、它在正常显示时没问题。 border：设定图片的边框。 height和width：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。 hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。 ismp和usemap：在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。,onload、onabort、onerror对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。 dynsrc：指定要下载的

23、影像片断的url地址。 controls：设定影像播放的控制接钮。 loop：指定影像片断的播放次数，当loop=-1时，影像片断将循环播放直至页面更新。 start：设定何时开始播放影像片断，有三种选择：start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。,3.3.2 播放音乐,HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种

24、音乐格式中，MP3是压缩率最高，音质最好的文件格式。, 用标签加入背景音乐格式如下：其中loop属性为0时表示循环播放，但bgsound标记只能适用于IE。有很多朋友使用FRONTPAGE做主页，只须在页面中点击右键，选择页面属性,选定背景乐就可以了。, 用标签嵌入声音引用格式如下：（该标签属性在文末有详细说明）。声音文件使用的是Windows的.wav或WWW的.au格式，但最适合做主页背景音乐的是以.mid为后缀的MIDI音乐文件。实际上标签还可以引用如动画文件、VRML文件等。,点播音乐,将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单： 乐曲名 例如

25、：播放一段MIDI音乐： MIDI音乐 播放一段AU格式音乐： 同桌的你-AU音乐同桌的你-AU音乐,自动载入音乐,音乐自动载入基本语法： 属性有： SRC=././FILENAME 设定音乐文件的路径 AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。,STARTIME=分:秒 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20 VOLUME=0-100 设定音量的大小。如果

26、没设定的话，就用系统的音量。 WIDTH HEIGHT 设定控制面板的大小 HIDDEN=TRUE 隐藏控制面板 CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样式,3.IE中的背景音乐,格式： 说明：#是数字类型，表示循环的次数 例： ,3.3.3 播放视频,用浏览器可以播放的格式有： MOV格式、AVI格式。,1.链接一个视频文件 将视频文件做成一个链接的方法： 视频名称 例如：播放一段视频。 WINDOWS95,2.自动载入视频 与音乐的播放一样，我们可以使用EMBED标签播放视频， 属性有： SRC=././FILENAME 设定文件的路径 AUTOSTAR

27、T=TRUE/FALSE 是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE,LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 STARTIME=分:秒 设定开始播放时间，如20秒后播放写为STARTIME=00:20 VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。 WIDTH HEIGHT 设定控制面板的大小,3.4 TABLE表格,表格对于制作网页是很重要的，现在很多很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景

28、和前景颜色的设置。,3.4.1 表格的基本结构,基本结构： 标签对用来创建一个表格。 标签对用来创建表格中的每一行。此标签对只能放在标签对之间使用，而在此标签对之间加入文本将是无用的，因为在之间只能紧跟标签对才是有效的语法，标签对用来创建表格中一行中的每一个格子，此标签对也只有放在标签对之间才是有效的，您想要输入的文本也只有放在标签对中才有效(即才能够显示出来)。 标签对用来设置表格头，通常是黑体居中文字。,3.4.2 表格的标题,表格可以有一个标题，采用标签定义。格式如下： ,3.4.3 表格的尺寸设置,1. 表格的尺寸设置 一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，

29、如果我们要直接固定表格的大小，可以使用下列方式： width和height 分别指定表格一个固定的宽度和长度； n1和n2 可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。,2. 边框尺寸设置 格式： 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。,3. 格间线宽度 格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。 格式是： #表示要取用的像素值,4. 内容与格线之间的宽度 我们还可以在中设置CELLPADDING属性，用来规定内容与格线之间的宽度。 格式为： #表示要取用的像素值,

30、3.4.4 表格内文字的对齐、布局,1.左右排列 格式： 说明： 用ALIGN属性来设置 #=left，center， right，分别表示居左，居右，居中。,1.左右排列 格式： 说明： 用ALIGN属性来设置 #=left，center， right，分别表示居左，居右，居中。,2. 上下排列 格式： 说明： 用VALIGN属性来设置 #=top，middle，bottom，baseline，分别表示上齐，居中，下齐，基线。,3.4.5 跨多行、多列的表元,要创建跨多行、多列的表元，只需在或中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。 跨多列

31、的表元 colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 跨多行的表元 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。,3.4.6 表格的颜色,在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩或 #=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple

32、, Silver, Yellow, Aqua,3.5 表单,3.5.1 表单标记,1. 格式： . . ,method 定义处理程序从表单中获得信息的方式，值为： GET或 POST。GET 处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST 当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。 target属性用来指定目标窗口或目标帧。,3.5.2 文本标记,1. 格式： 2. 说明： type=Text 能产生一单行文本框，上限为 255 字元。 name 此一单行文本框名称。 value 单行文本框内的默认值。若不填写则文本框是空白的，等待用户键入。,size #表示这是单行文本框的显示的长度。 maxlength 这是单行文本框可输入字符的最大值，为方便编排资料或避免错输入等