up
down
Close
架站盒子
Web Development Box
 

HTML 是什麼?基本架構說明

│ 907 Views │ HTML
HTML 是什麼?基本架構說明
HTML 是什麼?基本架構說明
  1. HTML 是什麼?
  2. 如何建立 HTML 檔案?
  3. HTML 基本架構說明

相信許多人都不陌生 HTML,甚至太過熟悉而經常忽略了它的重要性,如果能更認識 HTML ,相信對架站會帶來更大的幫助,本文將來介紹 HTML 的基本架構。

HTML是什麼?

HTML 全名為 HyperText Markup Language(超文本標記語言),也被稱作「超文本標籤語言」,顧名思義,它是一種標記語言(Markup Language)而不是程式語言(Programming Language),標記語言指的是為網頁中的內容(Content)標上標籤(Tags),這樣可以為網頁定義內容,如果沒有標記語言,那麼你將無法按照想像中的格式做排版,甚至你也無法放上圖片、音樂等。

為了讓瀏覽器能正確解讀每一個網站,因此需要讓全世界都統一使用同一種標記語言,於是 HTML 便誕生了。

單純只有 HTML 標籤的檔案其副檔就名為 .html,這樣的網頁又稱為靜態網頁,隨著技術發展,靜態網頁已無法滿足網站的需求,取而代之的便是動態網頁,這時副檔名就不是 .html,而是 .php 或 .asp 等用其他程式編寫的檔案,且不一定網址後面都帶有副檔名,比如「https://www.example.com/articles/hello-world」,此副檔名隱藏了起來,因此從外觀上看不出來是什麼程式編寫的。

如何建立 HTML 檔案?

如果你是完全的新手,可以嘗試以下步驟了解 HTML 檔案是怎麼生成的,如果你已經瞭解,可以跳過這段直接看基本架構。

首先隨便新增一個副檔名為 .txt 的記事本,接著隨便打一句話,比如「架站盒子」,然後另存在桌面上,再於該文字檔上按右鍵選擇重新命名,將 .txt 改為 .html 的副檔名然後存檔,這時你會發現桌面上的檔案已經是一個 HTML 的網頁了,將它打開後你會看到「架站盒子」四個字。

對,就是這麼樸實無華且枯燥,恭喜你完成了第一個 HTML 檔!

不,事情沒這麼簡單。現在的 HTML 檔並沒有任何標籤(Tags),這樣你無法為網頁做任何設計,接下來要帶你看 HTML 的基本架構。

不過在那之前,我建議你先下載編輯器,日後我們將使用編輯器來編寫網頁。編輯器有很多種,你可以選擇自己喜歡的編輯器,以下提供幾種常見的選擇:

  1. Sublime Text
  2. VS Code
  3. Atom
  4. Komoto Edit
  5. Notepad++

如果你完全不知道該選哪一個,可以先選第一個 Sublime Text,相當知名且擁有龐大支援,日後若有其他需求再考慮更換也不遲。

HTML 的基本架構

全世界的網頁基本架構都是由幾個簡單的標籤(Tags)組成的,以下為 HTML 基本架構:

<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
</head>
<body>
文章內容
</body>
</html>

所有網頁的原始碼都必須以<!DOCTYPE html>作為開頭,<!DOCTYPE html>的意思是宣告文檔類型,也就是告訴瀏覽器這是用 HTML 編寫的網頁,詳細說明請參考:網頁第一行宣告的意思<!DOCTYPE html>

而 HTML 內容須以<html>作為開頭,並用</html>作為網頁的結束,HTML 標籤大多都需要成對包夾,也就是<標籤名稱>(開頭)和</標籤名稱>(結尾),只有少數幾個可以獨立存在,例如<img>是不需要</img>作為結尾的。

<html>中主要可以分為<head>(抬頭)和 <body>(文本)兩大部分,你看到的網頁內容都寫在<body>之中,而<head>通常放<title>跟一些<meta>

<title>代表的是網頁標題,它出現在瀏覽器的標題列上,如果要在網頁中看到標題,你需要另外再寫一次標題於<body>中,一般都是使用<h1>包夾。

標籤內的名稱又稱為元素,HTML 基本架構的元素只有上述幾個,而實際上 HTML 的元素有很多,只是根據每個人的需求來選擇是否用或不用而已,而元素名稱不分大小寫,例如以下這幾種都可以:<title><TITLE><Title>

到這裡,你已經完全掌握 HTML 基本架構,接下來還有更多的元素等待你去挖掘,學會越多的元素可以讓網頁變得更容易理解(我是說瀏覽器理解你的網站),並且能更靈活地去調整網站,有空的話不妨多學一些吧。

延伸閱讀

本文是否對您有幫助?