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

news2024/12/23 14:20:12

图片

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

<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格式。

练习过程代码：

<!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。

练习过程代码：

<!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>

效果图：