html5的img不是块级元素。img是行内元素，同时也属于替换元素，具有内置的宽高属性，所以img标签可以设置宽和高。img属于行内替换元素，height、width、padding、margin均可用，效果等于块元素。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

标签的基本使用

浏览器支持

所有主流浏览器都支持标签

标签定义及使用说明

标签定义 HTML 页面中的图像标签有两个必需的属性：src 和 alt强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式究竟是什么元素是行内元素还是块级元素？标签没有独占一行，所以是行内元素，这没啥问题

既然是行内元素为什么能够设置宽高呢？

这个问题就要引申出下面部分了，标签属于替换元素，具有内置的宽高属性，所以可以设置，具体解释看下面。元素的定义

从元素本身的特点来讲，可以分为不可替换元素和替换元素

元素相关的MDN解释

不可替换元素

(X)HTML的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)如：

我是标题

可替换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等(X)HTML中的、、、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素如：<img src="https://www.xinnet.com/xinzhi/63/tigger.jpg"/>、<input type="submit" name="Submit" value="提交"/>可替换元素的性质同设置了display:inline-block的元素一致特殊的可替换元素<img>属于可替换元素<img>同时具有行内元素，行内块，和块级元素的特性替换元素一般有内在尺寸，所以具有width和height，可以设定例如你不指定<img>的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度对于表单元素，浏览器也有默认的样式，包括宽度和高度<img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素<p>推荐教程：《html视频教程》</p><p><br /></p></p> </div> <div class="tags"> </div> <div class="copytip"> <p>html5的img是块级元素吗由讯客互联<a href="/zx/" target="_blank">网络资讯</a>栏目发布，感谢您对<a href="https://www.xkfenlei.com" target="_blank">讯客互联</a>的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“<a href="https://xkfenlei.com/news/619.html" title="html5的img是块级元素吗" target="_blank">html5的img是块级元素吗</a>”</p> </div> </div> <div class="nextpage"> <!-- <p class="prev"><span>上一篇</span><br> <a href="/news/618.html">一文讲解Wordpress插件怎么查找并安装</a></p> <p class="next"><span>下一篇</span><br> <a href="/news/620.html">css3中设置文本的行高属性是什么</a></p> --> </div> </div> <div class="related-list"> <h3 class="shugang">推荐文章</h3> <ul> <li><a href="/news/1106.html" title="有哪些话一听就知道一个程序员是个水货？"><i><img src="/0pic/yc_307.jpg" alt="有哪些话一听就知道一个程序员是个水货？"></i> <p>有哪些话一听就知道一个程序员是个水货？</p> </a></li> <li><a href="/news/803.html" title="mysql怎样转换数据类型"><i><img src="/0pic/yc_275.jpg" alt="mysql怎样转换数据类型"></i> <p>mysql怎样转换数据类型</p> </a></li> <li><a href="/news/1140.html" title="有什么行为习惯昭示着你是个编程大佬？"><i><img src="/0pic/yc_85.jpg" alt="有什么行为习惯昭示着你是个编程大佬？"></i> <p>有什么行为习惯昭示着你是个编程大佬？</p> </a></li> <li><a href="/news/369.html" title="阿里云轻量应用服务器的功能概览"><i><img src="/0pic/yc_412.jpg" alt="阿里云轻量应用服务器的功能概览"></i> <p>阿里云轻量应用服务器的功能概览</p> </a></li> <li><a href="/news/10516.html" title="小程序商城的直播系统具有哪些优势"><i><img src="/0pic/yc_279.jpg" alt="小程序商城的直播系统具有哪些优势"></i> <p>小程序商城的直播系统具有哪些优势</p> </a></li> <li><a href="/news/1109.html" title="为什么学编程都建议不要用拼音命名？"><i><img src="/0pic/yc_160.jpg" alt="为什么学编程都建议不要用拼音命名？"></i> <p>为什么学编程都建议不要用拼音命名？</p> </a></li> <li><a href="/news/517.html" title="jQuery 已“死”？为清除技术债，我"><i><img src="/0pic/yc_354.jpg" alt="jQuery 已“死”？为清除技术债，我"></i> <p>jQuery 已“死”？为清除技术债，我</p> </a></li> <li><a href="/news/10540.html" title="合理运用小程序营销，快速吸引精准用户！"><i><img src="/0pic/yc_142.jpg" alt="合理运用小程序营销，快速吸引精准用户！"></i> <p>合理运用小程序营销，快速吸引精准用户！</p> </a></li> </ul> </div> </div> </div> <div class="aside l_box"> <div class="side_bar" id="side-hot-view-item"> <div class="side-tit"> <h3 class="function_t">热门文章</h3> </div> <ul> <li class="widlist"> <a href="/news/308.html" target="_blank" title="手机端微信突然弹出电脑端已登录，是什么原"> <i class="gx"> <img src="/0pic/yc_129.jpg" alt="手机端微信突然弹出电脑端已登录，是什么原"> </i> </a> <h3> <a href="/news/308.html" target="_blank" title="手机端微信突然弹出电脑端已登录，是什么原">手机端微信突然弹出电脑端已登录，是什么原</a> </h3> <div class="sidefoot"> <span>2024-09-25 18:59:01</span> </div> </li> <li class="widlist"> <a href="/news/448.html" target="_blank" title="网站被百度误判为危险网站，站长应该怎样去"> <i class="gx"> <img src="/0pic/yc_195.jpg" alt="网站被百度误判为危险网站，站长应该怎样去"> </i> </a> <h3> <a href="/news/448.html" target="_blank" title="网站被百度误判为危险网站，站长应该怎样去">网站被百度误判为危险网站，站长应该怎样去</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:44:02</span> </div> </li> <li class="widlist"> <a href="/news/133.html" target="_blank" title="jquery如何获取元素标签"> <i class="gx"> <img src="/0pic/yc_211.jpg" alt="jquery如何获取元素标签"> </i> </a> <h3> <a href="/news/133.html" target="_blank" title="jquery如何获取元素标签">jquery如何获取元素标签</a> </h3> <div class="sidefoot"> <span>2024-09-25 18:01:02</span> </div> </li> <li class="widlist"> <a href="/news/460.html" target="_blank" title="鹅厂最新开源 WebComponent "> <i class="gx"> <img src="/0pic/yc_205.jpg" alt="鹅厂最新开源 WebComponent "> </i> </a> <h3> <a href="/news/460.html" target="_blank" title="鹅厂最新开源 WebComponent ">鹅厂最新开源 WebComponent </a> </h3> <div class="sidefoot"> <span>2024-09-25 19:48:01</span> </div> </li> <li class="widlist"> <a href="/news/489.html" target="_blank" title="搜索引擎优化的技巧和步骤"> <i class="gx"> <img src="/0pic/yc_324.jpg" alt="搜索引擎优化的技巧和步骤"> </i> </a> <h3> <a href="/news/489.html" target="_blank" title="搜索引擎优化的技巧和步骤">搜索引擎优化的技巧和步骤</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:58:01</span> </div> </li> <li class="widlist"> <a href="/news/485.html" target="_blank" title="抖音优化排名关键词搜索优化，到底有没有作"> <i class="gx"> <img src="/0pic/yc_99.jpg" alt="抖音优化排名关键词搜索优化，到底有没有作"> </i> </a> <h3> <a href="/news/485.html" target="_blank" title="抖音优化排名关键词搜索优化，到底有没有作">抖音优化排名关键词搜索优化，到底有没有作</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:56:01</span> </div> </li> <li class="widlist"> <a href="/news/449.html" target="_blank" title="关键词指数是什么意思？怎么用关键词指数挖"> <i class="gx"> <img src="/0pic/yc_492.jpg" alt="关键词指数是什么意思？怎么用关键词指数挖"> </i> </a> <h3> <a href="/news/449.html" target="_blank" title="关键词指数是什么意思？怎么用关键词指数挖">关键词指数是什么意思？怎么用关键词指数挖</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:44:02</span> </div> </li> <li class="widlist"> <a href="/news/1448.html" target="_blank" title="大气互联网企业官网HTML5模板 - S"> <i class="gx"> <img src="/0pic/yc_36.jpg" alt="大气互联网企业官网HTML5模板 - S"> </i> </a> <h3> <a href="/news/1448.html" target="_blank" title="大气互联网企业官网HTML5模板 - S">大气互联网企业官网HTML5模板 - S</a> </h3> <div class="sidefoot"> <span>2024-09-26 01:17:01</span> </div> </li> <li class="widlist"> <a href="/news/450.html" target="_blank" title="网站停更会影响排名吗？网站停止更新后的后"> <i class="gx"> <img src="/0pic/yc_215.jpg" alt="网站停更会影响排名吗？网站停止更新后的后"> </i> </a> <h3> <a href="/news/450.html" target="_blank" title="网站停更会影响排名吗？网站停止更新后的后">网站停更会影响排名吗？网站停止更新后的后</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:45:02</span> </div> </li> <li class="widlist"> <a href="/news/368.html" target="_blank" title="阿里云轻量应用服务器的套餐配置、数据盘以"> <i class="gx"> <img src="/0pic/yc_349.jpg" alt="阿里云轻量应用服务器的套餐配置、数据盘以"> </i> </a> <h3> <a href="/news/368.html" target="_blank" title="阿里云轻量应用服务器的套餐配置、数据盘以">阿里云轻量应用服务器的套餐配置、数据盘以</a> </h3> <div class="sidefoot"> <span>2024-09-25 19:19:01</span> </div> </li> </ul> </div> </div> </div> </div> <!--baidu_push_js--> <script type="text/javascript"> (function() { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--baidu_push_js--> <footer> <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">皖ICP备09001001号</a></p> </footer> <span id="go-to-top"></span> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/common_zx.js?t=1675041140"></script> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/superslide.js?t=1675040906"></script> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/sticky.js?t=1675040906"></script> <script> $(document).ready(function() { $(".aside").theiaStickySidebar({ additionalMarginTop: 0 }) }); </script> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> <script type="text/javascript">var root_dir="";var ey_u_switch=1;var ey_aid=619;</script> <script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?t=v1.6.2"></script> </body> </html>