HTML学习笔记6----链接

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

　　如何做链接？
　　做链接也是通过元素（element）实现的。 做链接只需一个元素和一个属性就行了。下面是一个例子，它是一个指向 chinahtml.com 的链接：

　　例1：

　　<a href="http://url.cn/OHnOmN/">这是一个指向 url.cn/OHnOmN的链接</a>

　　该例在浏览器中将显示如下：

　　这是一个指向 url.cn/OHnOmN 的链接

　　元素 a 代表“链接（anchor）”；属性 href 代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

　　在上例中，属性 href 的值为“http://url.cn/OHnOmN”，这是url.cn/OHnOmN 网站的完整地址，也被称作URL（统一资源定位符）。注意，在URL 里必须包含“http://” 。 “这是一个指向chinahtml.com 的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上 </。

　　如何在同一网站的网页之间添加相互链接？

　　如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整 URL 。举个例子，假如你有两个网页（比如说 page1.htm 和 page2.htm ），而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样，page1.htm 到 page2.htm 的链接将。如下所示：

　　例2：

　　<a href="page2.htm">点击这里转到第2页</a>

　　如果 page2.htm 被放在下一级文件夹中（比如“subfolder”），那么链接将是这样：

　　例3 3：

　　<a href="subfolder/page2.htm">点击这里转到第2页</a>

　　反过来，从 page2.htm（在下级文件夹中）到 page1.htm 的链接将是这样：

　　例4：

　　<a href="../page1.htm">转到第1页</a>

　　“../”代表当前位置（即该链接所在文件所处的文件夹）的上一级文件夹。同理，当前位置的上上级文件夹可用“../../”表示。明白其中的规则了吗？当然，如果给出完整 URL 也行。

　　如果要在一个网页内做链接怎么办呢？

　　你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录，在其中列出指向下面各章的链接。这可以通过使用 id 属性和“#”符号来实现。用 id 属性标出要被指向的元素。例如：

　　<h1 id="heading1">标题1</h1>

　　然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个 id 属性的值，表明链接指向该 id 属性被定义的地方。例如：

　　<a href="#heading1">转到标题1</a>

　　来看一个例子就明白了：

　　例5：

<html>
　　<head>
　　</head>
　　<body>
　　　　<p><a href="#heading1">转到标题1</a></p>
　　　　<p><a href="#heading2">转到标题2</a></p>
　　　　<h1 id="heading1">标题1</h1>
　　　　<p> 一 些 文 字 。。。。 </p>
　　　　<h1 id="heading2">标题2</h1>
　　　　<p> 一 些 文 字 。。。。 </p>
　　</body>
</html>

　　该例在浏览器中将显示如下（你可以试试看点击这两个链接）：

　　除了网页，链接还能指向什么？

　　你还可以为 e-mail 地址做链接，方法跟为网页做链接差不多：

　　例6：

　　<a href="mailto:nobody@chinahtml.com">给 nobody@chinahtml.com 发电子邮件</a>

　　该例在浏览器中将显示如下：

　　与指向网页的链接的唯一区别在于：指向 e-mail 地址的链接必须以 mailto: 开头，然后紧接着写 e-mail 地址。当点击这个链接的时候，缺省的 e-mail 程序将新建一封邮件，其中的收件人地址为链接中指定的 e-mail 地址。注意：这一功能仅当你的计算机安装了 e-mail 程序后才起作用。试试看吧！

　　有其他我需要知道的属性吗？

　　创建链接总要用到 href 属性。另外，你也可以在链接上使用 title 属性：

　　例7：

　　<a href="https://www.cnblogs.com/lirongyang/" title="上博乐园学习 HTML">博乐园</a>

　　该例在浏览器中将显示如下：

#------------------------------------------------我是可耻的分割线-------------------------------------------

　　title 属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上（别点击它）时 ， 提示文字“上博乐园学习 HTML”便会出现。