img，br标签以及img标签的路径问题

img，br标签以及img标签的路径问题

img标签

1.img标签中的img其实是英文image的缩写
所以img标签的作用, 就是告诉浏览器我们需要显示一张图片

2.img标签格式: <img src="" alt="">
其实img标签中的src是英文source的缩写
所以img标签中的src就是用来告诉img标签, 需要显示的图片名称

3.注意点

• 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行
• 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
• 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形

4.img中的其它属性
width: 宽度
height: 高度
所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高, 那么系统会按照指定的宽高来显示

title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容

<img src="images/QRCode.jpg" width="100" height="478" title="这个是鹏哥的微信二维码图片" alt="对不起, 你需要查看的图片不见了">

img标签的路径问题

路径问题
其实想给src属性赋值有两种方式
1.通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

1.1同级
同级就是"图片"和".html文件"存储在同一个文件夹中
格式: src=“QRCode.jpg”
含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

1.2下级
下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
格式: src=“images/QRCode.jpg”
含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹
然后再在images文件夹中找到名称叫做QRCode.jpg的图片

1.3上级
上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
格式: src="…/QRCode.jpg"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg
其中**…/**代表找到当前文件夹的上一级文件夹

2.通过绝对路径赋值(了解)
绝对路径就是每次都从指定的盘符开始查找

格式: src=“C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg”
含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片

注意:
1.路径中不要出现中文, 否则可能出现未知问题
2.如果是通过"相对路径"来指定图片, 不能跨盘符
2.1例如.html文件在C盘, 那么不能去查找D盘图片

<img src="QRCode.jpg">
<img src="images/QRCode.jpg">
<img src="../QRCode.jpg">
<img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg" >

br标签

br标签, 如何在HTML中换行? 可以使用br标签

1. br标签作用: 换行
2. br标签格式:
   
3. br标签的注意点:
   3.1多个br标签可以连续使用, 使用了多少个br标签就会换多少行
   3.2由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

<br>