HTML5 引用标签

HTML5 文件引用标签

[TOC]

## 1. 引用文件目录说明

+ `/` 根目录开始
+ `../` 上级目录开始
+ `../../` 上上级目录开始
+ `./` 同级别目录开始

**示例文件结构：**

```bat
file1/
    file2.html
    file3/
        file4.html
        file5.html
    file6/
        file7.html
        file8.html
```

**示例：**引用父级目录文件

> + file4.html 引用 file2.html 文件可以使用
    - `../../file1/file2.html`：上级目录的上级目录下的 file1 目录下 file2.html 文件
    - `/file1/file2.html`：根目录下 file1 目录下 file2.html 文件，这里和../../一致了，因此如果过要翻好几个上级目录，使用根目录更合适
    - `.././file2.html`：上级目录的同级目录 file2.html 文件

**示例：**引用同级目录文件

> + file4.html 引用 file5.html 文件可以使用
    - `file5.html`：直接引用
    - `./file5.html`：同级目录引用

**示例：**引用兄弟目录文件

> + file4.html 引用 file7.html 文件可以使用
    - `../file6/file5.html`：兄弟级目录下文件引用
+ file4.html 引用 file2.html 文件可以使用
   - `../file5.html`：兄弟级文件引用

## 2. 样式引用标签 link

link 标签没有结束符

```HTML
<link ref="stylesheet" href="../style.css">
```

## 3. 脚本引用标签 script

```HTML

<script src="script.js"></script>

<script async src="script.js"></script>

<script defer src="script.js"></script>

<script src="script.js" charset="UTF-8"></script>

<script src="script.js" type="application/javascript"></script>

<script src="script.js" type="application/javascript" charset="UTF-8"></script>
```

### 3.1. async 和 defer 的区别
async 和 defer 都是 JavaScript 引用的属性，用于异步执行或延迟执行 JavaScript 代码，它们的区别如下：

|async|defer|
|--|--|
|表示 JavaScript 代码会在页面加载后异步执行。当浏览器遇到 async 属性时，它会异步加载并执行指定的 JavaScript 文件，同时继续解析 HTML 文件并渲染页面。当 JavaScript 文件加载完成后，它会在后台执行，不会阻止页面中其他内容的加载和渲染。async 属性适用于异步加载 JavaScript 文件，并且不会阻止页面中其他内容的加载和渲染。|表示 JavaScript 代码会在页面加载后才执行。当浏览器遇到 defer 属性时，它会异步加载并执行指定的 JavaScript 文件，但是该文件会在页面加载后才执行，而不是在异步加载时执行。当页面加载完成后，浏览器会执行所有已经加载的 JavaScript 代码，但是它们会按照它们在 HTML 文件中的顺序执行，而不是同时执行。defer 属性适用于异步加载 JavaScript 文件，并且会在页面加载后才执行，但是不会阻止页面中其他内容的加载和渲染。|

### 3.2. type 属性种类
type 属性是 JavaScript 引用的属性，用于指定 JavaScript 文件的类型。常见的 type 值有以下几种：