码迷,mamicode.com
首页 > Web开发 > 详细

5、HTML 图像插入及设置

时间:2018-02-02 21:58:37      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:com   高度   bsp   char   alt   默认   页面   文本   gpo   

HTML 图像的插入:

HTML 图像的标签是 <img> ,<img>是空标签,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。

定义图像的语法是:

<img src="url" alt="some_text">
/*URL 指存储图像的位置*/

 

如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为
http://www.runoob.com/images/pulpit.jpg

实例 --->

<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

</body>
</html>

 

 

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

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

 


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

属性值默认单位为像素 --->

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

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

 

 

HTML  图像标签:

<img>    定义图像

<map>     定义图像地图

<area>     定义图像地图中的可点击区域

 

实例 --->

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

 

 

 

5、HTML 图像插入及设置

标签:com   高度   bsp   char   alt   默认   页面   文本   gpo   

原文地址:https://www.cnblogs.com/blackfriday/p/8406558.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!