HTML链接

时间:2020-01-09 10:34:41  来源:igfitidea点击:

HTML的<a>元素用于创建指向同一HTML页面内部或者外部页面中位置的可点击链接。单击链接后,浏览器将跳转到新位置。 <a>元素名称是" anchor"的缩写。

基本连结

链接元素的基本结构如下所示:

<a href="http://theitroad.local">Jakob Jenkov's tutorial website</a>

链接在浏览器中的外观如下:

雅各布·詹科夫(Jakob Jenkov)的教程网站

如我们所见,<a>元素主体内的文本用作可单击的链接文本。单击链接后,浏览器将位置更改为" href"属性值内列出的URL。在上面的示例中,此URL为http:// theitroad.local

相对链接网址

可以在href属性中使用相对URL。相对URL是相对于包含链接的页面的URL的URL。例如,此页面的URL是:

http://theitroad.local/html4/links.html

如果我们使用相对网址

lists.html

在此页面上,它将被解释为与包含链接的页面位于同一目录中。换句话说,浏览器会将URL解释为:

http://theitroad.local/html4/lists.html

同样,相对网址

elements/a-sub-element.html

将被解释为:

http://theitroad.local/html4/elements/a-sub-element.html

我们可以使用两个点(..)来标记我们需要进入目录。从那里,我们还可以根据需要再次向下查找目录(或者更多目录)。因此,相对网址

../html5/index.html

此页面上列出的将被解释为:

http://theitroad.local/html5/introduction.html

注意,由于相对URL中的点(..)的解释方式是将链接部分html4用html5代替。

链接中的参数

我们可以通过在链接URL的末尾添加问号(?),并添加参数名称,等号和参数值来向链接URL添加参数。这是一个例子:

?myParam=myValue

如果需要添加多个参数,请在每个参数值之后,参数名称和下一个参数的值之前添加一个&字符。这是一个例子:

?myParam=myValue&param2=value2

这是包含参数的完整URL:

http://theitroad.local/html4/links.html?myParam=myValue&param2=value2

如果页面是动态生成的,则链接的页面可以使用参数。静态HTML页面通常不使用参数。

链接中的片段

链接URL可以包含一个片段。片段引用了它链接到的HTML页面内的一个点。为了能够引用片段,必须首先在HTML页面中插入锚以进行引用。锚点如下所示:

<a name="fragmentName"></a>

"名称"属性内的值在包含锚点的HTML页面中应该是唯一的。否则,浏览器无法知道要跳转到的锚点。

通过在链接的URL末尾添加#fragmentName(称为片段)来引用锚。例如,如果包含锚点的页面的URL为

http://theitroad.local/htm4/links.html

然后将片段名称添加到URL的末尾,如下所示:

http://theitroad.local/htm4/links.html#fragmentName

如果我们单击上面带有URL的链接,浏览器将跳至具有给定URL的页面,并向下跳转到HTML文档中名为" fragmentName"的锚点。

连结目标

默认情况下,浏览器在与包含链接的页面相同的浏览器窗口中打开链接指向的页面。如果我们想在新窗口中打开页面,则可以将属性target设置为值_blank。这是一个例子:

<a href="http://theitroad.local" target="_blank" >
    Hello html
</a>