错误博客( cuowu.com )发布于 2019-06-04 18:42:06

HTML链接

<a></a>,超级链接标签,a标签教程。

超链接基础

1)概念

在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。

2)语法

<a href=”URL地址” ></a>

简单来讲,就是指按内容链接。最重要的属性href,指示链接目标。

在所有浏览器中,链接默认外观:

链接默认外观

CSS伪类可改变链接外观。

3)路径元素

重要元素:路径

每一个网页都有一个惟一的地址,称为 统一资源定位符(URL)。

URL两种表达方式如下:

绝对路径:是包含服务器规范在内的完全路径。

优点:无论源文件在什么位置都可以精确地找到。

缺点:不利于测试。

不利用站点的移植。

相对路径:表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。

优点:站点的结构和文件的位置不变,那么链接就不会出错。可以将整个网站移植到另一个地址的网站中,而不需要修改文档中的链接路径。

绝对路径和相对路径对SEO的影响见以往教程《相对与绝对路径》。

源端点和目标端点位置的几种情况

同一目录下:则链接路径只需指明目标端点的文档名称

如:<a href=”1.html” target=”_blank”>链接1.html且新窗口打开</a>

不在同一目录下

链接文档在本文档的子级,输入目录名称(子目录名称)文档名称

例如:

<a href=”text/1.html”>text文件夹下的1.html

链接文档在本文档的父级,用 ../ 来跳出本文档级

例如:

<a href=”../text/1.html”>跳到上级,找到文件夹text中1.html

4)Target属性

Target目标窗口:

  • _self 在当前页面中打开链接,默认效果
  • _blank 在一个全新的窗口中打开链接

5)<base/>标签

<head>标签中未讲解的<base/>标签   

为网页上所有连接规定默认地址或默认目标。换一种说法就是其他标签中的URL地址全部解析成<base/>中URL的相对地址。

例如:

<!DOCTYPE html>

<html>

<head>

<title>1.4 HTML超链接</title>

<base href=”https://www.cuowu.com ” target=”_blank”/>

<meta charset=”utf-8″ />

</head>

<body>

<a href=”duty”>错误教程网</a>

</body>

</html>

例二:

<!DOCTYPE html>

<html>

<head>

<title>1.4 HTML超链接</title>

<base href=”images” target=”_blank”/>

<meta charset=”utf-8″ />

</head>

<body>

<img src=”1.jpg”/>SRC的相对位置已设为图片所在位置故直接填写图片名即可。

</body>

</html>

内部链接

内部链接,是指链接对象为同一网站内的资源。

例如:

<a href=”1.html” target=”_blank”>链接1.html且新窗口打开</a>

<a href=”../text/1.html”>跳到上级,找到文件夹text中1.html</a>

锚点链接

锚点链接:网页过长,可设置锚点,方便阅读。

1)创建锚点方法

<a name=”锚点的名称”></a>  HTML5中<a>标签name属性已不再受支持,这里推荐换为id。

例如:<a name=”1”>我是锚点编号1</a>

例如:<a id=”1”>我是锚点编号1</a>

2)链接同一页面锚点

<a href=”#锚点名称”></a>

例如:<a href=”#1”>我是锚点链接,点我跳转至锚点1</a>

3)链接其他页面锚点

<a href=”链接的文件地址#锚点名称”>

例如:<a href=”2.html#2”>点我跳转至2.html中的锚点2</a>

外部链接

外部链接,是指链接到当前网站外的资源。

1)链接到外部网站

<a href=”http://…”>…</a>

例如:<a href=”http://www.xiaoxiaoketang.com”>小小课堂</a>

2)链接到E-mail

<a href=”mailto:邮件地址”>….</a>

例如:<a href=”mailto:996756342@qq.com”>

3)链接到FTP

<a href=”ftp://FTP地址”></a>

例如:<a href=”ftp://ftp.baidu.com”></a>

4)链接到Telnet

<a href=”telnet://地址”>….</a>

例如:<a href=”telnet://bbs.baidu.com”></a>

5)链接到本地文件

通常网站上的-本地下载

例如:<a href=”2345 browser.exe”>2345浏览器下载</a>

6)download属性

download=”下载的文件名”(HTML5新属性)

例如:<a href=”2345 browser.exe” download=”2345”>2345浏览器下载</a>

<a>标签的其他属性

指定当前文档与被链接文档的关系:rel,<a rel=”值”> 值很多如 friend、help等。

例:<a href=”http://www.cuowu.com ” rel=”friend”>错误友链</a>

友情链接教程详见《网站友情链接》。


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码