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后即会显示:
在这里插入图片描述

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

<p><img src="../dog3.jpg" alt="dog3"></p>

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

<p><img src="../../pic/Lucia.png" alt=""></p>

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

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

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

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

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

<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

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基本的HTML操作,来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. 标签:段落标签 8 2.3. 标签:DIY一个标签 8 2.4. 标签:添加标题 9 2.5. 标签:自定义块 10 2.6. 标签:定义头部区域 11 2.7. 标签:定义底部区域 12 2.8. 标签:定义区段 12 2.9. 标签:定义侧边栏区域 13 3. HTML5效果标签 14 3.1. 标签:换行效果 14 3.2. 特殊字符&nbsp;实现空格效果 14 3.3. 标签:水平线效果 15 4. HTML5列表标签 15 4.1. 标签:实现无序列表 15 4.2. 标签:实现有序列表 16 5. HTML5图片,链接&表格标签 16 5.1. 标签:为网页添加图片 16 5.2. 标签:为网页添加超链接 17 5.3. 标签 target属性:在窗口中打开链接 17 5.4. 家族:为网页添加表格 18 5.5. 、、标签:定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签:创建表单,与用户交互 20 6.2. 输入框:文本输入框、密码输入框 22 6.3. :placeholder属性:输入框占位符——输入提示 23 6.4. number类型:数字输入框 23 6.5. url类型:网址输入框 24 6.6. email类型:邮箱输入框 24 6.7. 标签:创建文本域 25 6.8. 标签:为鼠标用户改进可用性 25 6.9. radio/checkbox:单选框、复选框 26 6.10. &标签:创建下拉菜单 27 6.11. submit类型:提交按钮 27 6.12. reset类型:重置表单信息 28 7. CSS3介绍 29 8. CSS3选择器 29 9. CSS3的继承、优先级&重要性 29 10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值