2. 科技
    3. 018-html图像

    018-html图像

    科技2025-12-02  15

    1. 通过使用html, 可以在文档中显示图像。

    2. 图像标签(<img />)和源属性(src)

    2.1. 在html中, 图像由<img />标签定义。

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

    2.3. 定义图像的语法是:

    <img src="url" />

    2.4. URL指存储图像的位置。如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中, 那么其URL为http://www.w3school.com.cn/images/boat.gif。

    3. 替换文本属性(alt)

    3.1. alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat" />

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

    3.3. src属性和alt属性是<img />标签的两个必需属性。

    3.4. 为图片显示替换文本例子

     3.4.1. 代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>为图片显示替换文本</title> <meta charset="utf-8" /> </head> <body> <p>仅支持文本的浏览器无法显示图像, 仅仅能够显示在图像的"alt"属性中指定的文本。在这里, "alt"的文本是"向左转"。</p> <p>请注意, 如果您把鼠标指针移动到图像上, 大多数浏览器会显示"alt"文本。</p> <img src="eg_goleft.gif" alt="向左转" /> <p>如果无法显示图像, 将显示"alt"属性中的文本:</p> <img src="eg_goleft123.gif" alt="向左转" /> </body> </html>

     3.4.2. 效果图

    4. 必需的属性

    5. 可选的属性

    6. 图像标签

    7. <area>标签

    7.1. 定义和用法

     7.1.1. <area>标签定义图像映射中的区域(注: 图像映射指得是带有可点击区域的图像)。

     7.1.2. area元素总是嵌套在<map>标签中。

     7.1.3. 注释: <img>中的usemap属性可引用<map>中的id或name属性(由浏览器决定, 一般用id), 所以我们需要同时向<map>添加id和name两个属性。

    7.2. <area>属性

     7.2.1. 必需的属性

     7.2.2. 可选的属性

    8. <map>标签

    8.1. 定义和用法

     8.1.1. 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

    8.2. <map>属性

     8.2.1. 必需的属性

     8.2.2. 可选的属性

    9. 图像映射例子

     9.1. imgae_map_area.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>行星</title> <meta charset="utf-8" /> </head> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="eg_planets.jpg" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释: </b>img元素中的"usemap"属性引用map元素中的"id"或"name"属性(根据浏览器), 所以我们同时向map元素添加了"id"和"name"属性。</p> </body> </html>

     9.2. sun.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>太阳</title> <meta charset="utf-8" /> </head> <body> <img src="eg_sun.gif" width="99px" height="98px" alt="sun" /> </body> </html>

     9.3. mercur.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>水星</title> <meta charset="utf-8" /> </head> <body> <img src="eg_mercur.gif" width="100px" height="100px" alt="mercur" /> </body> </html>

     9.4. venus.html

    <!DOCTYPE html> <html> <head> <title>金星</title> </head> <body> <p><img border="0" src="eg_venus.gif" width="100px" height="100px"></p> </body> </html>

    9.5. 效果图

    Processed: 0.021, SQL: 9