第4讲 超链接、多媒体及表格
• 多媒体标记
• 框架结构
• 超链接标记
• 表格标记
学习目标
•掌握各种常用多媒体标记的使用
•理解框架的作用
•掌握框架标记的使用
•理解不支持框架标记的应用
•掌握浮动框架的使用
•掌握使用框架作为超链接目标的设置
•掌握创建表格以及格式化表格
•掌握使用嵌套表格布局网页
•掌握各种超链接的设置
多媒体标记
•为增强网页的功能以及动感，现在的网页一般都
会加入诸如声音、动画、视频等多媒体内容。
•常用多媒体标记：
类类 型型 描描 述述
设置文字在页面中的滚动效果设置文字在页面中的滚动效果
在页面中嵌入在页面中嵌入33、视频等多媒体内容、视频等多媒体内容
在页面中插入在页面中插入 小程序小程序
设置页面的背景音乐设置页面的背景音乐
在页面中嵌入动画在页面中嵌入动画
1) 滚动文字设置
•基本语法
• < >滚动文字<>
• 语法说明：处在< >和<>之间的文字将以
一定的速度从右向左移动，当将滚动文字换成
图片时，将获得图片的滚动效果。
•常用属性:
属属 性性 属性值属性值 描描 述述
设置文字向上滚动设置文字向上滚动
设置文字向下滚动设置文字向下滚动
设置文字向左滚动设置文字向左滚动((默认方向）默认方向）
设置文字向右滚动设置文字向右滚动
设置文字循环往复滚动（默认状态）设置文字循环往复滚动（默认状态）
设置文字只进行一次滚动设置文字只进行一次滚动
设置文字交替进行滚动设置文字交替进行滚动
某个数值某个数值nn 设置文字滚动速度，值越大越快设置文字滚动速度，值越大越快
某个数值某个数值nn 设置文字在每一次滚动后，延迟一段时间后再进设置文字在每一次滚动后，延迟一段时间后再进
行下一次滚动，单位为毫秒，值越小越快行下一次滚动，单位为毫秒，值越小越快
某个数值某个数值nn 设置文字滚动的循环次数设置文字滚动的循环次数,,取值为取值为-1-1表示循环不断表示循环不断
某个数值某个数值nn 设置文字滚动的区域设置文字滚动的区域
某种颜色某种颜色 设置文字滚动区域的背景颜色设置文字滚动区域的背景颜色
1) 滚动文字设置
• 默认情况下，滚动文字从右向左滚动示例：
• 使用<>标记的属性可以修改滚动字幕的滚动方向。
文字从下往上循环滚动示例：
• 默认情况下，滚动字幕循环地以一个方向向另外一
个方向的滚动，使用<>标记的属性可以修改滚动字
幕的滚动方式。文字从右往左循环往反交替滚动示
例：
• 字幕的滚动速度通过一个常量来表示，常量值越大，
速度越快。在每次滚动结束后可以延迟一定的时间
进行下一次滚动。滚动速度和滚动延迟特性可以分
别通过属性和进行设置示例：
1) 滚动文字设置
•默认情况下，字幕将在一个与浏览器窗口等宽
的白色背景颜色的区域中进行滚动，该区域的
高度跟滚动方式有关。如果上下之间的滚动，
默认高度是200个像素；如果左右滚动，高度
则大致是滚动对象的方向。通过标记的属性和
可以改变滚动区域的大小，修改滚动区域的背
景颜色使用属性。设置字幕滚动区域与背景颜
色示例：
•默认情况下，字幕滚动区域与周围对象的间距
为0，使用标记的和属性可以分别设置滚动区
域与周围对象的水平间距和垂直间距。示例：
滚动文字标记示例
code/
2) 嵌入多媒体内容
•在网页中可以使用<>标记嵌入3、电影等
多媒体内容
•基本语法
• < “” ><>
•标记常用属性：
属属 性性 属性值属性值 描描 述述
设置嵌入式对象在文档中相对周围内容的设置嵌入式对象在文档中相对周围内容的
位置位置
某个数值某个数值nn 以像素为单位定义嵌入式对象的高度以像素为单位定义嵌入式对象的高度
某个数值某个数值nn 以像素为单位定义嵌入式对象的宽度以像素为单位定义嵌入式对象的宽度
指定嵌入式对象的文件路径指定嵌入式对象的文件路径
设置嵌入式对象何时打开（即是网页被打设置嵌入式对象何时打开（即是网页被打
开时打开还是在播放按钮被点击后才打开开时打开还是在播放按钮被点击后才打开
设置嵌入式对象的播放是否循环不断设置嵌入式对象的播放是否循环不断
…… 标识对象，以便于其他对象对它的引用标识对象，以便于其他对象对它的引用
<><> 定义附加参数定义附加参数
设置嵌入对象的控制框的可视性设置嵌入对象的控制框的可视性
3) 设置背景音乐
•访问者访问页面时自动播放背景音乐
•基本语法
• < “” >
•标记常用属性：
属属 性性 属性值属性值 描描 述述
背景音乐文件路径背景音乐文件路径
取具体的某个数值以循环播放一定的次数取具体的某个数值以循环播放一定的次数
后停止播放，或取值为时循环不断的播放，后停止播放，或取值为时循环不断的播放，
默认情况下，只播放一次默认情况下，只播放一次
多媒体标记综合示例
code/
• 在网页中嵌入动画，通常会使用<>标记，
因为该标记允许开发者为插入到页面中的
对象指定数据和参数
• 基本语法：
• < "“ “" “" “">
• < "" “">
• < "" "">
• < “" "" "" "" “" “"><>
• <>
4)嵌入动画
嵌入动画示例
code/
5）嵌入
• 是用 开发的一种小程序，不能独立运行，
必须嵌入到文件，并通过支持的浏览器
运行。
•在网页中嵌入的是的类文件
•嵌入 时，必须指定显示的区域大小
• 基本语法
• < “” “…” “…” >
• <>
• 语法解释
• 表示所嵌入的类文件，、属性
用于设置文件显示区域
• 框架的作用，就是把浏览器窗口划分成
若干个区域，每个区域可以分别显示不
同的网页。
• 注意：使用框架结构时，文档中不能出
现<>标记对，此时<>需要由<>代替
框架结构
• 框架集标记<>：主要是定义浏览
器窗口的分割方式、各分割窗口
（框架）的大小以及格式化框架边
框
• 框架标记<>：定义各分割窗口中
显示的内容，并能对各分割窗口进
行格式化
1） 框架结构组成标记
2）框架集标记<>
属属 性性 属性值属性值 描描 述述
…… 以颜色值或颜色英文名设置所有框架边框颜色以颜色值或颜色英文名设置所有框架边框颜色
00 所有框架都不显示边框所有框架都不显示边框
11 所有框架都显示边框，默认为所有框架都显示边框，默认为11
nn 设置框架之间的间距设置框架之间的间距
n12…n12… 使窗口按行的方式分割使窗口按行的方式分割((上下分割上下分割))
n12…n12… 使窗口按列的方式分割使窗口按列的方式分割((左右分割左右分割))
表5-1 <>常用属性
框架分割窗口方式
• 左右（水平）分割
• 上下（垂直）分割
• 嵌套分割：浏览器窗口既存在左右分割，
又存在上下分割
•
左右分割
•基本语法
• < “,……”>
• <>
• <>
• …….
• <>
•语法解释
• 属性决定了窗口的分割方式为左右分割；
“”定义各个框架的大小，单位可以是像
素，也可以是百分比；的个数决定了<>
标记的个数，即窗口的个数
< "20%,*">
<>
<>
<>
左右分割示例
上下分割
•基本语法
• < “,……”>
• <>
• <>
• …….
• <>
•语法解释
• 属性决定了窗口的分割方式为上下分割；
“”定义各个框架的大小，单位可以是像
素，也可以是百分比；的个数决定了<>标
记的个数，即窗口的个数
< "20%,*">
<>
<>
<>
上下分割示例
嵌套分割
•基本语法
• < “,……”>
• <>
• < “,…”>
• <>
• <>
• ……
• <>
• <>
• …….
•<>
< "20%,55%,*">
< "100,*">
<>
<>
<>
<>
<>
<>
嵌套分割示例
<>对框架边框的格式化
• <>标记对框架边框的格式化通过设置
””、””和””等属性来实现
3) 框架标记<>
• 基本语法
• < “,……”>
• < “” “”>
• < “” “”>
• …….
• <>
• 语法解释
• 属性用于设置在框架窗口中显示的内容
来自的文件；属性用于标记框架名称，以
便于其他对象对它的引用，如作为链接的
一个目标窗口
•
< "20%,*">
< “” “”>
< “” “”>
<>
<>标记基本设置示例
code/
code/
属性属性 属性值属性值 描描 述述
设置在框架中显示的文件的路径设置在框架中显示的文件的路径
…… 设置设置 名称，以便于其它对象对它的引用名称，以便于其它对象对它的引用
00 不显示边框不显示边框
11 显示边框，默认为显示边框，默认为11
显示滚动条显示滚动条
不显示滚动条不显示滚动条
根据页面的长度自动判断是否显示滚动条，默认自动根据页面的长度自动判断是否显示滚动条，默认自动
设置框架能否改变大小设置框架能否改变大小
nn 以像素为单位，设置框架边框与页面内容的左右页边以像素为单位，设置框架边框与页面内容的左右页边
距距
nn 以像素为单位，设置框架边框与页面内容的上下页边以像素为单位，设置框架边框与页面内容的上下页边
距距
…… 以颜色值或颜色英文名设置框架边框颜色以颜色值或颜色英文名设置框架边框颜色
•<>常用属性
框架综合示例
code/
4)不支持框架标记<>
• 一些早期版本的浏览器不支持框架。制作
人员无法改变这一现象，所能做的只是显
示该浏览器不支持框架技术，有些内容无
法看到。这一任务可由<>标记来完成，当
浏览器不能加载框架集文件时，会检索到
<>标记，并显示标记中的内容
•
•基本语法
• < >
• <>
• <>
• …….
• <>
• <>
• ……
• <>
• <>
• <>
放在放在<><>标记对之间的部分就是标记对之间的部分就是
在不支持框架的浏览器中显示的内在不支持框架的浏览器中显示的内
容容
5) 浮动框架<>
• 浮动框架是一种特殊的框架页面，其作为文档的
一部分，就象图像一样出现在文档中。浮动框架
允许将一个文档插入到另一个文档内部的某个区
域。
• 基本语法
• < “” “” “” “” “”>
• 常用属性:
属属 性性 属性值属性值 描描 述述
设置浮动框架中显示页面源文件的路径设置浮动框架中显示页面源文件的路径
nn 设置浮动框的宽度设置浮动框的宽度
nn 设置浮动框的高度设置浮动框的高度
…… 设置浮动框的名称，以便于其他对象引用它设置浮动框的名称，以便于其他对象引用它
…… 设置浮动框相对于浏览器窗口的对齐方式设置浮动框相对于浏览器窗口的对齐方式
…… 设置浮动框架边框显示状态，与普通框架同设置浮动框架边框显示状态，与普通框架同
…… 设置浮动框架滚动条显示属性，与普通框架同设置浮动框架滚动条显示属性，与普通框架同
设置浮动框架尺寸调整属性，与普通框架同设置浮动框架尺寸调整属性，与普通框架同
…… 设置浮动框架边框颜色，与普通框架同设置浮动框架边框颜色，与普通框架同
nn 浮动框架边框与页内容上下间距，与普通框架同浮动框架边框与页内容上下间距，与普通框架同
nn 浮动框架边框与页内容左右间距，与普通框架同浮动框架边框与页内容左右间距，与普通框架同
浮动框架示例
code/
• 框架的一个重要目的是在不同的框架中
显示不同的页面，通过链接目标窗口的
设置可以很容易实现这一目的
• 具体实现方法：将框架的框架名属性值
作为超链接的的属性值
6)框架与链接
< "20%,*">< "20%,*">
< "" ""> < "" "">
< "" ""> < "" "">
<><>
超链接代码如下超链接代码如下::
<><>
<p><a " """> <><><p><a " """> <><>
<p><a "" ""> <><><p><a "" ""> <><>
<p><a "" ""> <><><p><a "" ""> <><>
<p><a "" ""> <><><p><a "" ""> <><>
<><>
普通框架与链接示例
code/
浮动框架与链接示例
code/
• 浏览者通过单击文本或图片对象，可以从
一个页面跳到另一个页面，或从页面的一
个位置跳到另一个位置，实现这样的功能
的对象称之为超链接
• 创建超链接的条件：必须同时存在两个端
点。一个是源端点；另一个是目标端点
• 源端点：指网页中的提供链接单击的对象，
如链接文本或链接图像
• 目标端点：指链接跳过去的页面或位置，
如某网页、书签等
超链接标记
1）超链接标记及常用属性
属 性 描 述
指定链接路径（必设属性）
定义书签名称
指定打开链接目标文件的窗口
设置链接提示文字
• 创建超链接使用的标记为<a>
• 超链接标记常用属性：
属性属性 值值 描描 述述
在新窗口中打开链接文档在新窗口中打开链接文档
在同一个帧或窗口中打开链接在同一个帧或窗口中打开链接
文档（默认属性）文档（默认属性）
在上一级窗口中打开，一般在在上一级窗口中打开，一般在
框架页中经常使用框架页中经常使用
在浏览器的整个窗口中打开，在浏览器的整个窗口中打开，
忽略任何框架忽略任何框架
框架窗口名框架窗口名 在指定的框架窗口中打开链接在指定的框架窗口中打开链接
文档文档
嵌入 示例
code/
code/
code/
链接目标窗口示例
code/
2）链接路径设置
• 绝对路径: 指文件的完整路径
• 文件相对路径：指相对于当前文件的路径
• 文件相对路径有以下几种：
①两文件在同一目录下
②链接文件在当前文件的下一
级目录
③链接文件在当前文件的上一
级目录
相对链接路径设置：相对链接路径设置：
同一目录，只需输同一目录，只需输
入要链接文档的名入要链接文档的名
称称
下一级目录，下一级目录， 需在需在
链接文件名前添加链接文件名前添加
““下一级目录名下一级目录名
/”/”
上一级目录，需在上一级目录，需在
链接文件名前添加链接文件名前添加
“”“”
链接路径示例：
• 根据超链接的目标端点来分，超链接可分为：
• 内部链接
• 外部链接
• 书签链接
• 脚本链接
• 文件下载链接
• 根据超链接的源端点来分，超链接可分为：
• 文本链接
• 图像链接
• 图像映射
3）超链接类型
内部链接
•内部链接是指在同一个网站内部，不同
网页之间的链接关系
•基本语法
• <a “”>链接文字/图片<>
•语法解释
• 通过“”属性指定目标端点； “”为
要链接文件的路径，一般使用相对路径；
提供给鼠标单击的内容，即源端点，既
可以使用“文字”，也可以使用“图片
”
外部链接
•外部链接是指跳转到当前网站外部，和
其他网站中的页面或其他元素之间的链
接关系。
•基本语法
• <a “”>链接文字/图片<>
•语法解释
• 通过“”属性指定目标端点； “”为
要链接文件的路径，一般情况下，该路
径需要使用绝对路径；提供给鼠标单击
的内容，即源端点，既可以使用“文字
”，也可以使用“图片”
<a “:邮址1？邮址2 邮址3”>链接文字<>
参 数 描 述
电子邮件主题
抄送收件人
暗送收件人
表4-1 邮件参数
启动邮件发送系统设置语法
内部和外部超链接示例
code/
书签链接
• 书签链接：指目标端点为网页中的
某个设置了称为书签标记的位置的
链接
• 创建书签链接步骤：
• 创建书签
• 为书签制作链接
•
①建立书签
• 基本语法
• <a “书签名”>[文字/图片]<>
• 语法解释
• [文字/图片]中的“[]”表示文
字或图片可有可无，书签将在光标
处建立一个名为“”属性值所规定
的书签。
书签名设置规范：
1）书签名不支持中文，只
能使用字母和数字
2）书签名区分英文字母大
小写
3）书签名间不能含有空格，
也不能含有特殊字符
②建立书签链接
• 基本语法
• 链接到同一页面中的书签：
• <a “#书签名”>链接文字<>
• 链接到其他页面中的书签:
• <a “书签名”>链接文字<>
• 语法解释
• “书签名”是已定义的书签名，“”是
要跳转到的页面路径。
• 书签链接示例
脚本链接
•在链接语句中，可以通过脚本来实现语言
完成不了的功能。
•基本语法
• <a “:…”>链接内容<>
•语法解释
• 在:后面编写的就是具体的脚本
文件下载链接
• 要创建文件下载，只要在链接地址
处输入文件路径即可，当用户单击
链接后，浏览器会自动判断文件类
型，以做出不同情况的处理，如直
接打开，或弹出下载对话框供下载
• 可用于下载的文件类型有、、、、
等
•
• 基本语法
• <a “”>链接文字<>
• 文件下载示例
<>
<p><a ""><><>
<p><a "2"><><>
<p><a ""><><>
<>
文本链接
• 文本链接是指源端点为文本文字的超
链接
• 基本语法
• <a “”>链接文字<>
图像链接
• 图像链接是指源端点为图像文件的超
链接
• 基本语法
• <a “”>< “” …><>
• 语法解释
• “”为要跳转到的文件路径，“”为图
像文件路径，默认情况下，图像链接
会显示蓝色边框线，如果不想显示边
框，应设置0
图像链接示例
<>
<a "" "">
< "" "0">
<>
<>
code/
图像映射
• 图像热区：一幅图像被切分成不同的区
域，每一个区域可以链接到不同的地址，
这些区域称为图像的热区。
• 图像映射：指源端点为图像热区的超链
接
•基本语法
• < “” >
• < >
• < “” “x1122” “…”>
• < “” “” “…”>
• < “” “x1122334455,…” “…”>
•<>
激活映激活映
射射
•语法解释
• 标记中的属性主要用于激活映射
之用；<>标记用于创建热区，
“”属性设置热区形状，如果为
矩形热区， “”属性值x1122分
别为矩形左上顶点和右下顶点的
坐标；如果为圆形热区， “”属
性值, r分别为圆心坐标和半径长
度；如果为多边形热区， “”属
性值x1122,….分别为多边形各个
顶点的坐标
表格标记
• 使用表格标记，可在网页中创建表格。表格
在网页中除了作为一个显示对象以外，还有
一个重要的作用就是用于排版页面内容
• 构成表格的主要标记
标标 记记 描描 述述
<><> 在文档中声明一个表格在文档中声明一个表格
<><> 在表格中创建一行在表格中创建一行
<><> 在一行中创建一个单元格，单元格内容居左对齐在一行中创建一个单元格，单元格内容居左对齐
<><> 在一行中创建一个标题单元格，单元格内容加粗在一行中创建一个标题单元格，单元格内容加粗
且默认居中对齐且默认居中对齐
<><> 为表格创建题注为表格创建题注
• 基本语法
• <>
• <>
• <>(<>)…<>(<>)
• ……
• <>
• <>
• <>(<>)…<>(<>)
• ……
• <>
• ……
• <>
表格标记示例
1) <>标记
• <>标记常用属性
属属 性性 描描 述述
设置表格边框宽度，单位为像素（默认不显示边框）设置表格边框宽度，单位为像素（默认不显示边框）
，设置，设置00将取消边框将取消边框
设置表格宽度，单位为像素或浏览器窗口的百分比设置表格宽度，单位为像素或浏览器窗口的百分比
设置表格高度，单位为像素或浏览器窗口的百分比设置表格高度，单位为像素或浏览器窗口的百分比
、、、、 设置表格边框颜色设置表格边框颜色//亮边框颜色（左上边框颜色）亮边框颜色（左上边框颜色）//
暗边框颜色（右下边框颜色）暗边框颜色（右下边框颜色）
设置表格的背景颜色设置表格的背景颜色
设置表格的背景图像设置表格的背景图像
设置相邻单元格之间的间距设置相邻单元格之间的间距
设置单元格边框与内容的间距设置单元格边框与内容的间距
设置表格的水平对齐方式（默认左对齐）设置表格的水平对齐方式（默认左对齐）
标记属性示例
2) <>标记
• <>标记常用属性：
属属 性性 描描 述述
设置行中各单元格内容的水平对齐方式（默认设置行中各单元格内容的水平对齐方式（默认
左对齐）左对齐）
行中各单元格内容内容的垂直对齐方式（默认行中各单元格内容内容的垂直对齐方式（默认
居中对齐居中对齐
设置行的背景颜色设置行的背景颜色
设置行的背景图像设置行的背景图像
设置行的边框颜色设置行的边框颜色
设置行的亮边框颜色（右下边框颜色）设置行的亮边框颜色（右下边框颜色）
设置行的暗边框颜色（左下边框颜色）设置行的暗边框颜色（左下边框颜色）
标记属性示例
3) <>、<>标记
• <>、<>标记常用属性：
属属 性性 描描 述述
设置单元格内容的水平对齐方式（的默认左对齐，的默认设置单元格内容的水平对齐方式（的默认左对齐，的默认
居中对齐）居中对齐）
设置单元格内容的垂直对齐（默认居中对齐）设置单元格内容的垂直对齐（默认居中对齐）
设置单元格的背景颜色设置单元格的背景颜色
设置单元格的背景图像设置单元格的背景图像
设置单元格的边框颜色设置单元格的边框颜色
设置单元格的亮边框颜色（右下边框颜色）设置单元格的亮边框颜色（右下边框颜色）
设置单元格的暗边框颜色（左上边框颜色）设置单元格的暗边框颜色（左上边框颜色）
设置单元格的宽度，单位为像素或表格宽度的百分比设置单元格的宽度，单位为像素或表格宽度的百分比
设置单元格的高度设置单元格的高度
设置单元格的跨行操作设置单元格的跨行操作
设置单元格的跨列操作设置单元格的跨列操作
、标记属性示例
4)标记
• 标记用于设置表格题注
• 概括表格的内容
• 提供关于表格内容的一些信息
• 基本语法
• <>…<>
• 常用属性
属 性 描 述
设置水平对齐方式，取值：，默认取设置水平对齐方式，取值：，默认取
设置垂直对齐方式，取值：，默认取设置垂直对齐方式，取值：，默认取
• 在网页排版中，通常需要通过表格
的嵌套来完成
• 表格的嵌套是指在一个表格的单元
格中插入另一个表格
5）嵌套表格
表格嵌套设置示例
•在网页排版中使用嵌套表格的原因：
•一是利于简化表格制作：网页的排版有时
会很复杂，在外部需要有一个表格控制总
体布局，如果这时一些内部排版的细节也
通过总表格来实现，容易引起行高列宽等
的冲突，给表格制作带来困难
•二是提高浏览器响应速度：浏览器在解析
网页的时候，是将整个表格的结构下载完
毕之后才显示表格，如果不使用嵌套，表
格非常复杂，表格下载耗时相对长，浏览
者要等很长时间才能看到网页的内容
小 结
创建超链接必须具备的条件是同时存在源端
点和目标端点
在创始超链接时经常涉及的路径有两种：绝
对路径、文件相对路径
通常外部链接需要使用绝对路径，内部链接
一般使用文件相对路径
超链接必设的一个属性是
通过属性，可使用目标端点在不同的窗口打
开
根据源端点，超链接可分为文本超链接、图像超
链接和图像映射；根据目标端点，超链接则可分
为内部链接、外部链接、书签链接和文件下载链
接
创建书签链接的步骤有两步：一是创建书签；二
是为书签制作链接
在网页中嵌入时需要指定类文件，而且还要在<>
中定义显示区域的大小
表格的内容必须放置在<><>或<><>之间
在排版网页时通常需要嵌套表格，所谓表格的嵌
套，是指在一个表格的单元格中插入另一个表格
思考题
1. 创始超链接必须具备的条件是什么？
2. 外部和内部链接一般各需要使用什么路径？
3. 创建超链接时必设的一个属性是什么?
4. Target属性的默认属性值是什么?
5. 根据源端点和目标端点，超链接分别可分成哪些类
型?
6. 创建书签链接的步骤是什么？
7. 如何设置文件的下载？
8.如何让背景音乐循环不断播放?
9. 嵌入java applet时应如何设置<applet>?
10.在网页排版时，应如何嵌套表格?
谢 谢
四月-
2112:23:3412:231
2:23四月-21四月-
2112:23
12:2312:23:
34四月-21四
月-
2112:23:34
2021/4/18 12:23:34
