[使用HTML链接]说明如何使用定位标记（标记）！使用CSS进行设计变更

　链接在整个站点中都使用。日本最著名的“ Yahoo Japan”网站上有很多链接。除此之外，如果您提到横幅广告，那无止境。

创建它是“锚标签（标签）”的作用。此标记经常使用，并且对SEO措施具有重要意义，因此，如果您刚刚开始学习HTML，请务必掌握如何使用它。

它很容易制作，但功能如此广泛，以至于有些人无法理解。但是不用担心。如果阅读了所有文章，将来您将能够了解锚标记中使用的大多数知识。

[对于初学者]仔细解释如何编写CSS（样式表）

锚标签（标签）的基础

标签的基本语法

　如果您使用的是带有emmet功能的编辑器，则可以通过在编辑器中键入“ a”，然后单击“ control + e”来轻松显示锚标记。准备开始标签和结束标签，并将标签内部识别为链接。

<a href=""></a>

　锚标记中写入的字符和图像将被识别为链接。
标记中有“ href属性”（“超文本引用”的缩写，表示“将多个文档彼此连接”），在“ href =“”的双引号中，您要连接的路径等。来写。编写“ etc.”并不总是像“ img标签”那样采用路径形式，并且有两种主要模式。

（A）当进入同一页面上的链接时

（B）转到另一页上的链接时

<a href="ここにリンク先のURLを書きます。">
A. ここに文字を打てば、文字全体がリンクとなります。 
B. ここに画像を入れれば、画像全体がリンクとなります。
</a>

如何使用标签

　让我们尝试在文本上放置一个链接。准备两个文件，一个包含链接，另一个包含链接，如下所示。

　我在“ index.hmtl”侧写了以下锚标记，并在其中写了“ This is a link”。顺便说一句，请在链接末尾的“ href属性”中输入“ ./sample.html”。转到相同层次结构中的文件时，请写“ ./”。但是，即使没有“ ./”也没有问题。

<a href="./sample.hmtl">
　リンク先へ飛ぶ
</a>

最后，在链接跳转的页面上写一些内容。

<h1>Hello World</h1>

您现在准备好了。让我们显示它。现在，您将看到一个带有蓝色下划线的链接，如下所示。

请点击。然后显示单词“ Hello World”。

对于图像，这也是可能的。您可以将“ img标签”与“锚标签”一起包含，如下所示。结果，显示图像，您可以单击它来获得相同的结果。

 
<a href="./sample.html">
<img src="./img/sample_img_1.JPG" width="500">
</a>

指定链接目的地

接下来，让我们指定链接目标。我将解释如何编写“ href属性”。根据目的，有三种不同的书写方式。

（A）链接到同一页面

例如，它通常用于垂直长的页面，例如登陆页面。单击顶部的导航栏链接可以滚动到下面的适当位置，这正是您可以执行的操作。

首先，在同一文件中准备一个带有“ id”的标签，该标签附加到链接目标。请务必在此处指定“ id”。具有相同名称的“类”可以多次使用，但是具有相同名称的“ id”只能使用一次。

<div id="jump_to_here">
リンクはここに飛びます。
</div>
 

指定“ id”后，将以下内容写入锚标记。需要注意的一点是在开头添加“＃”，并指定名称“ id”。

<a href="#jump_to_here">
リンク先へ飛ぶ
</a>

这里的所有都是它的。如果单击蓝色的“此处链接”，则页面将向下移动并转到“此处链接将跳转到此处”。

（B）链接到不同页面

这与“如何使用标签”的说明相同。

（C）链接到不同页面上的特定位置

在另一个文件的链接目标的特定位置准备一个带有“ id”的标签。这样就完成了链接目标的准备。
接下来，我们将创建一个定位标记，但是我们要注意的是如何编写定位标记。编写如下。

 
<a href="./リンク先のファイル名#idで指定した名前"></a>

例如，如果要在另一个文件“ sample.html”中转到“ id =“ jump_to_here””，则编写如下。

 
<a href="./sample.html#jump_to_here">
リンク先へ飛ぶ
</a>
 

这里的所有都是它的。如果单击蓝色的“此处链接”，请转到“ sample.html”中的“此处链接跳转”。

（D）链接到外部站点

到站点内部的链接是“相对路径”，但是当您要链接到外部站点时，请使用“绝对路径”。例如，如果要跳到google，请在href属性中设置google URL，如下所示。这将带您到指定页面。

<a href="//www.google.co.jp/"></a>

其他规格

　定位标记的便利不仅在于指定路径。实际上，您还可以指定电子邮件，电话号码和“返回上一页”。这很容易做到。

（A）指定邮件

只需在定位标记中指定电子邮件地址即可。注意事项是在“电子邮件”前面放置“邮件到：”。

<a href="mailto:[email protected]">
リンク先へ飛ぶ。
</a>

这将自动打开电子邮件。

指定电话号码

当您想使用移动设备按下链接时，这很方便。告诫是在电场编号前加“ tel：”并指定编号。

 
<a href="tel:000-000-0000">
リンク先へ飛ぶ
</a>

指定“返回上一页”链接

当我工作时，另一个有用的事情是“返回上一页”按钮。当表格上的信息或预订信息不正确时使用。这使用了另一种称为“ javascript”的语言，但是非常方便，因为它仅安装以下代码。

<a href="javascript:history.back()">直前のページへ戻る</a>

使用锚标签的有效SEO措施

　现在，让我们讨论一下如何在标签内编写文本。如果您在遵守一些预防措施的前提下写书，这将是有效的SEO措施。

如何写锚文字

1. 要具体（理解链接内容的文字）

有以下链接，但是对SEO措施有效的链接是下面的链接。
以下链接是一种书写方式，可让Google的搜索引擎轻松识别要访问的页面。

包含链接的关键字

如果您包含链接页面的典型关键字和要搜索的单词，则搜索将更容易。谷歌很难识别诸如“单击此处”，“此处”和“单击”之类的常见字词。相反，通过链接文章标题或链接到特定的特定单词，用户和Google都更容易理解。

禁用锚文本

　被“链接”将由“谷歌”评估。假设该链接指向恶意网站，并且您已粘贴该链接以提醒您。即使这样，如果单击并查看该页面，也会对其进行评估。为避免这种情况，请禁用锚标记“ rel =“中的评估””nofollow”」を入れましょう。

 
<a href="//[email protected]@@.com" rel="nofollow">悪質なページです。</a>
 

对于那些想进一步了解SEO内部对策技术的人，阅读15本书，以深入了解SEO [从内部措施到写作]如果您阅读其中介绍的书，将会更容易理解。

通过CSS更改锚标签设计

删除下划线

　锚标记中显示的下划线对于用户将其与其他文本区分开并标记链接很有用。但是，有时您可能要删除下划线。
在这种情况下，请在CSS中指定以下内容。

 
a{
  text-decoration: none;
}

然后，下划线消失，如下所示。

放置鼠标时颜色发生变化

如果要在将鼠标放在其上时更改颜色，请使用“：悬停”。

 
a:hover{
  color: red;
  font-size: 20px;
}
 

然后，仅当如下所示放置光标时，字符的颜色才会改变。

访问的链接设计更改颜色更改

更改您已单击的链接的颜色是一种用户友好的行为。在这种情况下，请使用“ a：已访问”。但是，该效果本身可能无效，因此，在这种情况下，请将其与指示默认状态的“ a：链接”一起使用。

 
a:link,
a:visited {
　　color: grey;
}
 

您已经单击的链接已更改颜色，如下所示。

概要

锚标签也是HTML中最常用的标签之一，因此我想确保掌握它们。特别要注意的是如何编写标记中包含的字符。那些已经开始学习HTML的人倾向于更加关注操作方面，因为他们过多地专注于生产。但是，通过正确的关键字设置，搜索引擎流动性将得到改善，并将对该站点进行高度评价。这是一个很小的设备，但不能忽略。