HTML5+CSS3学习笔记（第3章）图像与超链接
HTML5+CSS3学习笔记（第3章）图像与超链接
居家隔离第2天，继续学习ing
常见的图片格式gif jpeg png
3.1添加图像
<img src="图像地址"/>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像</title>
</head>
<body>
<img src="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png">
<img src="fish.png" height="240" width="412"/>
</body>
</html>
绝对地址
相对地址使用方法：
在同一目录下，fish.png
在下级目录下，img/fish.png
在上级目录中，…/img/fish.png
注意，以上方法适用于本地网页，服务器的情况下寻找地址和路径的方法不一样。
3.2设置图像属性
图片大小
提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。
提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
也可以通过百分比的形式
图像的间距与对齐方式
hspace属性
vspace属性
align属性
替换文本与提示文字
alt属性规定图像的替代文本。
title属性
3.3链接标记
<a>标签
文本链接
<a href="URL">文本内容</a>
href属性 链接地址
target属性 打开新窗口的方式
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像</title>
</head>
<body>
<a href="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png" target="_blank">下载</a>
</body>
</html>
书签链接
创建书签
书签链接
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像</title>
</head>
<body>
<a href="#str_1">跳转</a>
<a href="#str_2">跳转2</a>
<h2><a id="str_1">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_2">放屁草鱼</a></h2><br><br><br><br><br>
<h2><a id="str_3">放屁黑鱼</a></h2><br><br><br><br><br>
<h2><a id="str_4">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_5">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_6">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_7">放屁鮰鱼</a></h2><br><br><br><br><br>
</body>
</html>
3.4图像的超链接
<a href="链接地址" target=目标窗口的打开方式">
/></a>
标签的嵌套
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank"><img src="fish.png" alt="" title="放屁鮰鱼"></a>
</body>
</html>
图像热区链接
首先需要在图像文件中设置映射图像名。
<img src="URL" usemap="#映射图像名称">
然后定义热区图像以及热区的链接
<map>标签
<map name="映射图像名称">
<area shape="rect" coords ="left,top,right,bottom" href="URL" title="XXX">
</map>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图像</title>
</head>
<body bgcolor="#ff7f50">
<img src="big.png" alt="" usemap="#hotpoint_1">
<map name="hotpoint_1">
<area shape="rect" coords="51,127,141,206" href="ad.jpg" alt="" title="电脑精装">
<area shape="rect" coords="" href="ad1" alt="">
</map>
</body>
</html>
其中coords使用PS进行测量，注意单位是像素（可以在PS里面设置）
