网页制作基础语言HTML.ppt

《网页制作基础语言HTML.ppt》由会员分享，可在线阅读，更多相关《网页制作基础语言HTML.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二部分 信息组织 网络信息组织基础语言HTML2.1 HTML2.1 HTML简介简介简介简介2.2 HTML2.2 HTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构2.3 2.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程2.4 2.4 段落标记段落标记段落标记段落标记2.5 2.5 文字标记文字标记文字标记文字标记2.6 2.6 超链接超链接超链接超链接2.7 2.7 图片图片图片图片2.8 2.8 列表列表列表列表2.9 2.9 表格表格表格表格2.10 2.10 字幕、音频和视频字幕、音频和视频字幕、音频和视频字幕、音频和视频2.11 2

2、.11 框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）框架（多窗口页面）2.12 2.12 表单表单表单表单第第2部分部分 网页制作基础语言网页制作基础语言HTML HTMLHTML是是是是Hypertext Markup LanguageHypertext Markup Language（超文本标（超文本标（超文本标（超文本标记语言）的缩写，是一种为普通文件中某些字句加上标识的记语言）的缩写，是一种为普通文件中某些字句加上标识的记语言）的缩写，是一种为普通文件中某些字句加上标识的记语言）的缩写，是一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（语言，其目的在于运用标记（语

3、言，其目的在于运用标记（语言，其目的在于运用标记（tagtag）对文件达到预期的效果。）对文件达到预期的效果。）对文件达到预期的效果。）对文件达到预期的效果。它是构成它是构成它是构成它是构成WebWeb页面（页面（页面（页面（PagePage），用来表示），用来表示），用来表示），用来表示WebWeb页面的符号标页面的符号标页面的符号标页面的符号标记语言。通过记语言。通过记语言。通过记语言。通过HTMLHTML，将所需要表达的信息按某种规则写成，将所需要表达的信息按某种规则写成，将所需要表达的信息按某种规则写成，将所需要表达的信息按某种规则写成HTMLHTML文件，通过专用的浏览器来识别，并将

4、这些文件，通过专用的浏览器来识别，并将这些文件，通过专用的浏览器来识别，并将这些文件，通过专用的浏览器来识别，并将这些HTMLHTML文文文文件翻译成可以识别的信息，就是所见到的网页。件翻译成可以识别的信息，就是所见到的网页。件翻译成可以识别的信息，就是所见到的网页。件翻译成可以识别的信息，就是所见到的网页。HTMLHTML语言是建立网页的规范或标准，从它出现发展到语言是建立网页的规范或标准，从它出现发展到语言是建立网页的规范或标准，从它出现发展到语言是建立网页的规范或标准，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不现在，规范不断完善，功能越来越强。但是依然有缺陷和不现

5、在，规范不断完善，功能越来越强。但是依然有缺陷和不现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，足，人们仍在不断的改进它，使它更加便于控制和有弹性，足，人们仍在不断的改进它，使它更加便于控制和有弹性，足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。以适应网络上的应用需求。以适应网络上的应用需求。以适应网络上的应用需求。20002000年，年，年，年，W3CW3C组织公布发行了组织公布发行了组织公布发行了组织公布发行了XHTML 1.0XHTML 1.0版本。版本。版本。版本。XHTML 1.0XHTML 1.

6、0是一种在是一种在是一种在是一种在HTML 4.0HTML 4.0基础上优基础上优基础上优基础上优化和改进的新语言，目的是基于化和改进的新语言，目的是基于化和改进的新语言，目的是基于化和改进的新语言，目的是基于XMLXML应用。应用。应用。应用。XHTMLXHTML是一种是一种是一种是一种增强了的增强了的增强了的增强了的HTMLHTML，它的可扩展性和灵活性将适应未来网络应，它的可扩展性和灵活性将适应未来网络应，它的可扩展性和灵活性将适应未来网络应，它的可扩展性和灵活性将适应未来网络应用更多的需求。用更多的需求。用更多的需求。用更多的需求。2.1 HTML2.1 HTML简介简介简介简介 1.

7、1.标记标记标记标记 HTML HTML文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（tagtag）能）能）能）能产生所需的各种效果。格式为：产生所需的各种效果。格式为：产生所需的各种效果。格式为：产生所需的各种效果。格式为：受标记影响的内容受标记影响的内容受标记影响的内容受标记影响的内容/例如，标题标记例如，标题标记例如，标题标记例如，标题标记表示为：表示为：表示为：表示为：我的第一个网页我的第一个网页我的第一个网页我的第一个网页 2.2.标记的属性标记的属性标记的属性标记的属性 标记只是规定这

8、是什么信息，或是文本，或是图片，但标记只是规定这是什么信息，或是文本，或是图片，但标记只是规定这是什么信息，或是文本，或是图片，但标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属怎样显示或控制这些信息，就需要在标记后面加上相关的属怎样显示或控制这些信息，就需要在标记后面加上相关的属怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：性来表示，每个标记有一系列的属性。格式为：性来表示，每个标记有一系列的属性。格式为：性来表示，每个标记有一系列的属性。格式为：2 受受受受影响的内容影响的内容影响的内容影响

9、的内容/例如，字体标记例如，字体标记例如，字体标记例如，字体标记有属性有属性有属性有属性sizesize和和和和colorcolor等。等。等。等。属性示例属性示例属性示例属性示例 2.2 HTML2.2 HTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 2.2.1 2.2.1 标记及其属性标记及其属性标记及其属性标记及其属性 HTMLHTML文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，HTMLHTML文档文档文档文档的基本结构为：的基本结构为：的基本结构为：的基本结构为：网页的标题网页的标题网页的标题网页的标

10、题 网页的内容网页的内容网页的内容网页的内容 【例【例【例【例2-12-1】2.2 HTML2.2 HTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 2.2.2 HTML2.2.2 HTML的基本结构的基本结构的基本结构的基本结构 用最简单的用最简单的用最简单的用最简单的“记事本记事本记事本记事本”来编辑网页。来编辑网页。来编辑网页。来编辑网页。打开记事本。单击打开记事本。单击打开记事本。单击打开记事本。单击WindowsWindows的的的的“开始开始开始开始”按钮，在按钮，在按钮，在按钮，在“程序程序程序程序”菜单中的菜单中的菜单中的菜单中的“附件附件附件附件”子菜单中单击

11、子菜单中单击子菜单中单击子菜单中单击“记事本记事本记事本记事本”。创建新文件，并按创建新文件，并按创建新文件，并按创建新文件，并按HTMLHTML语言规则编辑。在语言规则编辑。在语言规则编辑。在语言规则编辑。在“记事本记事本记事本记事本”窗口中输入窗口中输入窗口中输入窗口中输入HTMLHTML语言，输入的内容。语言，输入的内容。语言，输入的内容。语言，输入的内容。保存网页。打开保存网页。打开保存网页。打开保存网页。打开“记事本记事本记事本记事本”的的的的“文件文件文件文件”菜单，选择菜单，选择菜单，选择菜单，选择“保存保存保存保存”。此时将出现。此时将出现。此时将出现。此时将出现“另存为另存为

12、另存为另存为”对话框，在对话框，在对话框，在对话框，在“保存在保存在保存在保存在”下下下下拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径；在拉列表框中选择文件要存放的路径；在“文件名文件名文件名文件名”文本框输文本框输文本框输文本框输入以入以入以入以.html.html或或或或.htm.htm为后缀的文件名，如为后缀的文件名，如为后缀的文件名，如为后缀的文件名，如mypage1.htmlmypage1.html；在；在；在；在“保存类型保存类型保存类型保存类型”下拉列表框中选择下拉列表框中选择下拉列表框中选择下拉列表框中选择“文本文档文本文档

13、文本文档文本文档”。最后单击。最后单击。最后单击。最后单击“保存保存保存保存”按钮，将记事本中的内容保存在磁盘中。按钮，将记事本中的内容保存在磁盘中。按钮，将记事本中的内容保存在磁盘中。按钮，将记事本中的内容保存在磁盘中。如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，

14、可以把这个文件设为默认文档，文件名为文档，文件名为文档，文件名为文档，文件名为index.htmlindex.html或或或或index.htmindex.htm。2.3 2.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程 2.3.1 2.3.1 编辑和保存网页编辑和保存网页编辑和保存网页编辑和保存网页 通过编辑可以得到一个通过编辑可以得到一个通过编辑可以得到一个通过编辑可以得到一个.html.html文件，要想使这个文档显文件，要想使这个文档显文件，要想使这个文档显文件，要想使这个文档显示出网页的样子，就要使用浏览器进行预览。有两种方法示出网页的样子，就要使用浏

15、览器进行预览。有两种方法示出网页的样子，就要使用浏览器进行预览。有两种方法示出网页的样子，就要使用浏览器进行预览。有两种方法可以打开可以打开可以打开可以打开.html.html网页文件。网页文件。网页文件。网页文件。1.1.用浏览器打开用浏览器打开用浏览器打开用浏览器打开 网页在浏览后会有不满意的地方，此时可重新在网页在浏览后会有不满意的地方，此时可重新在网页在浏览后会有不满意的地方，此时可重新在网页在浏览后会有不满意的地方，此时可重新在“记记记记事本事本事本事本”中打开该中打开该中打开该中打开该.html.html文件修改；或者在浏览器中直接打开文件修改；或者在浏览器中直接打开文件修改；或者

16、在浏览器中直接打开文件修改；或者在浏览器中直接打开源文件（在源文件（在源文件（在源文件（在IEIE中，从中，从中，从中，从“查看查看查看查看”菜单中的菜单中的菜单中的菜单中的“源文件源文件源文件源文件”中打开）中打开）中打开）中打开）。修改后，单击。修改后，单击。修改后，单击。修改后，单击“文件文件文件文件”菜单中的菜单中的菜单中的菜单中的“保存保存保存保存”命令。如果浏命令。如果浏命令。如果浏命令。如果浏览器没有关闭，要在浏览器中看到修改后的效果，不必重览器没有关闭，要在浏览器中看到修改后的效果，不必重览器没有关闭，要在浏览器中看到修改后的效果，不必重览器没有关闭，要在浏览器中看到修改后的效

17、果，不必重新打开该文件，直接单击浏览器工具栏上的新打开该文件，直接单击浏览器工具栏上的新打开该文件，直接单击浏览器工具栏上的新打开该文件，直接单击浏览器工具栏上的“刷新刷新刷新刷新”按钮。按钮。按钮。按钮。2.2.在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器”或或或或“我的电脑我的电脑我的电脑我的电脑”中打开中打开中打开中打开 在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器”或或或或“我的电脑我的电脑我的电脑我的电脑”中双击要打中双击要打中双击要打中双击要打开的开的开的开的.html.html文件，这时将直接在默认的浏览器中

18、打开该文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该.html.html文件。文件。文件。文件。2.3 2.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程 2.3.2 2.3.2 预览网页预览网页预览网页预览网页 注释标记的格式为：注释标记的格式为：注释标记的格式为：注释标记的格式为：!-注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一

19、行上。记可以不在一行上。记可以不在一行上。记可以不在一行上。2.4.2 2.4.2 强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记、.要用要用要用要用HTMLHTML的标记来强制换行、分段。的标记来强制换行、分段。的标记来强制换行、分段。的标记来强制换行、分段。放在一行的放在一行的放在一行的放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又末尾，可以使后面的文字、图片、表格等显示于下一行，而又末尾，可以使后面的文字、图片、表格等显示于下一行，而又末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换

20、行标记不会在行与行之间留下空行，即强制文本换行。强制换行标记不会在行与行之间留下空行，即强制文本换行。强制换行标记不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：的格式为：的格式为：的格式为：文字文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行

21、数字等尤其有用。其格式为：文字文字 【例【例2-2】2.4 2.4 段落标记段落标记段落标记段落标记2.4.1 2.4.1 注释标记注释标记注释标记注释标记 段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可以使两段之间多一空行，相当于两个以使两段之间多一空行，相当于两个以使两段之间多一空行，相当于两个以使两段

22、之间多一空行，相当于两个标记。段标记。段标记。段标记。段落标记的格式为：落标记的格式为：落标记的格式为：落标记的格式为：文字文字文字文字 一个段落标记一个段落标记一个段落标记一个段落标记可以看作是两个可以看作是两个可以看作是两个可以看作是两个标记，即标记，即标记，即标记，即。其中属性其中属性其中属性其中属性alignalign用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：leftleft（左对齐）、（左对齐）、（左对齐）、（左对齐）、centercenter（居中）和（居中）和（居中）和（居中）和

23、rightright（右对齐）。缺（右对齐）。缺（右对齐）。缺（右对齐）。缺省时默认为省时默认为省时默认为省时默认为leftleft。格式中的格式中的格式中的格式中的“|”“|”表示表示表示表示“或者或者或者或者”，即多中选一。，即多中选一。，即多中选一。，即多中选一。【例例例例2-32-3】2.4 2.4 段落标记段落标记段落标记段落标记2.4.3 2.4.3 段落标记段落标记段落标记段落标记.设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，

24、常使用设置对齐方式时，常使用设置对齐方式时，常使用设置对齐方式时，常使用标记。定位标记标记。定位标记标记。定位标记标记。定位标记的格式为：的格式为：的格式为：的格式为：文本、图像或表文本、图像或表文本、图像或表文本、图像或表格格格格 其中属性其中属性其中属性其中属性alignalign用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网页上的对齐方式：页上的对齐方式：页上的对齐方式：页上的对齐方式：leftleft、centercenter和和和和rightright。缺省时默认为。缺省时默认为。缺省时默认为。

25、缺省时默认为leftleft。【例【例【例【例2-42-4】2.4 2.4 段落标记段落标记段落标记段落标记2.4.4 2.4.4 定位标记定位标记定位标记定位标记 在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到HTMLHTML文档中文档中文档中文档中的的的的标记时，会在此处换行，并加入一条水

26、平线段。线标记时，会在此处换行，并加入一条水平线段。线标记时，会在此处换行，并加入一条水平线段。线标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决定。段的样式由标记的参数决定。段的样式由标记的参数决定。段的样式由标记的参数决定。水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：hr align=left|center|right size=noshade sizesize设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。width width设定线段长度

27、，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。colorcolor设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文

28、单词或以“#”“#”引导的一个十六进引导的一个十六进引导的一个十六进引导的一个十六进制数代码来表示。制数代码来表示。制数代码来表示。制数代码来表示。【例【例【例【例2-52-5】2.4 2.4 段落标记段落标记段落标记段落标记2.4.5 2.4.5 水平线标记水平线标记水平线标记水平线标记 在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以的效果来表示。网页中的信息可以分为主要点、次要点，可以

29、的效果来表示。网页中的信息可以分为主要点、次要点，可以的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的通过设置不同大小的标题，为文章增加条理。标题文字标记的通过设置不同大小的标题，为文章增加条理。标题文字标记的通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为：格式为：格式为：格式为：标题文字标题文字标题文字标题文字#用来指定标题文字的大小，用来指定标题文字的大小，用来指定标题文字的大小，用来指定标题文字的大小，#取取取取1 16 6的整数值，取的整数值，取的整数值，取的整数值，取1 1时时时时文字最大，文字最大，文字最大，

30、文字最大，6 6时文字最小。时文字最小。时文字最小。时文字最小。属性属性属性属性alignalign设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：leftleft、centercenter或或或或rightright。缺省时默认为。缺省时默认为。缺省时默认为。缺省时默认为leftleft。标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。法使用不同大小的字体。法使用不同大小的字体。法使用不同大小的字体。与用与用与用与用定义

31、的网页标题不同，标题格式定义的网页标题不同，标题格式定义的网页标题不同，标题格式定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。【例【例【例【例2-62-6】2.5 2.5 文字标记文字标记文字标记文字标记 2.5.1 2.5.1 标题文字标记标题文字标记标题文字标记标题文字标记 在网页中为了增强页面的层次，其中的文字可以用不同在网页中为了增强页面的层次，其中的文字可以用不同在网页中为了增强页面的层次，其中的文字可以用不同在

32、网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用标记设置字号标记设置字号标记设置字号标记设置字号（被被被被W3CW3C列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用CSSCSS来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：font size=被被被被设置的文字设置的文字设置的文字设置的文字 标记可设定

33、文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。size size用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取取取1 1时最小，取时最小，取时最小，取时最小，取7 7时最大。时最大。时最大。时最大。face face用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体_GB2312_GB2312、隶书、隶书、隶

34、书、隶书、Times New RomanTimes New Roman等。等。等。等。color color用来设置文字色彩。用来设置文字色彩。用来设置文字色彩。用来设置文字色彩。【例【例【例【例2-72-7】【例【例2-8】【例【例2-9】【例【例2-10】2.5 2.5 文字标记文字标记文字标记文字标记 2.5.2 2.5.2 字体标记字体标记字体标记字体标记./font.超链接（超链接（超链接（超链接（HyperlinkHyperlink）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接可以看作是一个可以看作是一个可以

35、看作是一个可以看作是一个“热点热点热点热点”，它可以从当前网页定义的位置跳，它可以从当前网页定义的位置跳，它可以从当前网页定义的位置跳，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、转到其他位置，包括当前页的某个位置、转到其他位置，包括当前页的某个位置、转到其他位置，包括当前页的某个位置、InternetInternet或本地或本地或本地或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览网页是超链接最普

36、遍的一种应用，通过超链接体文件。浏览网页是超链接最普遍的一种应用，通过超链接体文件。浏览网页是超链接最普遍的一种应用，通过超链接体文件。浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子还可以获得不同形态的服务，如文件传输、资料查询、电子还可以获得不同形态的服务，如文件传输、资料查询、电子还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。邮件、远程访问等。邮件、远程访问等。邮件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一当网页包含超链接时，网页中的外观形式为彩色（一当网页包含超链接时，网页中的外观形式为彩色（一当

37、网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记时，将变成手形。超文本链接使用锚点标记时，将变成手形。超文本链接使用锚点标记时，将变成手形。超

38、文本链接使用锚点标记来定义。来定义。来定义。来定义。2.6 2.6 超链接超链接超链接超链接 锚点（锚点（锚点（锚点（anchoranchor）标记由）标记由）标记由）标记由定义，它在网页上建立超定义，它在网页上建立超定义，它在网页上建立超定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一文本链接。通过单击一个词、句或图片，可从此处转到另一文本链接。通过单击一个词、句或图片，可从此处转到另一文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址个链接资源（目标资源），这个目标资源有惟一的地址个链接资源（目标资源），这个目标资

39、源有惟一的地址个链接资源（目标资源），这个目标资源有惟一的地址（URLURL）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。标记的格式为：标记的格式为：标记的格式为：标记的格式为：a href=URL target=热点热点热点热点 href href属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个URLURL，是目标，是目标，是目标，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超资源的有效地

40、址。如果要创建一个不链接到其他位置的空超资源的有效地址。如果要创建一个不链接到其他位置的空超资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用链接，可用链接，可用链接，可用“#”“#”代替代替代替代替URLURL，即，即，即，即 热点热点热点热点 。target target属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。可选值为：可选值为：可选值为：可选值为：_blank_blank，_parent_parent，_self_self，_top_top。

41、2.6 2.6 超链接超链接超链接超链接2.6.1 2.6.1 锚点标记锚点标记锚点标记锚点标记.1.1.链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：a href=.html 热点文本热点文本热点文本热点文本 【例【例【例【例2-112-11】2.2.链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件 链接到下一级目录中网页文件的

42、格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：a href=.html 热点文本热点文本热点文本热点文本 3.3.链接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：a href=./.html 热点文本热点文本热点文本热点文本 其中其中其中其中“./“./表示退到上一级目录中。表示退到上一级目录中。表示退到上一级目录中。

43、表示退到上一级目录中。4.4.链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：a href=./.html 热点文本热点文本热点文本热点文本 2.6 2.6 超链接超链接超链接超链接2.6.2 2.6.2 指向其他页面的链接指向其他页面的链接指向其他页面的链接指向其他页面的链接 要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，

44、需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：a href=#热点文本热点文本热点文本热点文本 书签就是用书签就是用书签就是用书签就是用标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：a name=目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串 【例【例【例

45、【例2-122-12】如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：a href=URL#热点文本热点文本热点文本热点文本 要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：a name=文字串文字串文字串文字串 如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：a href=热点文本热点

46、文本热点文本热点文本 2.6 2.6 超链接超链接超链接超链接2.6.3 2.6.3 指向本页中的链接指向本页中的链接指向本页中的链接指向本页中的链接 如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是HTMLHTML文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，其格式为：文件，其格式为：文件，其格式为：文件，其格式为：a href=热点文本热点文本热点文本热点文本 【例【例【例【例2-132-13】2.6.5 2.6.5 指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接 单击指向电子

47、邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，如如如如FoxMailFoxMail、Outlook ExpressOutlook Express，并自动填写邮件地址。指向，并自动填写邮件地址。指向，并自动填写邮件地址。指向，并自动填写邮件地址。指向电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为：热点文本热点文本 例如，例如，例如，例如，E-mailE-mail地址是，建立如下链接：地址是，建立如下链接：地址是，建立

48、如下链接：地址是，建立如下链接：免费电话免费电话免费电话免费电话:80012345678:80012345678 信箱信箱信箱信箱:a href=mailto:2.6 2.6 超链接超链接超链接超链接2.6.4 2.6.4 指向下载文件的链接指向下载文件的链接指向下载文件的链接指向下载文件的链接 1.1.设置背景色设置背景色设置背景色设置背景色 格式为：格式为：格式为：格式为：body bgcolor=“色彩值色彩值色彩值色彩值”可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。2.2.用图片作为背景

49、用图片作为背景用图片作为背景用图片作为背景 使用使用使用使用标记的标记的标记的标记的backgroundbackground属性，可为网页铺上背属性，可为网页铺上背属性，可为网页铺上背属性，可为网页铺上背景图片。格式为：景图片。格式为：景图片。格式为：景图片。格式为：body background=background background取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的

50、路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为可为可为可为GIFGIF格式或格式或格式或格式或JPEGJPEG格式的文件。格式的文件。格式的文件。格式的文件。在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。铺满整个网页。铺满整个网页。铺满整个网页。【例【例【例【例2-142-14】2.7 2.7 图片图片图片图片2.7.1 2.7.1 网页的背景网页的背景网页的背景网页的