JPG图片
GIF图片
PNG图片
例
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> 试一试» 始终指定的图像的宽度和高度。 如果没有指定宽度和高度，页面闪烁的图像加载时间。
HTML语法图片
在HTML中，图像与定义<img>标记。
所述<img> tag是空的，它仅包含属性，并且不具有关闭标签。
在src属性指定的URL (web address)的图像：
<img src=" url " alt=" some_text ">该alt属性
的alt属性指定的图像的替代文本，如果不能被显示的图像。
的alt属性提供了一种用于图像替代信息，如果由于某种原因，一个用户不能观看它（因为较慢的连接，在一个错误src属性，或者如果用户使用屏幕阅读器）。
如果浏览器无法找到一个图像，它会显示alt文本：
该alt属性是必需的。 一个网页不能没有它正确验证。
HTML屏幕阅读软件
屏幕阅读器是一种软件程序，可以读出什么是显示在屏幕上。
屏幕阅读器是人谁是盲人，视障或学习障碍有用。
屏幕阅读器可以读取alt属性。
图像尺寸 - 宽度和高度
您可以使用style属性来指定图像的宽度和高度。
的值以像素为单位指定(use px after the value) ：
另外，您也可以使用width和height属性。 在这里，值在默认情况下，像素规定：
宽度和高度或风格？
无论是宽度，高度和样式属性是最新的HTML5标准有效。
我们建议您使用的style属性。 它可以防止样式表从变化的图象的原始尺寸：
例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> 试一试» 在另一个文件夹图片
如果没有指定，浏览器希望找到图像中的同一文件夹中的网页。
然而，常见的是存储在一个子文件夹的图像。 然后，您必须包括文件夹名称src属性：
另一个服务器上的图像
有些网站的图像存储图像的服务器上。
其实，你可以从世界上任何网址访问图片：
动画图片
该GIF标准允许动画图像：
请注意，插入动画图像的语法没有来自非动画图像不同。
使用图像作为链接
使用图像作为连结，只要巢<img>的内部标签<a>标签：
例
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> 试一试» 添加"border:0;" 防止IE9 (and earlier)从图像周围显示边框。
图片浮动
使用CSS的float属性，让图像浮动。
图像可以漂浮到右边或文本的左边：
例
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> 试一试» 影像地图
使用<map>标签来定义图像映射。 图像映射是可点击区域的图像。
该name的属性<map>标签与相关联的<img>的属性USEMAP并创建图像和地图之间的关系。
所述<map>标签包含了一些<area>标记，它定义在图像映射的可点击区域：
例
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<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> 试一试» 章节总结
- 使用HTML <img>元素来定义的图像
- 使用HTML src属性来定义图像的URL
- 使用HTML alt属性来定义的替代文本的图像，如果它不能被显示
- 使用HTML width和height属性来定义所述图像的大小
- 使用的CSS width和height属性来定义图像的大小(alternatively)
- 使用CSS的float属性让图像浮动
- 使用HTML <map>元素来定义图像映射
- 使用HTML <area>元件在图像地图来定义可点击区域
- 使用HTML <img>的元素usemap属性指向一个图像映射
加载图像需要时间。 大图片就可以在网页慢下来。 请谨慎使用图像。
测试自己与练习！
HTML图像标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像映射 |
| <area> | 定义图像地图内的可点击区域 |