HTML 4.01 快速導覽 - <meta /> 文件資訊標籤

<meta /> 標籤 (tag) ,主要用途為提供 HTML 文件相關的資訊。



起始標籤結束標籤
需要不需要


<meta /> 有幾個屬性
屬性Deprecated or Obsolete
nameapplication-name
author
description
generator
keywords
content提供給 name 及 http-equiv 的內容
scheme提供更多的資訊Obsolete
http-equivcontent-style
refres


主要有兩方面的運用,分別使用 name 與 http-equiv 兩個屬性 (attribute) 。 name 搭配另一個屬性 content 使用,例如作者、描述、關鍵字等,如下表
屬性功能
nameauthor作者資訊
namecopyright版權資訊
namedescription文件描述
namekeywords關鍵字資訊


搭配 name 的 content 可以是任意值,例如
<meta name='description' content='線上免費學習程式語言的資源' /> 
<meta name='author' content='Kaiching Chang' />
<meta name='keywords' content='C' />
<meta name='keywords' content='C++' /> 
<meta name='keywords' content='Java' /> 
<meta name='keywords' content='JavaScript' /> 
<meta name='keywords' content='Python' /> 
<meta name='keywords' content='HTML 4.01' />
<meta name='keywords' content='教學' />


以上是本站所使用的 <meta /> 標籤。


http-equiv 有兩種主要功能,其一為網頁自動更新,搭配 content 屬性中需要指定連結網址,如下例
<html>
<head>
<title>網頁標題</title>
<meta http-equiv='refresh' 
 content='5; URL=example06.html' />
</head>
<body>
這是 example05.html ,五秒後網頁會自動更新到 example06.html 。
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example05.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


注意 <meta /> 的這一行
<meta http-equiv='refresh' 
 content='5; URL=example06.html' />


content 屬性中,第一個值給的是整數 5 ,表示秒數,後面接頓號,然後接 URL=example06.html ,這就是更新後的網址。


所以,用瀏覽器 (broswer) 開啟 example05.html 如下



五秒後更新到 example06.html



example06.html 原始碼如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
這是 example06.html 。
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example06.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


http-equiv 另一個功能是設定文件編碼,例如以下例子將網頁設定成 Big5 編碼
<html>
<head>
<title>網頁標題</title>
<meta http-equiv='content-type' 
 content='text/html; charset=big5' />
</head>
<body>
這是 example07.html 。
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example07.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


同樣的, <meta /> 這一行
<meta http-equiv='content-type' 
 content='text/html; charset=big5' />


content 屬性中,第一個值是設定文件型態,這裡是 text/html ,表示純文字的 HTML 文件,後面接頓號,然後接 charset=big5 , big5 為中文的大五碼,也是 MS-Windows 中文系統預設的編碼方式。


我們用瀏覽器開啟 example07.html ,如下



咦,亂碼?這是因為大五碼只通用在 MS-Windows 的中文系統,其他眾多平台可就不一定了說。因此,設定成 UTF-8 會是比較保險的作法,例如
<html>
<head>
<title>網頁標題</title>
<meta http-equiv='content-type' 
 content='text/html; charset=utf8' />
</head>
<body>
這是 example08.html 。
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example08.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


用瀏覽器開啟 example08.html ,如下



這就正常了,是不是呢?UTF-8 由 Unicode 非營利組織維護,納入各國的文字符號,其中包括大部分的常用中文字。


中英文術語對照
標籤tag
屬性attribute
瀏覽器broswer


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

沒有留言: