img标签的应用场景
我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较不舒服，这时我们想要让我们的网页更美丽更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。
img标签的组成
src：图片的路径 这个是必须要有的
title：当我们把鼠标移动到图片上展示的文本内容
alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容
width：设置图片的宽度
height：设置图片的高度
img标签的使用
源代码
|
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>图像标签</title> </head> <body> <pre> ../:代表上一级目录 ../../：上上级目录 当前目录中的文件夹下使用：文件夹名称/图片名称 上n级目录下的n级文件夹：n个../+n个文件夹的名称直到找到图片文件为止 </pre> <img src=”奶茶妹妹.png” width=”500″ height=”300″ title=”这是同一个目录下的图片”><br> <img src=”” alt=”对不起，图片走丢了”> <img src=”img/章泽天.png” title=”这是同一目录中文件夹下的图片”><img src=”../田馥甄.png” width=”350″ height=”300″ title=”这是上一级目录中的图片”> <img src=”../img/高圆圆.png” title=”这是上级目录中某个文件夹下的图片”> </body> </html> |
浏览器预览效果图
以上就是img图片标签的简单应用
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
