<< 返回HTML教程

超链接

如果没有超链接，Web 就没有多大意义了。

创建超链接

简单链接

<a href="https://jirengu.com">饥人谷</a>

title 属性

<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地">饥人谷</a>

外部链接

将 target 设置成 _blank时，点击链接浏览器会新开一个 Tab 打开该网页。

<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地" target="_blank">饥人谷</a>

返回顶部链接

<a href="#">返回页面顶部</a>

文档内部链接

用于定位到文档的某一部分，<a> 的 href 要对应文档内某个元素的 id（id 的值在文档内要唯一）。

<a href="#email链接">Email链接</a>
 
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">表单相关标签</a>

<a href="#email链接">Email链接</a> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">表单相关标签</a>

图片链接

<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地">
  <img src="https://avatars0.githubusercontent.com/u/28950695?v=3&s=200" height="100">  
</a>

下载链接

<a href="https://angular.io/resources/images/logos/angular/angular.svg" download>下载 Angular Logo</a>

电话链接

<a href="tel:+8613701234567">+86 13701234567</a>

Email链接

<a href="mailto:xidada@china.gov.cn">发封邮件给习大大</a> <br>
 
<a href="mailto:xidada@china.gov.cn?cc=pengliyuan@china.gov.cn">发封邮件给习大大并抄送第一夫人</a>

<a href="mailto:xidada@china.gov.cn">发封邮件给习大大</a> <br> <a href="mailto:xidada@china.gov.cn?cc=pengliyuan@china.gov.cn">发封邮件给习大大并抄送第一夫人</a>

文件路径

相对路径

同一站点尽量使用相对路径。
假设文件结构如下：

- index.html
- images/
    logo.png
    background.png
- styles/
    app.css

<!-- index.html -->
<img src="images/logo.png">

/* app.css */
.container {
  background: url('../images/background.png');
}

绝对路径

https://angular.io/resources/images/logos/angular/angular.svg

参考链接

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks