大家好，欢迎来到IT知识分享网。
一、img标签
1、img标签的作用：用来告诉浏览器我们需要显示一张图片
2、img标签格式：<img src = ” xxx.jpg”>
— img标签中的src是英文source的缩写，src 是用来告诉img标签，需要显示的图片名称
3、注意点：
— 和H系列标签、P标签、Hr标签不一样，img标签不会独占一行
4、img标签的属性
width：宽度
height：高度
— img标签中的width和height 这两个属性的作用：是用来告诉标签将来需要显示的图片的宽和高
— 如果 img 标签没有指定需要现实的图片宽高，那么系统会按照图片默认的宽高显示
— 如果img 标签指定了宽高，那么系统会按照指定的宽高显示
— 如果我们手动指定了img标签的宽高，有可能导致图片变形；如果想指定宽高的图片不变形，可以指定宽度或高度的其中一个值即可，只要指定其中一个值（高 / 宽 ），系统会自动根据该值计算出对应的宽 / 高，并且等比拉伸，不会变形
title：用来告诉浏览器，当鼠标悬停在图片时显示的内容
alt ：是英文alternate的缩写，用来告诉浏览器当需要显示的图片找不到时显示的内容
二、img标签路径问题：想给src属性赋值有2种方式
1、通过相对路径赋值：
— 相对路径就是每次都是从.html文件所在文件夹开始查找
1.1 同级：是图片存放的位置和.html文件存储在同一个文件夹中，
格式：src = “Figure_1.png”
含义：在.html文件所在的文件夹中查找名称叫做Figure_1.png的图片
1.2 下级 ：是存储图片的文件夹和.html文件在同一个文件夹中
格式：src = “Images/Figure_1.png”
含义：在.html文件所在的文件夹中查找名称叫做Images的文件夹中找到名称叫做Figure_1.png的图片
1.3上级：存储图片的位置在存储.html的文件夹的上一级
格式：src = “../Figure_1.png”
含义：在.html文件所在的文件夹中查找这个文件夹的上一级文件夹，然后再在这个上一级文件夹中找到名称叫做Figure_1.png的图片
2、通过绝对路径赋值
— 绝对路径就是每次都从指定的盘符开始查找
三、br标签
1、作用：用来换行
2、格式：<br>
3、注意点：
— 多个br标签可以连续使用，使用了多少个br标签就会换多少行
— 由于html的作用是用来给文本添加语义，而br标签的语义是不另外起一个段落换行，在企业开发中，一般情况下，需要换行都是因为需要另外起一个段落，所以企业开发中很少用br标签
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下，你就知道了</title> </head> <body> <!--只设置了img标签的src属性，其他默认--> <img src="Figure_1.png"><br> <p>设置了img标签的src、width、height属性，但宽高不是等比拉伸</p> <p><img src="Figure_1.png" width="300" height="478"></p> <P>设置了img标签的src、width</P> <P><img src="Figure_1.png" width="100"></P> <P>设置了img标签的src、height属性</P> <P><img src="Figure_1.png" height="178"></P> <P>设置了img标签的src、height属性</P> <P><img src="Figure_1.png" height="178" title="这是随便找的图片"></P> <P><img src="Figure_12.png" width="100" alt="你找的图片去到外太空了"></P> </body> </html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31215.html
