WEB基础之：超链接

最新推荐文章于 2023-10-27 14:17:15 发布

原创最新推荐文章于 2023-10-27 14:17:15 发布 · 910 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html

WEB 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了HTML中<a>标签的使用，包括href属性创建超链接，target属性设置链接打开方式，name属性用于书签链接（锚点），以及如何创建外部链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

超链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：
    未被访问的链接带有下划线而且是蓝色的
    已被访问的链接带有下划线而且是紫色的
    活动链接带有下划线而且是红色的

< a>属性

属性	值	描述
charset	char_encoding	HTML5 中不支持。定义被链接文档的字符集。
coords	coordinates	HTML5 中不支持。定义链接的坐标。
download	filename	定义被下载的超链接目标。
href	URL	定义链接指向的页面的 URL。
hreflang	language_code	定义被链接文档的语言。
media	media_query	定义被链接文档是为何种媒介/设备优化的。
name	section_name	HTML5 中不支持。定义锚的名称。
rel	text	定义当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。定义被链接文档与当前文档之间的关系。
shape	default rect circle poly	HTML5 中不支持。定义链接的形状。
target	_ blank _ parent _ self _ top framename	定义在何处打开链接文档。
type	MIME type	定义被链接文档的的 MIME 类型。

1. href超链接标记

<a href="URL/文件">链接文字</a>

例：
    <a href="images/1.jpg">link to file</a>
    <a href="https://www.bing.com">link to website</a>
    <a href="">href属性的值没有配置，点击a标签会刷新页面。</a>
    <a href="javascript:void(0);">href属性的值配置“javascript:void(0);”，点击a标签不会刷新页面，但有a标签自带的效果。</a>
    <a href="#">href属性的值配置“#”，点击a标签不会刷新页面，但会在url地址路径后面添加一个“#”号</a>
    <a>没有href属性，a标签为单纯的文本，也没有a标签自带的效果</a>

2. target超链接打开窗口方式

超链接打开窗口方式
    <a target="_blank"></a>

值	描述
_blank	在新窗口中打开
_self	默认。在同一窗口中打开
_parent	在上一级窗口打开，常在分帧的框架页面中使用
_top	在整个窗口中打开，会忽略所有的框架结构
framename	在指定的框架中打开被链接文档。

3. name书签链接(锚)

name建立书签
	<a name="书签名称">书签名称</a>
或
	<a id="书签名称">书签名称</a>


href同一页面书签链接
	<a href="#书签名称">第一章</a>
	<!--书签的名称就是刚才所定义的书签名，也就是name赋值，#则代表这是书签的链接地址-->

4. 外部链接

所支持的协议格式
    https://
    	<a href="https://baidu.com">https</a>

    ftp://
    	<a href="ftp://127.0.0.1">ftp</a><br />

    telnet://
    	<a href="telnet://127.0.0.1">telnet</a><br />

    mailto://
    	<a href="mailto://123@test.org">mailto</a><br />
    
    javascript:
    	<a href="javascript:;">javascript</a><br />

    空链接:
    	<a href="#">空链接，单击链接后，停留在当前页面。</a><br />
    
下载文件
	<a href="downloads/installer.exe">download</a><br />