HTML&CSS基础-html的图片标签
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.如下图所示,准备一张图片,存放路径和html文件在同一目录
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLwETN1MjM1YzMtkTN4MzM4AjMwkTMyETOxAjMtQTNyUTO38CXyETOxAjMvwFN1ITN5czLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>尹正杰的网页</title>
<head>
<body>
<h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>
<!--
使用img标签来向网络中引入一个外部图片。img标签也是一个自结束标签。
属性:
src:
设置一个外部图片的路径。目前我们所要使用的路径全都是相对路径。
相对路径:
相对路径指相当于当前资源所在目录的位置
alt:
可以设置图片不能显示时,对图片的描述;
搜索引擎可以通过alt属性来识别不同的图片;
如果不写alt属性,则搜索引擎不会对img中的图片进行收录
width:
可以用来修改图片的宽度,一般使用px(像素)作为单位
height:
可以用来修改图片的高度,一般使用px(像素)作为单位
温馨提示:
宽度和高度两个属性如果指设置一个,另一个也会同时等比例调整大小;
如果两个值同时指定则按照你指定的值来设置
一般开发中除了自适应的页面,不建议设置width和height。
图片的格式:
JPEG(JPG):
JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
一般使用JPEG来保存照片等颜色丰富的图片。
GIF:
GIF支持的颜色少,只支持简单的透明,支持动态图。
图片颜色单一或者动态图可以使用gif
PNG:
PNG支持的颜色多,并且支持复杂的透明
可以用来显示颜色复杂的透明的图片。
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用小的
-->
<img src="./01.jpg" alt="火影忍者" width="800px" height = "700px"/>
</body>
</html>
三.浏览器打开以上代码渲染结果
当你的才华还撑不起你的野心的时候,你就应该静下心来学习。当你的能力还驾驭不了你的目标的时候,你就应该沉下心来历练。问问自己,想要怎样的人生。
欢迎加入基础架构自动化运维:598432640,大数据SRE进阶之路:959042252,DevOps进阶之路:526991186