HTML图像标签
学习目标
HTML 图像标签介绍
img 元素向网页中嵌入一幅图像，注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
图像标签的语法
图像标签的语法：
<img src="./img.jpg" alt="Logo" width="300px" height="300px" title="logo">
- src属性：规定显示图像的 URL也就是路径地址。
- alt属性：规定图像的替代文本在图像不能加载的时候替代的文字。
- width属性：设置图像的宽度。
- height属性：设置图像的高度。
- title属性：鼠标移动到图片上的提示信息。
图像标签的使用方法
在网页中引入logo并设置宽度高度和替换文字。
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./img.jpg" alt="Logo" width="200px" height="100px">
</body>
</html>
src和href的区别
- src需要等待图片加载完成，在继续加载其他内容。
- href可以一边加载文件，一边加载其他内容。
注：面试易考点。
div标签包裹img标签多出3px问题
在我们使用div标签包裹img标签的时候，在图片的底部就会多出3px。
原因：img元素会默认添加空白符
解决办法：
1.设置div{ font-size: 0}
2.设置img{ display: block}或者{ display: table}
3.设置img{ vertical-align:top;}
推荐第二种方法，让img对象成为块级元素。
课程总结
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
