PPT
【文档说明】ASP网页数据库课件第2章.ppt，共(76)页，784.535 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-45123.html
以下为本文档部分文字说明：
第2课HTML语言介绍（一）1.1课前导读1.2课堂教学2.2.1HTML基础2.2.2HTML入门——简单标记的认识与使用2.2.3段落和文字标记2.2.4建立超级链接2.2.5加入图片1.3上机练习1.4课后作业1.1课前导读1.什么是HTML
2.HTML的作用3.HTML的编辑环境4.专用的网页编辑器1.什么是HTMLHTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。HTML是一种用于网页制作的排版语言，是Web最基
本的构成元素。HTML并非一种编程语言。用HTML标记文档或给文档添加标记，使文档可在WWW上发布。用HTML准备的文档包含引用图形和格式标记。用Web浏览器可以查看这些HTML文档。用HTML的语法规则建立的文档可以运行
在不同操作系统的平台上。因此，HTML文档属于纯文本文件（它能用任意的文本编写器书写）。2.HTML的作用HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下：①格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。②建立超链接。通过超链接检索在线的信息，
只需用鼠标单击，就可以到达任何一处。③创建列表。把信息用一种易读的方式表现出来。④插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。⑤建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个
网页的布局。⑥加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。⑦交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。HTML是最基本的网页制作语言，其他的专用网页编辑器（如FrontPage，Drea
mweaver等）都是以HTML为基础的。3.HTML的编辑环境HTML的编辑环境很简单，任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果，就需要安装一个浏览器，如InternetExplorer，NetscapeNaviga
tor等。因此，只要计算机能运行某个浏览器，就具备了网页制作的硬件环境。HTML要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。不过在保存时，一定要用纯文本方式存盘。HTML文件的设计制作
与一般程序设计语言之间最大的不同在于，HTML具有跨平台的处理能力。也就是说，只要有适当的浏览器，不管使用何种操作系统，都能阅读制作的HTML文件。4.专用的网页编辑器HTML作为最基本的网页编辑语言，能实现制作网页的各种效果。但是，它毕竟是一种代码，得记住一些标记。因此，为
了使设计网页更加简单方便，有些公司和人员就设计了专用的网页编辑器。专用的网页编辑器主要分为3大类。①完全的所见即所得工具：所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时看到的效果基本一致。如果希望建立一个美
观而又不复杂的站点，这种工具非常适合，可以很轻松地制作想要的效果，但是必须按照这些软件的要求来设计。典型的工具有Drumbeat、NetobjectFusion。②纯粹的HTML代码编辑工具：用纯粹的HTML代码编辑工具，用户可以对页面进行完全的
控制。使用这些工具时，直接编辑原始的HTML代码，在对页面进行加工时，不会破坏原有的代码。当然，这并不是说用户得从头到尾编写每一种效果的HTML源代码。因为这些工具通常带有许多辅助工具，可以帮助用户创建表格、表单，以及其他复杂的结构
，并对创建的页面进行预览。这些工具最大的不足是必须会HTML语言。当然，要想成为一个好的网页制作人员，HTML还是应当掌握的。这类工具中典型的有HomeSite、HotDogProfessional、H
TMLedPro、WebEditPro。③混合型工具：介于上面两种工具之间，混合型工具在所见即所得的工作环境下可以完成主要的工作，同时也能切换到一个文本编辑器，对HTML源代码进行直接地调整。像所见即所得的工具一样，
混合型的创作工具通常也不能完全控制HTML页的代码。但MacromediaDreamweaver在对已有的HTML页进行编辑时，会严格保持原有代码的格式。典型的混合型工具还有AdobePageMill、FrontPage、CutePage、QuickSite等。Fro
ntPage是较好的所见即所得的网页编辑工具，也是常用的网页编辑器。它对一个Web站点有很强的控制能力，可以统一Web站点内页面的外观和风格。它的Web管理功能也很强大，用户可以通过图形的方式观察和调整站
点的结构。Dreamweaver的最佳特性就是它的“往返式（Roundtrip）HTML”编辑能力，这种特性使图形编辑工具和代码编辑工具输出同样的HTML代码。Dreamweaver是图形化HTML编辑工具中惟一不干
扰原有HTML代码的工具，所以用Dreamweaver编辑后，仍然可以转回到原来的代码中用编辑工具进行修改。用其他工具修改后，Dreamweaver能自动更新相应的页面。它能很方便地产生动画，嵌入JavaApplet、Acti
veX控件，以及Netscape插件，并对用户的动作作出反应。此外，Dreamweaver在InternetExplorer和NetscapeNavigator两种浏览器之间的兼容性问题上处理得也很好。2.2课堂教学2.2.1HTML基础2.2.2HTML入门—
—简单标记的认识与使用2.2.3段落和文字标记2.2.4建立超级链接2.2.5加入图片2.2.1HTML基础1.HTML文件的组成2.标记3.标记的属性4.HTML文件的基本结构HTML文件是一种纯文本文件，可以通过浏览器读取HTML文件，并用
浏览器内含的语法分析器来解读各种特殊标记。1.HTML文件的组成一个HTML文件可由下列3部分组成。①标记：是HTML的基本元素，可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。也就是说，只要在HTML文件中适当的位置上
加上所需标记，就可依照各标记所代表的意义实现各种特殊的功效。基本的标记可分为两种：单一标记（只要一个标记就能完成所要表示的功能）和成对标记（需要两个标记组合才能完成所需功能）②文字与图形资料：是指要提供给浏览信息的人阅读的内容。WWW显示的
图形一般都以独立文件的形式存在，如果要显示图形（图形文件要用其他程序建立），就必须用特殊的标记指向图形文件。③统一资源定位器URL（UniformResourceLocator）：是WWW上文件的参照格式，浏览者在浏览器的地址处输入URL格式的内容，就可获取所指主机的主页。2.标记
HTML文件由标记和被标记的内容组成。标记（tag）能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，如P表示Paragraph（段落）、IMG为
Image（图像）的缩写，很好记忆。各种标记的效果差别很大，但总的表示形式却大同小异，大多数成对出现，格式为：<标记>受标记影响的内容</标记>说明：①每个标记都用“<”（小于号）和“>”（大于号）围住，如<P>，<Table>，以表示
这是HTML代码而非普通文本。注意，“<”与标记名之间不能留有空格或其它字符。②在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束，如</FONT>。标记也有不用</标记>结尾的，称之为单标记。③标记字母大小写皆可，没有限制。对同
一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。3.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上
相关的属性来表示，每个标记有一系列的属性。标记要通过属性来制作出各种效果。格式为：<标记属性1=属性值属性2=属性值„>受影响的内容</标记>例如字体标记<FONT>，有属性size和color等。属性size表示文字的大小，属性color表示文字的颜色。表示为：<FONTsize=3color
=red>属性示例</FONT>需要注意的是：①并不是所有的标记都有属性，如换行标记就没有。②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。属性和标记一样，都不区分大小写。但为了阅读方
便，本书用大写字母表示标记，小写字母表示属性。4.HTML文件的基本结构HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。文件的基本结构为：<HTML><HEAD><TITLE>网页的标题</TITLE></HEAD><BODY>网页的内容<
/BODY></HTML>说明：①HTML文件以<HTML>开头，以</HTML>结尾。②<HEAD>„</HEAD>：表示这是网页的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：<TITLE>„</TITLE>。③<BODY
>„</BODY>：表示网页的主体即正文部分。④HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。【例2-1】简单的HTML文件。<HTML><HEAD><TITLE>简单的HTML文件</TITLE></
HEAD><BODY>最简单的网页</BODY></HTML>图2-1例2-1的显示效果将文件以2_1.htm为文件名存盘，存放的位置是本机的工作目录：ASP例（参见1.2.3）。有以下两种方式可以执行HTML文件2_1.htm：打开Internet信息服务器窗口，找到虚拟目录myasp，在右
边的文件列表中选择文件2_1.htm，然后在“操作”菜单中选择“浏览”项；打开浏览器，在地址栏中直接输入虚拟目录名及文件名：http://127.0.0.1/myasp/2_1.htm在浏览器上的显示效果如图2-1所示。2.2.2H
TML入门1.HTML文档标记<HTML>„</HTML>2.HTML文件头标记<HEAD>„</HEAD>3.HTML文件标题标记<TITLE>„</TITLE>4.HTML文件主体标记<BODY>„</BODY>5.注释标记1.HTML文档标记<HTML>„</HTML>HT
ML文档标记的格式为：<HTML>HTML文档的内容</HTML>HTML文档的标记。<HTML>处于文档的最前面，表示HTML文档的开始，即浏览器从<HTML>开始解释，直到遇到</HTML>为止。每个HTML文件均以<HTML>开始，以</HT
ML>结束。2.HTML文件头标记<HEAD>„</HEAD>HEAD是英文“头”的意思，习惯上将HTML文档分为文件头和文件主体两个部分。文件主体是在Web浏览器窗口的用户区显示的内容，而文件头则用来规定该文档的标题（浏览器标题栏中的内容）和文档的一些属性。HTML文件头标记的格式为：<
HEAD>头部的内容</HEAD>说明：HTML文件的头部在文件标记<HTML>之后，在开始标记<HTML>和结束标记</HTML>间定义。其内容可以是标题名，文本文件地址、创作信息等网页信息说明。对应于相应的标记，
有标题标记<TITLE>„</TITLE>等。<HEAD>标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。3.HTML文件标题标记<TITLE>„</TITLE>HTML文件标题标记的格式为：<TITLE>标题名</TITLE>设定HTML文件标题的标记。在
文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。4.HTML文件主体标记<BODY>„</BODY>HTML文件主体标记的格式为：<BODY>文件主体</BODY>说明：①主体位于头部之后，以<BODY
>为开始标记，</BODY>为结束标记。它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在本标记中。②<BODY>有很多属性，这些属性用于设定网页的总体风格，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。其中常用的属性见表2-1
。表2-1<BODY>标记的属性值说明background设置网页的背景图像。Bgcolor设置网页的背景色。Text设置文本的颜色。Link设置尚未被访问过的超文本链接的颜色，默认为蓝色。vlink设置已被访问过的超文本链接的颜色，默认为蓝色。al
ink设置超文本链接在被访问瞬间的颜色，默认为蓝色。表2-1中，涉及颜色的属性，取值可以是英文颜色名，也可以用“#”引导的一个十六进制数代码来表示，见表2-2。如果颜色值用十六进制数代码，则颜色数比表2-
2列出的数目多得多。表2-2颜色代码表名称英文颜色名16进制代码黑色black#000000蓝色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080绿色green#008000乳白色ivory#FFFFF0桔黄色orange
#FFA500粉红色pink#FFC0CB红色red#FF0000白色white#FFFFFF黄色yellow#FFFF00深红色crimson#CD061F黄绿色greenyellow#0B6EFF水蓝色dodgerbl
ue#0B6EFF淡紫色lavender#DBDBF8【例2-2】使用网页的背景色（bgcolor）属性，可以设定整个网页的背景颜色；使用网页的文本色（text）属性，可以设定整个网页文字的颜色。<HTML><HEAD>这是主体
之外的文本<TITLE>试试BODY标记的属性</TITLE></HEAD><BODYbgcolor=greenyellowtext=blue>设置网页的背景色属性为"黄绿色",设置网页的文本色属性为"蓝色"</BODY></HTML>显示效果如图2-2所示。图2-
2使用网页的bgcolor属性5.注释标记像很多程序语言一样，HTML文件也提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示。通常使用“注释”为文中的不同部分加上说明，以方便日后阅读和修改。注释标记的格式为：<!--注释内容-->注释内容不局限于一行，长度也不受限制。即结束
标识符不必与开始标识符在同一行上。2.2.3段落和文字标记1.标题文字标记2.文本文字标记3.设置字型4.强制换行、换段标记5.分区显示标记6.水平线7.特殊符号在多数网页中，文档是核心内容，所以要经常设置文档的格式。设置文档的标记包括标题
和文字的字体、字号、字型、颜色、段落格式、文本的布局等。1.标题文字标记这里的标题是指页面中文本的标题，而不是用<TITLE>„</TITLE>定义的网页标题，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。在页面中，标题是一
段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为：<Hnalign=对齐方式>标题文字</Hn>说明：①属性n用来指定标题文字的大小。n可以取1～6的整数值，取1时文字最大，6时
文字最小。②属性align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）或right（右对齐）。③<H>„</H>标记缺省显示宋体字。<H>„</H>标记会自动插入一个空行。在一个标题行
中无法使用不同大小的字体。【例2-3】使用标题标记设置标题内容的大小与对齐方式。<HTML><HEAD><TITLE>设置标题</TITLE></HEAD><BODY><H1>第1级标题（H1）</H1><H2>第2级标题（H2）</H2><H3>第3级标题（H3）</
H3><H4align=left>第4级标题（H4）（居左）</H4><H5align=center>第5级标题（H5）（居中）</H5><H6align=right>第6级标题（H6）（居右）</H6></BODY></HTML>图2-3设置标题文字大小浏
览器的显示效果如图2-3所示。2.文本文字标记在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。文本文字标记<FONT>用来设定文字的字体、字号和颜色。其格式为：<FONTsize=数字face=字体名color=颜色>被设置的文字</FONT>说明：<FON
T>标记的属性包括：size、face、color。①size属性用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。②face属性用来设置字体。如黑体、宋体、楷体_GB2312、隶书、TimesNewRoman等。当文字为汉字时，
格式中的“字体名”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。其实，这里的字体名字就是在Word的“字体”工具栏中显示的字体
名。③color属性用来设置文字颜色，其取值见表2-2。【例2-4】使用<FONT>标记的size属性设置文字的大小；face属性设置字体。color属性设置文字颜色。<HTML><HEAD><TITLE>使用FONT标记</TITLE></H
EAD><BODY><H1>设置文字的属性</H1><FONTsize=1color=cyan>1号字青色</FONT><FONTsize=2color=green>2号字绿色</FONT><FONTsize=3face=幼圆color=or
ange>3号幼圆桔黄色</FONT><FONTsize=4face=隶书color=crimson>4号隶书深红色</FONT><FONTsize=5face=黑体color=greenyellow>5号黑体黄绿色</FONT><FONTsize=6face=方正舒体color=dodgerb
lue>6号方正舒体水蓝色</FONT><FONTsize=7face=华文彩云color=lavender>7号华文彩云淡紫色</FONT></BODY></HTML>在浏览器中的显示效果如图2-4所示。图2-4设置文本文字属性说明：①<FONT>和<Hn>标记都可以设
置文字的大小，二者的区别见表2-3。标记对象用法文字大小n的取值字体加粗<FONT>一段文章、语句、短语<FONTsize=n>文字</FONT>n=1～7，取1时最小，7时最大不自动加粗<Hn>标题<Hn>文字</Hn>n=1～6，取6时最小，1时最大自动加粗表2-
3<FONT>与<Hn>标记的区别另外，当<FONT>中的size取7时，文字比<H1>要大。②<BODY>标记中的text属性和<FONT>标记中的color属性都可以设置文本的颜色，<FONT>标记直接作用其后的文字，可在文件中多处设定，使网页中文字的颜色绚丽多彩
。当<BODY>与<FONT>标记同时对文字颜色进行定义时，<FONT>标记优先。3.设置字型字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见表2-4。表2-4设置各种字型的标记标记格式字体效果说明<
B>受影响的文字</B>受影响的文字加粗<I>受影响的文字</I>受影响的文字斜体<U>受影响的文字</U>受影响的文字带下划线<TT>受影响的文字</TT>受影响的文字标准打印机字体<STRIKE>受影响的文字</STRIIKE>受影响的文字带删除线受影响的<SUB>文字<
/SUB>下标受影响的<SUP>文字</SUP>上标<BIG>受影响的文字</BIG>大字体文本<SMALL>受影响的文字</SMALL>小字体文本【例2-5】使用字型标记设置文字的风格。<HTML><HEAD><TITLE>设置字型</T
ITLE></HEAD><BODY><B>黑体</B><I>斜体</I><U>带下划线</U><TT>标准打印机字体</TT><STRIKE>带删除线</STRIKE><SUB>下标</SUB><SUP>上标</SUP><BIG>大字体</BIG><SMALL>小字体</SM
ALL></BODY></HTML>图2-5设置文本的风格在浏览器中的显示效果如图2-5所示。4.强制换行、换段标记在HTML文档中，无法用多个回车、空格、〈Tab〉键来调整文档段落的格式。要用HTML的标记来强制换行、分段。①强制
换行标记<BR>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。由于浏览器会自动忽略原始码中空白和换行的部分，这使<BR>成为最常用的标记之一。强制换行标
记的格式为：文字<BR>说明：浏览器解释时，从该处换行。换行标记单独使用，可使页面清晰、整齐。②段落标记<P>定义一个新段落的开始。<P>标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味
着新一段的开始，所以使用<P>也可省略结束标记。强制换段标记的格式为：<P>说明：段落标记<P>的属性align用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、
居右。缺省时默认为left。一个强制换段标记<P>可以看作是两个强制换行标记<BR><BR>。【例2-6】换行与换段标记的使用。<HTML><HEAD><TITLE>强制换行、换段标记的使用</TITLE></HEAD><BODY><H2align=ce
nter><FONTcolor=blue>学生之家</FONT></H2>新 闻 学习窗口<P>健康信箱<BR>聊天室<Pali
gn=center>来信</BODY></HTML>图2-6换行与换段标记的使用说明：HTML语言忽略多余的空格，最多只空一个空格。在需要空格的位置，可以用“ ”插入一个空格，或者输入全角中文空格。在浏览器中显示。5.分区显示标记分
区显示标记可以使文本块或一段文字在网页上：左对齐、居中和右对齐。分区显示标记的格式为：<DIValign=left|center|right>文本或图像</DIV>说明：属性align的取值分别为：left
、center和right。【例2-7】分区显示标记的使用。<HTML><HEAD><TITLE>分区显示标记的应用</TITLE></HEAD><BODY><CENTER><H2>分区显示标记的应用</H2></CENTER><FONTcolor=blue><DIValign=ce
nter>居中center<BR>居中<BR>center</DIV><DIValign=left>居左left<BR>居左<BR>left</DIV><DIValign=right>居右right<BR>居右<BR>right</DIV></FONT></B
ODY></HTML>在浏览器中显示6.水平线在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器执行HTML文件中的<HR>标记时，会在此处换行，并加入一条水平线段。线段的样式由标识的参数决定。水平线标记的格式为：<HRalign=对齐方式size=横
线粗细width=横线长度color=横线颜色noshade>说明：①属性align设定横线放置的位置，可选择left（居左）、right（居右）或center（居中）。②属性size设定线条粗细，以像素为单位，默认为2。③属性width设定线段长度
，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。④属性color设定线条颜色
，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，见表2-2。⑤属性noshade设定线条为平面显示（没有三维效果），若缺省则有阴影或立体效果。【例2-8】水平线标记的使用。<HTML><
HEAD><TITLE>水平线段标记的应用</TITLE></HEAD><BODY><CENTER><H3>水平线</H3></CENTER><HR><HRalign=leftsize=6width=320><HRa
lign=centersize=8width=60%color=blue><HRalign=rightsize=8width=360color=red><HRsize=4width=80%color=#CD061F><HRsize=5no
shade><HRwidth=70%noshade></BODY></HTML>在浏览器中的显示。浏览时，改变一下窗口的大小，可以看到线段的变化效果。7.特殊符号浏览器解释HTML文件时，是根据“<”与“>”来识别
标记的，然后再确定这两个符号中的内容是否为HTML文件标记，若是则按其规则解读。所以，要在网页中显示“<”或“>”，就要作为特殊字符。其他常用的特殊字符见表2-5。表2-5特殊替换字符特殊字符所替代的字符说明&特殊字符的开始;
特殊字符的结束Lt<小于号Gt>大于号Quot"双引号nbsp空格2.2.4建立超级链接1.热点标记2.创建指向其他页面的链接3.创建指向本页中的链接超链接（Hyperlink）可以看作是一个“热点”，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个
位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子函件、远程访问等。当Web页包
含超链接时，Web页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用热点标记<A>来定义。1.热点标记热点由<A>标记定义，它在网页上建立超文本链接。通过单击一个
词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有唯一的地址（URL）。具有以上特点的词、句或图片就称为热点。<A>标记的格式为：<Ahref=地址name=字符串target=打开窗口方式>热点</A>说明：①href为超文本引用，它的值为一个URL，是目标资
源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径。href不能与name同时使用。②name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。③target设定链接被按后结果所
要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。其说明见表2-6。取值说明target="_blank"或target="new"将链接的画面内容，开在新的浏览器窗口
中。target="_parent"将链接的画面内容，显示在直接父框架窗口中。target="_self"将链接的画面内容，显示在当前窗口中（默认值）。target="_top"将框架中连结的画面内容，显示在没有框架的窗口中（即除去了框架）。target="框架名称
"只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架名称是事先由框架标记所命名的。表2-6target属性的取值2.创建指向其他页面的链接创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标
文件与当前文件的目录关系如何，其格式为：<Ahref="目标文件的路径/目标文件名.html">热点</A>根据目标文件与当前文件的目录关系，有4种写法：①链接到同一目录内的网页文件，其格式为：<Ahref="目标文件名.html">热点</A>目标文件名是链接所指
向的文件。②链接到下一级目录中的网页文件，其格式为：<Ahref="子目录名/目标文件名.htm">热点</A>③链接到上一级目录中的网页文件，其格式为：<Ahref="../目标文件名.html">热点</A>其中“../”表示退到上一级目录中。④链接到同级目录中的网页文件，其格
式为：<Ahref="../子目录名/目标文件名.html">热点</A>表示先退到上一级目录中，然后再进入到目标文件所在的目录。3.创建指向本页中的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为
：<Ahref="#记号名">热点</A>单击热点文本，将跳转到“记号名”开始的文本。书签就是用<A>标记对该文本作一个记号。如果有多个链接，不同目标文本要设置不同的书签名，书签名在<A>的name属性中定义。格式为：<Aname=“记号名”>目标文本附近的字符串</A>【例2-9】链接本页中的文
本。<HTML><HEAD><TITLE>学生之家</TITLE></HEAD><BODYlink=redalink=bluevlink=green><Aname="0"></A><H2align=center><B>欢迎来到“学生之家”</B
></H2><FONTsize=3color=purple><CENTER><Ahref="#news">新闻</A> <Ahref="#study">学习园地</A> &nb
sp; <Ahref="#health">健康信箱</A> <P></CENTER></FONT><Aname="news"></A>新闻<BR>..................<BR><DIValign=right><Ahr
ef="#0">返回</A></DIV><P><Aname="study"></A>学习园地<BR>..................<BR><DIValign=right><Ahref="#0">返回</A></DIV><P><Aname=
"health"></A>健康信箱<BR>..................<BR><DIValign=right><Ahref="#0">返回</A></DIV><P></BODY></HTML>在浏览器中的显示。单击超链接，将跳转
到页面的相应位置，2.2.5加入图片1.图片文件的格式2.设置网页的背景3.图片标记4.用图片作为超链接1.图片文件的格式加入网页中的图片，通常使用GIF格式和JPEG格式。GIF格式文件最多只能显示
256种颜色，这使得它很少用于存储照片。但是，存放图标、剪贴画和艺术线条等对颜色要求不高的图片，已经足够了。GIF格式图片的优点在于制作透明、隔行和动画效果。JPEG格式文件可以拥有计算机所能提供的最多种颜色
，适合存放高质量的彩色图片、照片。另外，JPEG格式文件采用压缩方式存储文件信息，相同的图片，所占空间比GIF文件小，所以下载时间较短，浏览速度较快。但是，JPEG格式的文件没有GIF格式文件的三种特殊效果。2.设置网页的背景网页的背景可以是某种颜色，也可以是
图片。无论是图片，还是背景色，都通过<BODY>标记的相应属性来设置。(1)设置背景色利用色彩作背景，比较容易在颜色上协调，而且下载速度比采用图片作为背景快。网页缺省为白色，<BODY>的bgcolor
属性用于设置网页的背景色。格式为：<BODYbgcolor=颜色值>其中，“颜色值”可以为颜色的英文名或相应十六进制值。(2)用图片作为背景使用<BODY>标记的background属性，可为网页铺上背景图片。格式为：<BODYbackground=图片文件名>其中
“图片文件名”包括文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。作为背景的图片文件，要做的很小，以便加快下载速度。【例2-10】图片背景。<H
TML><HEAD><TITLE>图片背景</TITLE></HEAD><BODYbackground=bg1.gif><!--在网页中加入只有一只小猫的图片--><H2align=CENTER>用图片作为背景</H2><FONTsize=4>在浏览器中，作为背景的图片
将按原来的大小复制，重复铺满整个网页。因此，作为背景的图片文件，要做的很小，以便加快下载速度。<BR></FONT></BODY></HTML>在浏览器中的显示效果。3.图片标记使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。格式为：<IMGsrc=
文件名alt=说明width=xheight=yborder=nhspace=hvspace=valign=对齐方式>说明：标记中的属性说明见表2-7。名称说明src指出要加入图片的文件名，即“图片文件的路径\图片文件名”
。alt在浏览器尚未完全读入图片时，在图片位置显示的文字。width宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。height设定图片的高度（像素数或百分数）。hspace设定图片边沿空
白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。vspace设定图片上下的空间，空白高度采用像素作单位。align图片在页面中的对齐/布局方式，或图片与文字的对齐方式。表2-7图片标记的属性说明(1)图片的尺寸使用<IMG>标记的wi
dth和height属性可以设置图片的大小，width和height属性的值可取像素数，也可取百分数（浏览器窗口）。如果不设定图片的尺寸，图片将按照其本身的大小显示。【例2-11】设置图片的尺寸。<HTML
><HEAD><TITLE>设定图片的尺寸</TITLE></HEAD><BODY><H4align=center>设定图片的尺寸</H4><IMGsrc="daisy.jpg"alt="封面">原始大小<IMGsrc="daisy.jpg"alt="封面"width=85
height=120>宽85，高120<BR><P><IMGsrc="daisy.jpg"width=40%height=40%>宽40%，高40%</BODY></HTML>在浏览器中的显示效果。(2)图片的布局所谓布局，就是图片放在网页中的位置，以及图片与文本的
排放关系。实现这种功能，可以使用<IMG>标记的align属性。align属性的取值见表2-8。表2-8图片标记的属性说明值说明left图片居左，文本在图片的右边center图片居中right图片居右，文本在图片的左边top图片的顶部与文本对齐middle图片的中央与
文本对齐bottom图片的底部与文本对齐除此之外，使用<P>标记的align属性或<CENTER>标记也可以实现相应的功能。当设置文本环绕方式（left或right）后，将一直有效，如果想取消环绕方式，可使用<BR>标记的clear属性，其后的文本将不再环绕图片。格式为：
<BRclear=left或right或all>【例2-12】文本环绕图片及其解除。<HTML><HEAD><TITLE>设定图片的对齐方式</TITLE></HEAD><BODY><H4align=center>设定图片的对齐方式<
/H4><IMGsrc=daisy.jpgalign=left> 如果不设置文本对图片的环绕，图片在页面会占一片空白。利用标记的属性，可以使文本环绕图片。<br> 其中align的值可取：<br> aleft图片居左，文本在图片的右
边。<br> right图片居右，文本在图片的左边。<brclear=left><IMGsrc=daisy.jpgalign=right> &nb
sp;使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。</BODY></HTML>在浏览器中的显示效果。(3)设置图片与文本之间的空白。适当在图片与文本之间留下空白，可使页面看起来不至于太
紧密。<IMG>标记的hspace和vspace属性可实现该功能。【例2-13】设置图片与文本之间的空白。<HTML><HEAD><TITLE>设置图片与文本之间的空白</TITLE></HEAD><BODY><H4align=center>设置图片与文本之间的空白</H4><IMG
src=daisy.jpgalign=lefthspace=10vspace=15> 如果不设置文本对图片的环绕，图片在页面会占一片空白。利用标记的属性，可以使文本环绕图片。<br> 其中align的值可取：
<br> aleft图片居左，文本在图片的右边。<br> right图片居右，文本在图片的左边。<brclear=left><IMGsrc=daisy.jpgalign=r
ighthspace=15vspace=20> 使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。</BODY>
</HTML>在浏览器中的显示效果。4.用图片作为超链接图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：<Ahref=地址><IMGsrc=图片文件名></A>【例2-14】如在例2-
13中用图片作为超链接，链接到例2-11中的文件。<HTML><HEAD><TITLE>设置图片作为超链接的热点</TITLE></HEAD><BODY><H4align=center>设置图片作为超链接的热点</H
4><Ahref="2_11.htm"><IMGsrc=daisy.jpgalign=lefthspace=10vspace=15></A> 如果不设置文本对图片的环绕，图片在页面会占一片空白。利用标记的属性，可以使文本环绕图片。<br> 其中alig
n的值可取：<br> aleft图片居左，文本在图片的右边。<br> right图片居右，文本在图片的左边。<brclear=left><IMGsrc=daisy.jpgalign=righthspace=15v
space=20> 使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。</BOD
Y></HTML>2.3上机练习【练习2-1】制作指向本页中的链接，如图2-13所示。在本网页中给出例题的内容（题目和解答），单击网页前部的例题名跳转到该例题的开始处，在例题内容结尾单击“返回”回到网页前部。在题目后单击“执行”将打开该例题的网页。各例题文件保存在当前文件夹中的“第2章例题”子文
件夹中。并在网页尾部建立指向制作者电子函件的链接。
辽公网安备 21102102000191号
营业执照
