Web标准网页设计原理与前端开发技术
上QQ阅读APP看书,第一时间看更新

4.3 a元素及其应用

在HTML文档中,使用a(anchor)元素可以定义内部书签或创建超链接(Hyperlink)。

在a元素的开始标签中使用name属性,可以在HTML文档中定义内部书签,以标记a元素在网页中的所在行。然后,在同一HTML文档中的其他地方使用a元素及其href属性,即可创建指向内部书签所在行的超链接。

此外,在a元素的开始标签中使用href属性,还可以创建指向互联网中任何信息资源的超链接。这些信息资源可以是存储在本地计算机上的文档(如Word、Excel文档),也可以是存储在互联网中其他计算机上的文档(如HTML文档)。

表4-1列出和说明了a元素中常见的属性及其用法。

表4-1 a元素中常见的属性及其用法

注意:a元素的title属性与title元素是不同的。前者出现在a元素的开始标签中,用于指定鼠标指向超链接时所显示的提示信息;后者是一个结构性元素,出现在HTML文档头部,且是head元素的一个子元素。

例4-3】 在HTML文档中应用a元素,并观察a元素及其属性的作用。具体步骤如下:

(1)在Notepad软件中输入以下HTML代码。

在以上代码中,<a href="http://www.sina.com">创建指向新浪网的超链接,<a href= "word1.doc">创建指向Word文档“word1.doc”的超链接,<a name="middle">在网页的中间位置定义内部书签middle,<a href="#">创建指向网页顶部的超链接,<a href="#middle">创建指向书签middle所在行的超链接。

(2)在Notepad软件中保存HTML文档,并将其命名为4-3.htm。

(3)在HTML文档4-3.htm所在的文件夹中新建一个Word文档,保存该Word文档并将其命名为word1.doc。

注意:由于Word文档word1.doc与HTML文档4-3.htm在同一文件夹中,所以a元素的href属性值可以直接使用Word文档的文件名,即上述HTML代码中的<a href= "word1.doc">。

(4)使用IE浏览器打开HTML文档4-3.htm。网页的浏览效果如图4-3所示。

图4-3 使用IE浏览器打开HTML文档

在网页中,单击文本“创建指向新浪网的超链接(没有使用target属性)”,可以在当前Web浏览器中打开新浪网的首页。将鼠标移动到文本“超链接(target属性值为_blank)”上面时,会出现提示信息“该超链接指向新浪网”;单击该文本时,将在一个新的Web浏览器中打开新浪网的首页。将鼠标移动到文本“超链接(target属性值为_self)”上面时,会出现提示信息“该超链接同样指向新浪网”;单击该文本时,可以在当前Web浏览器中打开新浪网的首页。单击文本“创建指向Word文档的超链接”,将弹出“文件下载”对话框,在该对话框中单击“打开”按钮,可以在IE浏览器中打开Word文档word1.doc。以上超链接都是创建在文本之上的,所以,这些超链接也称为文本超链接。

缩小IE浏览器的高度,并使用浏览器右侧的滚动条,显示网页的最下方,如图4-4所示。

图4-4 只显示网页的最下方

在网页中,单击文本“返回本网页顶部”,可以返回网页的开始位置;单击文本“返回书签middle所在行”,可以返回网页的中间位置,即HTML文档中内部书签middle的所在行。

注意:默认情况下,未被访问的文本超链接是蓝色的并且有下画线,已被访问的文本超链接则是紫色的并且有下画线。