饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- 前端基础_html_html超链接.md [2021/09/15 14:29]
admin 创建
+++ 前端基础_html_html超链接.md [2021/09/15 15:30] (当前版本)
admin
@@ 行 1: / 行 1: @@
-<markdown>
 [\<\< 返回HTML教程](:document/html)
-</markdown>
+# 超链接
+如果没有超链接，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

饥人谷Wiki

站点工具

用户工具

页面工具