轻松上手HTML：超链接元素

郎哥
前端
2024-06-07
454热度
0评论

超链接

在浏览网页中，单击一个链接就会打开一个新的网页，这种链接网页的功能称为超链接。在网页中添加超链接功能可以使用a标签，a标签有两个比较重要的属性，一个属性是href，一个属性是target。

href属性

href属性指定要打开的网页路径，网页路径可以是相对路径，也可以是绝对路径。相对路径是指要打开的网页路径相对于当前网页文件所在的目录来指向的路径，绝对路径是指要打开的网页文件所在的全部路径，绝对路径一般以http开头，后面紧跟网页文件所在网站的路径。

target属性

target属性用于指定打开新网页的方式。在当前网页打开一个新的网页，有以下几种方式。一是浏览器开启一个新的窗口用于打开新的网页，target属性值设置为“_blank”；二是浏览器在当前窗口打开新的网页，当前网页的内容被新网页的内容覆盖掉，target属性值设置为“_self”；三是在框架窗口中（关于框架窗口后面会讨论），将target属性值设置为“_parent”，可以让新的网页充满整个浏览器窗口，框架窗口中的网页内容被覆盖掉，不过在框架窗口中，不建议使用属性值“_parent”，因为这样就破坏了框架窗口原来的结构；四是在多层框架窗口中，将target属性值设置为“_top”，可以让新的网页充满整个浏览器窗口，也就是在多层框架中的顶层框架打开新的网页，如果是单层框架，其作用和“_parent”一致；五是在框架窗口中在指定的窗口打开新的网页。例如，框架窗口有A、B、C三个网页，A网页是顶部导航窗口，B 网页是左侧功能菜单窗口，C网页是右侧内容显示窗口，如果希望用户单击B网页的功能菜单时，希望新的网页在C网页窗口中打开，就可以将target属性值设置为C网页的名称。

表格 1 target属性值

属性值	描述
_blank	在新窗口中打开被链接网页
_self	在当前窗口打开被链接网页
_parent	在框架窗口的父窗口打开被链接网页
_top	在框架窗口（多层或单层）的顶层窗口打开被链接网页
framename	在指定的框架窗口的子窗口打开被链接网页

案例

例1：在A网页中打开B网页，打开方式为在新窗口中打开被链接网页。
A网页文档（文件名称为a.html）

<html>
<head>
<title>这是A网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>这是A网页</h3>
<hr>
<a href="b.html" target="_blank">链接到B网页</a>
</boyd>
<html>

B网页文档（文件名称为b.html）

<html>
<head>
<title>这是B网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>这是B网页</h3>
<hr>
<p>B网页由A网页打开</p>
</boyd>
<html>

下图是浏览器显示效果，从浏览器显示效果可以看出，在A网页单击“连接到B网页”，浏览器在新窗口打开B网页。

例2：在A网页中打开B网页，打开方式为在当前窗口中打开被链接网页。修改例1中A网页a标签的target属性值为“_self”。
<a href="b.html" target="_self">链接到B网页</a>
下图是浏览器显示效果，从浏览器显示效果可以看出，在A网页单击“链接到B网页”，浏览器在当前窗口打开B网页。

例3：在A网页中打开图片，打开方式为在新窗口中打开图片。修改例1中A网页a标签的href属性值为“https://www.milihua.com/01.jpg”。

例4：在A网页元素中设置书签，应用a标签定位到设置书签的元素。

<html>
<head>
<title>设置网页内容书签</title>

</head>
<body>
<a href="#article1" target="_self">落花生</a>
<a href="#article2" target="_self">济南的冬天</a>
<a name="article1"></a>
<h1>落花生</h1>
<h5>许地山</h5>
<hr>
<p>
我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”我们姐弟几个都很高兴，买种，翻地，播种，浇水，没过几个月，居然收获了。
</p>
<p>
母亲说：“今晚我们过一个收获节，请你们的父亲也来尝尝我们的新花生，好不好？”母亲把花生做成了好几样食品，还咐附就在后园的茅亭里过这个节。
</div>

<a name="article2"></a>
<h1>济南的冬天</h1>
<h5>老舍</h5>
<hr>
<p>
对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。
</p>
设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？
<p>
</div>
</boyd>
<html>

网页书签是指在网页内进行元素的定位，被定位的元素称为书签，书签也使用a标签。设置书签的方法是在需要定位的网页元素前添加a标签，并设置a标签的name属性。name属性是网页元素的通用属性，用于标识网页元素，是网页元素在网页中的唯一名称。HTML4.0后又定义了属性id，属性id和name具有相同的作用，为了能够和以前的版本兼容保留了 name 属性，同时也可以使用 id 属性。在定位网页内元素链接a标签的href属性中设置需要定位元素的名称，在定位元素名称前加“#”。例如，待定位a标签的name属性为“article1”，链接a标签的href属性设置为“#article1”。