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

图片

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

效果图:

相关推荐
niech_cn10 分钟前
项目启动运行npm run dev报错digital envelope routines::unsupported at new Hash
前端·npm·哈希算法
shchojj13 分钟前
cuda的3DArray和TextureObject
前端
Daydreamer1018 分钟前
学习笔记——PLCT汪辰:开发RISC-V上的操作系统(持续更新)
笔记·学习·risc-v
OpenTiny社区21 分钟前
重磅更新!Fluent Editor 开源富文本支持 LaTeX 可编辑公式啦~
前端·ui·开源·opentiny
地球空间-技术小鱼29 分钟前
2024-Calculate-gentoo安装fcitx拼音输入法
linux·运维·服务器·学习
豆豆29 分钟前
如何选择企业网站模版来搭建网站?
服务器·开发语言·前端·php·软件构建
小白菜学前端31 分钟前
Threejs 材质贴图、光照和投影详解
前端·3d·three.js
浮华似水1 小时前
Docker入门系列——Docker-Compose
前端
真的很上进1 小时前
⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
java·前端·javascript·react.js·前端框架·vue·es6
小牛itbull1 小时前
ReactPress 安装指南:从 MySQL 安装到项目启动
前端·javascript·数据库·mysql·react.js·开源·reactpress