HTML中图像标签img

mg标签的应用场景

我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。

img标签的组成

src：图片的路径这个是必须要有的

title：当我们把鼠标移动到图片上展示的文本内容

alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容

width：设置图片的宽度

height：设置图片的高度

img标签的使用

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<pre>

../:代表上一级目录

../../：上上级目录

当前目录中的文件夹下使用：文件夹名称/图片名称

上n级目录下的n级文件夹：n个../+n个文件夹的名称直到找到图片文件为止

</pre>

<img src="img/章泽天.png" title="这是同一目录中文件夹下的图片"><img src="../田馥甄.png" width="350"

height="300" title="这是上一级目录中的图片">

</body>

</html>

浏览器预览效果图

以上就是img图片标签的简单应用

例

带有项目和描述的描述列表：

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

浏览器支持

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

标签定义及使用说明

<dd> 标签被用来对一个描述列表中的项目/名字进行描述。

<dd> 标签与 <dl> （定义一个描述列表）和 <dt> （定义项目/名字）一起使用。

在 <dd> 标签内，您能放置段落、换行、图片、链接、列表等等。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dd> 标签被用来描述一个定义列表中的条目。

在 HTML5 中，<dd> 标签被用来描述一个描述列表的项目/名字。

全局属性

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

事件属性

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

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签 img 以及和他相关的属性。

1.使用方法

<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">

2.属性

src：指定我们要加载的图片的路径和图片的名称以及图片格式。
width：指定图片的宽度，单位px、em、cm、mm。
height：指定图片的高度，单位px、em、cm、mm。
border：指定图标的边框宽度，单位px、em、cm、mm。
title：当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字,也就是鼠标悬停时显示的内容。
alt：如果图像没有下载或者加载失败，会用文字来代替图像显示；搜索引擎可以通过这个属性的文字来抓取图片。

3.注意

img 为单标记，不需要使用 img 闭合
在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片

4.举例

<img src="img/gzh.jpg" width="200px" height="200px" border="3px" title="码海无际" alt="二维码"><img src="img/gzh.jp" width="200px" height="200px" border="3px" title="码海无际" alt="二维码">

在线咨询

上一篇：一行代码实现网页全自动翻译
下一篇：HTML 文本格式化

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商