目录
1，添加图像
1，图像的基本格式
（1）GIF格式：
（2）JPEG格式：
（3）PNG格式：
2，添加图像
2，设置图像属性
1，设置图像大小和边框
（1）调整图像大小
（2）设置图像边框
2，图像间距与对齐方式
（1）调整图像间距
（2）设置图像相对于文字基准线的对齐方式
3，替换文本和提示文字
（1）添加提示文字——title
（2）添加替换文字——alt
3，链接标签
1，文本链接
2，书签链接
4，图像的超链接
1，图像的基本链接
2，图像的热区链接
1，添加图像
万维网与其他网络类型（如FTP）最大的不同就在于，它在网页上可呈现丰富的色彩及图像。用户可以在网页中放入自己的照片，也可以放入公司的商标，还可以把图像作为一个按钮来链接到另一个网页，这就让网页变得丰富多彩了。
1，图像的基本格式
当前万维网上流行的图像格式以GIF和JPEG为主，另外还有一种PNG格式的图像文件，以下分别对这三种图形格式的特点进行介绍：
（1）GIF格式：
GIF只能处理256个颜色，所以GIF格式适用于商标新闻式的标题或其他小于256色的图像。想要将图像以GIF的格式储存，可以采用LZW压缩，LZW压缩是一种能将数据中重复的字符串加以编码制作成数据流的一种压缩方法，是以压缩相同颜色的色块来减少图像大小的。由于w压缩不会造成任何品质上的损失，并且压缩效率高，再加上自己GIF在各种平台上都可以使用，所以很适合在互联网上使用。
（2）JPEG格式：
JPEG格式通常用来保存超过256色的图像格式（如照片之类全彩图像）。JPEG的压缩过程会造成一些图像数据的损失，所造成的“损失”是剔除了一些视觉上不容易觉察的部分。如果剔除适当，视觉上不但能够接受，而且图像的压缩效率也会提高，使图像文件变小；反之，剔除太多图像数据，则会造成图像过度失真。
（3）PNG格式：
PNG图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，而且还支持 48-bit 的色彩，更快的交错显示，跨平台的图像亮度控制，更多层的透明度设置。
2，添加图像
使用img标记将图像插入网页中，语法格式如下：
<img src="图像文件的地址">- src用来设置图像文件所在的地址，可以是相对地址，也可以是绝对地址。
-
绝对地址：主页上的文件或目录在硬盘上的真正路径，如路径“D:/image/101.jpg”。使用绝对路径定位链接目标文件比较清晰，但是有两个缺点：第一是需要输入更多的内容；第二是如果该文件被移动了，就需要重新设置所有的相关链接。比如说在本地测试网页时链接全部可用，但是到了网上就不可用。（可以理解为别人电脑D盘这个路径没有101这个图片，所以加载不出来）
-
相对地址：相对地址是最适合网站的内部文件引用的。只要是属于同一网站之下的，即使不在同一个目录下,相对地址也非常适用。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在服务器地址发生改变时，文件夹的所有内部文件地址都不会出问题。 相对地址的使用方法如下：
☑ 如果要引用的文件位于该文件的同一目录下，则只需输入要链接文档的名称，如101.jpg.
☑ 如果要引用的文件位于该文件的下一级目录中，只需先输入目录名，然后加“ / ”，再输入文件名，如 image/101.jpg。
☑ 如果要引用的文件位于该文件的上一级目录中，则先输入“ ../ ”，再输入目录名和文件名，如../image/101.jpg。
实例：我们插入一张图片到网页中，需要注意的是，直接使用本地文件系统的绝对路径（如 C:\Users\20417\Pictures\101.jpg）在浏览器中通常是不可行的，因为出于安全考虑，浏览器不允许直接访问本地文件系统的文件。我们可以使用相对路径，如果图片在HTML文件所在目录的子目录 images 中，我们可以这样写：
<img src="img/乌野.jpg" alt="乌野">
- alt：属于<img>标签的属性，是一个重要的可访问性特性，用于为图片提供文本描述。比如在这行代码中如果我插入的图片无法显示，将显示代替文本“乌野”。
运行结果不再展示，是100%全铺满网页的效果，想进一步设置图像属性在下面的小结。
而把图片添加到和HTML文件所在目录子目录img的操作是：把想要添加的图片直接拖动到img中，更改命名即可：
！但值得一提的是，这种方法只适用于本地测试，不适合部署到生产环境。我们的目标是最后能在互联网上发布我们制作的网站，这需要将图片上传到我们的网站服务器，然后使用图片在服务器上的URL作为 src 属性的值。我们先把基础的学完，这个在后面会讲到。
2，设置图像属性
1，设置图像大小和边框
在网页中直接插入图像时，图像的大小和原图是相同的，而在实际应用时我们可以通过各种图像属性的设置来调整图像的大小、分辨率等内容。
（1）调整图像大小
在<img>标签中，通过height属性 和 width属性设置图片显示的高度和宽度，语法格式如下：
<img src="图像的地址" height=" " width=" ">- height：用于设置图像的高度，单位是像素，可以省略
- width：用于设置图像的宽度，单位是像素，可以省略
设置图像大小时，如果只设置了高度或宽度，那么另一个参数会按照相同比例进行调整；如果同时设置两个属性，且缩放比例又不同，这时图像很可能会变形。
（2）设置图像边框
在默认情况下页面中插入的图像是没有边框的，我们可以通过border属性为图像添加边框，单位是像素，可以省略。语法格式如下;
<img src="图像的地址" border=" ">实例：添加两张图片。其中一张设置宽为700像素，高为400像素，并添加边框；另一张设置为宽100，高70，无边框。代码如下
<img src="img/webstorm.png" alt=" " height="400" width="700" border="10">
<img src="img/webstorm.png" alt=" " height="70" width="100" border="0">
运行效果：
2，图像间距与对齐方式
我们可以通过调整图像在页面中的间距和对齐方式，从而改变图像的位置。
（1）调整图像间距
如果不使用<br>标签或<p>标签进行换行显示（这里为什么写<br>而不是<br/>，因为HTML5没有那么严格，如果是在XHTML中就要求所有的元素都必须有关闭标签，即使是空元素），那么添加的图像会紧跟在文字之后。但是，通过 hspace 和 vspace 属性可以调整图像和文字之间的距离，使排版不那么拥挤。语法格式如下：
<img src="图像的地址" hspace=" " vspace=" ">- hspace：设置图像的水平间距，单位是像素，可以忽略
- vspace：设置图像的竖直间距，单位是像素，可以忽略
（2）设置图像相对于文字基准线的对齐方式
图像和文字之间的排列通过align参数来调整，对齐方式分类如下图：
相对对齐的语法格式如下：
<img src="图像的地址" align="相对文字的对齐方式"> 在这个语法中，align的取值如下表所示：
| align 取值 | 表示含义 |
| top | 把图像的顶部和同行的最高部分对齐 (可能是文本的顶部，也可能是图的顶部） |
| middle | 把图像的中部和同行文本的中部对齐 (通常是文本行的基线，并不是实际行的中部） |
| bottom | 把图像的底部和同行文本的底部对齐 |
| absmiddle | 把图像的中部和同行中最大项的中部对齐 |
| baseline | 把图像的底部和文本的基线对齐 |
| absbottom | 把图像的底部和同行中的最低项对齐 |
| left | 使图像和左边界对齐(文本环绕图像) |
| right | 使图像和右边界对齐(文本环绕图像) |
实例：
<span>第一组人物头像：</span>
<img src="img/头像1.jpg" alt=" " height="200">
<img src="img/头像2.jpg" alt=" " height="200">
<img src="img/头像3.jpg" alt=" " height="200">
<img src="img/头像4.jpg" alt=" " height="200">- 这里用的文字标签是<span>，是因为块级元素（如
<p>或<div>）会自动换行，而行内元素<span>没有自动换行效果。
此时运行效果：
接下来我们使用图像相对于文字基准线的对齐方式操作：
<span>第二组人物头像：</span>
<img src="img/头像1.jpg" alt=" " height="200" align="middle">
<img src="img/头像2.jpg" alt=" " height="200" align="middle">
<img src="img/头像3.jpg" alt=" " height="200" align="middle">
<img src="img/头像4.jpg" alt=" " height="200" align="middle">
此时运行效果：
3，替换文本和提示文字
在HTML中，可以通过为图像设置替换文本和替换文字来添加提示信息。其中：
- 提示文字 在鼠标悬停在图像上时显示，
- 替换文本 在图像无法正常显示时显示，用于告知用户这是一张什么图片。
（1）添加提示文字——title
当浏览网页时，如果图像下载完成，鼠标放在该图片上，鼠标旁边会出现提示文字，用于说明或描述图像。语法格式如下：
<img src="图像的地址" title="提示文字">实例：
<img src="img/头像1.jpg" title="这是一张头像">运行：
（2）添加替换文字——alt
如果图片由于下载或者路径的问题无法显示时，可以通过alt属性在图片的位置显示我们定义的替换文字。语法格式如下：
<img src="图像的地址" alt="替换文字">实例：
<img src="img/头像1.png" alt="图片暂时无法显示">运行：
3，链接标签
链接（link），全称为超文本链接，也称为超链接。一个网页是由多个页面组成的，页面之间依据链接确定相互的导航关系。当在浏览器中单击这些对象时，浏览器可以载入一个新页面或者跳转到页面的其他位置，如本文前面的目录。
常用的链接分为文本链接 和 书签链接。
1，文本链接
在网页中，文本链接是最常见的一种。它通过网页中的文件和其他的文件进行链接，语法格式如下：
<a href="链接地址" target="打开窗口的方式">链接文字</a>- href： 跳转的链接地址，是Hypertext Reference的缩写。（href 是必须属性。）
（注：可以是绝对地址，也可以是相对地址。为了简化代码和避免文件位置改变 而导致链接出错，一般使用相对地址。）
- target：打开新窗口的方式，主要有以下4个属性值
| _blank | 新建一个窗口打开， 保留原来的窗口 |
| _parent | 在上一级窗口打开， 常在分帧的框架页面中使用 |
| _self | 在统一窗口打开，默认值 |
| _top | 在浏览器的整个窗口打开， 将会忽略所有的框架结构 |
实例1：点击文字可以跳转到相应的网页
<a href="https://blog.csdn.net/m0_75100421?type=blog">博客</a>
<a href="https://www.mi.com/service">小米官网</a>
<a href="https://www.bilibili.com/">哔哩哔哩</a>
运行：
（链接和点击之后的链接颜色 未来都可以通过CSS设置。）
实例2：新建一个HTML文件，跳转到本地路径中（如果跳转到本地路径，按相对地址查找）
<a href="页面2.html">跳转到页面2</a>
<a href="./页面2.html">跳转到页面2</a>（注：这两行代码一样，第二行的“./”是多余的，表示当前目录，但是我们在写的时候输入这个可以快速找到当前目录下我们想要选择的文件）
运行：
实例3：可以看到上面示例二在打开新窗口后网页被新窗口重新覆盖，只有新窗口一个窗口了，如果想要让原来的窗口和新窗口并存，我们可以添加一个target属性，属性值选择_blank即可。
接着在页面中添加文字导航和图像，并且通过<a>标签为每个导航栏添加超链接。
<a href="第一天.html" target="_blank">前端学习之HTML</a>
<a href="第一天.html" target="_blank">前端学习之CSS</a>
<a href="第一天.html" target="_blank">前端学习之JS</a>
<a href="第一天.html" target="_blank">前端学习之vue</a>
<br/>
<img src="img/webstorm.png" alt="图片" height="400">运行：
2，书签链接
书签链接，顾名思义就是我们在看书时用书签在某一页做的标记。在浏览页面时，如果页面的内容较多，页面过长，浏览时需要不断低拖曳滚动条，我们查找特定的内容很不方便。这时如果能在该网页或另一个页面上建立目录，用户只需单击目录上的某一项就能自动跳到网页相应的位置进行阅读，并且还可以在页面中设定如“返回首页”之类的链接，这就是书签链接。
！建立书签链接分为两步：第一步建立书签（锚点）；第二部是为书签制作链接（#）。
语法分别如下：
<!-- 1，建立书签 -->
<a name="1">书签显示文字</a>
<a id="1">书签显示文字</a>
<!-- 两种写法 --><!-- 2，为书签建立链接 -->
<a href="#1">目录提示文字</a>实例：将文章正文分为五部分，点击目录可以跳转到不同位置，并在底部设置一个返回顶层的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书签链接示例</title>
</head>
<body>
<!-- 书签链接 -->
<h2><a name="目录">目录</a> </h2>
<p><a href="#1">跳转到标题1</a></p>
<p><a href="#2">跳转到标题2</a></p>
<p><a href="#3">跳转到标题3</a></p>
<p><a href="#4">跳转到标题4</a></p>
<p><a href="#5">跳转到标题5</a></p>
<h1><a name="1">标题1</a></h1>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>第三行</h3>
<h3>第四行</h3>
<h1><a name="2">标题2</a></h1>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>第三行</h3>
<h3>第四行</h3>
<h1><a name="3">标题3</a></h1>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>第三行</h3>
<h3>第四行</h3>
<h1><a name="4">标题4</a></h1>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>第三行</h3>
<h3>第四行</h3>
<h1><a name="5">标题5</a></h1>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>第三行</h3>
<h3>第四行</h3>
<a href="#目录">回到顶部</a>
</body>
</html>
运行：
4，图像的超链接
1，图像的基本链接
对一整个图像文件设置超链接，实现的方法与文本链接类似。语法格式如下：
<a href="链接地址" target="目标窗口的打开方式" ><img src="图片文件地址"></a>- href参数：用来设置图像的链接地址
- 在图像属性中可以添加图像的其他参数，如：height、border、hspace等。
实例：插入两张图片，并为这两张图片分别设置跳转链接为页面2和哔哩哔哩网页。
<a href="页面2.html" target="_blank"><img src="img/头像1.jpg"> </a>
<a href="https://www.bilibili.com/" target="_blank"><img src="img/头像1.jpg"> </a>
2，图像的热区链接
除了像上面那样对整个图像进行超链接的设置以外，还可以将图像划分成不同的区域进行连接设置。而包含热区的图像又称为映射图像。
为图像设置热区链接，有以下两个步骤：
- 首先，在添加图像的<img>标签中使用 usemap属性 添加图像要引用的映射图像的名称，语法格式如下：
<img src="图像地址" usemap="映射图像名称"> - 然后，定义热区图像 以及热区的链接，语法格式如下
<map name="#映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"/> </map>
- 在该语法中，要先定义映射图像的名称，然后再引用这个映射图像。
- <area>标签：是
<map>标签的子元素，需要与<img>标签的usemap属性配合使用。 - shape属性：定义热区形状，有三个取值：
rect 矩形区域 circle 圆形区域 poly 多边形区域 - coords参数：设置热区区域坐标。对于不同的形状，coords的设置方式不同：
- 矩形区域rect：此时coords有四个参数，分别是：left、right、top 和 bottom，可以将这四个参数看做矩形两个对角的点坐标。（也可以理解为x、y、width、height）
- 圆形区域circle：此时coords有三个参数，分别是center-x、center-y 和 tadius可以看做是圆形的圆心坐标（x，y）与半径的值。
- 多边形区域poly：此时设置坐标参数比较复杂，这与多边形的形状息息相关。coords参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y坐标值。由于定义坐标比较复杂而且难以精准控制，一般情况下还需要使用可视化软件进行这种参数的设置。
实例：
<!--设置点击图片左上角区域跳转到B站页面-->
<img src="img/头像1.jpg" usemap="#跳转到B站" height="300" width="300">
<map name="跳转到B站">
<area shape="rect" coords="0,0,150,150" href="https://www.bilibili.com/"/>
</map>
<!--设置点击图片右下角区域跳转到页面2-->
<img src="img/头像2.jpg" usemap="#跳转到页面2" height="300" width="300">
<map name="跳转到页面2">
<area shape="rect" coords="300,300,150,150" href="https://www.bilibili.com/"/>
</map>
