skip to main content

頭裏的三寶 - HTML完整結構

於2020年02月18日發佈


經過上幾節課,相信你已經認識了很多常用在<body></body>中間,用戶會直接在瀏覽器上直接看到的的HTML Tag,但是這還未算一個完整的規範的HTML,我們還需要頭裏的三寶

HTML5最基本結構

以下我們將HTML的完整,最基本的部份抽出來讓你看看:

<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>

頭裏的三寶

<head> </head> 中其實可以裝很多東西。為了讓你這初學入門的你著想,我只介紹其中最重要的三寶

  1. <title>你的網頁標題</title>

    網頁標題,就是你瀏覽器分頁上顯示的那個標題
    這是網頁靈魂所在,用戶和網頁搜索器都很看重這個網頁標題,就想報紙雜誌頭版的那個大標題,如果這個設定不好,別人不知道這網頁做甚麼的話,用戶連點都不會點進來看你這一頁。所以用心點設定一個能清楚反映到整頁內容的標題會對你有很大好處
  2. <meta name="description" content="你的網頁描述">

    網頁描述,用戶看網頁時看不到,但你的網頁被搜索器找到的話,搜索結果中是會被顯示出來的,這裏也是一個可以吸引別人點進來看的內容,也需要夠簡單,易明和吸引。
    連同Title網頁標題一起都做得好的話,其實就是在做了一些叫搜尋引擎優化(Search Engine Optimization, 簡稱SEO)
    我也會做點有關SEO的文章和影片,有興趣的話記得留意這裡的其他文章。
  3. <meta charset="utf-8">

    網頁編碼

    以上不知名的字你是否曾經見過?有人叫這些"亂碼",我叫這些字串叫"怪獸字"。會出現怪獸字就是因為網頁編碼沒有設定好。
    總之有了這句把網頁編碼設成utf-8,就能基本上可以正常顯示到地球上任何一種文字了

完整規範的HTML 5

將頭裏的三寶加入你一直用來練習的HTML 檔案裏,貼上後大概就是這樣
<!DOCTYPE html>
<html>
<head>
<title>你的網頁標題</title> 
<meta name="description" content="你的網頁描述">
<meta charset="utf-8">
</head>
<body>這是你經過上幾課做的精彩網頁內容,加甚麼進去都可以</body>
</html>

這樣的才算叫一個較完整規範的HTML 5網頁。

下一節課

總結課 + 下一步

本文作者

網站位置 : 頭裏的三寶 - HTML完整結構

←返回首頁   返回頁頂↑