关于HTML5的img标签
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">HTML5 <img> 标签</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">如何插入图像：</a></li><li><a href="#_lab2_0_1">浏览器支持</a></li><li><a href="#_lab2_0_2">标签定义及使用说明</a></li><li><a href="#_lab2_0_3">HTML 4.01 与 HTML5之间的差异</a></li><li><a href="#_lab2_0_4">HTML 与 XHTML 之间的差异</a></li><li><a href="#_lab2_0_5">属性</a></li><li><a href="#_lab2_0_6">全局属性</a></li><li><a href="#_lab2_0_7">事件属性</a></li><li><a href="#_lab2_0_8">尝试一下 - 实例</a></li><li><a href="#_lab2_0_9">支持的图像格式</a></li><li><a href="#_lab2_0_10">与 CSS 的交互</a></li></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>HTML5 <img> 标签</h2><p class="maodian"><a name="_lab2_0_0"></a></p><h3>如何插入图像：</h3>
<p>实例</p>
<p>HTML5 <img>标签用于向网页中添加相关图片。</p>
<div class="jb51code"><pre class="brush:xhtml;"><img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
</pre></div>
<p><a href="https://www.w3cschool.cn/tryrun/showhtml/tryhtml_image_test" rel="external nofollow" target="_blank">尝试一下 » </a></p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>浏览器支持</h3>
<p>所有主流浏览器都支持 <img> 标签。</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>标签定义及使用说明</h3>
<ul><li><img> 标签定义 HTML 页面中的图像。</li><li><img> 标签有两个必需的属性：src 和 alt。</li></ul>
<p><strong>注释：</strong>从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。</p>
<p><strong>提示：</strong>通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。</p>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>HTML 4.01 与 HTML5之间的差异</h3>
<p>HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。</p>
<p>在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。</p>
<p class="maodian"><a name="_lab2_0_4"></a></p><h3>HTML 与 XHTML 之间的差异</h3>
<p>在 HTML 中，<img> 标签没有结束标签。</p>
<p>在 XHTML 中，<img /> 标签必须被正确地关闭。</p>
<p class="maodian"><a name="_lab2_0_5"></a></p><h3>属性</h3>
<p>New ：HTML5 中的新属性。</p>
<table style="width:717px"><tbody><tr><td style="text-align:center; width:113px">属性</td><td style="text-align:center; width:108px">值</td><td style="text-align:center; width:448px">描述</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-align.html" rel="external nofollow">align</a>(已废弃)</td><td style="text-align:center; width:108px">top<br />bottom<br />middle<br />left<br />right</td><td style="text-align:center; width:448px">HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-alt.html" rel="external nofollow">alt</a></td><td style="text-align:center; width:108px">text</td><td style="text-align:center; width:448px">规定图像的替代文本。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-border.html" rel="external nofollow">border</a>(已废弃)</td><td style="text-align:center; width:108px">pixels</td><td style="text-align:center; width:448px">HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。</td></tr><tr><td style="height:42px; text-align:center; width:113px">crossoriginNew</td><td style="height:42px; text-align:center; width:108px">anonymous<br />use-credentials</td><td style="height:42px; text-align:center; width:448px">设置图像的跨域属性</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-height.html" rel="external nofollow">height</a></td><td style="text-align:center; width:108px">pixels</td><td style="text-align:center; width:448px">规定图像的高度。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-hspace.html" rel="external nofollow">hspace</a>(已废弃)</td><td style="text-align:center; width:108px">pixels</td><td style="text-align:center; width:448px">HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-ismap.html" rel="external nofollow">ismap</a></td><td style="text-align:center; width:108px">ismap</td><td style="text-align:center; width:448px">将图像规定为服务器端图像映射。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-longdesc.html" rel="external nofollow">longdesc</a>(已废弃)</td><td style="text-align:center; width:108px">URL</td><td style="text-align:center; width:448px">HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-src.html" rel="external nofollow">src</a></td><td style="text-align:center; width:108px">URL</td><td style="text-align:center; width:448px">规定显示图像的 URL。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-usemap.html" rel="external nofollow">usemap</a></td><td style="text-align:center; width:108px">#mapname</td><td style="text-align:center; width:448px">将图像定义为客户器端图像映射。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-vspace.html" rel="external nofollow">vspace</a>(已废弃)</td><td style="text-align:center; width:108px">pixels</td><td style="text-align:center; width:448px">HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。</td></tr><tr><td style="text-align:center; width:113px"><a href="https://www.w3cschool.cn/htmltags/att-img-width.html" rel="external nofollow">width</a></td><td style="text-align:center; width:108px">pixels</td><td style="text-align:center; width:448px">规定图像的宽度。</td></tr></tbody></table>
<p class="maodian"><a name="_lab2_0_6"></a></p><h3>全局属性</h3>
<p><img> 标签支持 HTML 的全局属性。</p>
<p class="maodian"><a name="_lab2_0_7"></a></p><h3>事件属性</h3>
<p><img> 标签支持 HTML 的事件属性。</p>
<p class="maodian"><a name="_lab2_0_8"></a></p><h3>尝试一下 - 实例</h3>
<p><a href="https://www.w3cschool.cn/tryrun/showhtml/tryhtml_image_diffloc" rel="external nofollow" target="_blank">从不同的位置插入图片</a> 本例演示如何将其他文件夹或服务器的图片显示到网页中。</p>
<p><a href="https://www.w3cschool.cn/tryrun/showhtml/tryhtml_image_link" rel="external nofollow" target="_blank">制作图像链接</a> 本例演示如何将图像作为一个链接使用。</p>
<p><a href="https://www.w3cschool.cn/tryrun/showhtml/tryhtml_areamap" rel="external nofollow" target="_blank">创建图像地图</a> 本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。</p>
<p class="maodian"><a name="_lab2_0_9"></a></p><h3>支持的图像格式</h3>
<p>HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 </p>
<p>Gecko 支持：</p>
<div class="jb51code"><pre class="brush:xhtml;">JPEG
GIF
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO</pre></div>
<p class="maodian"><a name="_lab2_0_10"></a></p><h3>与 CSS 的交互</h3>
<p>关于 CSS，<img> 是一个 替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用 vertical-align: baseline 时，图像的底部将会与容器的基线对齐。</p>
頁:
[1]