HTML笔记（HTML元素--链接与HTML图像）

1 HTML链接

HTML使用超级链接与网络上的其他文档相连。

标记语言真正的威力在于其收集能力，它可以与世界上其它文档链接集合起来，读者因此不仅可以控制文档在屏幕上的显示，还可以通过超链接来控制阅读顺序，这就是HTML以及XHTML中的”HyperText（超文本）”，它将整个web网络都链接起来。
超链接，或者按标准叫法称为“锚(anchor)”，通过<a>元素创建超链接，“超链接文本”不一定是文本内容，也可以是图片或其他HTML元素。
有三种使用<a>的方式（使用<a>元素添加title属性等同于<img>中的alt属性）：

• 1.用于连接外部文档
• 2.用于连接文档书签（创建id属性作为书签）
• 3.用于绑定js事件

在点击链接实现跳转时，可使用target属性定义被链接文档在哪显示，如：

<a href="url" target="_blank">
<!-- 在新页面打开文档 -->

而使用href属性时，有分为相对路径和绝对路径。
相对路径要明确源文件和目标文件，而属性值就是从源文件到目标文件的一个路径。（其中若目标文件在源文件的父文件夹内，可以使用../表示返回前目录，而且就算操作系统使用\作分隔符，对于网页还是得使用/这一个通用分隔符，同时为网站选择的文件名和文件夹名中不要使用空格）

1.1 命名锚

命名锚即创建书签：
先在文档中定义id或name属性，如：

<a id="xxx">xxx</a>

然后就可在文档的其它地方创建指向书签的链接，如：

<a href="#名字">xxx</a>
<!-- 要加#号 -->

还可以在外部文档创建指向书签的链接，如：

<a href="http://xxx.com/#名字">

注：在外部文档创建指向书签的链接，使用绝对路径时，请始终将正斜杠号/添加到id或name属性的前方。

---

2 HTML图像

在HTML中，图像有<img>元素定义，<img>元素为空元素，使用<img>元素时，需要定义src属性，此属性用于提供图像的URL地址，如：

<img src="url" />

值得注意的是<img>元素拥有一些如align的样式属性，当一般的我们是不赞同使用来对图片的样式进行修改，因为由始至终要明白，我们希望的是HTML提供结构，而不要用于提供表现，显然这些属性看起来是表现属性，所以这些表现属性应该尽量避免使用，用CSS样式替代或在源文件使用PS修改。

2.1 alt属性

使用替换文本属性alt(alter)，作用是使当加载不了图片时，浏览器会显示文本来告知用户图片信息，如：

<img src="url" alt="this is a pic" />

2.2 usemap属性

创建图片映射，图片映射就是指带有可点击区域的一幅图像。
这里使用<img>元素的usemap属性，usemap属性用于根据id或name来引入<map>元素，map元素用来定义图像映射，map元素必须内嵌套<area>元素，<area>元素用于定义图像映射中的区域，而且<area>是一个空元素（内含重要的属性有：shape，coords），如：

<img href="url" usemap="mapname" />
<map name="mapname" id="mapname">
    <area shape="circle" coords="180,139,14" href="url" />
</map>

其中的shape属性与coords属性是需要结合使用的，shape属性提供形状，coords属性提供坐标，比如当shape属性是圆形时，此时coords属性就需要三个参数，用来定义圆心以及半径。
一般的，图像左上角的坐标是"0,0"，多边形(polygon)的表示形式是：

<area shape="polygon" coords=x1,y1,x2,y2.... />

注：

• <img>中的 usemap 属性可引用
• 如果某个<area>元素中的坐标和其他区域发生了重叠，会优先采用最先出现的<area>元素。而且浏览器会忽略超出图片范围的坐标。