1 / 82

第二章 HTML 语言

第二章 HTML 语言. 陆　铭 联系电话： 66134267 QQ ： 22839978 Email ： richard.du@163.com 教学网站： mingler.ccshu.org 教学论坛： bbs.ccshu.org. 本章目录. 2.1 HTML 概述 2.2 HTML 基本标记. 2.1 HTML 概述. 标记的基本形式. 成对标记 < 标记 参数 1 参数 2 参数 3…> 内容 </ 标记 > 其中，标记与参数、参数与参数之间使用空格分隔，参数可省略。 非成对标记 < 标记 参数 1 参数 2 参数 3…> 内容

torin
Download Presentation

第二章 HTML 语言

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第二章HTML语言 陆　铭 联系电话：66134267 QQ：22839978 Email：richard.du@163.com 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  2. 本章目录 2.1 HTML概述 2.2 HTML基本标记

  3. 2.1 HTML概述

  4. 标记的基本形式 • 成对标记 • <标记 参数1 参数2 参数3…>内容</标记> • 其中，标记与参数、参数与参数之间使用空格分隔，参数可省略。 • 非成对标记 • <标记 参数1 参数2 参数3…>内容 • 注意：HTML标记中，大、小写或混写均可。例如：<HTML>、<html>或<HtmL>，其结果都是一样的。同时如果不特别注明，浏览器会忽略HTML文档中的空格（多个空格认作一个空格）、制表符和回车符等符号。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  5. 文档头部分 HTML文档范围 文档主体部分 HTML文档的基本结构 • 标准的HTML文档的结构 <HTML> <HEAD> <META> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  6. 基本结构 • <HTML>标记 • 成对标记：<html>…</html> • 一个完整的HTML文档是以<HTML>标记开始，以</HTML>标记结束的，用来告知浏览器该成对标记之间的内容是使用HTML格式编写的，浏览器会使用HTML规范来解释和显示其中的内容。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  7. 基本结构 • <HEAD>标记 • 成对标记：<head> … </head> • <HEAD>和</HEAD>标记之间的内容是HTML文档的头部分，用来规定该文档的标题（出现在Web浏览器窗口的标题栏中）和文档的一些属性。在<HEAD>标记之间可引用<META>、<TITLE>等标记。 • <META>标记 • 非成对标记 • 位于<HEAD>标记之间 • 用以记录当前页面的一些重要信息，例如网页所依据的字符集、开发者、开发语言版本、网页关键字等。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  8. 基本结构 • <TITLE>标记 • 成对标记：<title> … </title> • 用以规定HTML文档的标题。位于该成对标记之间的内容将显示在Web浏览器窗口的标题栏中。 • 例如 • <html><head><title>欢迎光临</title></head></html> • 在浏览器窗口的标题栏内将出现 “欢迎光临” 四个字 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  9. 基本结构 • <BODY>标记 • 成对标记：<body [参数表]> </body> • 标记之间的内容将显示在Web浏览器窗口的用户区域内，它是HTML文档的主体部分。 • <BODY>标记的重要参数包括 • BGCOLOR：设置HTML文档的背景色。 • TEXT：设置HTML文档中文字的颜色。 • LINK：设置HTML文档中未被访问过的链接所显示的颜色。 • ALINK：设置HTML文档中链接被激活时链接所显示的颜色。 • VLINK：设置HTML文档中被访问过的链接所显示的颜色。 • BACKGROUND：设置HTML文档的背景图片。 • BGSOUND：设置HTML文档的背景音乐。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  10. 颜色设置规范 • 在设置颜色时，可以使用颜色的六位十六进制代码（其中,每两位的取值范围均是00~FF，代表ASCII码的0~255；前两位设置红色R的深浅，中间两位设置绿色G的深浅，最后两位设置蓝色B的深浅），也可以直接使用该颜色对应的英文单词。 • 例如，若需指定HTML文档的背景颜色为“绿色”，文字颜色为“红色”，则直接使用对应英文单词的具体设置为： • <BODY BGCOLOR=“green” TEXT=“red”> 内容 </BODY> • 示例 • 而使用六位十六进制代码的具体设置为： • <BODY BGCOLOR=“#008000” TEXT=“#ff0000”> 内容 </BODY> • 示例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  11. 常用颜色表 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  12. 注释与特殊字符 • 注释标记格式 • <！-- 注释内容 --> • 特殊字符代码表 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  13. 1.2 HTML基本标记

  14. 文本格式标记 • 在HTML文档中，文本的字体、大小、颜色等都是由标记控制的，以下介绍常用的文本格式标记。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  15. 设置标题字体标记 • 格式：<H#> 内容 </H#> • 说明： • 设置标题字体标记<H#>是成对标记，首标记和尾标记之间的内容是以黑体字显示的。(其中#=1，2，3，4，5，6) • <H#>标记将在标记内容的前后自插入一个空行，因此不必使用换行标记进行换行。同时在一行中无法使用不同大小的标题字体。 • 示例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  16. 设置字体大小/颜色标记 • 格式： • <FONT SIZE="#" COLOR="#"> 内容 </FONT> • 说明： • 设置字体大小/颜色标记是成对标记。 • 参数SIZE用来指定字体的大小，数值范围为1~7。SIZE参数值也可用“+”或“-”设置相对大小，例如：SIZE=“+3”表示采用比当前默认字体大3号的字体；SIZE=“-2”表示采用比当前默认字体小2号的字体。由于缺省值为3，所以能选择的值是：-2、-1、+1、+2、+3、+4。 • 参数COLOR的值是六位十六进制代码或是颜色的英文单词。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  17. 字体大小与颜色示例 <html> <head> <title> 设置字体大小/颜色标记 </title> </head> <body> <FONT SIZE="6" color="red">上海大学</FONT> <FONT SIZE="4" color="#ff0000">上海大学</FONT> </body> </html> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  18. 设置物理字体标记 • 格式： • <B> 内容 </B> 粗体标记 • <I> 内容 </I> 斜体标记 • <U> 内容 </U> 加下划线标记 • <TT> 内容 </TT> 打字机风格的字体标记 • <SUP> 内容 </SUP> 上标标记 • <SUB> 内容 </SUB> 下标标记 • <S> 内容 </S> 加删除线标记 • 说明： • 物理字体是指使用一些标记来改变字体物理显示时的形状，以产生某种强调和突出的效果。 • 物理字体标记均为成对标记。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  19. 设置逻辑字体标记 • 格式： • <EM> 内容 </EM> 强调文本(通常是斜体)标记 • <STRONG> 内容 </STRONG> 加重文本(通常是黑体)标记 • <CODE> 内容 </CODE> 代码标记 • <SAMP> 内容 </SAMP> 式样文本标记 • <KBD> 内容 </KBD> 键盘字标记 • <VAR> 内容 </VAR> 变量值标记 • <DFN> 内容 </DFN> 术语定义标记 • <CITE> 内容 </CITE> 引用标记 • <SMALL> 内容 </SMALL> 小字体（比周围的字体小）标记 • <BIG> 内容 </BIG> 大字体（比周围的字体大）标记 • 说明： • 逻辑字体标记均是成对标记。 • 逻辑字体是指使用一些标记来改变字体的形态和式样，以便产生一些公众习惯的或约定俗成的显示效果。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  20. 文本格式标记范例 <HTML> <HEAD> <TITLE>网页设计范例之一（文本格式）</TITLE> </HEAD> <BODY> 正常体 <B>粗体字</B> <I>斜体字</I> <U>加下划线</U> <TT>打字机风格字体</TT> <SUP>上标字体</SUP> <SUB>下标字体</SUB> <S>加删除线</S> <EM>强调文本</EM> <STRONG>加重文本</STRONG> <SMALL>小字体</SMALL> <BIG>大字体</BIG> <H1>第1标题字体</H1> <H2>第2标题字体</H2> <H3>第3标题字体</H3> <H4>第4标题字体</H4> <H5>第5标题字体</H5> <H6>第6标题字体</H6> <FONT SIZE="6" COLOR="red">红色6号字体</FONT> <FONT SIZE="+3" COLOR="#0000FF">蓝色6号字体</FONT> </BODY> </HTML> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  21. 布局标记之换行标记 • 为了使网页显示得更规范化、更便于用户阅读和理解，可以给网页加上相应的布局设置，例如段落、换行、加水平分隔线等 • 换行标记格式： • <BR> • 说明： • 非成对标记 • 作用相当于插入一个回车符。如果没有换行标记，Web浏览器将根据浏览器窗口的宽度尽可能长地显示文本，而不是按照HTML文档中的文本格式显示。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  22. 布局标记之分段标记 • 格式： • <P ALIGN="value"> 内容 </P> • 说明： • 成对标记 • 用来设定段落，其作用是换行并插入一个空白行。 • 分段标记<P>若无ALIGN参数时，</P>标记可以省略。 • ALIGN参数用来设定段落中内容的对齐方式，其中value值可以设为：left（左对齐，缺省值）、right（右对齐）、center（置中对齐）。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  23. 布局标记之居中标记 • 格式： • <CENTER> 内容 </CENTER> • 说明： • 成对标记 • 用来设置所标记内容置中对齐。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  24. 布局标记之预定义格式标记 • 格式： • <PRE> 内容 </PRE> • 说明： • 成对标记 • 作用是让所标记内容的编排，包括空格、制表符和回车符等都能按照用户的设定显示，即保持浏览器中所显示的文字排列格式和在编辑HTML文档时的版面格式一致。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  25. 布局标记之水平分隔标记 • 格式： • <HR [参数表]> • 说明： • 非成对标记 • 作用是换行并在该行下面插入一条水平直线。 • <HR>标记有如下参数： • ALIGN参数：当水平线宽度小于浏览器窗口宽度时，使用该参数设置水平线在浏览器窗口中的对齐方式，其取值有：left、center（缺省值）和right。 • WIDTH参数：用来控制水平线的宽度。参数值可用数字（表示水平线宽度所占的像素点数），也可用百分数（表示水平线占浏览器窗口宽度的百分比）。缺省时，水平线占据整个浏览器窗口宽度。 • SIZE参数：用来控制水平线的粗细，参数值用数字设置，缺省值为2。 • COLOR参数：用来设置水平线的颜色，参数值可用六位十六进制代码或直接使用颜色的英文单词设定。 • NOSHADE参数：产生一条普通的二维线条，没有三维效果。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  26. 布局标记之引文标记 • 格式： • <BLOCKQUOTE> 内容 </BLOCKQUOTE> • 说明： • 成对标记 • 作用是用来建立一个引文，它特别适合于较长文本的引用。引文显示时，浏览器将自动在两边缩排引文，以示区别。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  27. 布局标记之署名标记 • 格式： • <ADDRESS> 内容 </ADDRESS> • 说明： • 成对标记，一般放在文档体的首部或尾部。 • 该标记之间的内容一般是有关作者的信息，包括作者的姓名、身份、地址等等。在浏览器窗口中使用斜体显示。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  28. 布局标记范例 <HTML> <HEAD> <TITLE>网页设计范例之二（布局标记）</TITLE> </HEAD> <BODY> <CENTER> 静夜思<br> 床前明月光<br> 疑是地上霜<br> 举头望明月<br> 低头思故乡<br> </CENTER> <p align="right">大家一定很熟悉这首诗，<br>请大家再欣赏一首诗： <BLOCkquote> <PRE> <FONT SIZE="3" COLOR="green"> 日照香炉生紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天 </FONT> </PRE> </blockquote> 您知道诗的作者是谁吗？ <HR align="left" WIDTH="50%"> <address>作者：李白</address> </BODY> </HTML> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  29. 列表标记之无序列表 • 使用HTML语言中提供的列表标记，可以使HTML文档内容在显示时按一定的规则和格式排序。 • 无序列表以符号表示列表 • 无序列表格式： <UL TYPE="value"> <LH> 列表主题 </LH> <LI> 列表项 </LI> </UL> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  30. 无序列表的格式说明 • 无序列表标记<UL>是成对标记，在其中可以使用<LH>列表主题标记和<LI>列表项标记。 • 列表主题标记<LH>是成对标记，但尾标记</LH>可以省略。该标记用于显示该列表的主题，列表主题标记可以省略。 • 列表项标记<LI>是成对标记，但尾标记</LI>可以省略。该标记用于指定列表中的每一项。浏览时，浏览器会在每一个列表项前加上一个项目符号。同一级别列表项前的项目符号相同，不同级别列表项前使用不同的项目符号。 • TYPE参数：用来设置不同的项目符号，其value值可以设置为： • disc：设定一个实心圆点项目符号（缺省值）。 • circle：设定一个空心圆点项目符号。 • square：设定一个方形实心项目符号。 • 示例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  31. 列表标记之有序列表 • 有序列表以数字或字母表示列表的序号 • 有序列表的格式 <OL TYPE="value"> <LH> 列表主题 </LH> <LI> 列表项 </LI> </OL> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  32. 有序列表的格式说明 • 有序列表标记<OL>是成对标记，在其中同样可以使用<LH>列表主题标记和<LI>列表项标记。 • TYPE参数：用来设置列表项的有序编号，其value值可以设置为： • “1”：表示列表项用数字为序号（缺省值）。 • “a”：表示列表项用小写字母为序号。 • “A”：表示列表项用大写字母为序号。 • “i”：表示列表项用小写罗马字母为序号。 • “I”：表示列表项用大写罗马字母为序号。 • 示例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  33. 列表标记之定义列表 • 定义列表是列表的隐形显示形式 • 定义列表的语法格式 <DL> <DT>定义标题 <DD>定义内容 </DL> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  34. 定义列表的格式说明 • 定义列表标记<DL>是成对标记，在其中可以使用<DT>定义标题标记和<DD>定义内容标记。 • 定义标题标记<DT>是非成对标记，用于指定标题。 • 定义内容标记<DD>是非成对标记，用于指定相关标题的具体解释或说明。一般有一条<DT>标记，就有一条<DD>标记相对应。 • 定义列表示例 • 列表标记综合范例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  35. 表格标记 • 表格是网页的重要组成部分。在网页设计中，表格标记除了用于制作一般表格外，也可以用来分割网页的版面，进行网页布局。当网页上既要放置文本，又要放置图像的时候，就会发觉很难把图像与文本放到合适的位置。而利用表格，就能将图像、文本等内容放置在合适的位置，而通过对单元格的操作，可形成网页错落有致的布局效果。所以，在网页设计中适当地使用表格，将不同性质的部分加以区分，不但能使整个网页布局整齐规范，而且还可以提高网页的可读性。 • 表格标记范例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  36. 创建表格标记 • 格式： • <TABLE [参数表]> 内容 </TABLE> • 说明： • 创建表格标记<TABLE>是成对标记，用来界定表格的范围。 • <TABLE>标记的参数都是可选项。 • BORDER参数：设置表格边框线的宽度，参数值用数字设置。缺省值为0，即表格没有边框。 • WIDTH和HEIGHT参数：这两个参数分别设置表格的宽度和高度。参数值可用数字或百分数设置，其中数字表示表格宽度（或高度）所占的像素点数，百分数表示表格的宽度（或高度）占浏览器窗口宽度（或高度）的百分比。 • ALIGN参数：设定表格的对齐方式。参数值为left（缺省值）、center和right。 • CELLSPACING参数：在单元格与单元格之间有间隔线，称为格框线。该参数用来设置格框线的宽度。参数值用数字设置，缺省值为2。 • CELLPADDING参数：设定单元格内容与格框线之间的距离。参数值用数字设置，缺省值为1。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  37. 表格标题标记 • 格式： • <CAPTION> 内容 </CAPTION> • 说明： • 表格标题标记<CAPTION>是成对标记，用来设置表格的标题，该标记必须置于<TABLE>标记作用域内。<CAPTION>标记的两个参数都是可选项。 • ALIGN参数：设定表格标题与表格之间的对齐方式。参数值为left、center（缺省值）和right。 • VALIGN参数：设定表格标题位于表格的上方或下方。参数值为top（缺省值）和bottom。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  38. 行标记 • 格式： • <TR> 内容 </TR> • 说明： • 行标记<TR>是成对标记。HTML语言中的表格是按行组织的，一个表格由几行组成，就需要有几对行标记与之相对应。 • <TR>标记的参数都是可选项。其中ALIGN、WIDTH和HEIGHT参数和表格标记中的参数设置相似，用于设置该行中各单元格的属性。而VALIGN参数用于设定该行中各单元格内容垂直对齐方式，参数值为top、middle（缺省值）和bottom。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  39. 表头标记和表元标记 • 格式： • <TH> 内容 </TH> • <TD> 内容 </TD> • 说明： • 表头标记<TH>和表元标记<TD>都是成对标记，必须嵌套在行标记<TR>的首尾标记之间使用，用于规定该行中各单元格的内容。表头标记用于标识表头元素的内容，表头元素一般位于表格每列的首行，用以说明该列具体数据的属性名称。以<TH>和<TD>标记设置表格单元格内容时，除表头标记<TH>设置的单元格中内容以黑体显示外，表头标记和表元标记之间几乎没有什么区别，它们所有参数及相应的参数功能是完全一样的。<TH>和<TD>标记的参数都是可选项。 • ROWSPAN参数：设定当前单元格所跨的行数。参数值用数字设置，缺省值为1。 • COLSPAN参数：设定当前单元格所跨的列数。参数值用数字设置，缺省值为1。 • 其他参数可参照行标记<TR>的参数设置，用于设置指定单元格的属性。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  40. 图像标记 • 图像可以使Web页面更加生动美观、富有生机。Web浏览器可以显示JPG、GIF等格式的图像。 • 图像标记范例 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  41. 图像格式 • 网页上的图像存储格式大多采用GIF格式和JPEG格式。近来PNG格式也得到广泛应用，并且得到了Internet Explorer、FireFox和Opera等浏览器的支持。 • GIF是Graphics Interchange Format的缩写，它是图像转换的标准格式，最多可以处理256种颜色。它的下载速度快，并且具有多元化的结构，能存储多张图像。动画大多采用这种格式。 • JPEG标准是一个名为Joint Photographic Experts的组织制定的。JPEG是一种压缩率很高的图像格式，采用了一种有损压缩技术， 可以支持32位颜色的图像，但会失真。适合于显示细微颜色变化的内容，例如彩色照片、油画作品等。 • PNG格式采用了一种压缩效率很高的无损压缩技术进行压缩，有效地减少了图像文件的尺寸。PNG格式采用交替显示方式保存图像，只要下载1/64的图像信息就能够以低分辨率的方式显示出图像，因此十分适用于网络上的图像传送。PNG格式支持灰度图像、RGB彩色图像以及索引色图像等。 • 在网页中使用图像时，用户必须先把图像从本地或网络计算机等处插入到网页文件中，然后才可以进行编辑、处理。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  42. 图像标记 • 格式： • <IMG SRC=“URL” HEIGHT=“value1” WIDTH=“value2”…> • 说明： • 在HTML文档中插入图像是通过<IMG>标记来实现的，该标记是非成对标记，它带有许多参数，除参数SRC不可缺省外，其他参数都是可选项。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  43. 图像标记参数 • SRC参数：用于指定被引用的图像文件所在的位置。超文本文件在网络中的位置都由统一资源定位器（URL）来唯一标识。作为必选项，SRC的参数值就是图像文件的URL地址，URL地址的表示方法有绝对表示法和相对表示法（把当前HTML文档的所在位置作为当前目录）两种。 • 绝对表示法： • <IMG SRC="http://www.cc.shu.edu.cn/images/logo.gif"> • <IMG SRC="file:///c:/cai3/01/emailed.gif"> • 相对表示法： • <IMG SRC="star.jpg"> • <IMG SRC="image/star.jpg"> 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  44. 图像标记参数 • HEIGHT和WIDTH参数：这两个参数用来确定图像的高度和宽度。参数值用数字设置，表示图像高度（或宽度）所占的像素点数。缺省时，Web浏览器根据原始图像文件的大小和浏览器窗口的大小自动调整图像的显示尺寸。 • ALIGN参数：用来设定图像和周围文字的对齐方式或设定图像在页面中的对齐方式。常用参数值如下： • left：设定图像左对齐（缺省值）。 • right：设定图像右对齐。 • bottom：设定与图像相邻的文字位于图像同一区域的下方（缺省值）。 • top：设定与图像相邻的文字位于图像同一区域的上方。 • middle：设定与图像相邻的文字位于图像同一区域的中间。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  45. 图像标记参数 • ALT参数：当用户的浏览器无法正常显示图像时，显示ALT属性所设定的文字。 • BORDER参数：设定图像边框的宽度。参数值用数字设置，表示边框宽度所占的像素点数。缺省值为0，表示无边框。 • VSPACE和HSPACE参数：这两个参数用来设定图像与其相邻对象之间的间距。VSPACE参数用于指定图像与相邻对象之间的垂直间距，HSPACE参数用于指定图像与相邻对象之间的水平间距。这两个参数的值都是数字，表示相隔间距的像素点数。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  46. 超链接标记 • HTML语言最显著的优点在于它支持文件之间的超级链接。通过超级链接，世界各地的万维网信息连接在一起，而链接标记真正体现了HTML语言的作用。 • 格式： • <A HREF="URL"> 内容 </A> • <A NAME=“目标名”> 内容 </A> • 说明： • 链接标记<A>是成对标记，它是HTML语言的核心标记。链接标记之间的内容即超链接载体，俗称为“锚”。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  47. 链接标记参数HREF • 作用：指定超链接目标。 • 使用绝对的URL地址来指定超链接目标。 • 例如： • <A HREF="http://elearning.shu.edu.cn/jsjwh">精品课程</A> • 当用户单击“精品课程”锚时，浏览器就会基于HTTP协议将指定服务器上的HTML文档显示出来。 • 例如： • <A HREF="ftp://ftp.cc.shu.edu.cn">文档传输</A> • 当用户单击“文档传输”锚时，浏览器就会基于FTP协议连接ftp.cc.shu.edu.cn服务器，同时在浏览器窗口中显示该FTP服务器上的内容。 • 例如： • <A HREF="file:///c:/cai3/chp02/first.htm">网页设计</A> • 当用户单击“网页设计”锚时，浏览器将访问本机c:\cai3\chp02目录中的first.htm文件。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  48. 链接标记参数HREF • 使用相对的URL地址来指定超链接目标。 • 例如： • <A HREF="Example.htm"><IMG SRC="image3.jpg"></A> • 本例中设置了一个图形锚，当用户单击该图形时，浏览器会访问当前目录中（正在访问的HTML文档所处的目录）的Example.htm文件。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  49. 链接标记参数NAME • 作用：定义目标名，提供链接定位时使用。 • 当网页的长度超过一屏时，可以先在网页的某处定义目标名，然后在该网页的其他地方使用HREF参数设置链接，格式为“#目标名”。当链接被激活时浏览器便会由定义的目标名处开始显示，实现同一网页间的超链接。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

  50. 链接标记参数NAME • 实现同一网页间超链接的步骤： • 在网页中设定目标名。 • 例如：<A NAME="jszx">上海大学计算中心</A> • 上述例句在网页内容“上海大学计算中心”处定义了目标名“jszx”。此时，文本“上海大学计算中心”并不是“锚”，而只是提供链接定位所使用。 • 在相应位置设置超级链接。 • 例如：<A HREF="#jszx">转到上海大学计算中心</A> • 当用户单击“转到上海大学计算中心”锚时，浏览器的显示区域会转到该HTML文档中定义目标名为“jszx”的位置，即“上海大学计算中心”处。如果在该HTML文档中没有定义过“jszx”目标名，则浏览器将显示定位在该文档的开始处。 教学网站：mingler.ccshu.org 教学论坛：bbs.ccshu.org

More Related