HTML基础1-图像

一、添加图像

1、添加图像

语法如下：

<img src="绝对/相对图像文件地址">

二、设置图像属性

1、设置图片长、宽、边框

语法如下：

<img src=".图像文件地址" alt="" height="数值" width="数值" border="数值">

2、图像间距与对齐方式

1）调整图像间距

语法如下：

<img src="图像文件地址" hspace="" vapace="">

hspace：设置图像的水平间距，单位是像素，可以省略。

vspace：设置图像的垂直间距，单位是像素，可以省略。

2）设置图像相对于文字基准线的对齐方式

语法如下：

<img src="图像文件地址" align="相对文字的对齐方式">

align取值：top、middle、bottom、texttop、absmiddle、baseline、absbottom、left、right

3、替换文本和提示文字

1）添加图像的提示文字——title

语法如下：

<img src="图像文件地址" title="">

2）添加图像的替换文字——alt

语法如下：

<img src="图像文件地址" alt="">

三、链接标记

1、文本链接

语法如下：

<a href="" target="">链接文字</a>

• href：为链接地址，是Hypertext Reference的缩写

• tart：为打开新窗口的方式，主要有以下4个属性值：

  ​ _blank：新建一个窗口

  ​ _parent：在上一级窗口打开，常在分帧的框架页面中使用

  ​ _self：在同一窗口打开，默认值。

  ​ _top：在浏览器的整个窗口打开，将会忽略所有的框架结构

2、书签链接

同一页面下，点击A处可以跳转到B处，需要以下两个步骤：

①在A处建立书签

语法如下：

<a name="top">A</a>

②在B处建立链接

语法如下：

<a href="#top">B</a>

此时文本B就创建了一个链接，点击文本B可跳转到name="top"的文本A

四、图像的超链接

1、图像超链接

语法如下：

<a href="链接地址" target="目标窗口的打开方式"><img src ="图像文件的链接地址"></a>

2、图像热区链接

对图像的某一块区域设置链接，需要经过两个步骤：

①设置图片

语法如下：

<img src="图像地址" width="图片宽度" height="图片高度" usemap="#映射图像名称">

注意事项：

• 必须要写明图片width、height，才能找到步骤②设置的坐标
• usemap名称开头必须有“#”

②定义热区图像以及热区的链接

map标记只有一个属性name，作用是为区域命名，其设置值必须与步骤①<img>中的usemap属性值相同

area标记主要是定义热点区域的形状及超链接，它有三个必需的属性，分别是shape、coords、href

<map name="映射图像名称">
	<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

shape有以下三种，每种的coords包含参数不一样：

• rect（矩形）：left、top、right、bottom

  <area shape="rect" coords="45,126,143,203" href="img/ad.jpg">
  

• circle（圆形）：center-x、center-y、tadius

• poly（多边形）：设置每个角的x坐标值