開發網站必備技能-HTML 介紹

HTML (Hypertext Markup Language),中文稱為「超文本標記語言」。

它是近代定義網站如何編寫的統一格式。

不管是段落、圖片、超連結等;

只要在網頁上呈現的東西,都要以 HTML 明確標示,才能讓瀏覽器讀懂並呈現出來。

在設計網頁上,絕對是最早最早認識的東西。

HTML 簡史

在介紹 HTML 的歷史前,必須先提到他的訂定者,Tim Berners-Lee(提姆.柏內茲-李)。

他也是第一個瀏覽器與網站的創造者。

當時,柏內茲-李在歐洲核子研究組織擔任獨立承包人。

為了能讓研究人員能更即時地更新資訊,他建立了一個超文本系統叫 ENQUIRE。

這是 HTML 的前身。

柏內茲-李在1990年寫出網頁瀏覽器(WordWideWeb,也就是網站開頭的 www)後,他沿用並改良了 ENQUIRE,訂定出 HTML 規範。

經過全球資訊網協會(W3C)的維護、改良,終於成為我們在所有網頁的基礎架構。

目前 HTML 是我們撰寫網頁時的世界公定標準。

簡單學會閱讀 HTML

HTML 的組成很簡單,他用 <> (元素,elements)來標註這一段是什麼東西。

<p>這是一行字</p>

在 HTML 中,你會看到很多行長得像上面的句子,每一行都有<> (元素)。

用來表示這一行代表什麼。譬如上片的<p>就表示一個段落的意思。

他也可以一層一層地包起來。如下:

<div>
    <p>這是一行字</p>
</div>

常見的元素有:

  1. <html>:表示這裡面寫的都是 HTML。
  2. <head>:不會顯示在網頁中的文字,但裡面會包含很多網站的基本資料。 包含網站語言、網站名稱、網站簡述等。
  3. <body>:所有要顯示在網頁上的內文都寫在這裡面。
  4. <h1>~<h6>:<h1>標明主標題、<h2>標明次標題,以此類推。
  5. <p>:段落。基本上所有文字都會用這個標籤。
  6. <div>:框起來的地方視為一個區塊。可以用來排版。
  7. <ul>:列點(不排序)。用「.」來列點。
  8. <ol>:列點(排序)。如「1, 2, 3」或「a, b, c」等。
  9. <img>: 圖片。
  10. <a>:超連結,常搭配 href 使用。 <a href=”<https://google.com>”> </a>

除了以上列出的常用標籤以外,還有很多不同的標籤。

可以參考 MDN,這個網站裡面有許多跟網頁開發相關的資源。

其中這頁包含了所有可用的元素,想知道更多的話可以到這裡面找唷。

Back To Top