HTML 基本架構與 meta 資料

2020-01-16 22:03:20

HTML 是一種標籤語言，一個正確的 HTML 標籤必須包含「<」和「>」，一個 HTML 的頁面則包含三個部分，分別是

<!DOCTYPE html>：文件宣告
<head>：網頁檔頭
<body>：網頁內容

DOCTYPE 在 HTML5 後就不用作太多的定義，所以如果看到還有比較長的定義的頁面一般就是完成比較久且還沒更新到新的宣告的網頁。

在文件宣告後就是放 <html> 的標籤，一般我們會放上 lang 來宣告語系，例如：

<html lang="zh-tw">

</html>

接下來的 <head> 標籤內用來放一些描述網頁的資料(metadata)，這些內容不會顯示在網頁上。

內含的子元素常見有

-title元素：文件標題，會出現在瀏覽器視窗左上方的標題區域

-meta元素：描述HTML文件相關資訊，資訊內容由 name 與 content 屬性來決定

-style元素：樣式表宣告

-script元素：程式碼宣告，不過現在會比較建議把 script 的標籤放到 body 結尾之前加快網站開啟的速度

head 裡的 meta 部分放的是網站的一些資訊，主要可以給搜尋引擎或是 fb 和 twitter 這種社群網站更精確地了解這個頁面的內容，其中常見的包含：

name屬性
- author、description、generator 、keywords
http-equiv屬性
- content-language 、content-type 、refresh 、set-cookie
charset屬性
content屬性

name是用來描述網頁，常用的有以下這些:

1.<meta name="author" content="作者姓名">
描述網站(頁)的作者。
2.<meta name="description" content="網站簡述">
描述網站(頁)主要內容簡述。
3.<meta name="keywords" content="網站關鍵字">
描述網站(頁)主要的關鍵字。
4.<meta name="generator" content="Notepad">
描述網站(頁)的編輯工具。
5.<meta name="copyright" content="宣告著作權">
描述網站(頁)的網頁版權。
6.<meta name="distribution" content="Taiwan">
描述網站(頁)的發佈地。
7.<meta name="robots" content="all:none:index:noindex:follow:nofollow">
其中的屬性說明如下：
設定為 all：HTML 檔案將被檢索，且頁面上的鏈結可以被查詢。
設定為 none：HTML 檔案將不被檢索，且頁面上的鏈結不可以被查詢。
設定為 index：HTML 檔案將被檢索。
設定為 follow：HTML 檔案頁面上的鏈結可以被查詢。
設定為 noindex：HTML 檔案將不被檢索，但頁面上的鏈結可以被查詢。
設定為 nofollow：HTML 檔案將不被檢索，頁面上的鏈結可以被查

http-equiv屬性

1.<meta http-equiv="Content-Type" content="text/html"; charset=big5"> 和 <meta http-equiv="Content-Language" content="zh-TW">
用來說明網站(頁)的編碼，讓瀏覽器取得該頁面正確的編碼，現在瀏覽器都會自動判斷，不一定要寫。

2.<meta http-equiv="Refresh" content="timer;url=yourlink">
定時更新網頁，在 content 中有兩個參數需要設定，timer為你所指定的時間以秒計算；yourlink 你所指定的連結(當指定為自己時就會變成網頁定時重新整理)，這是如果這個網頁不再使用了可以使用，不過javascript跟php也都可以做到一樣的效果，不是很清楚實際用起來差在哪。

3.<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">
用於設定網頁的到期時間，一旦過期則必須到伺服器上重新讀取，而不使用快取的網頁，需要注意的是這裡所使用的為 GMT 時間格式。

4.<meta http-equiv="Pragma" content="no-cache">
是用於設定禁止流覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出；

5.<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
cookie設定，如果網頁過期，存檔的cookie將被刪除。需要注意的也是必須使用GMT時間格式。

6.<meta http-equiv="Pics-label" content="">
網頁內容做分級，在IE的internet選項中有一項內容設置，可以防止流覽一些受限制的網站，而網站的限制級別就是通過meta屬性來設置的。

7.<meta http-equiv="windows-Target" content="_top">
強制頁面在當前視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用。

以下為範例：

以下兩個不見得要設定，是用來讓網頁經過指定時間後自動導到特定的頁面的。
<meta http-equiv="Refresh" content="300">
<meta http-equiv="Refresh" content="20; URL=page4.html">

這邊也注意由於目前許多網站都有製作 RWD，若是要讓頁面可以支援 RWD，則必須加上下面這行
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">

若要設定網頁頁籤的小圖示，他的名字叫 favicon 可設定範例如下：
<link rel=icon href=favicon.png type="image/png">

這邊可以用的 type 有，可以依據想要用的格式指定：