网页超连结-30天学会HTML＋CSS，制作精美网站

超连结是建立网页与网页之间的关系，也可以连结到外部网站。a是Anchor的缩写，中文翻译为「锚」，点击後跳到指定位置。连结可以是文字、图片或档案，当使用者滑过时，会出现手指的形状，点击後就会跳到对应的相关页面、档案、电子信箱...。超连结预设显示为蓝色，阅读过的超连结显示为紫色。

以下是超连结的语法：

<a href="网址/路径/档名">连结名称(可以是图片、文字)</a>

属性

href

利用href设定连结目标，可以是绝对位置(外部连结)、相对位置(档案路径)、电话、信箱、id属性

绝对位置(外部连结)

<a href="https://www.google.com/">google</a>

相对位置(档案路径)

资料夹路径最好不要超过三层，会增加搜寻的困难度，对SEO也会有影响

<a href="about.html">about</a>

电话超连结

至今大多数的人使用行动装置占大多数，在网页上看到店家电话号码，只要在按下号码，就可以拨打，省去自行输入电话号码。

在href属性加上「tel」

<!-市内电话写法->
<a href="tel:+886-2-12345678">1234-5678</a>
<!-手机号码写法->
<a href="tel:+886-988******">0988-***-***</a>

还有另一个需要注意的是，在行动网页浏览时，发现iPhone的safari会误判数字为电话号码，要取消这问题，只要在加上这下面这行就可以解决罗

<meta name="format-detection" content="telephone=no">

信箱超连结

按下连结可直接寄电子邮件给对方。当使用者点击後，会跳出使用者预设的电子邮件软件，并在收件者栏位自动输入指定的电子邮件帐号。

在href属性加上「matilto」

<a href="mailto:[email protected]">Send Email</a>

id属性-移动到某位置

将连结设定要跳转到id目标元素上，href属性加上「#」字号，接着将区块内容设定id名称，就可以在网页上随心所欲的跳转到对应位置了

<body>
    <a href="#div1">go div1</a>
    <a href="#div2">go div2</a>
    <a href="#div3">go div3</a>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>

target

开启浏览器的方式

_self: 预设值，在目前浏览页面显示
_blank: 另开新视窗
_parent: 在上一层父视窗开启
_top: 在浏览器的顶端显示

如果是外部连结，target建议设定为_blank另开视窗

title

文字描述，当滑鼠滑过时会出现的文字

<a href="网站位址" title="连结文字叙述">连结名称</a>

样式

为了让使用者可以辨识是否为超连结，会设定样式，像是滑入做样式改变、滑鼠游标会出现手指

连结四种状态

a:link - 正常，未访问过，文字会显示蓝色
a:visited - 用户已访问过，文字会显示紫色
a:hover - 滑鼠滑入
a:active - 被点击的那一刻

<a href="#">未被访问的超连结</a>
<a href="http://www.yahoo.com">滑入超连结</a>
<a href="http://www.google.com">造访超连结</a>
<a href="http://www.active.com">点击超连结</a>

a:link{
  color:#333;
  text-decoration: none
}
/*已经被造访过的超连结*/
a:visited{
  color:#593588
}
/*滑鼠移过去的样子*/
a:hover{
  color:#1961ce;
}
/*点击不放时的样子*/
a:active{
  color:#885f35;
}

超连结可以设定CSS多种样式像是color、font-family、background...，上面的范例是只做文字颜色的改变，如何设定文字样式可参考网页文字-30天学会HTML＋CSS，制作精美网站