饥人谷Wiki

<markdown>
 
[\<\< 返回HTML教程](:document/html)
 
# 超链接
 
如果没有超链接，Web 就没有多大意义了。
 
## 创建超链接
### 简单链接
```html
<a href="https://jirengu.com">饥人谷</a>
```
 
 
### title 属性
```html
<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地">饥人谷</a>
```
 
### 外部链接
将 `target` 设置成 `_blank`时，点击链接浏览器会新开一个 Tab 打开该网页。
```html
<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地" target="_blank">饥人谷</a>
```
 
### 返回顶部链接
```html
<a href="#">返回页面顶部</a>
```
 
### 文档内部链接
用于定位到文档的某一部分，`<a>` 的 `href` 要对应文档内某个元素的 `id`（`id` 的值在文档内要唯一）。
```html
<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>
 
### 图片链接
```html
<a href="https://jirengu.com" title="可能是未来中国最火的前端工程师的聚集地">
  <img src="https://avatars0.githubusercontent.com/u/28950695?v=3&s=200" height="100">  
</a>
```
 
 
### 下载链接
```html
<a href="https://angular.io/resources/images/logos/angular/angular.svg" download>下载 Angular Logo</a>
```
 
### 电话链接
```html
<a href="tel:+8613701234567">+86 13701234567</a>
```
 
### Email链接
```html
<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
```
```html
<!-- index.html -->
<img src="images/logo.png">
```
```css
/* app.css */
.container {
  background: url('../images/background.png');
}
```
 
### 绝对路径
```html
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
 
</markdown>