什麼是 HTML ?


Posted by strangedog on 2021-05-31

從開始工作到現在已經一個月了,雖然每天寫的文章時都以 HTML 語法撰寫,但由於使用內容編輯器的好處,我幾乎只需要碰到 HTML body 部分的內容結構 。

今天重新複習 HTML 程式碼時,忽然發現:「原來有宣告這個東西存在!?如果沒人特別跟我說,自己忘記網頁是需要寫宣告語法呢~」

因此,今天決定重新理解這個基本的知識。

HTML 的基本結構有哪些?

一份 HTML 文件需要包含以下 5 種最基本的要素,分別是:

  • <!DOCTYPE>
  • html
  • head
  • title
  • body

若將他們組裝起來,就會形成以下程式碼:

<!DOCTYPE html>
    <html>
        <head>
            <titile>網頁名稱</title>
        </head>
        <body>
            網頁內容
        </body>
    </html>

以下我們依序介紹五項要素。

THE DOCTYPE

宣告語法(The DOCTYPE)是每個 HTML 網頁裡,第一行程式碼的內容。

它存在的目的是告訴瀏覽器,該份網頁文件是使用哪個版本的 HTML 語法撰寫,方便瀏覽器載入相關內容。

目前現代電腦是使用 HTML 5 的版本,其他更早以前的版本還有如下表呈現。

版本 年分
HTML 1991
HTML+ 1993
HTML2.0 1995
HTML3.2 1996
HTML4.01 1999
XHTML 1.0 2000
XHTML5 2014

head、body

我們可以將 head 與 body 這兩個元素,以「是否看得見」為劃分。

head 元素裡面的內容偏向「幕後工程」,在這裡所做的任何改動都不會顯示在螢幕上。

body 元素的內容則相反,裡面包含文字、圖片、影片、連結等等要素,都是能直接顯示在螢幕上的內容。

title

title 元素是用於描寫網頁標題的語法,也是我的 SEO 工作關注的重點項目之一,更多資訊可以這篇文章

額外解說:meta

meta 是包含在 head 元素內的次元素,它通常用於提供搜尋引擎該網頁額外的資訊,例如網頁使用的關鍵字、網頁的簡介、網頁撰寫的作者等等。

此外,網頁開發者還會搭配使用 charset 語法,告訴瀏覽器網頁的編碼類型,避免出現亂碼。

<meta charset=”utf-8">

以上就是這次的分享,我們下次見!










Related Posts

C# 用ini檔讀寫暫存資料

C# 用ini檔讀寫暫存資料

The introduction and difference between class component and function component in React

The introduction and difference between class component and function component in React

[MTR04] W2 D3 JS 基礎:陣列、物件與變數

[MTR04] W2 D3 JS 基礎:陣列、物件與變數


Comments