貓城
BLACKCAT CASTLE

HTML基本架構與<!DOCTYPE html>的意思

   55 VIEWS
HTML基本架構與<!DOCTYPE html>的意思

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

HTML基本架構範例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
內容
</body>
</html>

說明

HTML

HTML 的全稱為 HyperText Markup Language,意思是「超文本標記語言」,也就是網頁標籤語言,而每個標籤都需要使用<>來包覆,如:<head>,而大多數的標籤都會對應結束的標籤,結束時需要加上/,如</head>,並且需要留意層級問題,例如 BODY 要包 CENTER ,那就是<body><center></center></body>

標籤並非自己隨便亂填,是有固定使用的標籤,常見的標籤請見:HTML TAGS 常用標籤

<!DOCTYPE html>

DOCTYPE 是 Document Type 的縮寫,代表文件類型,也就是告訴瀏覽器這是「HTML標籤語言」所撰寫的文件,這樣瀏覽器就會用 HTML 的定義來解讀這份文件。而隨著 HTML 版本的改變宣告方式也都不同,在1999年12月24日以後的版本為 HTML4.01,2000年1月26日以後版本為XHTML1.0,而2014年10月28日以後則是目前最新版的HTML5,在以前需要宣告版本,但HTML已經不需要宣告版本了,所以只需要在文件第一行輸入<!DOCTYPE html>即可。如果你現在要開始架站,寫<!DOCTYPE html>這樣即可

<html>

「<html></html>」的意思是指這裡面包覆的內容屬於超文件標記語言(HyperText Markup Language)。

<head>

這裡是放這個文件的重要資訊,如<title></title><meta>等。

<title>

此文件的標題,也就是網頁標題,會出現在標題列上。

<meta>

是用於提供搜尋引擎關於這個頁面內的重要資訊,如使用的語言、網頁描述、作者資料等。<meta>是沒有結束標籤的,因此只要寫<meta>即可。

HTML META 屬性:      
<meta name="description" content="網頁簡短描述">
<meta name="keywords" content="網頁關鍵字">
<meta name="author" content="作者姓名">
<meta name="generator" content="編輯器名稱">
<meta name="copyright" content="網頁版權">
<meta name="distribution" content="網頁發佈地區">

雖然列這麼多,但一般普遍只有使用 description 跟 keywords,其餘基本上沒什麼效果了,而關於 keywords 的部分,Google 在2009年已經公告不使用 meta keywords 來作為排名的參考,因為有太多網站故意塞一堆關鍵字來作弊。也就是說,如果你現在要架站,只需要寫 description 即可。

HTML meta http-equiv 屬性:                                        
<meta http-equiv="Content-Type" content="text/html"; charset="uft-8″>
網頁內容的種類以及編碼
<meta http-equiv="Content-Language" content="zh-TW">
網頁所使用的語言種類
<meta http-equiv="Refresh" content="time">
自動更新網頁的時間
<meta http-equiv="Pragma" content="no-cache">
禁止瀏覽器用快取開啟網頁
<meta http-equiv="windows-Target" content="_top">強制在單一視窗中顯示網頁

這個也是基本上寫第一個即可,並且 HTML5 可以寫得更簡潔,簡單說你現在要架站的話只要寫<meta charset="UTF-8">即可。

<body>

顧名思義就是這個網頁的身體,裡面就是我們網頁的內容。就像這篇文章內的內容都是寫在<body>裡面。


以上就是 HTML 基本架構,可以試著用記事本貼上文章一開頭的那段HTML原始碼,存檔時請存為 HTML檔,如「text.html」,這時用瀏覽器就會看到你製作的網頁了。

範例:

補充
網頁原始碼很重要,這個只是基本架構所以看起來跟只寫「內容」兩個字沒有差別,但實際上原始碼對網站有很大的影響,因為搜尋引擎是依據原始碼認識網站架構的,如果沒有這些架構就會影響網站排名或權重等,簡單說就是骨頭看不到不代表不需要啊,不要等被撞得粉碎才知道骨頭的重要性。




時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS