我爱自学网 > HTML/CSS > HTML 教程 > HTML 标签 > HTML <img> 标签 访问量:

HTML <img> 标签

<上一篇:HTML <iframe> 标签 下一篇:HTML <input> 标签 >
HTML <img> 标签
<img> 标签用于展示 HTML 页面中的图像,使得页面能够“图文并茂”。您可以在本站的编程实战中学习如何给页面添加图片。
实例1:如何插入图像
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网(http://www.5azixuewang.com)</title> 
</head>
<body>
 
<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自我爱自学网的图像:</p>
<img src="http://www.5azixuewang.com/images/logo.png" alt="runoob.com" width="336" height="69">
 
</body>
</html>

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 <img> 标签。


标签定义及使用说明

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性:src 和 alt。

注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示:通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档的链接。


HTML 4.01 与 HTML5之间的差异

HTML5 中不支持以下属性:align、border、hspace、longdesc、vspace。

在 HTML 4.01 中,以下属性:align、border、hspace、vspace 已废弃。


HTML 与 XHTML 之间的差异

在 HTML 中,<img> 标签没有结束标签。

在 XHTML 中,<img> 标签必须被正确地关闭。


属性

New :HTML5 中的新属性。

属性 描述
align top
bottom
middle
left
right
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin anonymous
use-credentials
设置图像的跨域属性
height pixels 规定图像的高度。
hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。


全局属性

<img> 标签支持 HTML 的全局属性。


事件属性

<img> 标签支持 HTML 的事件属性。


在线实例

HTML实例

实例2:从不同的位置插入图片

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网(http://www.5azixuewang.com)</title> 
</head>
<body>
 
<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自我爱自学网的图像:</p>
<img src="http://www.5azixuewang.com/images/logo.png" alt="runoob.com" width="336" height="69">
 
</body>
</html>

本例演示如何将其他文件夹或服务器的图片显示到网页中。
实例4:排列图片

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网(http://www.5azixuewang.com)</title> 
</head>
<body>
 
<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>
 
<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>
 
<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>
 
<p><b>注意:</b>在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>
 
</body>
</html>

本例演示如何在文字中排列图像。

实例5:浮动图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网(http://www.5azixuewang.com)</title> 
</head>
<body>
 
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>
 
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的右边。
</p>
 
<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性,在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>
 
</body>
</html>

本例演示如何使图片浮动至段落的左边或右边。

实例6:创建图像链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网(http://www.5azixuewang.com)</title> 
</head>
<body>
 
<p>创建图片链接:
<a href="http://www.5azixuewang.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
 
<p>无边框的图片链接:
<a href="http://www.5azixuewang.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
 
</body>
</html>

本例演示如何将图像作为一个链接使用。

实例7:创建图像映射

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我爱自学网(http://www.5azixuewang.com)</title>
</head>
<body>
 
<p>点击太阳或其他行星,注意变化:</p>
 
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
 
</body>
</html>

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


相关文章

HTML 教程:HTML 图像

HTML DOM 参考手册: Image 对象

<上一篇:HTML <iframe> 标签 下一篇:HTML <input> 标签 >
本章内容:
1. HTML <!--...-->注释标签
2. HTML <!DOCTYPE> 声明
3. HTML <a> 标签
4. HTML <abbr> 标签
5. HTML <acronym> 标签
6. HTML <address> 标签
7. HTML <applet> 标签
8. HTML <area> 标签
9. HTML <article> 标签
10. HTML <aside> 标签
11. HTML <audio> 标签
12. HTML <b> 标签
13. HTML <base> 标签
14. HTML <basefont> 标签
15. HTML <bdi> 标签
16. HTML <bdo> 标签
17. HTML <big> 标签
18. HTML <blockquote> 标签
19. HTML <body> 标签
20. HTML <br> 标签
21. HTML <button> 标签
22. HTML <canvas> 标签
23. HTML <caption> 标签
24. HTML <center> 标签
25. HTML <cite> 标签
26. HTML <code> 标签
27. HTML <col> 标签
28. HTML <colgroup> 标签
29. HTML <command> 标签
30. HTML <datalist> 标签
31. HTML <dd> 标签
32. HTML <del> 标签
33. HTML <details> 标签
34. HTML <dfn> 标签
35. HTML <dialog> 标签
36. HTML <dir> 标签
37. HTML <div> 标签
38. HTML <dl> 标签
39. HTML <dt> 标签
40. HTML <em> 标签
41. HTML <embed> 标签
42. HTML <fieldset> 标签
43. HTML <figcaption> 标签
44. HTML <figure> 标签
45. HTML <font> 标签
46. HTML <footer> 标签
47. HTML <form> 标签
48. HTML <frame> 标签
49. HTML <frameset> 标签
50. HTML <head> 标签
51. HTML <header> 标签
52. HTML <hgroup> 标签
53. HTML <h1>-<h6> 标签
54. HTML <hr> 标签
55. HTML <i> 标签
56. HTML <iframe> 标签
57. HTML <img> 标签
58. HTML <input> 标签
59. HTML <ins> 标签
60. HTML <kbd> 标签
61. HTML <keygen> 标签
62. HTML <label> 标签
63. HTML <legend> 标签
64. HTML <li> 标签
65. HTML <link> 标签
66. HTML <main> 标签
67. HTML <map> 标签
68. HTML5 <mark> 标签
69. HTML <menu> 标签
70. HTML <meta> 标签
71. HTML <meter> 标签
72. HTML <nav> 标签
73. HTML <noframes> 标签
74. HTML <noscript> 标签
75. HTML <object> 标签
76. HTML <ol> 标签
77. HTML <optgroup> 标签
78. HTML <option> 标签
79. HTML <output> 标签
80. HTML <p> 标签
81. HTML <param> 标签
82. HTML <pre> 标签
83. HTML <html> 标签
84. HHTML <picture> 元素
85. HTML <progress> 标签
86. HTML <q> 标签
87. HTML <rp> 标签
88. HTML <rt> 标签
89. HTML <ruby> 标签
90. HTML <s> 标签
91. HTML <samp> 标签
92. HTML <script> 标签
93. HTML <section> 标签
94. HTML <select> 标签
95. HTML <small> 标签
96. HTML <source> 标签
97. HTML <span> 标签
98. HTML <strike> 标签
99. HTML <strong> 标签
100. HTML <style> 标签
101. HTML <sub> 标签
102. HTML <summary> 标签
103. HTML <sup> 标签
104. HTML <table> 标签
105. HTML <tbody> 标签
106. HTML <td> 标签
107. HTML <textarea> 标签
108. HTML <tfoot> 标签
109. HTML <th> 标签
110. HTML <thead> 标签
111. HTML <time> 标签
112. HTML <title> 标签
113. HTML <tr> 标签
114. HTML <track> 标签
115. HTML <tt> 标签
116. HTML <u> 标签
117. HTML <ul> 标签
118. HTML <var> 标签
119. HTML <video> 标签
120. HTML <wbr> 标签