HTML5 img图片 标签
HTML <img> 标签
实例
在下面的例子中，我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片：
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
以上代码的效果：
亲自试一试
（您可以在页面底部找到更多实例）
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有浏览器都支持 <img> 标签。
定义和用法
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
延伸阅读：如何正确地使用图像
HTML 与 XHTML 之间的差异
在 HTML 中，<img> 标签没有结束标签。
在 XHTML 中，<img> 标签必须被正确地关闭。
在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本。 |
| src | URL | 规定显示图像的 URL。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height |
|
定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width |
|
设置图像的宽度。 |
全局属性
<img> 标签支持 HTML 中的全局属性。
事件属性
<img> 标签支持 HTML 中的事件属性。
实例
在下面的例子中，我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片：
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
以上代码的效果：
亲自试一试
（您可以在页面底部找到更多实例）
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有浏览器都支持 <img> 标签。
定义和用法
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
延伸阅读：如何正确地使用图像
HTML 与 XHTML 之间的差异
在 HTML 中，<img> 标签没有结束标签。
在 XHTML 中，<img> 标签必须被正确地关闭。
在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本。 |
| src | URL | 规定显示图像的 URL。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height |
|
定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width |
|
设置图像的宽度。 |
全局属性
<img> 标签支持 HTML 中的全局属性。
事件属性
<img> 标签支持 HTML 中的事件属性。
HTML5 img图片 标签相关推荐
- HTML5之图片标签
图片标签:用于向当前页面中引入一个外部图片 使用img标签来引入外部图片,img标签是一个自结束标签 img属于替换元素(介于块元素和行内元素之间,具有两种元素的特点) (1)属性: -src 指定的 ...
- HTML5 图片标签 img
图片标签 img 属性:src图片路径 height图片高度 width图片宽度 border图片边框 align对齐方式(只有left 和 right) alt ...
- 小红书 标签 HTML5,html5仿小红书的图片标签功能
最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼. 上传页示例如下图: 可以看到最上面的①是展示区域,也是编辑标签的操作区域:中间②是可滑动的缩略图,在此选择要编辑 ...
- html5 aside图片,HTML5标签：aside元素的使用方法及作用
html元素 标签是html5中新增标签,通常作为页面或全站的侧边栏,可放置相关的提示说明.文章列表.广告条目.栏目导航等附属信息:下面就一起了解标签标签的用法及作用吧. 标签定义 标签通常放置当前页 ...
- web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容 安装HBuilderX 一.HTML 创建第一个HTML页面 写完html后如何测试 写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
- 简单的字幕效果html,7种HTML5 Figure图片字幕标题特效
这是一款效果非常酷的HTML5 Figure图片字幕标题特效jQuery插件.该插件可以将任何图片元素转换为带标题的HTML figure元素.它内置了7种不同的图片标题效果.当标题文字高于图片时,还 ...
- php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
- 图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置 相对路径 * 以.开头的路径 ...
- 移动前端html5 head 头标签
移动前端不得不了解的html5 head 头标签 2015-01-11 01:04 7965人阅读 评论(2) 收藏 举报 目录(?)[+] 本文主要内容来自一丝的常用的 HTML 头部标签和百度FE ...
最新文章
- 实例介绍,如何在开发中将各层日志归类输出.
- Query Layer介绍
- python字符串函数的find方法_Python string模块 字符串函数方法操作教程
- tornado框架介绍
- Livecoin交易所被盗BTC与3天前EXMO被盗BTC转入同一地址
- 多台Linux服务器SSH相互访问无需密码
- android 使用shell模拟触屏_android命令行模拟输入事件（文字、按键、触摸等）
- 论文查重软件检测报告怎么看？
- php怎么更换图片背景颜色,照片换底色红色变白色怎么变 怎么换照片底色
- 李鸿章六百多字参倒豪门重臣，晚清第一奏折，藏尽顶级权谋话术！
- js内置对象方法笔记
- Android之多媒体视频的播放和录制
- 图像处理：图像特效之油画效果
- 发布文章出现请勿使用默认标题
- 层次低的人有什么特点
- Material Design学习总结
- 从初学者的角度看Solr概述
- android storyboard,iOS中xib与storyboard原理，与Android界面布局的异同
- JMeter jp@gc - stepping thread group插件
- 无为才能够无不为－曾仕强