如何在HTML文档中创建链接。 标签A - 其语法和属性

  1. Internet上页面的URL或“地址”
  2. <A>标签及其基本语法
  3. 绝对和相对参考
  4. 目录的相对链接高于当前
  5. <A>标签的属性。 如何在新窗口中通过引用打开文档
  6. 标题链接。 <A>标签的title属性
  7. 属性超链接nofollow。 禁止通过引用转移网站的“信任”
  8. 文档内部链接或锚点
  9. Link Anchor - 图片
  10. 延期

参考文献(或超链接)像血管一样渗透到互联网上。 如果没有链接,就没有互联网。

如何在HTML文档中创建链接并正确注册其属性,URL是什么以及搜索引擎与链接的关系 - 在下一课中为初学者学习HTML。

Internet上页面的URL或“地址”

Web上的每个HTML文档都有自己的“确切地址”。 它被称为“URL”,来自英语。 URL - 统一资源定位器

URL结构通常在浏览器的地址栏中可见。 它包括:

  1. 协议名称为http://或https://
  2. 网站域名
  3. 该文档所在文件夹的文件夹或路径,
  4. 文件名(可能并非总是如此)。

由于这个“确切地址”,可以从另一个文档的文本中引用该文档。

<A>标签及其基本语法

我希望“语法”这个词不再让你害怕🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html">链接文字</a>

如您所见,在<A>标记开始之后,必须有一个必需的href属性,该属性指定您想要访问的文档的地址。

在<A>容器标签内部是一个文本(尽管可能有图片),这是链接的文本。 它也被称为“ ”或简称 - 锚。

绝对和相对参考

在上面的例子中,使用了绝对引用。 那些包含文档的完整URL

在某些情况下,href属性不包含带有协议名称和站点域的完整URL。 如果链接所指向的文档位于同一站点上,则可以使用从文档所在位置开始的相对链接。

应用相对引用时的方案

示例:first.html文档中的链接指向second.html文件,该文件位于新闻文件夹中。

目录的相对链接高于当前

代码:

<a href="../first.html">这是指向目录第一级文件的相对链接</a>

此链接指向“父”目录中的文件first.html,即 升级一级

组合../表示从正在进行链接的文件的给定位置向上一级的文件夹。

<A>标签的属性。 如何在新窗口中通过引用打开文档

要在新的浏览器选项卡中打开文档,您需要使用属性target =“_ blank”

要在新的浏览器选项卡中打开文档,您需要使用属性target =“_ blank”

属性链接target =“_ blank”

不要滥用它。 无需使用此属性创建指向站点的内部链接。 用户将被“闪亮的窗口”所困扰。

一般来说,有了这个目标属性 - 整个故事。 它仍有许多含义,但今天所有这些都很少使用。

这是因为它们被设计为在不再流行的框架上与网站一起工作,随着HTML5的出现,它们正在成为过去。

标题链接。 <A>标签的title属性

另一个有用的属性是title =“文本解释此链接引导的位置”

语法:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop-up hint">这是一个提示链接</a>

如您所见,浏览器将其显示为工具提示。 然而,它考虑到了搜索引擎。

链接标题的属性提示

属性超链接nofollow。 禁止通过引用转移网站的“信任”

链接rel =“nofollow”还有一个不明确的属性

他告诉搜索引擎链接文档可能不值得信任。 同时,源站点的信任(“信任”)指标不会通过引用传输到站点。

“信任”和链接排名的主题仍然领先,但如果它很短,搜索引擎中网站的“命运”也将取决于通往该网站的链接数量。 他们越多,权威网站链接越多 - 网站的可信度越高。

在某些情况下,值得“筛选”此属性的链接。 例如,如果您撰写有关任何服务的否定评论。

<a href="http://bad-sait.ru/dokument.html" rel="nofollow">网站不良</a>

文档内部链接或锚点

在大文本中,通常需要在文档的逻辑部分中安装所谓的“锚点”。 然后,就在这个地方,你可以参考。

使用它的最简单方法是从通向这些锚点的超链接创建本地目录。 这些目录通常放在文章的最开头。

创建此类锚时,将使用name属性而不是href属性。

创建锚点的语法是:

<a name="top"> </a>

创建链接时,在URL的末尾添加符号# - “锚点”的名称:

<p> <a href="#top">热门</a> </ p>

过渡将完全到这个地方,即 浏览器会将此位置放在其上部可见部分。

通常,在长文档中,在最底层他们将这样的链接放在“顶部”。

......他们走遍了世界各地的芳香谷物,他们发现了非洲,亚洲,中南美洲闻名的最高品质。 因此,今天在品牌的咖啡馆 咖啡豆 您将找到来自知名制造商的最佳咖啡品种。

到顶部

如果您通过符号#name_在URL末尾添加,则可以从另一个文档退出到此处。

<a href="http://domen-saita.ru/dokument.html#top">链接文字导致本文档中的“顶部”锚点</a>

Link Anchor - 图片

任何图像都可以是链接。

代码:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg“width =”100“height =”131“/> </a>

默认情况下,浏览器使用实线蓝线标记链接,并且链接图片获得蓝色框。

链接图片获得蓝框

为了摆脱它,一个简单的规则被添加到该网站的CSS文件:

a {border:0px;}

这是使所有图像链接的边界厚度为零的指令。

延期

在下一篇文章中,我将讨论电子邮件链接,它们的属性以及与邪恶垃圾邮件发送者“保护”的方法