HTML回顾2

<div>和<span>标签

<div><span>标签是没有语义的，他它们只是一个盒子，是用来装内容的。

<div></div> div是division的缩写，表示分割，分区，

<span><span> span意为跨度，跨距。

<div>标签用来布局，但是一行只能放一个<div>。

<span>标签用来布局，一行可以使用多个<span>

图像标签和路径（重点）

[if !supportLists]1、[endif]图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

Src 是<img>标签的必须属性，它用于制定图像文件的路径和文件名。

属性属性值说明

Src图片路径必须属性

Alt文本替换文本，图像不能显示的文字

Title文本提示文本，鼠标放在图像上，显示的文字

Width像素设置图像的宽度

Height像素设置图像的高度

Border像素设置图像的边框粗细

图像标签属性的注意事项：

[if !supportLists]1、[endif]图像标签可以拥有多个属性，必须卸载标签名的后面。

[if !supportLists]2、[endif]属性之间不分先后顺序，标签名和属性，属性和属性之间均以空格分开。

[if !supportLists]3、[endif]属性采取键值对的格式，即key=“value”的形式，属性=“属性值”。

[if !supportLists]2、[endif]路径（铺垫）

[if !supportLists]（1）[endif]目录文件夹和根目录

目录文件夹：就是一个普通的文件夹，里面存放了我们做页面所需要的相关素材，比如HTML文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

[if !supportLists]（2）[endif]VSCode打开目录文件夹

用VScode打开文件夹，选择目录文件夹，后期非常方便管理文件。

在页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图片文件，这时候再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

[if !supportLists]1. [endif]相对路径：以引用文件所在的位置为参考基础，而建立的目录路径

简单来说：就是图片相对于HTML页面的位置

相对路径分类符号说明

同一级路径图像文件位于HTML文件的同一级 <img src=”baidu.gif”/>

下一级路径/图像文件位于HTML文件的下一级 <img src= “imgs/baidu.gif”/>

上一级路径../图像文件位于HTMl文件的上一级 <img src =”../baidu.gif”/>

[if !supportLists]2. [endif]绝对路径：指的是目录下的绝对位置，直接到达目标位置，通常是盘符开始的路径。