超链接和图像

第2章
超链接和图像
主要内容
. 在网页中使用图像
. 相对路径和绝对路径
. 超链接
. 使用Dreamweaver制作相册
1. 在网页中使用图片
. 图片的格式
目前在网页中使用的图片主要有GIF、JPG、PNG、BMP格式，但以GIF和JPG使用居多。GIF支持动画和背景透明，但仅支持256色以内的图像，因此色彩不够丰富。JPEG支持1670万种颜色，但不支持动画和背景透明。可以根据两者的优缺点来选择图像的格式。
. 在网页中插入图片
代码演示：在网页插入图片
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在网页中插入图片</title>
</head>
<body>
<img src="images/rose.jpg"> ①
</body>
</html>
代码解析：
① <img>标签的作用是在网页中插入图片，src属性指定插入图片的路径，运行效果如图1所示。
图1 在网页中插入图片
. 在网页中插入背景图片
代码演示：在网页插入背景图片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在网页中插入背景图片</title>
</head>
<body background="images/rose.jpg" > ①
</body>
</html>
代码解析：
① background属性表示网页的背景图像，它必须放在<body>标签内，背景图像会在水平方向和垂直方向上平铺，使得图像覆盖整个网页，运行效果如图2所示。
图2 在网页中插入背景图片
2. <img>的属性
通过设置图片的属性，可以灵活的控制图片在网页中的显示，图片的常用属性见表1。
属性名称属性值功能
width
数字（像素）
图片的宽
height
数字（像素）
图片的高
border
数字（像素）
图片的边框
align
left、center、right （左、中、右）
图片的对齐方式
vspace
数字（像素）
图片与文字的水平距离
hspace
数字（像素）
图片与文字的垂直距离
alt
字符串
图片的替换文本
表1 图片的属性
. 图片的宽和高（width和height）
代码演示：图片的width和height
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片的宽和高</title>
</head>
<body>
<img src="images/rose.jpg" width="100" height="150"> ①
</body>
</html>
代码解析：
① 控制图片显示大小是由width 和height两个属性共同完成的，当width和height不同时设置时，图片的宽和高将按照原始比例显示，当width和height都不设置时，图片的宽和高按照原始大小显示。运行效果如图3所示。
图3 控制图片的宽度和高度
. 图片的边框（border）
对插入的图片还可以在周围加上边框。
代码演示：图片的border
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片的边框</title>
</head>
<body>
<img src="images/rose.jpg" width="200" height="150" border="1"> ①
</body>
</html>
代码解析：
① border 属性是为图片加一个边框，<img border="n">，n为一个数值，单位为像素，运行效果如图4所示。
图4 设置图片的边框
. 图片与文字的位置关系（align）
在网页中经常将图文混排，这时要设置图片与文字的位置关系和文字与图片的距离。
代码演示：图片与文字的align
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片的align属性</title>
</head>
<body>
图片与文字的位置关系<img src="images/rose.jpg" width="200" height="150" border="1" align=" bottom "> ①
</body>
</html>
代码解析：
① 图片与文字的位置关系是通过设置img标签的align属性实现的，当align设置为bottom时，表示图片与文字底部对齐，如图5所示。还有其他的对齐方式，见表1所示。
图5 图片与文字绝对底部对齐
设置值对齐方式效果
Top
上对齐
Middle
局中对齐
Bottom
下对齐
Right
右对齐
Left
左对齐
表3 图片的align属性
. 图片的上下左右区域（hspace 和 vspace）
当图文混排时，图片周围（上、下、左、右）的文字与图片的距离是可以设置的，通过hspace属性设置水平方向的距离，vspace属性设置垂直方向的距离。
代码演示：图片与文字距离
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片与文字的距离</title>
</head>
<body>
上上上上上上上 
左<img src="images/rose.jpg" width="50" height="50" hspace="10" vspace="10" border="1" align="middle">右 
下下下下下下下
</body>
</html>
代码解析：
① 运行结果如图6所示，hspace="10"表示图片左边和右边的文字距离图片有10px，vspace="10"表示图片上面和下面的文字距离图片有10px。
图6 图片的垂直和水平距离
. 文字代替图片显示（alt）
有时浏览器不能显示所指定的图片，这时可以设置让浏览器显示一段文字以说明该图片，来代替图片的显示，这是利用img标签的alt属性来完成的。
代码演示：图片的alt属性
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>alt属性</title>
</head>
<body>
<img src="images/rose.jpg" alt="这是一朵玫瑰花" > ①
</body>
</html>
代码解析：
① alt属性有两种使用情况。第一，当鼠标悬停在图片上时，鼠标的下方会提示“这是一朵玫瑰花”，如图7所示。第二，由于某种原因导致图片不能显示时，这时在图片位置会显示Alt的值“这是一朵玫瑰花”。比如关闭了浏览器显示图片功能，这样就可以看到如图9所示的效果了。具体操作步骤如下：打开浏览器，选择【工具】->【Internet选项】在弹出的对话框中选择【高级】选项卡，然后取消“显示图片”选项，如图8所示，点击“确定”按钮，最后再来浏览网页，这时图片不显示了。
图7 Alt提示
图8 禁止浏览器显示图片
图9 文字代替图片
3. 相对路径与绝对路径
路径是指一个文件存储的位置，分为相对路径和绝对路径。
. 相对路径
相对路径是指以当前文件所在位置为参考点而建立的路径。假设有如图10所示的目录结构，
图10 相对路径和绝对路径
从上图可以看出Index.html文件在web目录下，rose.jpg文件在images目录下，而web与images目录同在html目录下。index.html文件的源代码如下。
代码演示：相对路径
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对路径 </title>
</head>
<body>
<img src="../images/rose.jpg" alt="这是一朵玫瑰花" > ①
</body>
</html>
代码解析：
① <img>的 src属性值"../images/rose.jpg" 是一个路径，这个路径是以当前文件（index.html）所在目录（c:\html\web）为参考点的，../ 表示参考点的上一级目录（c:\html），因此"../images/rose.jpg"，表示退到当前文件的上一级目录，再进入到下一级目录images中找图片rose.jpg，这种路径称为相对路径。
相对路径的优点在于无论html目录移动到什么位置，index.html文件总能找到rose.jpg文件，因此图片显示正常。
C:\
C:\Html目录
index.html文件
rose.jpg文件
C:\Html\Images目录
C:\Html\Web目录
. 绝对路径
绝对路径是以硬盘根目录或站点根目录为参考点而建立的路径。仍以图10为例，现在将index.html文件的源代码更改如下：
代码演示：绝对路径
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绝对路径</title>
</head>
<body>
<img src="file:///C|/html/images/rose.jpg" > ①
</body>
</html>
代码解析：
① <img>的 src属性值" file:///C|/html/images/rose.jpg " 是一个路径，这个路径是以硬盘根目录（c:\）为参考点的，当前网页文件（index.html）将引用c:\html\images\rose.jpg文件，这种路径称为绝对路径。
当将html目录移动到其他位置时，index.html文件就无法找到rose.jpg文件，因此图片显示出错。在网页制作中推荐使用相对路径。
路径格式
相对
../images/rose.jpg
绝对
file:///C|/html/images/rose.jpg
表4 相对路径与绝对路径
4. 超链接
HTML文件最重要的应用之一就是超链接，通过网页上提供的超链接功能，用户可以链接到网络上的其他网页。如果没有超链接，就只能在浏览器地址栏中输入各个网页的网址，这是一件很麻烦的事。实现超链接的标签是<a>。
. 文字超链接
现在来做一个例子，在这个例子中要创建2个文件，分别是First.html和Second.html，实现从First.html链接到Second.htm。
在c:\目录下创建一个网页文件，命名为First.html，代码如下。
代码演示：超链接First.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
这是第一个文件，
点击<a href="second.html" target="_blank">这里</a>转到第二个文件。 ①
</body>
</html>
代码解析
① <a>标签实现了超链接，href 属性用来明确链接的目标文件，target属性用来明确目标文件的打开方式，target="_blank"时表示在新窗口中打开目标文件，省略时表示在原窗口中打开目标文件。运行后显示如图11所示的效果，当用鼠标点击“这里”时网页转到了目标文件Second.html运行，实现了超链接。
图11 文本超链接
Second.html代码如下。
代码演示：超链接Second.html代码
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
这是第二个文件。
</body>
</html>
. 锚链接
在制作网页时可能会遇到网页内容过长的情况，这样用户浏览起来就不太方便。要解决这个问题可以在网页的上部创建一个导航，利用导航直接链接到下面定义好的锚点。
代码演示：锚链接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚链接</title>
</head>
<body>
<a href="#三字经">三字经</a> ①
<a href="#百家姓">百家姓</a> ②
三字经<a name="三字经"></a> ③
<pre>
人之初,性本善。
性相近,习相远。
苟不教,性乃迁。
教之道,贵以专。
昔孟母,择邻处。
子不学,断机杼。
窦燕山,有义方。
教五子,名俱扬。
养不教,父之过。
教不严,师之惰。
子不学,非所宜。
幼不学,老何为。
</pre>
百家姓<a name="百家姓"></a> ④
<pre>
赵钱孙李周吴郑王
冯陈褚卫蒋沈韩杨
朱秦尤许何吕施张
孔曹严华金魏陶姜
</pre>
</body>
</html>
代码解析：
① href="#三字经" 表示链接到锚点名为“三字经”的位置显示。
② 作用同①。
③ name="三字经" 表示定义一个锚点，锚点的名称是“三字经”
④ 作用同③。
当网页运行后，点击图12左侧的“三字经”锚链接，网页就会直接跳到“三字经”锚点，如图12右侧所示。要实现这个效果，需要<a>标签的两个属性配合使用，一是锚名称“name”，二是空链接“#”。
图12 锚链接
1. 锚链接可以理解为文件内部的链接。
2. 锚的名称不能重复，否则只识别第一个锚。
. 图片超链接
代码演示：图片超链接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片超链接</title>
</head>
<body>
<a href="rose.html">
<img src="images/rose.jpg" width="200" height="150" border="0">
</a> ①
</body>
</html>
代码解析：
① 为图片添加超链接只要将图片源码写在超链接标签<a>和</a>之间即可。在浏览器中，当鼠标点击图片时会打开“rose.html”文件。
. 热区超链接
有些时候希望一个图片能添加多个链接，这时要将图片分割出多个链接区域，每一个区域叫一个热区，每一个热区都可以实现一个链接。
代码演示：热区链接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热区超链接</title>
</head>
<body>
<img src="images/china.jpg" usemap="#Map"> ①
<map name="Map"> ②
<area shape="rect" coords="456,251,485,319" href="shaanxi.html"> ③
<area shape="circle" coords="402,299,23" href="shanxi.html"> ④
<area shape="poly" coords="400,365,446,268,446,381" href="ningxia.html"> ⑤
</map>
</body>
</html>
代码解析：
热区的制作主要靠的是<map>标签和<area>标签。<map>标签用于在图片上划定区域，把这个区域称作地图，<map>的name属性是地图的名称。<area>标签可以理解为一个具体的区域，它被包含在<map>中。图片通过<map>的名称引用<area>的区域，并为每一个<area>设置超链接。
① usemap="#Map" 表示引用名为“Map”的地图，因为是文件内部链接，所以在“Map”前添加了“#”。
② 定义了一个<map>，命名为“Map”。
③ 定义一个<area>，shape表示形状，coords表示<area>的座标，“href”表示<area>的链接地址。当点击这个区域时，链接到shaanxi.html文件。
④ 当点击这个区域时，链接到shanxi.html 文件。
⑤ 当点击这个区域时，链接到ningxia.html文件。
热区的形状有三种，rect(矩形)、circle(圆形)、poly (多边形)。
. 下载超链接
下载超链接是指当用户点击链接时，能够下载文件。制作下载超链接时需要将被下载的文件做成压缩格式或者其他可以下载的格式，如 *.rar。
代码演示：下载超链接
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下载超链接</title>
</head>
<body>
<a href="images/rose.rar">下载rose.rar文件 </a> ①
</body>
</html>
代码解析：
① href链接的目标文件是rar文件，当点击这个链接时会自动弹出如图14所示的对话框来下载文件。运行后如图13所示的效果。
图 13 下载文件超链接
图14 下载文件
. 电子邮件超链接
电子邮件超链接是指当点击超链接时，启用OutLook Express软件进行邮件的发送。
代码演示：电子邮件超链接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>电子邮件超链接</title>
</head>
<body>
<a href="mailto:[email protected]">联系我们</a> ①
</body>
</html>
代码解析：
① 电子邮件链接的格式是“mailto:邮件地址”，当用户点击这个超链接时，弹出如图16所示的对话框发送邮件。运行后如图15所示的效果。
图15 电子邮件超链接
图16 启用OutLook Express发送邮件
OutLook Express 需要配置SMPT和POP3后才能发送邮件。
. HTTP超链接
HTTP超链接用于打开一个新的站点，通常用于友情链接。
代码演示：HTTP超链接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTTP协议超链接</title>
</head>
<body>
友情链接 
<a href="http://www.shou.com">搜狐</a> ①
</body>
</html>
代码解析：
① 当点击这个超链接时，会打开搜狐网站。
5. 使用Dreamweaver制作相册
我们要制作的相册如图17所示，图17中的六张图片默认都是灰色的，当鼠标移动到某一张图片时，这幅图片变成彩色的，当点击某一幅图时，会打开这幅图像对应的大图，如图18所示。
图片素材位于Album目录下的Images目录中。
1. big_color开头的图片文件是打开后的大图。
2. small_color开头的是鼠标移到图片上时显示的彩色图。
3. small_gray开头的是默认的灰度图。
图17 相册
图18 相册的大图
实现步骤：
1. 拷贝图片到C:\根目录下的images目录中。
2. 在Dreamweaver中新建一个网页，然后保存到C：\根目录下，与图片目录images同级，命名为index.html。
3. 在Dreamweaver的常用菜单中选择“鼠标经过图像”按钮，如图19所示。
图19 添加鼠标经过图像
4. 弹出对话框如图20所示。其中
. “原始图像”是指默认显示的灰色小图像；
. “鼠标经过图像”是指当鼠标移到图像上时，显示的彩色小图像；
. “替换文本”设置为“第一幅图片”；
. “按下时，前往的URL”是指图片的超链接，设置为“1.html”；
. 点击“确定”按钮关闭窗口。
图20 设置鼠标经过图像
5. 重复3，4步，选择下一幅图像，直到将6幅图片都加入到index.html中为止。
6. 然后在C:\根目录下创建1.html–6.html网页文件，并插入对应的图片。
7. 制作完毕，浏览index.html观察效果。
6. 本章总结
. <img>标签在网页中插入图片
. <img>标签的属性有width、height、border、align、vspace、hspace、alt。
. 路径分为相对路径和绝对路径，在网页制作中建议使用相对路径。
. <a>标签实现超链接。
超链接分为文本超链接、新窗口中打开链接、锚点超链接、图片超链接、热区超链接、下载超链接、电子邮件超链接、HTTP超链接。

超链接和图像

【面试准备】又一次失败的面试经历，题目离谱～资深软件测试工程师

dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

項目代碼行數統計--java類統計

一些基礎的HTML Tag

表格和框架

標籤-超鏈接中使用confirm方法

超鏈接和圖像

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結