记录学习HTML day2（1.10）

目录

学习HTML标签

图片标签

初步使用src,alt,height,width的代码与成效

绝对路径和相对路径的介绍和用法

下级目录

上级目录

图片标签的举例代码与实际成效

---

学习HTML标签

图片标签

代码：<img src="  "  alt="  " title=“ ” width=“ ” height=“ ”>

src中包含的是图片的属性名

alt里面的内容 当图片加载失败时，才显示alt的文本；当图片加载成功时，不会显示alt的文本

title是当鼠标悬停时才显示的文本

width与hight为图片高与宽

注意：

1.标签的属性必须写在开始标签内部；标签上可以同时存在多个属性

2.属性之间要以空格膈开；标签名与属性之间必须以空格隔；属性之间没有顺序之分

3.任何标签的属性都有默认值，省略该属性则取默认值

初步使用src,alt,height,width的代码与成效

 

绝对路径和相对路径的介绍和用法

绝对路径：带有盘符的路径: C:\Users\HTML学习\HTML学习\cat.jpg

或者是完整的网址

相对路径: 从当前文件开始出发找目标文件的过程，分类：同级目录，上级目录，下级目录

同级目录：如果页面与图片同一级目录，直接写目标文件的名字

例如<img src="图片.gif">

下级目录

如果图片在同级目录（例如：study）文件夹之下

步骤：

1.找到文件夹名字

2.写出目标文件的属性

例如：<img src="stude/图片.gif">

上级目录

如果图片在同级目录（例如：study）文件夹之上

步骤：

1.首先去目标文件所在的目录。去上一级目录的方法（../）

2.直接在路径后面写目标文件的名字

图片标签的举例代码与实际成效

注：通过文件夹名 / 可以来到下一级目录，通过../ 可以来到上一级目录
       我们开发中用的最多的是相对路径，因为相对路径的可移植性比绝对路径更强