[HTML5]：超連結(a標籤)、錨點定位和頭部元素
使用<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) |
| 定義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服務。
| 必填屬性 | 值 | 描述 |
|---|---|---|
| some_text | 定義 http-equiv 或 name 屬性相關的元資訊。作為它們的值 |
| 可選屬性 | 值 | 描述 |
|---|---|---|
|
把 content 屬性關聯到 HTTP 頭部。 指示伺服器在傳送實際文件之前，先要把傳送給瀏覽器的文件頭部中包含指定的名稱/值對。 |
|
| name |
|
把 content 屬性關聯到一個名稱。 |
| 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>