HTML基础知识(5)
媒体标签
1.1.1图片标签的介绍
➢ 场景:在网页中显示图片
➢ 代码:
<img src=“” alt=“”>
➢ 特点:
• 单标签
• img标签需要展示对应的效果,需要借助标签的属性进行设置!
1.1.2图片标签结构
➢ 标签的完整结构图:
➢ 属性注意点:
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分
1.1.3图片的标签属性src
➢ 属性名:src
➢ 属性值:目标图片的路径
➢ 注意点:
➢ 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
➢ 路径的情况有很多,稍后会详细介绍
1.1.4图片的标签属性alt
➢ 属性名:alt
➢ 属性值:替换文本
• 当图片加载失败时,才显示alt的文本
• 当图片加载成功时,不会显示alt的文本
1.1.5图片的标签属性title
➢ 属性名:title
➢ 属性值:提示文本
• 当鼠标悬停时,才显示的文本
➢ 注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
1.1.6图片的标签属性wight和hight
➢ 属性名:width和height
➢ 属性值:宽度和高度(数字)
➢ 注意点:
• 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个,若设置不当此时图片可能会变形
➢ wight和hight属性在图片标签中只需要给出一个值,另一个就会等比例缩放,好处就是图片不变形
2.1.1路径
路径的介绍:
➢ 场景:页面需要加载图片,需要先找到对应的图片
➢ 类似于:生活中两个人,我要去找你,需要通过一定的路径才能找到!
➢ 同理:页面需要找到图片,也是需要通过路径才能找到
➢ 路径可分为:
• 绝对路径(了解)
• 相对路径(常用)
2.1.2绝对路径(了解)
➢ 绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
➢ 例如:
• 盘符开头:D:\day01\images\1.jpg
• 完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
2.2.1相对路径(常用)
➢ 概念普及:
• 当前文件:当前的html网页
• 目标文件:要找到的图片
➢ 相对路径:从当前文件开始出发找目标文件的过程
➢ 相对路径分类:
• 同级目录
• 下级目录
• 上级目录
2.2.2相对路径—同级目录
➢ 同级目录:当前文件和目标文件在同一目录中
➢ 类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)
• 生活中:两个人独处一室,我想找你,直接喊名字即可!
➢ 代码步骤:直接写目标文件的名字即可
• 方法一:
<img src="目标图片.gif">
方法二:
<img src="./目标图片.gif">
➢ VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!
2.2.3相对路径—下级目录
➢ 下级目录:目标文件在下级目录中
➢ 类似于:我在大厅,你累了去卧室休息了,我现在要找到你!
1. 先知道你去了哪一个房间 → 房间名:卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
➢ 代码步骤:
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
<img src="img/目标图片.gif">
➢ VS Code快捷操作:直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!
2.2.4相对路径—上级目录
上级目录:目标文件在上级目录中
类似于:乾坤大挪移,我在卧室,你还在大厅,我现在要找到你!
1. 先要出卧室,来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
➢ 代码步骤:
1. 先出当前文件夹,到上一级目录 → ../(返回上几级就加几个.)
2. 此时看到目标文件直接喊她 → 直接写目标文件
<img src="../目标图片">
➢ VS Code快捷操作:直接敲../后,会自动提示上级目录下有文件,直接选择即可!
2.2.5路径小节
➢ 相对路径有哪三种情况:
• 同级目录:直接写:目标文件名字!
• 下级目录:直接写:文件夹名/目标文件名字!
• 上级目录:直接下:../目标文件名字!
➢ VSCode中路径的快捷操作?
• 同级和下级目录:./ 之后选择即可
• 上级目录:../ 之后选择即可
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/25.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论