html开发笔记15-图片标签-向网页添加图片

、图片标签是用 <img> 单标签来定义：

作用是向网页中添加图片，并且img标签有多个可用参数可以添加。

二、代码演示

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加区域链接的图片的路径，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。

分别添加三个形状，示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

下载地址：https://www.gimp.org/

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

把鼠标放到图像的任意位置，看左下角：

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

href="https://www.zhihu.com/question/284642168"

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

上节回顾

在上节中主要讲解了HTML的文字标签和格式标签。上篇请戳→→04程序员定要学HTML，字体段落标签介绍，60秒搞定

其实如果没有记住也无所谓。毕竟这些标签都是HTML中比较常用的，在以后的相关的案例中也会使用。此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。

程序员写代码

图片

在HTML中添加图片其实很简单，就是添加一个img的标签。

图片标签的语法

一般有src、alt、width、height四种属性就够用了。

效果：

图片的显示效果

图片路径的写法

src表示的是图片的路径，这里面的值应该怎么写呢？

（1）html文件和图片在相同一个文件夹下。

HTML文件和图片文件在相同的目录下，可以直接书写文件的名称。

写文件名的写法，如上面的HTML

（2）图片在HTML文件所在目录的文件夹内：

如图：

图片文件在文件夹内

此时需要加上文件夹名称，并加上“/”表示下层目录：

下层目录的图片写法

（3）图片文件在上层目录

如果图片在HTML文件所在的上层目录，则需要写“..”表示向上一级。如图：

上层目录

超链接

超链接就是可以链接到某个资源的东西，比如我们打开百度首页搜索后，产生的就是超链接：

这些蓝字超链接

这些蓝色的文字标题，我们点击之后可以跳转到新的网站。这就是超链接。下面我们自己写一个超链接：

超链接的写法

超链接预览

超链接中的属性

超链接中的潮涌属性包括：href（网页地址）、title（说明描述）、target（打开网页的位置）、name（名称）。

其中href支持带有任何协议的连接。title是对超链接的说明。

程序员

target包括四个值：

_blank

在新的窗口打开连接

_self

在当前窗口打开超链接

_parent

在父窗口打开超链接，这个后面会说，不常用

_top

在整个窗口中打开被链接文档。

每天一个知识点，带你迈向软件编程大神，一起努力吧。

在线咨询

上一篇：精选100套网页模板，免费获取
下一篇：css和html的四种结合方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商