文章目录

前言
一、图片标签
- 1.图片标签的介绍
- 2.图片标签的src属性
- 3.图片标签的alt属性
- 4.图片标签的title属性
- 5.图片标签的width和height属性
二、路径
- 1.路径的介绍
- 2.绝对路径（了解即可）
- 3.相对路径
总结

前言

媒体标签
图片标签
路径

一、图片标签

1.图片标签的介绍

使用场景：在网页中显示图片
代码：<img src="" alt="">
特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置

2.图片标签的src属性

属性名：src
属性值：目标图片的路径
注意点：当前网页和目标途径要放在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀）；路径有很多种情况，会在后面进行介绍
eg：
” ./ “可以有也可以没有

实践：

属性注意点：
1.标签的属性写在开始标签的内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开，标签名和属性之间必须以空格隔开
5.属性之间没有顺序之分，可以随意排列

3.图片标签的alt属性

属性名：alt
属性值：替换文本
注：当图片加载失败时，才会显示alt文本；加载成功时，不会显示alt文本

4.图片标签的title属性

属性名：title
属性值：提示文本（当鼠标悬停时，才显示的文本）
注：title属性不仅仅用于图片标签，还可以用于其他标签
例子：

5.图片标签的width和height属性

属性名：width和height
属性值：宽度和高度（数字）
注意点：如果只设置了width和height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）；若同时设置了width和height两个，若设置不当图片可能变形
实践：

注：建议width和height属性只需要给出一个值，另一个等比例缩放，可以保证图片不变形

二、路径

1.路径的介绍

场景：页面需要加载图片，需要找到对应的图片
上一节讲了图片与网页放于同一个文件夹中，本节就是讲若是没放在同一个文件夹中如何找到图片
路径可分为：绝对路径（了解）；相对路径（常用）

2.绝对路径（了解即可）

定义：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
eg：

3.相对路径

概念：从当前文件开始出发找目标文件的过程
当前文件：当前的html网页
目标文件：要找到的图片
相对路径分类：同级目录；下级目录；上级目录
1.同级目录：当前文件和目标文件在同一目录中
所以在同一个文件夹中直接写名字即可
代码步骤：直接写目标文件的名字即可
方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">
2.下级目录：目标文件在下级目录中

代码步骤：
首先，先知道在哪个文件夹里面，即知道文件夹名字
然后，进入这个文件夹
最后，写目标文件的名字
eg：<img src="data:images/目标图片.gif">
3.上级目录：目标文件在上级目录中

代码步骤：
首先，先出当前文件夹，到上一级目录中
然后，直接写出目标文件

<img src="../目标图片.gif">

注意：也就是说，如果当前文件在里面，就出来找目标文件，如果当前文件在外面，就进去找目标文件，不需要纠结上级和下级

举个例子：将树的图片放入路径的html中

总结

介绍了图片标签及其各种属性，近一步介绍了路径，方便找到各种情况下的图片

HTML认知06标签学习3相关推荐

ICLR 2022：PiCO，基于对比消歧的偏标签学习丨AI Drive
偏标签学习 (Partial Label Learning, PLL) 是一个经典的弱监督学习问题,它允许每个训练样本关联一个候选的标签集合,适用于许多具有标签不确定性和歧义的的现实世界数据标注场景. ...
综述系列 | 多标签学习的新趋势
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达导读随着Deep learning领域的不断发展,我们面对的问题 ...
1，html常用标签学习
1.html常用标签学习: 1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显 ...
9大数据集6大度量指标完胜，周志华等提出深度森林处理多标签学习
2019-11-25 11:01:57 选自arXiv 机器之心编译参与:路雪.一鸣近日,南大周志华等人首次提出使用深度森林方法解决多标签学习任务.该方法在 9 个基准数据集.6 个多标签度量指标上 ...
最新综述：多标签学习的新趋势
这里给大家带来一篇武大刘威威老师.南理工沈肖波老师和 UTS Ivor W. Tsang 老师合作的 2020 年多标签最新的 Survey,我也有幸参与其中,负责了一部分工作. 论文链接: http ...
router-link标签学习
router-link标签学习 1.指定跳转路由,to属性  <router-link to="/home">Home& ...
HTML-form标签学习_015
HTML-form标签学习 HTML 中 <form> 元素表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息. 可以用 :valid 和:invalid CS ...
论文阅读笔记——Multi-Label Learning with Global and Local Label Correlation（具有全局和局部标签相关性的多标签学习）
目录方法一.低秩矩阵二.矩阵填充三.矩阵分解四.模型 (1)利用标签相关性:使用标签相关性来规范模型: (2)全局和局部标签相关性可能共存,引入标号流形正则化来合并全局和局部标签: (3)学 ...
MIML系列(一):Fast Multi-Instance Multi-Label Learning 快速多示例多标签学习
MIML系列(一):Fast Multi-Instance Multi-Label Learning 快速多示例多标签学习目前的研究方向是基于MIML的,然而网上关于MIML的论文讲解有点少,因 ...

HTML认知06标签学习3

文章目录

前言

一、图片标签

1.图片标签的介绍

2.图片标签的src属性

3.图片标签的alt属性

4.图片标签的title属性

5.图片标签的width和height属性

二、路径

1.路径的介绍

2.绝对路径（了解即可）

3.相对路径

总结

HTML认知06标签学习3相关推荐

最新文章

热门文章