首页 » 编程语言 » html » 正文

html超链接代码书写格式

几乎我们所有浏览的网页,或多或少都存在一些超链接,点击超链接就可以从一个页面跳转到另一个页面。超链接使得网络中,无数的网页能够彼此相互连接,方便网页浏览者进入到另一个相关的页面!

html超链接作用

HTML超链接可以是任意某个字、词,或者某一个词组,也可以是一句话,一段文字,任意图片也可以成为超链接,你可以点击这些带有超链接功能的元素内容,就可以跳转到超链接指向的目标地址,这个目标地址可以是一个任意的网页地址,或者当前文档中的某个位置。

html超链接,也可以叫html连接,或html超文本连接,还可以叫锚文本连接等等名称,叫法虽多,但其作用和功能相同,殊途同归而已!

创建超链接

使用<a>标签在HTML文档中创建超链接;

使用 <a> 标签创建超链接有两种方式:

通过使用 href 属性 - 创建指向另一个网络地址或其他文档的链接;

通过使用 name(或 id)属性 - 创建一个指定到文档中的某个位置;  

创建以href属性的文本超链接:

在开始标签中使用属性名href,其属性值,就是你想要指定跳转的目标链接地址。

<a href="指定要跳转的目标连接地址">带有超链接的元素内容</a>

开始标签<a>和结束标签</a>之间的元素内容可以是文字、图片或其他html元素

<a href="http://www.liudaima.com">刘代码博客</a>

上面这行代码显示为:刘代码博客 

点击这个超链接会把用户带到刘代码博客的首页

HTML超链接target属性

a标签中有一个target属性,其属性值的作用就是专门用于控制跳转方式

<a href="http://www.liudaima.com" target="_self">刘代码博客</a>
<a href="http://www.liudaima.com" target="_blank">刘代码博客</a>

target属性值有4种,如下表所示


target属性值
语义说明
_self
默认方式,在当前浏览器窗口中载入指定目标地址

_blank

浏览器总在一个新窗口中打开、未命名的窗口中载入目标文档。
_top有多个父窗口时,只在顶级窗口中打开或载入目标文档
_parent只其父窗口中打开,也就是在打开当前网页的那窗口中打开或载入目标文档

注意事项:

1、一个a标签必须有一个href属性,否则无超链接效果;

2、如果通过a标签的href属性指定的是一个URL地址,那么必须在地址前面加上http://https://; 

3、如果 href="#"的话,表示跳转到当前页面的顶部;

4、a标签的href属性除了可以绑定一个其他网络地址以外,还可以指定一个当前文档中的某个位置;

5、如果<a>标签设置了 CSS 样式,带有超链接的元素内容是根据 CSS设定的样式在浏览器中显示的。

创建以name属性的锚点超链接

在开始标签<a>中使用 name 属性,可以在html页面中建立锚点

在HTML文档中某个地方建立的锚点,我们也可以叫做书签

在同一个html页面中,可以建立一个或多个锚点

建立锚点的语法:

<a name="锚点名称">带有锚点的元素内容</a>

锚点名称可以是任意的英文名称

你也可以使用 id 属性来替代 name 属性,两种效果是相同的。

实例演示

首先,我们在HTML文档中创建了一个锚点title

<a name="title">HTML超链接title属性</a>

然后再在同一个html文档中创建一个指向该锚点位置的链接,这样你无需滚动页面,就可以只直接跳转到该页面其他位置。

<a href="#title">title属性</a>

您也可以在其他页面中创建指向该锚的链接:

<a href="http://www.liudaima.com/a/24.html#title">title属性</a>

在上面的代码中,在 # 符号后面紧跟锚点名称添加到完整URL的末端,就可以直接从其他页面链接到title这个锚点了。

上面代码演示效果:title属性 

锚点注意事项

1、锚点,经常用在大型文档,或文章内容比较长的页面,这样可以在开始位置上用锚点创建目录。你可以为每个章节建立一个锚点,然后在网页文档的开头位置,创建一个连接到这些锚点的目录。最后,你就可以通过点击目录,快速地跳转到每个章节的位置!

2、如果在浏览器中找不到已定义的锚点,就会默认跳转到网页文档的顶端,不会有错误提示。

HTML超链接title属性

<a>标签中的title属性和img标签中title属性是一样的作用,皆是用于控制鼠标悬停时显示的提示文本内容

<a href="http://www.liudaima.com" target="_blank" title="点击会跳转到刘代码博客首页">刘代码博客/a>



已有1位网友发表了看法: