HTML 图像

HTML 图像


1001.jpg

<img> ->image图像


  【必须属性】

        【1】src:地址

        【2】alt:图像替代文本,供探索引擎抓取使用

    【可选属性】

        【1】height:图像高度

        【2】width:图像宽度

        【3】ismap:为图像定义为服务器端图像映射


<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">


alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="../style/images/boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。


height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="300" height="200">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

实例

加一个背景图片:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body background="http://pic.58pic.com/58pic/15/97/99/27W58PICZS7_1024.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>

设置图片的高度和宽度:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body >
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="100" height="100">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="150" height="150">
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body > <p>创建图片链接: <a href="http://www.php.cn"> <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> </body> </html>
提交重置代码