整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
如何插入图像：
<imgsrc="smiley-2.gif"alt="Smiley face"width="42"height="42">
浏览器支持
所有主流浏览器都支持 <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 | topbottommiddleleftright | 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 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。
src：图片的路径 这个是必须要有的
title：当我们把鼠标移动到图片上展示的文本内容
alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容
width：设置图片的宽度
height：设置图片的高度
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <pre> ../:代表上一级目录 ../../：上上级目录 当前目录中的文件夹下使用：文件夹名称/图片名称 上n级目录下的n级文件夹：n个../+n个文件夹的名称直到找到图片文件为止 </pre> <img src="奶茶妹妹.png" width="500" height="300" title="这是同一个目录下的图片"><br> <img src="" alt="对不起，图片走丢了"> <img src="img/章泽天.png" title="这是同一目录中文件夹下的图片"><img src="../田馥甄.png" width="350" height="300" title="这是上一级目录中的图片"> <img src="../img/高圆圆.png" title="这是上级目录中某个文件夹下的图片"> </body> </html> |
浏览器预览效果图
以上就是img图片标签的简单应用
常用的图像格式—GIF，PNG，JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下：
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。
相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
例如：
<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />
相对路径设置分为以下三种：
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />。
绝对路径
绝对路径一般是指带有盘符的路径。
例如：
“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
原文链接：https://blog.csdn.net/dubaiqaq/article/details/103500345
*请认真填写需求信息，我们会在24小时内与您取得联系。
