文章标题

网页上使用的图片主要格式是gif和jpg两种。

在网页中使用图片，从视觉效果而言，能使网页充满生机，并且直观表达了网页的主题，这不是靠文字可以做到的。

1. img标签及其属性

将e.jpg图片放在所编辑html同级目录下。
将d.jpg图片放在所编辑html父级目录下。

1.1 src:资源，图片路径

路径划分，不区分”\”,”/”，两种符号都可以。但保证时英文字符。

路径可有两种书写方式,

方式一：绝对路径

windows：从盘符开始。
<img src="D:\WebstormProjects\images\e.jpg">
mac：系统不区分盘，获得绝对路径可以通过查看资源简介，复制位置信息获得。
<img src="/Users/zhanghuakai/WebstormProjects/untitled/e.jpg">

方式二：相对路径
相对于所编辑html文件,同级目录可直接访问，父目录可食用..表示，如下

<--1. 同级目录-->
<img src="e.jpg">
<--或-->
<img src="./e.jpg">

<--2.父目录-->
<img src="../d.jpg">

方式三：网络路径，有的也将网络路径归为绝对路径

<--1. 引用网络图片：复制图片链接即可获得图片地址-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492837274633&di=fb7db64d0aba18bb5541bb8a3994babb&imgtype=0&src=http%3A%2F%2Fandroid-wallpapers.25pp.com%2Ffs01%2F2014%2F10%2F05%2F2000_bc2bea0062ea49ef800a22fdbdeb2ff0_900x675.jpg"/>
<--2. tomacat访问本地图片-->
<img src="locahost:">

注：webstorm在打开网页时会单独建立服务器，只能访问工程文件夹下的资源，所以如果要使用绝对路径，则需要在Finder中打开html文件。控制台切换到Terminal，输入命令 open .即可快速打开工程文件夹

1.2 height：width

• height： 控制图片的高度
• width：控制图片的宽度

值有两种表现形式
方式一：纯数值，单位是像素
方式二：百分比数值，代表相对当前窗口宽度的百分比。只对width有作用，height设置值为百分比不起作用，width值设为百分比后，不需要制定height的值，图片大小会根据浏览器宽度的变化而变化。

<img src="./e.jpg" width="50%">

1.3 border：图片的边框

默认为黑色，只能通过css或超链改变颜色。如

    <!--默认黑色-->
    <img src="./e.jpg" width="50%" border="10">
    <!--css改变颜色-->
    <img src="./e.jpg" width="50%" border="10" style="color: aquamarine">
    <!--超链改变颜色-->
    <a style="color: fuchsia"><img src="./e.jpg" width="50%" border="10"/></a>

1.4 alt:当图片不存在的时候显示的文字

<img src="../e.jpg" width="50%" border="10" style="color: aquamarine" alt="beauty">

1.5 title:鼠标悬浮，提示文字

所有标签都有的属性，将鼠标悬停在标签区域上，就会弹出title信息。主要img标签应用多

    <img src="./e.jpg" width="50%" title="this is a photo">

1.4 :控制图片相对于图片基线居于上，中，下

align: top,center,bottom

1.5: 结合marquee标签把文字变成图片即可。

<marquee align="left" bgcolor="#FFFF00" direction="left" behavior="alternate" width="400" hspace="1" scrollamount="2" scrolldelay="1" vspace="1" loop="-1">
  <img src="mn3.jpg" width="120" height="200"/>
  <img src="mn4.jpg" width="120" height="200"/>
  <img src="mn5.jpg" width="120" height="200"/>
  </marquee>

2 <a></a>超链接

有三种链接形式

2.1 外部链接，链接到外部文件。

<a href="e.jpg">顶部</a>
<--当然文字可以换成img等标签。href的值可以是其他网页-->

2.2 锚链接，链接到本页和某页面特定位置。

锚，就是想要跳转到的地方的标记，需要用name标识

a： 链接到当前网页特定位置

锚：在页面顶部
<a href="e.jpg" name="top">顶部</a>

链接：写在页面底部
    <a href="#top">底部</a>

b： 链接其他网页的某个元素
同级目录创建another.html,body内加入

<a name="another"><img src="./e.jpg" width="50%"></a>

在原网页文件中加上

<a name="top"><img src="./e.jpg" width="50%">打开another.html</a>

打开原网页，点击打开原网页即可链接过去。

target： 链接到其他网页，会使用target属性。用来制定新网页在浏览器中打开的方式。值有如下四种：

• _self 在当前网页打开目标网页
• _blank 打开一个新的浏览器（或新的标签）来显示目标网页。
• _parent
• _top
  后两个值是应用在框架中的，后面框架中解释。

2.3 邮件链接。

<a href = "mailto:zhanghua@gmail.com">意见反馈</a>

点击会打开系统默认邮箱软件，将收件邮箱自动填写在收件栏内。

3. 图片的热点区域其实就是讲一个图片专门的分割出一个链接区域，这就是热点。

热点使用dream waver最好开发，它上面有专门的工具去选择图片区域，自动生成代码。自动生成代码示例如下。

    <img src="./e.jpg" width="50%" border="0" usemap="#Map">
    <map name="Map" id="Map">
    <area shape="circle" coords="50,50,100" href="another.html">
    </map>

当然直接通过代码编辑并不难，用软件测量一下图像某点的位置还是挺简单的，mac有自带工具，windows有很多软件可供选择。

• shape 热点区域形状，值有：矩形rect 、圆形circle、多边形poly
• coords 热点区域划分坐标：圆形是圆心上下坐标和半径、矩形是左上、右下两- 点的坐标，多边形是各个顶点的坐标。（相对图片）

• href 超级链接的目标。

• shape – 定义热点形状

• shape=rect： 矩形
• shape=circle：圆形
• shape=poly： 多边形
• coords – 定义区域点的坐标
  #### a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

<area shape=rect coords=100,50,200,75 href="URL">

#### b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度

<area shape=circle coords=85,155,30 href="URL">

c.任意图形（多边形）：将图形之每一转折点座标依序填入

<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">