xml实用教程：第2章 HTML基础_第1页
xml实用教程：第2章 HTML基础_第2页
xml实用教程：第2章 HTML基础_第3页
xml实用教程：第2章 HTML基础_第4页
xml实用教程：第2章 HTML基础_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第2章 HTML基础 返回主页 上一章 下一章  教学提示：Web页面可采用超文本标识语言（HTML）创作，它允许将常规的文本与一些用来描述文本的标记混合使用。这些标记的主要功能是Web中文本的显示外观、版面布局和主体的描述。在做网页的时候，有经验的程序员经常是分两步走：首先使用一些常用的网页制作工具做成网页的原型，然后再修改其HTML代码。HTML代码不区分大小写，只要能够编辑文本的任何编辑器都可以用于编写HTML代码。  教学目标：了解网页设计的基本概念及HTML的基本知识，掌握HTML文档的基本结构，熟悉常用HTML元素标记功能及使用方法。掌握格式

2、化网页文本的常用方法，熟悉在网页中链接语句使用方法。2.1 HTML概述2.2 HTML的标记2.3 文字修饰2.4 列表2.5 表格2.6 色彩2.7 超文本链接小结习题写字版 绘图板 进入Editplus 进入XMLwriter2.1HTML概述 本章开头 下一节2.1.1 HTML概述HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。我们上网浏览一个网页时，实际上是把该网页所对应的HTML文件下载到我们的计算机中，然后由本地计算机中的浏览器（

3、如IE）再解释、显示。一个HTML程序由文档头部和正文两部分构成，HTML基本结构如图2.1所示。图2.1 HTML文档的基本结构2.1.2 如何编写一个HTML文件HTML文件是一个ASCII格式的文件。它可以在任何一种可以编辑ASCII文件的编辑器中编辑（如果HTML文件中包含汉字，则要在支持汉字的编辑器中编辑）。我们通常可以用Windows中的“记事本”和“写字板”、字处理软件“Word”等来编辑HTML文件。除了这些通用的编辑器外，还有一些专门用于编写HTML文件的编辑器。这些专用编辑器可以在因特网中找到，使用它们编写HTML往往更方便。保存文件时，注意文件的扩展名应该为htm或htm

4、l。不要在文件名中使用一些特殊的符号（如空格）。可以建立一个专用文件夹，来存放这些HTML文件。2.1.3 HTML文件的调试一个HTML文件编写完毕后，其执行效果到底如何，应在浏览器中查看一下。【例2.1】编写如下内容，名为code2_1.html的HTML文件。<html>   <head>      <title>第二章  HTML基础</title>   </head>   <body> 

5、;      HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”。它实际上是专门用来编写网页的一种编成语言。大多数网页的构成基础就是HTML的语句。   </body></html>我们可以在Windows所带的“记事本”中输入、编辑并保存此文件（保存时文件名要有.html的扩展名，并选择“所有文件”格式来保存），然后，双击此文件图标，则系统自动用IE打开此文件，如图2.2所示。图2.2 简单的HTML网页值得注意的是，同一个文件在不同的浏览器中显示的效果可

6、能不同。因此，应尽可能多用几种浏览器查看。2.2 HTML的标记 上一节 下一节 本章开头2.2.1 标记的一般特性作为一种标识语言，构成它的要素是标记，用标记符号来描述信息。标记有多种，每一种有自己的含义与作用。浏览时浏览器会根据标记的意义，自动显示效果。概括地说，一个HTML文件中由两大类元素组成：其一是标记，其二是标记的作用对象（如文字、图形等）。标记往往是具有特殊含义的英语词组或字母组合（如title、 html等），其形式不会变化。标记通常放在“<>”中，可以不区分大小写，也就是说，大写字母与小写字母的意义一样。对于大多数标记而言，标记是成对的，一个表示开始，一个表示结束

7、。如例2.1中的<title>与</title>就是一对。在这种情况下，往往使用如下的格式。<标记符>内容</标记符>应该注意的是，表示结束的标记符前面有一个斜杠“/”。2.2.2 几个最常用的标记尽管HTML所使用的标记很多，但以下讲述的是最常用的几种。1. <html>和</html>这是HTML文件所必需的一对标记。<html>居于文件最前面，在文件的开始处；</html>居于文件最后面，在文件的结尾处。类似于C语言的“”和“”。HTML文件的其他内容都镶嵌在这对标记中，如在例2.1中所示。2

8、. <head>和</head>这对标记用来指定网页的头部，用来指明文件信息。文件信息和文本信息共同构成了一个HTML文件，或者说，一个HTML文件主要由文件信息和文本信息两部分组成。使用格式如下：<head>文字说明</head>一般而言，“文字说明”部分的信息要简明扼要。此对标记可以与<title>及</title>配合使用，也可单独使用。单独使用时，则作为正文的头部，显示在全部文本信息之前。3. <title>和</title>这对标记用来指定网页的标题。它们要包含在<head>和

9、</head>标记之间。使用格式如下：<head><title>文字说明</title></head>这样一来，“文字说明”就会作为网页的标题，显示在屏幕顶端。图2.1中就是在屏幕的最上面显示“第二章  HTML基础”的提示信息。“文字说明”部分的内容不宜太多，通常是网页标题信息，或者是如“欢迎光临软件网站！”等欢迎信息。如果一个网页没有标题，则IE会把该网页的路径作为该网页的标题。4. <body>和</body>这对标记用来包含网页的文本内容，这是一个网页中最丰富的部分。5. <hn>

10、和</hn>这对标记用来指定网页的子标题。它按字体大小分为6级，n分别用1，2，3，4，5，6来表示，也就是说，可以采用以下6种格式。<h1>子标题内容</h1><h2>子标题内容</h2><h3>子标题内容</h3><h4>子标题内容</h4><h5>子标题内容</h5><h6>子标题内容</h6>这里，n的值越大，浏览器显示的字体越小。子标题会以不同于正文的方式显示，会以加黑、画线等形式突出显示。子标题长度不限，可以多行。【例2.2】以

11、不同于正文的方式显示各级子标题，code2_2.html。<html>   <head>       <title>网页子标题标题字体大小</title>   </head>   <body>      <h1>h1级子标题内容</h1>      <h2>h2级子标题内

12、容</h2>      <h3>h3级子标题内容</h3>      <h4>h4级子标题内容</h4>      <h5>h5级子标题内容</h5>      <h6>h6级子标题内容</h6>      这是正文  

13、</body></html>其执行结果如图2.3所示。图2.3 子标题的分级6. <br>这是单个的标记。其作用是换行显示，相当于Word中的硬回车。如果在HTML文件中没有使用<br>，如果显示到窗口的边界，则会自动换行。7. <hr>此标记会显示一条横线。这样可以分隔文件中的不同部分，使内容更清晰。【例2.3】换行显示和显示一条横线，源代码文件code2_3.html。<html>   <head>      <title>这

14、是网页标题</title>   </head>   <body>   望庐山瀑布<br>   唐.李白   <hr>   日照香炉升紫烟，<br>   遥看瀑布挂前川。<br>   飞流直下三千尺，<br>   疑是银河落九天。<br>   </body></html>

15、;其执行结果如图2.4所示。图2.4水平线的使用2.3 文字修饰 上一节 下一节 本章开头一个网页大多由以下要素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。2.3.1 字号我们可以采用多种方式设置文字的大小。不过设置文字的大小后，其效果会受到IE中选项的影响。如图2.4所示是“文字大小”设置为“中”时显示的效果。当我们把“文字大小”设置为“大”时，显示效果如图2.5所示。图2.5 在IE浏览器中设置文字大小对比图2.4与图2.5发现，图2.5中的文字比图2.4中的大。这就说明了IE中设置的影响。因此，文字大小设置标记的作用都是相对的。下

16、面我们讲述关于字号的标记。1. <small>和</small>把文字以小一些的字号显示（默认的字号为“中”）。具体效果参看例2.4。2. <big>和</big>把文字以大一些的字号显示。具体效果参看例2.4。3. <font size=n>本标记也用来设置文字的大小。这里n是数字，可以为1，2，3，4，5，6，7。数字越大，显示的文字也越大。n的默认值是3。此标记一直有效，直到遇到一个新的n值或</font>时为止。如果给出的n值有正负号，则表示在当前字号的基础上增大或缩小字号。如“+1”表示大1号。4. <ba

17、sefont size=n>本标记用来设置文字的默认大小。这里n的意思与<font size>标记中的相同。【例2.4】设置文字的默认大小，源代码文件code2_4.html。<html>   <head>      <title>设置文字的默认大小</title>   </head>   <body>   显示效果正常字号   <small>小

18、号字</small>   <big>大号字</big><br>   <font size=1>1号字<br>   <font size=2>2号字<br>   <font size=3>3号字<br>   <font size=4>4号字<br>   <font size=5>5号字<br> 

19、0; <font size=6>6号字<br>   <font size=7>7号字<br>   <font size=-5>相对小5号<br>   <font size=+2>相对大2号   </body></html>其执行结果如图2.6所示。图2.6 设置文字大小的效果2.3.2字体式样除了可以设置文字的大小之外，我们还可以设置字体式样（包括颜色）。1. <b>和</b>这一对标

20、记配合使用，使放在它们中间的文字以粗体显示。格式如下：<b>要粗体显示的文字</b>通常我们用粗体表示强调，它是一种突出显示的效果。如果只有<b>标记而忘记了</b>标记，则从<b>开始一直都是粗体。2. <I>和</I>这一对标记配合使用，使放在它们中间的文字以斜体显示。格式如下：<I>要斜体显示的文字</I>注意事项与<b>相同。3. <u>和</u>这一对标记配合使用，使放在它们中间的文字以下划线显示。格式如下：<u>要下划线显示的文

21、字</u>注意事项与<b>相同。4. <strike>和</strike>这一对标记配合使用，使放在它们中间的文字以加上删除线显示。格式如下：<strike>要加上删除线显示的文字</strike>注意事项与<b>相同。5. <sub>和</sub>这一对标记配合使用，使放在它们中间的文字以下标形式显示。格式如下：<sub>要以下标形式显示的文字</sub>注意事项与<b>相同。下标会比正常字号小。6. <sup>和</sup>

22、这一对标记配合使用，使放在它们中间的文字以上标形式显示。格式如下：<sup>要以上标形式显示的文字</sup>注意事项与<b>相同。上标会比正常字号小。2.3.3 特殊标记因为小于号“<”和大于号“>”作为标记的边界符使用了，所以要显示这两个符号，必须转义。具体情况如下：< 用 &It> 用 &gt& 用 &amp“  用 &quot【例2.5】使用字体样式和特殊标记，源代码文件code2_5.html。<html>   <head>

23、0;     <title>使用字体样式和特殊标记</title>   </head>   <body>   <b>要粗体显示的文字</b>   <I>要斜体显示的文字</I>   <u>要下划线显示的文字</u>   <strike>要加上删除线显示的文字</strike><br>

24、   正常文字<sub>下标形式显示的文字</sub><br>   正常文字<sup>上标形式显示的文字</sup><br>   小于号&lt<br>   大于号&gt<br>   </body></html>其执行结果如图2.7所示。图2.7 使用字体样式和特殊标记的效果2.4 列表 上一节 下一节 本章开头列表是一种条理化地排列信息的方法。它把内容一条条地水

25、平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。列表标记使用的通用格式如下：<标记><条目标记1>条目内容1<条目标记2>条目内容2<条目标记3>条目内容3</标记>值得注意的是，在“条目内容”后不用加换行标记<br>1. <dir>和</dir>把其间包含的内容以列表方式显示，并在每个条目前加上一个标记符号。2. <menu>和</menu>与<dir>作用相同。这两个标记比较简单，不能实现一些复杂的变化。3. <UL>和</U

26、L>其效果与上述两个命令的列表效果相似。不过，此命令可以带属性，变成<UL type=f>的形式。此处f为单词，具体情况有如下几种。f为disk：条目以符号“”引导。f为circle：条目以符号“”引导。f为square：条目以符号“”引导。4. <OL>与</OL>使用此对标记，也可实现与以上命令相似的列表。不同之处在于，本标记会自动给条目排序并加上序号。此标记也可带有属性，有如下两种。1) <OL type=f>此处，f是一个字符，不同的字符表示不同的编号方式，主要有以下几种情况。f为A：以大写字母排序。如：A，B，C，D等。f为a：以

27、大写字母排序。如：a，b，c，d等。f为I：以大写字母排序。如：I，II，III，IV等。f为i：以大写字母排序。如：i，ii，iii，iv等。f为1：以大写字母排序。如：1，2，3，4等。2) <OL start=n>n是一个数字，此标记符表示重新定义的起始号。这样一来，可以指定序号的起始号。【例2.6】列表标记的使用，源代码文件code2_6.html。<html><head><title>列表标记</title></head>   <body>   <dir&

28、gt;      <LI>李白      <LI>杜甫      <LI>杜牧   </dir>   <menu>      <LI>李白-赠孟浩然      <LI>杜甫-望岳    

29、  <LI>杜牧-泊秦淮   </menu>   <OL type=A>      <LI>李白-赠孟浩然      <LI>杜甫-望岳      <LI>杜牧-泊秦淮   </OL>   <OL type=i>     &

30、#160;<LI>李白-赠孟浩然      <LI>杜甫-望岳      <LI>杜牧-泊秦淮   </OL>   </body></html>其执行结果如图2.8所示。5. 列表的嵌套列表也可以层嵌套。嵌套后的效果参见例2.7。【例2.7】列表的嵌套，源代码文件code2_7.html。<html>   <head>  

31、    <title>列表嵌套</title>   </head>   <body>   <h3>唐诗选读</h3>   <OL>    <LI>李白      <UL>         <LI>春思 

32、;        <LI>月下独酌         <LI>赠孟浩然      </UL>    <LI>杜甫      <UL>         <LI>望月

33、0;        <LI>佳人         <LI>梦李白      </UL>    <LI>杜牧      <UL>         <LI>赤壁 

34、        <LI>泊秦淮         <LI>秋夕      </UL>   </OL>   </body></html>其执行结果如图2.9所示。图2.8 列表标记的使用图2.9 列表嵌套的效果2.5 表格 上一节 下一节 本章开头3.5.1 基础构件的集成HTML对页面元素

35、的排版基本就是按照元素在文档中出现的先后顺序，从头至尾依次排下来，唯一能控制页面元素位置的只有Align属性，而它所能控制的情况只有三种：左、中、右，要编制复杂的页面布局仅仅依靠基本的HTML几乎是不可能实现的。表格就解决了这个问题，使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。表格一般由以下几部分组成：表格名称、表格栏及表中数据。这与其他软件（如WORD）中所说的表格十分相同。以下讲述建立、修改表格所涉及的标记。2.5.1 <table></table>这是一对用来指明表格范围的

36、标记。通常使用的格式如下：<table>表格全部内容</table>1. border属性使用表格的这一属性可以给表格加上框线。如<table border>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用<table border=n>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框，具体参见例2.8。【例2.8】表格和表格边框，源代码文件code2_8.html。<html><head>

37、60;     <title>这是表格和表格边框的例子</title></head><body><table border="2"><caption>表格标题</caption><tr>    <th>栏目名称1</th>    <th>栏目名称2</th>    <th>栏目名称3</

38、th></tr><tr>    <td>数据1-1</td>    <td>数据2-1</td>    <td>数据3-1</td></tr><tr>    <td>数据1-2</td>    <td>数据2-2</td>    <td&g

39、t;数据3-2</td></tr></table></body></html>其执行结果如图2.10所示。图2.10 表格和表格边框实例2. width属性这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<table width=n>。n是一个具体的数字，可以是一个百分数（如100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。3. height属性这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<table width=n>相似。使用相对方式来设置

40、表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在视觉上要有美感。【例2.9】使用相对方式来设置表格大小，code2_9.html。<html><head>      <title>这是表格占页面相对大小的例子</title></head><body><table border="5" width=80%, height=50%><caption>表格占页面的80%</caption>

41、<tr>    <th>栏目名称1</th>    <th>栏目名称2</th>    <th>栏目名称3</th></tr><tr>    <td>数据1-1</td>    <td>数据2-1</td>    <td>数据3-1</td>

42、;</tr><tr>    <td>数据1-2</td>    <td>数据2-2</td>    <td>数据3-2</td></tr></table><table border="5" width=70%, height=40%><caption>表格占页面的70%</caption><tr>  

43、  <th>栏目名称1</th>    <th>栏目名称2</th>    <th>栏目名称3</th></tr><tr>    <td>数据1-1</td>    <td>数据2-1</td>    <td>数据3-1</td></tr><tr>

44、    <td>数据1-2</td>    <td>数据2-2</td>    <td>数据3-2</td></tr></table></body></html>其执行结果如图2.11所示。图2.11 设置表格在页面中的相对大小4. cellspacing属性这一属性可以用来设置有线表格的单元格线的宽度，用法为<table cellspacing=n>。n是一个具体的数值，单

45、位是像素。5. cellpddeing这一属性可以用来设置单元格线与数据之间的距离，用法为<table cellpddeing=n>。n是一个具体的数值，单位是像素。默认值为1。2.5.2 <caption>和</caption>这是一对用来指明表格标题的标记。通常使用的格式如下：<caption>表格标题内容</caption>默认的情况下，标题以居中的形式显示，而且显示在表格的上面。标题也可以显示在表格的下面，这要使用align属性，具体格式如上：<caption align=f>此处，f为以下两个单词：top，标题显

46、示在表格之上；bottom，标题显示在表格之下。2.5.3 <tr>和</tr>这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。2.5.4 <th>和</th>这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字会突出显示。2.5.5 <td>和</td>这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字不会突出显

47、示。本标记的用法参见例2.8和例2.9。1. align属性以上<tr>，<th>及<td>也可以带属性align。align=left：表示居左，如：<th align=left>；align=center：表示居中，如：<th align=center>；align=light：表示居右，如：<th align=right>；特别值得注意的是，这种调整可以针对每一表格单元，因此可以十分灵活地使用。2. nowrap属性在执行<th>及<td>时，当数据较多，一行显示不下时，浏览器会自动换行显示。

48、如果不要自动换行，可以使用<nowrap>属性。3. width属性在执行<th>及<td>时，使用此属性可以指定宽度。具体用法与在<table>中一样。4. valign=f属性在执行<th>及<td>时，使用此属性可以指定文字显示在本行的上、中、下位置，用法是valign=f。此处，f为以下单词：top，文字显示在本行偏上位置；middle，文字显示在本行中间位置；bottom，文字显示在本行偏下位置。5. colspan属性在执行<th>及<td>时，使用此属性可以实现单元格的横向合并，用法为

49、colspan=n。这里，n是数值，默认为1（此时可以省略此参数）。如果要实现两栏合并，则让n的值为2即可。6. rowspan属性在执行<th>及<td>时，使用此属性可以实现单元格的纵向合并，用法为rowspan=n。这里，n是数值，默认为1（此时可以省略此参数）。如果要实现两栏合并，则让n的值为2即可。【例2.10】实现栏目合并，源代码文件code2_10.html。<html><head>      <title>这是表格栏目合并的例子</title></he

50、ad><body><table border="2"><caption>表格标题</caption><tr>    <th>栏目名称1</th>    <th colspan=2>栏目名称2和3</th><tr>    <th rowspan=2>数据1-1</th>    <td>数据2-1&l

51、t;/td>    <td>数据3-1</td><tr>    <td>数据2-2</td>    <td>数据3-2</td></table></body></html>其执行结果如图2.12所示。图2.12 表格栏目合并的效果2.6 色彩 上一节 下一节 本章开头2.6.1 色彩的表示在计算机显示器中，使用红(red)、绿(green)、蓝(blue)3种颜色来构成各种各样的颜

52、色。颜色的种类有16，256及65，536等多种。我们把这三种颜色人0到255分别编号，再表示为16进制的数，则红色（rr）就从00到ff，绿色(gg)和蓝色(bb)两种颜色也如此。三种颜色的表示合起来就是rrggbb。这样一来，可以用一种颜色中所含红、绿、蓝成分的程度，数值化地表示颜色。如：黑色为000000、白色为ffffff、墨绿色为008040、深灰色为808080等。在HTML中，可用这种方式指定颜色。但是，这种方式指定的颜色多达256×256×256种。并非所有的显示器都可显示这么多种的颜色。当指定了显示器不能显示的颜色时，显示器会以自己可以显示的、最接近的颜色

53、显示。但这“最接近的颜色”，也可能偏离设计者原来所想的颜色，这就出现了“变色”。要解决这一问题，一则可以在其他颜色模式下调试一下（如把当前颜色改为16色，浏览一下，若不满意可以改）。二则也可只使用最常见的256种颜色（甚至只16色），这是一种保守的方法。如果不想使用这种用数值指定颜色的方法，也可以用英文的颜色名称来指定。常见的颜色如表2.1所示。表2.1  常见颜色列表颜 色名 称颜 色名 称Black黑Red红White白Fuchsia洋红Navy深蓝Maroon棕Blue蓝Purple紫Aqua浅蓝Green绿Teal靛Olive橄榄色Silver银灰（浅灰）Lime柠檬绿Gra

54、y灰Yellow黄2.6.2 文本的色彩在body的属性中，我们可以使用以下几种属性改变文本的颜色。1.text属性该属性用来设置文本的颜色。这里所说的“文本”可以是标题、正文及表中的文字，但不能用于超链接的文字。具体格式为：<text="#rrggbb">。这里的rrggbb取值为表示颜色的数据，如前一小节所述。2. link属性该属性用来设置超链接文字的颜色。默认为蓝色。具体使用格式为：<link="#rrggbb">。rrggbb的意义与<text>中的相同。3. vlink属性该属性用来设置鼠标指向的超链接文字

55、时，链接文字的颜色。默认为红色。具体使用格式为：<vlink="#rrggbb">。rrggbb的意义与<text>中的相同。通常情况下，我们不使用<link>，<vlink>及<alink>进行设置，一般都使用默认设置。4. <font>标记的<color>属性以上几种属性所指定的都是整个网页中某一类文字的色彩，使用<font>标记的<color>属性可指定任意一段文字的色彩。这里所说的一段文字，可以为几行、一行甚至只有一个字。具体格式为：<font colo

56、r=#rrggbb>此处，rrggbb的意义如上小节所述(下同)。2.6.3 表格的颜色1. <table>标记的<bgcolor>属性用来指定整个表格的背景颜色。具体格式为：<table bgcolor=#rrggbb>2. <td>标记的<bgcolor>属性用来指定表格中一行的背景颜色。具体格式为：<td bgcolor=#rrggbb>3. <th>标记的<bgcolor>属性用来指定表格中栏目行的背景颜色。具体格式为：<th bgcolor=#rrggbb>2.6.4 &

57、lt;hr>标记的bgcolor属性用来指定分隔线的颜色。具体格式为：<hr color=#rrggbb>【例2.11】颜色的设置，源代码文件code2_11.html。<html><head>      <title>这是颜色设置的例子</title></head><body>   颜色显示效果<br>   <font color=red>   <hl>问题与

58、答案(红色)<hl>   <hr color=#808080>   <font color=blue>   如何改变表格的背景颜色？(蓝色)<br>   <font color=olive>   这还不简单(橄榄色)。</body></html>其执行结果如图2.13所示。图2.13 颜色的设置2.7 超文本链接 上一节 下一节 本章开头超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过

59、链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。2.7.1 超文本链接所谓的超文本链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超文本链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接

60、、锚点链接和外部链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。  2.7.2页面链接用HTML创建超文本链接需要使用<A>标记符（结束标记符</A>不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。在HTML文件中用链接指针指向一个目标。其基本格式为：<a href = "">标记超文本链接信息</a>其中标记超文本链接信息可以是文字或图片并显示在网页中，当用户单

61、击它时，浏览器就会显示由href属性中的统一资源定位器（URL）所指向的目标，实际上这个标记超文本链接信息在HTML文件中充当指针的角色，它一般显示为蓝色。href中的h表示超文本，而ref表示“访问”或“引用”的意思。在<A>和</A>之间可以用任何可单击的对象作为超链接的源，例如文字或图像。例如：<a href =”用户用鼠标单击“湖南大学”，即可看到湖南大学的主页内容。在这个例子中，充当指针的是“湖南大学”。2.7.3 本地链接超文本链接可以指向自己的计算机中的某一个文件，这种链接方式叫做本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。其格式如下：<a name="标签名">此处创建了一个标签</a>属性name是不可缺少的，它的值也即是标签名。href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。【例2.12】在一个文件中的本地链接，code2_12.html。<HTML>   <HEAD><TITLE>使用链接</T

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论