第3章图像、路径及超链接本章学习目标  了解网页中常用图像格式的特性。  掌握图像的标记和属性，能够熟练使用属性美化图像。  理解绝对路径和相对路径的概念，能够正确书写路径。  掌握超链接的标记和常用属性，能够正确链接互联网的各种文件。  掌握创建锚链接和电子邮件链接的方法。 3.1网页中常用的图像格式及特性图像在视觉传达上比文字更直观、生动，同时，在网页中插入图像能够使网页更加美观。在制作网页的过程中，常用的图像格式有JPG、GIF和PNG，下面介绍这些图像格式各自的优缺点。 1. JPG JPG图像格式由Joint Photographic Experts Group提出并命名，支持24位颜色或真彩色。由于人眼不能看出存储图片的全部信息，因此可以去除图像的某些细节，并对图片进行压缩，JPG是一种以损失质量为代价的压缩方式，压缩比越高，图像质量损失越大，适用于存储色彩比较丰富、色调连续的图像。在网页中，广告(banner)、商品照片、色彩丰富的插图都可以采用JPG格式。 2. GIF GIF（graphics interchange format）的最大特点是支持动画。它采用无损压缩方式，图片质量基本没有损失。GIF图像最多可以显示256种颜色，支持透明(全透明、全不透明)。 GIF常用于制作全透明区域图像(如Logo)、动画图片等。 3. PNG PNG（portable network group）包括PNG8和真色彩PNG(PNG24和PNG32)。PNG的特点是支持alpha透明(全透明、半透明、全不透明)，PNG不支持动画。通常PNG8在同质量下比GIF占用更小的体积，需要半透明效果只能使用PNG24。 PNG格式在网页制作时常用来做小图标、按钮、背景图像等。 3.2图像标记 3.1节介绍了网页中常用的图像格式，那么如何将这些图片插入网页中美化网页呢？ 3.2.1图像标记的用法在网页中，显示图像需要使用图像标记。图像标记的基本语法格式如下：

src属性是图像路径URL，用于指定图像文件的存储路径和文件夹，它是标记的必须属性。在例3.1中，第8行代码使用标记显示图像，添加必备属性src以指定显示图像的路径，如图3.1所示。例3.1 1 2 3 4 5图像标记的基本格式 6 7 8

9 10 图3.1图像标记使用效果注意：如果需要让两个图像紧密挨在一起，必须使两个图像标记靠在一起，中间不能有空格和换行。 3.2.2图像标记的属性如果想在网页里灵活地对图像进行排版，需要掌握图像标记的属性。图像标记的常用属性如表3.1所示。表3.1图像标记的常用属性属性属性值描述 srcURL图像的路径 alt文本图像不能显示时的替换文本 title文本鼠标指针悬停时显示的内容 width像素图像的宽度 height像素图像的高度 border数字图像边框的宽度 vspace像素图像顶部和底部的空白(垂直边距) hspace像素图像左侧和右侧的空白(水平边距) align left将图像对齐到左边 right将图像对齐到右边 top将图像顶端和文本的第一行文字对齐，其他文字居于图像下方 middle将图像的水平线和文本的第一行文字对齐，其他文字居于图像下方 bottom将图像的底部和文本的第一行文字对齐，其他文字居于图像下方 1. alt属性 alt属性规定图像的替代显示文本，如果浏览器无法显示图像，就显示替换文本。如例3.1中将图像标记代码改为：小猪佩奇

在谷歌浏览器中，由于图像路径书写错误导致图像无法显示，效果如图3.2所示。 2. title属性 title属性规定关于元素的额外信息，这些信息在鼠标指针移到元素上时会显示一段提示文字。不必所有的标记都添加此属性，例如，像Logo这样比较重要的图像建议添加此属性。在例3.1中将图像标记代码改为如下所示，当鼠标指针移动到图像上时，显示title属性定义的提示文本，如图3.3所示。小猪佩奇

注意： title属性除了应用于标记外，经常用于表单元素和超链接标记，定义输入格式和链接目标的信息。图3.2alt属性使用效果图3.3title属性使用效果 3. 图像的宽高属性如果不设置标记的宽、高属性，图片会按照它的原始尺寸显示。可以通过设置width和height属性为图像手动更改宽度和高度。在使用width和height属性时，通常的做法是只设置一个属性，这样可以与原图成比例显示。 4. 图像的边框属性图像在浏览器渲染时默认是没有边框的，border属性可以定义图像周围边框的宽度。了解了以上几个属性后，可使用它们对图像进行修饰，如例3.2所示。例3.2 1 2 3 4 5img标记的属性 6 7 8

13 14 在例3.2中，第8行代码使用border属性为图像添加了边框，默认边框颜色为黑色，如果需要修改边框颜色，使用标记属性是无法做到的；第10行代码仅使用height属性限定了图像的高度，图像宽度按比例缩放显示；第12行代码既设置了图像的高度又设置了宽度，图像按照属性定义的显示，但是发生变形，如图3.4所示。图3.4定义width和height属性效果 5. 图像的边距属性通常图形浏览器不会在图像和其周围之间留出很多空间。从排版需要考虑，可以用vspace和hspace分别调整图像的垂直边距和水平边距。 6. 图像的对齐属性 align属性规定图像相对于周围元素的对齐方式，属性的取值如表3.2所示。表3.2align属性取值值属性值属性 left将图像对齐到左边top将图像与顶部对齐 right将图像对齐到右边bottom将图像与底部对齐 middle将图像与中央对齐使用图像对齐属性实现图文混排效果，如例3.3所示。例3.3 1 2 3 4 5图像的对齐属性 6 7 8

默认文本对齐方式。

图像对齐到左边。

图像对齐到右边。

图像与文本居中。

图像与文本顶部对齐。

18 19 默认图片与文字底部对齐(align="bottom")，如图3.5所示。在网页中实现图文混排，图像和文字的环绕效果，图像居左、居右等需要使用图像的对齐属性align。图3.5图像应用对齐属性效果使用hspace和vspace为图像设置水平边距和垂直边距，如例3.4所示。例3.4 1 2 3 4 5图像排版 6 7 8

HTML与CSS

HTML(hypertext markup language)是文本标记语言，是用于描述网页文档的一种标记语言。

CSS(cascading style sheet)可译为"层叠样式表"或"级联样式表"，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。样式存储在样式表中，通常放在head部分或存储在外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多地被应用到网页设计中去。

12 13 例3.4中，第8行代码使用align属性使图像居左，实现文本环绕效果，并使用hspace和vspace属性在图像四周留白，页面效果如图3.6所示。图3.6图文混排页面效果 3.3路径在标记中使用src属性设置图像的存储地址，如果src属性值书写错误，那么图像将不能显示。通常在制作网页时，一个页面会用到很多的素材图像，将所有的素材图像都和网页堆积在一个文件夹中，会特别乱。实际项目中，通常将所用的素材图像放在一个专门用于放图像的文件夹(一般命名为images或imgs)中，再将图像的路径赋值给src属性。 3.3.1相对路径相对路径是以引用文件的网页所在位置为参考基础，建立的目录路径。图3.7同级目录 1. 同级目录如果源文件和引用文件在同一个文件夹中，路径直接写文件名即可。如图3.7所示，在E盘下存在mypage文件夹，mypage文件夹内有page1.html和smile.png两个文件，page1.html和smile.png属于同级目录。在page1.html中引用同级目录smile.png，代码如下：

2. 下级目录如果引用的图像文件位于网页文件的下级目录，直接写下级目录文件的路径即可。如图3.8所示，在E盘存在mypage文件夹，mypage文件夹下有page1.html文件和images文件夹，在images文件夹内有smile.png图像。在page1.html中插入smile.png图像，代码如下：

3. 上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。如图3.9所示，在E盘下存在mypage文件夹，mypage文件夹内有两个文件夹html和images，page1.html位于html文件夹内，smile.png位于images文件夹内。在page1.html中插入smile.png图像，代码如下：

图3.8下级目录图3.9文件目录结构综上所述，相对路径的写法有以下3种。（1）同级目录，写引入的文件名称即可。（2）下级目录，写引入文件所在的文件夹名和文件名，之间使用“/”隔开。（3）上级目录，写引入文件所在的文件夹名和文件名，且在文件夹名称之前加“../”。如果从网页文件向上返一级能够找到包含引入文件的文件夹，则需要写一个“../”；如果需要向上返两级能够找到包含引用文件的文件夹，则需要写两个“../../”；以此类推。 3.3.2绝对路径具体完整的路径，一般带有盘符或完整的网络地址，能精确找到需要文件的位置。在图3.7所示的路径关系中，想要在page1.html中引用smile.png作为图像素材，使用绝对路径代码如下：

10 11Sublime Text 3的Less2Css插件介绍与安装 12

14 2015-08-20 15 16 大内高手 17 18 阅读(47361) 19

21在介绍Less2Css之前我们先安装一个less的语法高亮，用过less的读者都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们，可以直接安装Ctrl+Shift+P>install Package搜索less按... 22

23 24 图3.11搭建结构效果图 3.4.3美化为标记添加属性，可以控制图文混排的效果。为了控制文本的字号和颜色，目前必须借助标记及其属性size、color实现。添加完属性和标记后能够实现图3.10所示的页面效果。代码如例3.6所示。例3.6 1 2 3 4 5Sublime Text 3的Less2Css插件介绍与安装 6 7 8 sublimelogo

10 11Sublime Text 3的Less2Css插件介绍与安装 12

14 2015-08-20 15 大内高手 16 阅读(47361) 17

19在介绍Less2Css之前我们先安装一个less的语法高亮，用过less的读者都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们，可以直接安装Ctrl+Shift+P>install Package搜索less按... 20

21 22 3.5超链接标记超链接是网页页面重要的组成元素，一个网站是由多个页面使用超链接将各个网页互链起来的。在网页中，一个字、一个词、一段话、一张图像等都可以添加超链接，用户单击添加超链接的内容可以跳转到新的文档或当前文档中的某个部分。 HTML使用标记设置超文本链接，超链接标记的语法格式如下：链接文字超链接标记有如下两个常用属性。（1） href：用于指定链接目标的路径或URL地址，给超链接标记指定了href属性，它就具备了超链接的功能。（2） target：用于指定打开链接目标的方式。常用的值有_self和_blank两种，_self指在原窗口打开链接目标(默认值)，_blank指在新窗口打开链接目标。 URL(统一资源定位符)是对互联网上得到资源的位置和访问方法的一种简洁表示，是互联网上标准的资源地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的具体位置以及浏览器如何处理它。在例3.7中，给百度、搜狐、新浪3个词组添加了超链接分别链接到百度首页、搜狐首页、新浪首页。其中,百度超链接没有使用target属性指定超链接的打开方式，单击“百度”在当前窗口跳转到百度首页；单击“搜狐”，使用target属性指定链接目标的打开方式为"_self"在当前窗口打开搜狐首页，可见，target="_self"是默认值； “新浪”使用target="_blank"单击文字后会在新窗口打开href属性指定的链接地址。效果如图3.12所示，添加了超链接的文本浏览器默认情况下为蓝色且带有下画线效果。当鼠标指针移动到超链接文本上时，光标会变为手形，同时在浏览器的左下角会显示链接地址。例3.7 1 2 3 4 5超链接 6 7 8 百度 9搜狐 10新浪 11 12 图3.12超链接标记效果也可以为插入网页中的图像添加超链接，如例3.8所示，添加了超链接的图片和普通图片没有差异，效果如图3.13所示。当单击图片时，将跳转到链接指定的地址。例3.8 1 2 3 4 5图像超链接 6 7 8

9 10 图3.13图像超链接效果超链接还有如下一个属性。 title：指向链接的提示信息，就是当鼠标指针移动到添加了超链接的文字或图片时，会出现文字提示。为百度文字添加了超链接且使用了title属性就为超链接添加了提示文字“百度”，如例3.9所示。当鼠标指针移动到超链接文字上时，鼠标指针旁边会显示提示文字，效果如图3.14所示。例3.9 1 2 3 4 5超链接的title属性 6 7 8百度 9 10 图3.14为超链接添加title属性效果 3.6应用案例制作如图3.15所示仿百度搜索结果效果页面，代码如例3.10所示。图3.15仿百度搜索结果页本条搜索结果整体分为上下两个部分，使用两对

标记。上边软件标题有的文本样式特殊，需要使用标记及其属性实现。下半部分为软件图标及介绍，图标居右使用的align="left"水平左对齐实现，软件介绍为红色文本，需要使用标记及其color文本颜色属性设置实现。例3.10 1 2 3 4 5软件下载_小度知道 6 7 8

9SEAS下载-免费软件,绿色软件_SEAS软件下载 10

12 13软件下载频道(消费类软件门户媒体)提供网络软件、杀毒软件、聊天工具、系统工具、媒体播放、输入法、QQ工具、手机主题和驱动等丰富的绿色软件下载,互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资…… 14
15http://seas.com.cn-小度快照-234条评价 16 17

18 19 3.7其他形式的链接 3.7.1锚链接当某个网页的内容太长，用户需要不断地拖动滚动条才能找到需要的内容，想要快速跳转到某个网页的具体位置时，就需要在页面中定义锚点，创建锚链接。锚链接的作用在于实现单个页面内不同位置的跳转，有些地方也叫作书签。定义锚点需要使用超链接标记的name属性，语法格式如下：锚点其中，name的属性值是自定义锚点的名称。一个页面可以定义多个锚，定义的锚点不会附加任何显示样式。注意：定义锚点之间不一定需要具体的内容，只是做一个定位。定义了锚点之后，就可以在文档中使用href属性创建指向该锚点的链接，语法格式如下：链接到label锚点当需要链接到某个已命名的锚点时，将href的属性值书写为“#锚点名称”，单击超链接就可以快速跳转到锚点定义的位置，如例3.11所示，效果如图3.16所示。例3.11 1 2 3 4 5锚链接 6 7 8

查看第六节

第一节

第一节的内容，啦啦啦啦~~~

第二节

第二节的内容，啦啦啦啦~~~

第三节

第三节的内容，啦啦啦啦~~~

第四节

第四节的内容，啦啦啦啦~~~

第五节

第五节的内容，啦啦啦啦~~~

第六节

第六节的内容，啦啦啦啦~~~

第七节

第七节的内容，啦啦啦啦~~~

第八节

第八节的内容，啦啦啦啦~~~

第九节

第九节的内容，啦啦啦啦~~~

第十节

第十节的内容，啦啦啦啦~~~

29 30 单击图3.16中“查看第六节”超链接文本，页面快速跳转到定义锚点的地方，如图3.17所示。图3.16锚链接页面效果图3.17单击锚链接跳转后效果注意：制作网页时，有些链接地址还不确定，可以先写成空链接(#)的形式。例如，链接文字。创建锚链接时，还可以链接到别的页面。例如，在index.html中存在锚点名称为A的锚点，想在其他页面里面链接到index.html页面中的A锚点，可以写成：链接文字。 3.7.2电子邮件链接指定href属性为mailto:Email地址，可以给某个电子邮箱发送电子邮件，语法格式如下：发邮件或者：发送邮件单击电子邮件链接后，会运行系统默认邮件程序给ilovehtml@163.com发送邮件，并且收件人位置已经填上了收件人的地址。注意：电子邮件链接的邮件地址必须完整。 3.7.3文件下载通过指定超链接标记的href属性为文件的路径，可以实现下载文件的功能，实现效果如图3.18所示。图3.18文件下载页面例3.12的第33行代码，通过为图片添加超链接，将下载文件的路径赋值给href属性。在浏览器查看网页时，通过单击蓝色按钮就能够实现文件下载功能，如例3.12所示。例3.12 1 2 3 4 5QQ下载_腾讯QQ下载2020电脑版_SEAS软件下载 6 7 8

9 10QQ2019 9.2.3.26683 11 12

15 16软件大小： 80.47MB 17 18软件厂商：腾讯 19 20

22 23软件语言：简体中文 24 25软件授权：免费 26 27

29 30更新时间： 2020-3-15 31 32

34 35 3.7.4FTP服务器链接浏览网页采用的是HTTP，而FTP服务器采用的是FTP，语法格式如下：链接的文字 FTP不同于网页链接HTTP，FTP需要从服务器管理员处获得登录的权限。也有一些FTP服务器可以匿名访问，以获得一些公开的文件。