HTML 学习笔记(四)图片

html 复制代码
<!--通过图片标签"<img src = "图片路径">"来调用图片在网页中进行显示-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!--src 属性为图片的地址
            alt 属性规定在图像无法显示时的替代文本。-->
        <p><img src="dog1.jpg" alt="dog1"></p>
        
    </body>
</html>

此时如果你当前目录下(比如你打开文件夹是当前html文件的父文件夹,而该文件夹下)有一张名为dog1.jpg的图片:

Alt+b后即会显示:

如图片在上一级文件夹内则需要用".../"回到上一级文件夹内

html 复制代码
<p><img src="../dog3.jpg" alt="dog3"></p>

当存在多次返回上一级文件夹的情况时需要使用多个".../"

html 复制代码
<p><img src="../../pic/Lucia.png" alt=""></p>

可以直接使用网页中的图片的地址(复制图片地址)

html 复制代码
<p><img src="https://img.zcool.cn/community/0162305dc57ebda801209e1f041f61.jpg@1280w_1l_2o_100sh.jpg" alt="曼珠沙华"></p>

也可以使用绝对路径指定图片,相对于之前多次返回上一级文件夹的方法,这样更加简单明了

html 复制代码
<p><img src="D:\Leisureconfused\Learn\HTML&CSS\dog1.jpg" alt=""></p>

也可使用"title"属性实现当鼠标悬停在图片上时显示出指定文本

html 复制代码
<p align="center"><img src="dog1.jpg" alt="dog1" title="狗头保命"></p>  
<!--title属性是不占据页面空间的,只有当鼠标划入时候才会显示-->

另外,网页中图片的使用格式是有所限制的,可以使用到的格式有:gif,jpg,jpeg,png,bmp和webp这些图片格式中最大的区别的是图片存储的时候是否进行压缩,是有损压缩还是无损压缩,有损压缩是对图像本身的改变,在保存图像时保留了较多的亮度信息,而对于色相、饱和度信息选择与周围像素进行合并。

色相,即各类色彩的相貌称谓,如大红、普蓝、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性,而色相也就是由原色、间色和复色来构成的。

合并的比例的不同,压缩的程度也不同,图像的质量也会相应的下降,从而减少了其在内存和磁盘中的占用。无损压缩即无损耗的压缩,此处不再赘述。

学习视频链接:https://www.bilibili.com/video/BV1oU4y1278g?p=1&vd_source=4ebd25c2806304f7c97c649fe1377493

相关推荐
zmd-zk1 小时前
flink学习(2)——wordcount案例
大数据·开发语言·学习·flink
Chef_Chen1 小时前
从0开始学习机器学习--Day33--机器学习阶段总结
人工智能·学习·机器学习
hopetomorrow2 小时前
学习路之压力测试--jmeter安装教程
学习·jmeter·压力测试
hopetomorrow2 小时前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
/**书香门第*/2 小时前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
美式小田3 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
猫爪笔记3 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
_不会dp不改名_3 小时前
HCIA笔记3--TCP-UDP-交换机工作原理
笔记·tcp/ip·udp
-一杯为品-4 小时前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
风尚云网4 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网