HTML 基本架構與 meta 資料

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 charset="utf-8">

<title>HTML 教學網</title>
<meta name="author" content="deathhell"/>
<meta name="date" content="2020/1/1"/>
<meta name="description" content="各種好用好玩的工具都在這裡,還會放一些奇怪的實驗作品。">
<link rel="image_src" href="https://tools.wingzero.tw/assets/images/metaimg.jpg" />
<meta name="URL" content="https://tools.wingzero.tw/">

以下兩個不見得要設定,是用來讓網頁經過指定時間後自動導到特定的頁面的。
<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 有,可以依據想要用的格式指定:

  • png image/png
  • ico image/vnd.microsoft.icon
  • icns
  • svg image/svg+xml

 

課程推薦

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師,打造上述 6 堂實用課程,教你學會時下最好用的 AI 工具,導入生成式 AI 來產製工作內容,改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。