[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>
除了文字之外還能把圖片作為連結,網頁中點選Logo圖示跳轉網頁就是這麼完成的。
<a>標籤除了通過URL找到目標網頁這一方式之外,還能用URL來定位檔案
<!-- 使用a標籤定位檔案地址 -->
<p><a href="img/girl.jpg">檢視女孩圖片</a></p>
<p><a href="media/SwordArtOnline.mp4">檢視電影</a></p>
點選相應連結,就會找到對應檔案,針對不同型別的檔案作相應處理。但這樣做看起來有點多餘,一般瀏覽圖片都是直接可視的,這還需要點選跳轉多此一舉,看視訊或者聽歌總不能讓人點選跳轉後去播放吧?所以在HTML5中,這種用URL定位檔案可以用做下載連結了,加上download屬性,如下:
<!-- 使用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>
<meta>元素的http-equiv和name屬性不止這麼點,這裡只是簡要介紹其作用和使用方式,如果想深入瞭解,可以自行查詢資料。