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>
元素。而且浏览器会忽略超出图片范围的坐标。