学习html过程中练习创建包含图文的新闻类网页,发现图片标签无效(新闻文字内容来源网络,侵删)
vscode显示图片为二进制文件,不能打开的问题
自己检查网页代码许久没有发现问题,在浏览器也没有找到与我相似的问题,将项目完整发给老师后,老师发现换张图片就可以正常实现功能,后发现我修改过图片格式(原图片来源于网络,下载下来后是.bmp的后缀,为方便使用我修改后缀为.jgp,但在该代码中无法正常使用)。
后来我换了原后缀名为.png的图片发现代码确实能够正常实现功能,老师也告诉我不要随便改后缀名。
(之前改的可以正常使用,我对此表示有些疑惑,老师也只是跟我讲了这句话,没有问出原由,请问有大佬可以告知吗?)
修改后代码
<!Doctype html>
<html>
<head>
<meta charset=" utf-8">
<title>标题</title>
<style>
#header {
background-color: white;
padding: -100px;
}
#nav {
background-color: white;
height: 300px;
width: 400px;
float: left;
}
#nav2 {
width: 310px;
height: 300px;
float: left;
}
#mav {
width: 300px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div>
<div id="header">
<h2 style="color: rgb(87, 87, 194);font-size:30px;">北京新闻
<sub>
<font size="5" color="#cecece">LOCAL NEWS</font>
</sub>
</h2>
</div>
</div>
<div>
<div id="nav">
<ul>
<li><b>疫情之后的首场重大国际活动为什么是它?</b></li>
<li>“太热太重了”,开学“第一课”小朋友体验消防员...</li>
<li>北京植物园3.2公顷海棠结果,公园提醒:可观可...</li>
<li>顺义这小区楼门上,竟盘踞着马蜂窝!</li>
<li>北京服务业扩大开放升级4.0版,有哪些冲突?商...</li>
<li>街头没车押金不退!但是,小黄车却仍在押金扣费......</li>
<li>“丹宸永固——紫禁城简称六百年"展亮相故宫博物院</li>
<li>北京将建设全区首个高级别自动驾驶示范区</li>
</ul>
</div>
<div>
<div id="nav2">
<h3>新闻图片</h3>
<img src="pic.png" width="300" height="200">
<p><button><a href="Untitled-1.html">建筑历史学者刘妍:木拱廊桥频繁重建,其原因基本是火毁或水毁</a></button></p>
</div>
<div id="mav">
<h3>新闻资讯</h3>
<ul>
<li>北京婴幼儿健康素养核心知识“八知八会”</li>
<li>北京升级版电子眼10天抓拍开车看手机和不</li>
<li>延庆九眼楼 万里长城中最大空心敌台盛装</li>
<li>密云区荣获北京市青少年鑫桥杯“中华魂”主题教</li>
<li>2022年冬奥会北京赛区10个场馆年内完工 年...</li>
<li>北京旅游必去的三大景点</li>
<li>丰台小v蜂再添新成员</li>
</ul>
</div>
</div>
</div>
</body>
</html>