編程教程HTML 元數據
HTML元數據
title
title元素設置文檔的標題。
瀏覽器通常會在瀏覽器窗口或選項卡的頂部顯示此元素的內容。
每個HTML文檔應該只有一個標題元素。
標題文本應該對用戶有意義。
以下代碼顯示了正在使用的標題元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example from www.w3cschool.cn</title>
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>HTML Base
base元素為相對鏈接設置基本URL。
相對鏈接是省略URL的協議，主機和端口部分的鏈接并且針對一些其他URL(由基本元素或由基本元素指定的URL)進行評估用于加載當前文檔的URL。
base元素也指定如何在用戶單擊鏈接時打開鏈接，以及在表單提交后瀏覽器的行為。
base元素有兩個局部屬性
- href
- target
HTML文檔最多只能包含一個基本元素。
href屬性
href屬性指定基本URL將解析文檔中的相對URL。
以下代碼顯示了正在使用的base元素和href屬性。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base />
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
<a href="/javascript.html">JavaScript</a>
</body>
</html>上面的代碼將基本URL設置為//www.w3cschool.cn/listings/
www.w3cschool.cn是服務器的名稱，和listings是服務器上的目錄。
稍后在文檔中，它使用相對URL創建一個超鏈接javascript.html
當用戶單擊超鏈接時，瀏覽器將組合基本URL和相對的URL來創建組合網址//www.w3cschool.cn/listings/javascript.html
如果不使用base元素，那么瀏覽器將假設它應該解析與當前文檔的URL的任何相對鏈接。
例如，如果從中加載文檔URL//www.w3cschool.cn/app/mypage.html和它包含相對網址為myotherpage.html的超鏈接，那么瀏覽器將嘗試加載第二頁從完全限定的網址//www.w3cschool.cn/app/myotherpage.html
target屬性
target屬性指示瀏覽器如何打開網址。
您為此屬性指定的值表示瀏覽上下文。
HTML元數據
meta元素定義文檔的元數據。
您可以以不同的方式使用此元素，并且HTML文檔可以包含多個元素元素。
meta元素有局部屬性，包括name，content，charset，http-equiv。
charset屬性是HTML5中的新功能HTML4scheme屬性現在已過時。
元素的每個實例只能用于這些目的之一。
名稱/值元數據對
meta元素的第一個用途是定義名稱/值對中的元數據，您使用name和content屬性。
以下代碼使用meta元素在名稱/值對中定義元數據。
<!DOCTYPE HTML>
<html>
<head>
<meta name="author" content="www.w3cschool.cn"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<a >Visit www.w3cschool.cn</a>
</body>
</html>您可以使用name屬性來指定元素引用的元數據類型，和content屬性來提供一個值。
下表列出了可以與meta元素一起使用的預定義元數據類型。
| 元數據名稱 | 描述 |
|---|---|
| application name | 當前頁面所屬Web應用程序的名稱 |
| author | 當前頁的作者的名稱 |
| description | 當前頁面的描述 |
| generator | 生成HTML的軟件的名稱 |
| keywords | 一組用逗號分隔的字符串，用于描述內容 |
除了五個預定義的元數據名稱之外，您還可以使用元數據擴展。請訪問http://wiki.whatwg.org/wiki/MetaExtensions，查看這些擴展程序的列表。
robots元數據類型被廣泛使用。它允許HTML文檔的作者指定文檔應如何被搜索引擎處理。例如:
<meta name="robots" content="noindex">
大多數搜索引擎將識別的三個值是
- noindex - 不要索引此頁面
- noarchive - 不要創建此頁面的存檔或緩存版本
- nofollow - 不要追蹤（即抓取）此頁面的鏈接
HTML字符集
要正確顯示HTML頁面，我們必須設置字符集(字符編碼)。
meta元素的另一個用途是聲明字符編碼。
下面的代碼中顯示了一個示例。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="www.w3cschool.cn"/>
<meta name="description" content="A simple example"/>
<meta charset="utf-8"/>
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>字符集設置為UTF-8編碼。UTF-8是一種常見的字符編碼。
字符編碼
- ASCII是第一個字符編碼標準。它定義127個字母數字字符。ASCII支持的數字（0-9），英文字母（A-Z）和一些特殊字符！ $ + - （）@ <>。
- ANSI（Windows-1252）是原始的Windows字符集。它支持256種不同的字符代碼。
- ISO-8859-1是HTML 4的默認字符集。它支持256種不同的字符代碼。
- UTF-8（Unicode）涵蓋了世界上幾乎所有的字符和符號。HTML5的默認字符編碼為UTF-8。
HTML http-equiv
元素的最終用途是覆蓋HTTP（超文本傳輸??協議）頭之一的值。
HTTP通常用于在服務器和瀏覽器之間傳輸HTML數據。
來自服務器的每個HTTP響應都包含一系列描述內容的標題，您可以使用meta元素來模擬或替換其中的三個頭。
以下代碼使用meta元素來模擬HTTP標頭
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="5"/>
</head>
<body>
<p>This is a test</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>您可以使用http-equiv屬性指定要模擬的標題，和content屬性以提供要使用的值。
在上面的代碼中，refresh頭設置為5，它要求瀏覽器每五秒重新加載頁面。
Jump
如果使用分號和URL跟隨刷新間隔，瀏覽器將在間隔過去之后加載指定的URL。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="3; http://www.www.w3cschool.cn"/>
</head>
<body>
<p>This is a test.</p>
<a >www.w3cschool.cn</a>
</body>
</html>以下列出了http-equiv屬性的三個允許值。
- 屬性值:refresh
設置一個周期（以秒為單位），之后，將從服務器重新加載當前頁面。您還可以指定要加載的其他URL。例如：<meta http-equiv="refresh" content="5; https://www.www.w3cschool.cn"/> - 屬性值:default-style
設置應該用于此頁面的首選樣式表。 content屬性的值必須與同一文檔中的腳本或鏈接元素上的title屬性匹配。 - 屬性值:content-type
這是一種指定HTML頁面的字符編碼的替代方法。例如:<meta http-equiv="content-type" content="text/html charset=UTF-8"/>