图片引入标签

img标签：图片标签

图片：img标签定义html页面中的图像

语法：

<img src=””alt=””>

属性：

src属性：（必须属性）

作用：用于指定图像文件的路径和文件名

alt属性：

作用：用来指定替换的文本，当图片加载失败，显示该文字对图像进行替换，有利于用户体验

title属性：

作用：当鼠标悬停在图片上，鼠标的右下角出现对应文字，对图片进行解释说明，有利于用户体验

width/height属性：

作用：用于指定图片的宽度/高度

注意：如果只指定宽或高其中的一个，另一个值按照原比例缩放

默认样式：

多张图片在一行显示

图片之间有间隙——换行会被解析成空格

默认产生下间隙

路径：images文件夹存放图片，找图片时，就需要通过路径来描述图片文件的位置

URL——统一资源定位符

绝对路径：

网络上的绝对路径：http://…png

本地绝对路径：C:\Users\…1.jpg

特点：绝对URL始终指向同一位置，无论在何处使用

注意：在链接到同一个网站的其他位置时，应该尽可能使用相对路径；链接到另外一个网站时，需要使用绝对链接

相对路径：

指是由这个文件所在的位置为参考基础，而建立出的目录关系，常用的描述路径的方法：当前目录、上级目录、下级目录

当前目录：

语法：./ 如果引用的文件和当前文件处在同一级./可以省略

上级目录：

语法：../

下级目录：

语法：/

图片下间隙产生的原因

父元素没有设置高度，由图片撑开，就会存在间隙

解决方法：

给img的父元素设置高度，高度和图片的高度一致

给img的父元素设置font-size:0;或者line-height: 0;

给img标签转换为块级元素：display:block;

给img标签设置垂直对齐方式：vertical-align: middle/top/bottom;

a标签：超链接标签

默认样式：

不独占一行

自带下划线、字体颜色

默认当前窗口打开

属性：

href属性：

作用：指定链接的跳转地址

target属性：

作用：指定目标地址的打开方式

取值：

_self 默认值：当前窗口打开

_blank 新建窗口打开

title属性：

作用：定义提示文本，当鼠标悬停在链接上时会显示，提示工具

下载链接href里面是一个文件或者压缩包

单页面锚点跳转

概述：当我们点击锚点链接时，可以快速定位到页面中的某个位置

语法：

跳转链接：<a href=”#id名称”>内容</a>

目标点：<开始标签 id=”id名称”>内容</结束标签>

多页面锚点跳转

语法：

跳转链接：<a href=”页面路径#id名称”>内容</a>

目标点：路径页面