使用<a>標籤
<a> 標籤用於定義超鏈接，用於從一張頁面鏈接到另一張頁面。<a> 元素最重要的屬性是 href 屬性，它負責指示鏈接目標。也用於設置錨點，用於頁面定位。
在所有瀏覽器中，鏈接的默認外觀是：
- 未被訪問的鏈接帶有下劃線而且是藍色的
- 已被訪問的鏈接帶有下劃線而且是紫色的
- 活動鏈接帶有下劃線而且是紅色的
- 如果想要更改默認樣式，可以使用a元素僞類來定義樣式。
| 屬性 | 值 | 描述 |
|---|---|---|
|
char_encoding |
HTML5 不支持。規定目標 URL 的字符編碼。 |
|
|
coordinates |
HTML5 不支持。規定鏈接的座標。 |
|
|
filename |
指定下載鏈接 |
|
|
URL |
規定鏈接的目標 URL。 |
|
|
language_code |
規定目標 URL 的基準語言。僅在 href 屬性存在時使用。 |
|
|
media_query |
規定目標 URL 的媒介類型。默認值：all。僅在 href 屬性存在時使用。 |
|
|
section_name |
HTML5 不支持。規定錨的名稱。 |
|
|
alternate author help |
|
|
|
text |
HTML5 不支持。規定目標 URL 與當前文檔之間的關係。 |
|
|
default、rect、circle、poly |
HTML5 不支持。規定鏈接的形狀。 |
|
|
_blank _parent _self _top |
規定在何處打開目標 URL。僅在 href 屬性存在時使用。 |
|
|
MIME_type |
規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。MIME = Multipurpose Internet Mail Extensions。 |
簡單實例：
<body>
<p><a href="http://www.baidu.com">跳轉到百度</a></p>
<p><a href="http://www.baidu.com" target="_blank">新窗口打開</a></p>
<!-- 把圖片作爲鏈接 點擊跳轉到指定URL-->
<a href="http://www.taobao.com"> <img src="img/cat.png" alt=""> </a>
</body><a>標籤除了通過URL找到目標網頁這一方式之外，還能用URL來定位文件
<!-- 使用a標籤定位文件地址 -->
<p><a href="img/girl.jpg">查看女孩圖片</a></p>
<p><a href="media/SwordArtOnline.mp4">查看電影</a></p> <!-- 使用download 標記鏈接爲下載鏈接 -->
<p><a href="img/girl.jpg" download>下載圖片</a></p>
<p><a href="media/SwordArtOnline.mp4" download>下載電影</a></p><a>標籤錨點定位
錨點是一種特殊的超鏈接，它能直接幫我們定位到頁面的指定位置，常用於那些內容龐大繁瑣的網頁，通過點擊命名的錨點鏈接，不僅讓我們能指向文檔，還能指向頁面裏的特定段落，便於瀏覽者查看網頁內容。錨點目標有兩種方式：一是通過ID。二是通過<a>標籤本身的name屬性來查找。建議使用ID方式，比較方便，無需重新定義一個新的<a>標籤。
兩種方式的實例如下：
<body>
<!-- 設置錨點 -->
<a href="#mark-1">跳轉到區域一</a><br>
<a href="#mark-2">跳轉到區域二</a>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="mark-1">區域一</div>
<!-- 如果要測試name效果，可以註銷上面一段，然後點擊錨點mark-2跳轉到區域二 -->
<a href="" name="mark-2"></a><div>區域二</div>
</body>上面只是跳轉同一頁面，如果要跳到另一個頁面的錨點目標，就需要先跳轉頁面。例如a.html跳到b.html中，在a.html這樣設置錨點：
<a href="b.html#mark">跳到b頁面</a>
頭部元素介紹與使用說明
| 頭部元素標籤 | 功能描述 |
|---|---|
| <head> | 作爲所有頭部元素的容器。和form元素差不多，嵌套其他頭部元素。 |
| <title> | 定義該HTML文檔的標題。HTML先顯示該信息 |
| <base> | 定義HTML文檔中所有鏈接的基準地址(默認地址)和打開目標方式(target) |
| <link> | 定義HTML文檔與外部資源的關係。通常用於引入外部CSS樣式表 |
| <style> | 爲HTML文檔定義一個內部樣式表。 |
| <script> | 爲HTML文檔定義一個腳本，通常是javascript類型。也可以鏈接外部js文件 |
| <meta> | 描述HTML文檔的隱藏信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。 |
一個簡單的頭部元素實例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我是標題</title>
<!-- 鏈接外部CSS -->
<link rel="stylesheet" href="./all.css">
<!-- 引入外部JS -->
<script src="./My.js"></script>
<!-- 內部樣式表，僅供當前文檔使用 -->
<style></style>
</head><base>標籤
<base>標籤可以爲HTML文檔中所有使用URL的地方加上一個基準地址，簡單來說就是瀏覽器會自動把基準地址放在相對URL之前。例如指向圖片或者文件時，無需填完整地址，瀏覽器會以base的目標URL來補齊填寫的相對URL。同時，相對URL也就變成絕對URL了。
實例
<!-- 定義基準URL地址 和所有鏈接的打開窗口方式-->
<base href="前端學習" target="_blank">
</head>
<body>
<a href="girl.png" id="a1">鏈接1</a><br>
<button onclick="javascript:document.getElementById('addr1').innerHTML = document.getElementById('a1').href">地址</button>
<div id="addr1">顯示地址</div>
<a href="img/girl.png" id="a2">鏈接2</a><br>
<button onclick="javascript:document.getElementById('addr2').innerHTML = document.getElementById('a2').href">地址</button>
<div id="addr2">顯示地址</div>
</body>
因爲HTML文件是放在本地系統上，所以URL是以訪問本地文件的方式來定位資源的，如果想看到類似網址的效果，可以使用Web服務器(tomcat、nginx等)，用127.0.0.1的形式來訪問。
<meta>標籤
<meta>元素常用於指定網頁的描述、關鍵詞、作者以及其他元數據。元數據可以使用於瀏覽器（如何顯示內容或重新加載頁面）、搜索引擎（關鍵詞）或其他Web服務。
| 必填屬性 | 值 | 描述 |
|---|---|---|
| content | some_text | 定義 http-equiv 或 name 屬性相關的元信息。作爲它們的值 |
| 可選屬性 | 值 | 描述 |
|---|---|---|
| http-equiv |
|
把 content 屬性關聯到 HTTP 頭部。 指示服務器在發送實際文檔之前，先要把傳送給瀏覽器的文檔頭部中包含指定的名稱/值對。 |
| name |
|
把 content 屬性關聯到一個名稱。 |
| scheme | some_text | 定義用於翻譯 content 屬性值的格式。 |
實例
<head>
<meta charset="UTF-8">
<meta name="keywords" content="read, blog, news"> <!-- 定義網頁關鍵字，方便搜索引擎收集 -->
<meta name="author" content="Mr.feng"> <!-- 網頁文檔作者 -->
<meta http-equiv="context-type" context="text/html"> <!-- 就算不寫這個，服務器也會發送給瀏覽器一個 text/html -->
<meta http-equiv="context-language" content="zh-CN"> <!-- 網頁使用的文字、語言-->
<meta http-equiv="Refresh" content="3" url="./jsArray.html"> <!-- 3s後跳轉到指定的URL-->
</head>