《Web技术基础》第3课 超连接、多媒体、表格

4.2 XHTML字符集与颜色——XHTML字符实体 • 最常用的字符实体 显示结果 < > & " ' 描述 空格 小于号 大于号 和号 引号 撇号 实体名称 &nbsp; &lt; &gt; &amp; &quot; &apos; （ IE 不支持） 实体编号 &#160; &#60; &#62; &#38; &#34; &#39;
<img src="boat.gif" alt="船">
7.1 XHTML图像——<img>标签
• 由于图像是独立文件存在的，如某个 XHTML文件包含十个图像，要正确显示这 个页面，需要加载11个文件，HTTP协议需 要11次请求才能完成，加载图片是需要时 间的，所以要合理地在文档内容中加入图 像，如果过度使用图像，用户在浏览该页 面时，会增加很多不必要的等待时间。 • Web使用的主要图像格式有：GIF、JPEG 和PNG。 • 例xhtml(img).html说明了图像标签的用法
4.1 <a>标签——href属性
• 文档相对路径是指包含当前文档所在的文件夹， 也就是以当前文档所在的文件夹为基础开始计算 路径。如当前网页所在位置为 F:\book_store\music，那么“a.html”就表示 “F:\book_store\music\a.html”页面文件， “../b.html”表示“F:\book_store\b.html” 页 面文件，其中“../”表示当前文件夹的上一级文 件夹。如果在站点根目录一个网页需连接或引用 站点根目录下images目录中的一个图像文件 a.gif，用文档相对路径表示就是： “images/a.gif”。
1. 源属性（src） • 要在页面上显示图像，必须使用源属性声 明图像的URL地址。格式如下：
<img src="url" />
• URL指图像文件的位置，浏览器将图像显示 在文档中图像标签出现的地方。
7.1 XHTML图像——<img>标签
2. 替换文本属性（alt） • 当浏览器不能显示图像时（如无法载入图 像或浏览器禁止图像显示），将在显示图 像的位置上显示替换文本属性定义的文本 。为页面上的每一个图像加上替换文本属 性有利于更好的显示信息。如：
第3课 超连接、多媒体、表格
知识回顾
• XHTML文档结构 • XHTML语法 • XHTML通用元素 • XHTML列表 • 建立结构化文档
前馈及作业总结
• 复制（0分）
–2组。闫宏利，张海龙，杨宁，高岩，洪启航， 何鹏博。 –李明昊、任佩玺、尚文旭、王常顺、裴影、荣 家莹、孙纳、张海宁。
• 格式不对。 • 没交作业。 • 2、3、4、5组一起交的。 • 内容没有放在相应块中。
创建指向书签的连接需要两个步骤： • 在需要的位置定义书签。
<a id="c12"></a>
• 在指定位置建立和书签的连接。
<a href="#c12">第12章</a> –在建立和书签连接时，href属性值书签名字前 需加“#”号。
• 书签经常被用在长文档中创建目录。
4.1 <a>标签——id和Name属性
4.3 叮叮书店首页超连接的使用
• 叮叮书店除了首页（index.html）外，还 需要建立书籍分类页面（category.html） 、特刊降价页面（specials.html）、联系 我们页面（contact.html）、关于我们页 面（about.html）、购物车（cart.html） 和显示书详细内容的更多细节页面（ details.html），这些页面通过首页导航菜 单的连接去访问。
4.1 <a>标签——href属性
• href属性定义了连接目标的文档路径。文档 路径一共有二种：绝对路径和相对路径， 其中相对路径又分为根相对路径和文档相 对路径。 • 如果要连接的文档在站点之外，必须使用 绝对路径。
4.1 <a>标签——href属性
• 绝对路径是包括通信协议名、服务器名、 路径及文件名的完全路径。如连接清华大 学信息科学技术学院首页，绝对路径是： “/doc info/index.jsp”。如果站点之外的文档在 本地计算机上，比如连接F盘book_store目 录下default.html文件，那么它的路径就是 ：“file:///F:/book_store/default.html” ，这种完整地描述文件位置的路径也是绝 对路径。
属性 alt src title height width 值 text URL text Pixels或% Pixels或% 描述 必需，图像的替换文本 必需，图像的URL 必需，当鼠标指针指向 图 像显示的图像标题文本 可选，图像的高度 可选，图像的宽度
7.1 XHTML图像——<img>标签
7.3 XHTML音频——使用音频
在XHTML中有两种方法使用音频。 • 连接音频文件 • 连接音频文件是将声音添加到网页的一种 简单而有效的方法，这种方法可以使浏览 者选择是否要收听该文件。
–未被访问的连接带有下划线而且是蓝色的； –已被访问的连接带有下划线而且是紫色的； –活动连接带有下划线而且是红色的。
4.1 <a>标签
• <aBiblioteka 标签常用属性属性 值 描述 href URL 连接目标URL name section_name 定义书签名称
4.1 <a>标签——href属性
• 通过使用href属性，可以创建指向另外一个 文档的连接。用法如下：
讲授内容
• 超连接
–<a>标签 –XHTML字符集与颜色
• 多媒体
–<img>标签 –XHTML音频 –XHTML动画 –XHTML视频
• XHTML表格
4.1 <a>标签
• a是锚（anchor）的缩写，XHTML使用 <a>标签实现信息节点与目标的超连接，连 接目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是图片、电子 邮件地址、文件或者应用程序。 • 在所有浏览器中，<a>标签通过外观与其他 元素相区别，超连接的默认外观是：
<a href="url">显示的文本或图像</a>
• <a>用来创建连接，href属性指定需要连接 文档的目标位置，开始标签和结束标签之 间的文本或图像被作为超连接来显示。 • 下面定义了指向清华大学的连接：
<a href="/">清 华大学</a>
7.1 XHTML图像——<map>标签和<area>标签
• <map>和<area>标签用于创建图像地图 ，图像地图指已被分为多个区域（图像的 一部分）的图像，这些区域称为热点，可 以创建多个热点，热点支持超文本连接。 • <map>和<area>标签属性较多，属性值 也不易记忆，一般通过Dreamweaver设 计视图完成。
前馈及作业总结
• 较好：8组。孙慧颖、于丽楠。 • 问题
–没交。 –没有提出问题。 –组有个别人提出没有问题。
• 格式
–第2小组《Web技术基础》课程前馈表。
前馈检查
• href属性值的目标位置使用的文档路径有哪 几种？ • 如果要连接当前站点内的文档，需要使用 什么路径？ • 为什么使用字符实体？ • <img>标签必须要使用什么属性？ • 如何设置跨多行/列的表格单元格？
<a id="label"></a>或<a name="label"></a>
• Label是书签的名字，在使用时区分大小写 。由于有些浏览器支持id，有些浏览器支持 name，为了兼容最好id和name属性同时 用。如：
<a id="label" name="label"></a>
4.1 <a>标签——id和Name属性
4.2 XHTML字符集与颜色——XHTML颜色名 • 有16种颜色名被W3C的XHTML标准所支持 。它们是：aqua、black、blue、 fuchsia、gray、green、lime、maroon 、navy、olive、purple、red、silver、 teal、white、yellow。 • 如果需要使用其他的颜色，需要使用十六 进制的颜色值。
4.2 XHTML字符集与颜色——XHTML字符实体 • ISO-8859-1大部分字符都有名称，通过名 称引用的字符称为字符实体。 • 字符实体有两种表示方式：实体名称和实 体编号，实体名称由和号（&）、名称及一 个分号（;）组成；实体编号由#、编号及 一个分号（;）组成。 • 一些字符在XHTML中拥有特殊的含义，比 如小于号（<）用于定义XHTML标签，如果 希望浏览器正确地显示这些字符，必须在 XHTML源码中插入字符实体。
4.2 XHTML字符集与颜色——XHTML字符实体 • 一些字符不容易通过键盘输入，必须在 XHTML源码中插入字符实体。其他一些常 用字符实体。
显示结果 ￠ £ ¥ § © ® × ÷ 描述 分 镑 日圆 节 版权 注册商标 乘号 除号 实体名称 &cent; &pound; &yen; &sect; &copy; &reg; &times; &divide; 实体编号 &#162; &#163; &#165; &#167; &#169; &#174; &#215; &#247;
4.3 叮叮书店首页超连接的使用
7.1 XHTML图像
• 在XHTML中显示图像的元素。 标签 <img> <map> <area> 描述 定义图像 定义图像地图 定义图像地图中的可单击区域
7.1 XHTML图像——<img>标签
• 在XHTML中，图像由<img>标签定义， <img>是空元素。 • <img>标签常用属性。
4.1 <a>标签——href属性
• 如果要连接当前站点内的文档，需要使用 相对路径，相对路径包括根相对路径和文 档相对路径两种，一般多用文档相对路径 。 • 根相对路径的根是指本站点文件夹（根目 录），根相对路径以“/”开头，路径是从 当前站点的根目录开始计算。比如一个网 页连接或引用站点根目录下images目录中 的一个图像文件a.gif，用根相对路径表示 就是：“/images/a.gif”。
4.1 <a>标签——href属性
• 连接的目标文档可以是任意类型的文件， 如果浏览器能够处理，则在浏览器上打开 显示，否则浏览器提示下载保存文件。
4.1 <a>标签——id和Name属性
• 通过使用id和name属性，可以创建一个网 页内部的书签，当使用书签时，可以创建 直接跳至页面中书签指定位置的连接。用 法如下：
4.2 XHTML字符集与颜色——XHTML字符实体 • 空格是XHTML中最普通的字符实体。通常 情况下，XHTML会裁掉文档中的空格。假 如在文档中连续输入10个空格，那么 XHTML会去掉其中的9个。如果使用空格实 体&nbsp;，就可以在文档中增加空格。
4.2 XHTML字符集与颜色——XHTML颜色 • 颜色由红色、绿色、蓝色混合而成。颜色 值由一个#号和六位十六进制数表示，六位 十六进制数由红色、绿色和蓝色的值组成 （RGB），每种颜色的最小值是00（十进 制0），最大值是FF（十进制255）。如： 黑（#000000）、 红（#FF0000）、绿（ #00FF00）、蓝（#0000FF）、黄（ #FFFF00）、灰（#C0C0C0）、白（ #FFFFFF）。
• 实例xhtml(a).html说明了<a>标签的基本 用法。
<a href="#c12">查看 第12章</a> … <a id="c12" name="c12"></a> <h2>第12章</h2>
课堂互动
• 书签的使用。
4.2 XHTML字符集与颜色——XHTML字符集
• 要正确地显示XHTML页面，浏览器必须知道使用 何种字符集。 • Web早期使用的字符集是ASCII，现代浏览器默 认的字符集是ISO-8859-1。 • 由于ISO字符集有容量限制，而且不兼容多语言环 境，Unicode联盟开发了Unicode标准， Unicode标准涵盖了世界上的所有字符、标点和 符号，最常用的编码方式是UTF-8和UTF-16。 XHTML支持UTF-8和UTF-16。 • 如果网页使用不同于ISO-8859-1的字符集，应在 <meta>标签进行指定。