本文共 3323 字，大约阅读时间需要 11 分钟。

一. 图片标签

图像标签<img>和源属性（Src）

在 HTML 中，图像由<img>标签定义。

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

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg

1. 属性

图片标签用于向当前页面中引入一个外部图片

使用标签<img>来引入外部图片，img标签是一个自结束标签

img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

属性：

src属性指定的是外部图片的路径(路径规则和超链接是一样的)alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示    搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录width 图片的宽度（单位是像素）height 图片的高度    - 宽度和高度中如果只修改了一个，则另一个会等比缩放注意：    一般情况在pc端，不建议修改图片大小，需要多大的图片就裁剪多大    但在移动端，经常需要对图片进行缩放（大图缩小）

结果：

2. 图片的格式：

jpeg（jpg）

- 支持颜色比较丰富，不支持透明效果，不支持动图   - 一般用来显示照片

gif

- 支持的颜色比较少，支持简单透明，支持动图    - 适合单一图片，动图

png

- 支持颜色丰富，支持复杂透明，不支持动图   - 颜色丰富，复杂透明图片（专为网页而生）

webp

- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式   - 它具备其他图片格式的所有优点，而且文件还特别小   - 缺点：兼容性不好

base64

- 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片   - 一般都是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的

效果不一样，用效果好的

3. 图片的路径

相对路径

html 相对路径的写法：

./		：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的 ../	：代表文件所在的父级目录 ../../	：代表文件所在的父级目录的父级目录 /		：代表文件所在的根目录

绝对路径

例如：

4. 背景图片

很多个人博客或主页中，会直接使用图片作为背景，这样设计可以很好的突出网页主体

    
           
       
HTML5 + CSS + JS --- HTML网页图片背景
    
   
    
       
gif、jpg、png格式图片均可用作HTML页面背景
    
如果图像小于页面, 图像会自动进行重复
​

5. 图片对齐

在HTML网页中，图片和文字一样可以设置对齐方式，这样就可以根据需要对图片进行排列了

基本语法：

    
               
HTML5 + CSS + JS --- HTML网页中图片对齐
    
   
    
       
图像  底部对齐（默认缺省方式）
    
   
    
图像  中部对齐
    
   
    
图像  顶部对齐
    
   
    
注意: bottom对齐方式是默认的对齐方式。
​

6. 设置图片与周围对象的间距

默认情况下，图片与周围对象的水平间距和垂直间距都为0

基本语法：

7. 设置图片的边框

默认情况下，插入的图片是没有边框的

基本语法：

6. 浮动图片

在HTML网页中，浮动图片也是很常用的一种方法，这样就可以根据需要将图片放置在不同的位置了

    
               
HTML5 + CSS + JS --- HTML网页中浮动图片
    
   
    
       
                以上带有图像的一个段落,图像的align属性设置为"left".
        图像将浮动到文本的左侧.
    
    
   
    
                以上带有图像的一个段落,图像的align属性设置为"right".
        图像将浮动到文本的右侧.
    
​

7. HTML的href和src的区别

href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

例如：
   

浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。

---

src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

例如:

当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

---

简而言之，

src 用于替换当前元素； href 用于在当前文档和引用资源之间建立联系。

二. 图片的热区域链接

热点区域主要用于图像地图，通过定义标记可以在图像地图中设定作用区域，这样鼠标移动到指定区域单击时，会自动链接到预先设定好的页面

定义热点区域需要在img标签元素内使用usemap属性将该图像定义为客户端图像映射，这里的图像映射指的是带有可单击区域的图像

然后将usemap属性与map标签的元素name或id属性相关联，以建立<img>与<map>之间的关系

<map>标签元素就是带有可单击区域的图像映射，在map标签元素内通过area标签元素定义具有区域参数

首先，img标签中usemap属性与map元素的name或id属性相关联，以建立img与map之间的关系。

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）,herf表示此图片区域链接到的位置

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

2、圆形：(圆心坐标为(X1,y1)，半径为r)

3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)

1. 图片超链接

    
               
HTML5 + CSS + JS --- HTML超链接<a>之图片超链接
    
       
   
            
     
                  
Chrome Browser
                  
FireFox Browser
                  
Safari Browser
             
             
                  
                                                                
                  
                                                                
                  
                                                                
             
        
   

三. 图像标签

标签	描述
	定义图像
	定义图像地图
	定义图像地图中的可点击区域

转载地址：http://taxzi.baihongyu.com/