HTML之图片和超链接的学习记录

htmledit_views">

图片

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们只需要掌握它的三个属性：src、alt和title。

html"><img src="" alt="" title="" />

src用于指定图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

所谓的图片路径，指的就是图片地址，这两个叫法是一样的意思。任何一个图片必须指定src属性才可以显示。src属性是img标签必不可少的属性。

alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。

所谓相对路径，指的是图片相对当前页面的位置（好好琢磨这句话）。

绝对路径，指的是图片在你的电脑中的完整路径。

在实际开发中，站内文件不管是图片还是超链接等，我们都使用相对路径，几乎不会用绝对路径。

7.3.1 位图位图，又叫“像素图”，它是由像素组成的图片。将位图放大后，图片会失真；缩小图片后，位图同样也会失真。在实际开发中，最常见位图的图片格式有三种（可以从图片后缀名看出来）：.jpg（或.jpeg）、.png和.gif。深入理解这三种图片适合在哪种情况下使用，是非常重要的。.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，.jpg体积较大，并且不支持透明。.png是一种无损格式，可以无损压缩以保证页面打开速度。此外，.png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。.gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ发的动图都是.gif格式的。也就是说，如果想要展示色彩丰富而高品质图片，可以使用.jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用.png格式；如果是动画图片，可以使用.gif格式。

练习过程代码：

html"><!DOCTYPE html>
<html><head><title>图片</title><meta charset="utf-8"/><!-- 这里使用CSS为表格加上边框 --> </head><bady><img src="D:\xuanwomingren.png" alt="鸣人" width="400px" height="300px"/><p>故意输入一个错误的图片地址，测试图片加载失败的情况</p><img src="a:aaaaaa" alt="鸣人" width="400px" height="300px"/><p>加上title属性，测试鼠标悬停显示图片标题的情况</p><!-- 使用相对路径，图片与该html文件在同一层 --><img src="xuanwomingren.png" alt="鸣人" title="漩涡鸣人"  width="400px" height="300px"/><br><!-- 在网页中，图片格式有两种：一种是“位图”，另外一种是“矢量图”。下面我们来简单介绍一下。 --><!-- 位图：是一种以像素为单位的图像，它由像素点组成，每个像素点都对应一个颜色。矢量图：是一种以矢量图形为单位的图像，它由矢量图形组成，每个矢量图形都对应一个颜色。矢量图在放大时，不会产生锯齿，位图在放大时，会产生锯齿 --><img src="zuozhu.gif" alt="佐助gif" /><br/><img src="Qzuozhu.jpg" alt="佐助jpg" width="400px" height="300px"/><br/><img src="xuanwomingren.png" alt="鸣人" title="漩涡鸣人"  width="400px" height="300px"/></bady>
</html>

效果图：

后面三个效果图就不放了

超链接：

在HTML中，我们可以使用a标签来实现超链接。

语法：

<a href="链接地址">文本或图片</a>

想要实现锚点链接，需要定义两个。目标元素的id。a标签的href属性指向该id。其中，id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面中不允许出现相同的id。

练习过程代码：

html"><!DOCTYPE html>
<html><head><title>图片</title><meta charset="utf-8"/><!-- 这里使用CSS为表格加上边框 --> </head><bady><!-- 文本超链接 --><a href="http://www.baidu.com">百度</a> <br/><!-- 图片超链接 --><a href="http://www.baidu.com"><img src="baidu.png" width="200" height="200"/></a><br/><!-- 默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。 --><a href="http://www.baidu.com" target="_blank">百度</a><br/><a href="http://www.baidu.com" target="_parent">百度</a>   <br/><a href="http://www.baidu.com" target="_top">百度</a>   <br/><!-- 内部链接 --><a href="writeFromMemory.html">跳转页面</a><br/><!-- 有些页面内容比较多，导致页面过长，用户需要不停拖动浏览器上的滚动条才可以查看内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。 --><!-- 在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到“当前页面”的某一部分。 --><div ><a href="#link">推荐链接</a><a href="#music">推荐音乐</a><a href="#movie">推荐电影</a></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="link"><h3>推荐链接</h3><ul><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.baidu.com">百度</a></li></ul></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="music"><h3>推荐音乐</h3><ul><li>林俊杰-被风吹过的夏天</li><li>曲婉婷-在我歌声里</li><li>许嵩-灰色头像</li></ul></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="movie"><h3>推荐电影</h3><ul><li>猪猪侠</li><li>蜘蛛侠</li><li>复仇者联盟</li></ul></div></bady>
</html>

效果图：