AniShort AI短剧协同制作平台剧云中文短剧剧本制作平台 LiblibAI 图片视频多模态创作 Seko AI短剧一键生成成片

PHP MySQL jquery HTML CSS

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础- 4个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 HTML - XHTML HTML 多媒体 HTML 插件 HTML 音频(Audio) HTML 视频（Videos）  <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> - <h6> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <html> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML 教程- (HTML5 标准)

HTML 媒体

HTML 多媒体 HTML 插件 HTML 音频(Audio) HTML 视频（Videos）

HTML 标签

<!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> - <h6> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <html> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML 开发手册

更新时间2022-04-11

HTML <img> 标签实例如何插入图像： <img src='smiley.gif' alt='Smiley face' height="42" width="42"> 尝试一下 »（更多实例见页面底部）浏览器支持所有主..

HTML <img> 标签

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42">

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

浏览器支持

所有主流浏览器都支持 <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 已废弃。规定图像周围的边框。
crossoriginNew	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 的事件属性。

尝试一下 - 实例

从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>插入来自一个文件夹的图片:</p>
<img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39">

<p>插入来自一个网站的图片::</p>
<img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15">

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图片链接:
<a href="http://www.w3cschool.cc">
<img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0">
</a>
</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/580979883b949162.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 对象

相关视频

免费