iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
自我挑戰組

從零開始全端實作 Express.js + TypeScript + DevOps 系列 第 4

【Day 04】HTML 與網頁發展的歷史筆記(1)HTML 1.0 與 2.0

  • 分享至 

  • xImage
  •  

點我查看目錄

前言


接下來這篇文章會從 HTML 的歷史背景開始,介紹 HTML 1.0 與 2.0 版本的歷史背景、語法結構(但在實做上是用 HTML 5 的語法)等。對於我曾是剛入門的學習者,在了解這段歷史之後,才有更全面性理解目前網頁開發的背景架構。而在 HTML 中,我們首先要討論「標籤」和「屬性」,這兩個是組成網頁結構和內容的核心部份。

標籤(Tag)

  • 定義:描述 HTML 檔案中對不同元素的語法標記,通常在尖括號 < > 內填入標籤名稱。每個標籤代表一種 HTML 元素,這些元素用來排定的結構或內容,例如段落、標題、圖片等。

屬性(Attribute)

  • 定義:屬性是附加在標籤上的附屬資訊,用來提供或控制標籤的細節或行為,格式為 attribute="value"

HTML 1.0 & 2.0


HTML 1.0 是由 Tim Berners-Lee 在 1991 年發明的,但當時還是一個內部工具,用於幫助 CERN 的研究人員共享研究資料。那時候,這個新技術並沒有很快得到全球的關注。事實上,HTML 的最初設計並不是為了要做任何商業用途,也不是為了發展出像今天這樣的工具,而是一個簡單的、基於 SGML(Standard Generalized Markup Language)衍生出的標記語言,主要目的是為了方便在網路之間分享文件、或是透過超連結快速跳轉到其他文件。與其說它是一種技術創新,倒不如說它是一種解決問題的簡單工具,第一個網頁瀏覽器、網頁伺服器、以及第一個網站,就這樣誕生於一個高度學術性的環境。

當時的 HTML 只支援一些簡單的文字標記,如標題 <H1>, <H2>, <H3> …, <H6>、段落 <p>和超連結 <a href = ___ >、圖片功能 <img>。而相比於現在這麼 Fancy 的網頁,我們會說當年的 HTML 網頁都是靜態的,就像一個 PDF 檔案一樣,沒什麼特別的功能,像是 表格、表單、音樂、影片、繪圖等,都是之後的事情了。[1]

<title>Welcome to HTML 1.0

<h1>Welcome to the World Wide We
<p>This is an example of an early HTML 1.0 page.

<p>You can create links like this:
  <a href="<http://example.com>">Visit Example
</p>

<img src="image.jpg">

<h2>Here is a Subheading
<p>This web page uses simple text formatting and images.

若你看過 HTML 語法,就會發現這裡沒有結尾標籤,這是因為當年的 HTML 1.0 也沒有像現在有結尾標籤,這是到 HTML 2.0 才發展出來的了。

早期網頁與 Mosaic 瀏覽器的影響

在 1993 年,Mosaic 瀏覽器的誕生就改變了這一切。Mosaic 是第一款圖形化瀏覽器,這在當時對只支援文字的世界來說,讓網頁設計的表現力大幅提升。在 Mosaic 之前,網頁基本上只是一種超文本格式(你可以想像成是今天的純文字文件),而 Mosaic 的出現就吸引了大量的開發者踏入這個領域,這直接加速網際網路的普及率,也讓 HTML 從一個學術工具轉變成全球網際網路的基礎語言。有趣的是,當 Mosaic 瀏覽器開始流行的當時,HTML 還處於一個「非標準化」的階段,所以開發者經常自己手癢添加「標籤」來增加網頁的功能。這就直接導致了在當年不同的瀏覽器之間存在很多兼容性的問題。

HTML 2.0


隨著 1990 年代早期網際網路的逐漸普及,特別是 Mosaic 瀏覽器在 1993 年的問世,讓網頁上能夠綜合呈現文字段落和圖像的,使得網頁開發逐漸成為一個新的領域,因此開發人員開始要求更多的控制和功能,讓網站的表現和互動功能可以更多元。隨即 IETF(Internet Engineering Task Force)在 1995 年 11 月即正式發布 HTML 2.0 版本,做為 HTML 的第一個標準化版本。

HTML 2.0 最大的技術突破之一,就是引入了表單 <FORM> 的元素,這讓使用者 User 可以在瀏覽器上,透過表單(或稱表單)與伺服器 Server 進行資料交換。

而你可能也會好奇表單跟表格差異在哪裡,簡單來說:

  • 表單 Form 主要用於與使用者進行互動,讓使用者可以輸入資料並提交到伺服器。
  • 表格 Table 主要用於以結構化(行和列)方式呈現資料,讓使用者可以更直觀地查閱。

而有關交換的方式,會在後續的系列文章中提及。表單的設計背後是一個簡單的願景:讓網際網路可以是一個具有互動性的資訊展示平台。這是 Web 1.0 走向 Web 2.0 的一個重要里程碑,為後來的網路應用(如電子郵件、網上購物、銀行業務)提供了最基礎的元素與架構。

有關 HTML2 語法範例

而在語法上,HTML 2.0 引入了前代後續版本中保留的通用結構。總體 <HTML> 元素的定義有兩個主要元件,分別是 <HEAD><BODY> 。 [2]

  • <HEAD> 是在網頁完成載入之後,不會顯示在瀏覽器上的部分。其中包含一些資訊,如頁面的標題(<Title>)等,是告訴讓搜尋引擎如何基於頁面的基本資訊來理解這個頁面。
  • <body> 則是作為裝入網頁所有顯示內容的「容器」,使用者存取網頁所看到的內容,包含 文字段落、圖片、表單、網址連結、以及其他多媒體的元素等,所看到的一切內容皆是在 <BODY> 中進行定義的。

這是一個 HTML 2.0 程式碼的範例,你會發現所有的元素都會被兩個標籤夾住,分別為開始標籤 <tag> 和結束標籤 </tag>。例如,段落標籤 <P> 開始一個段落,而 </P> 結束這個段落。這種結構化的標籤格式能清晰地定義每個 HTML 元素的起始與終止位置。

這個規範是在 HTML 2.0 中被加入的,隨著網頁的元素越來越多,便需要透過相對嚴謹的規範使得文字、多媒體檔案、表單等,都是可以被瀏覽器正確解析的。尤其是在早期網頁開發環境中,不像現在功能這樣的完善,因此這些規範就是讓不同瀏覽器之間,都能有較為一致的編排。此外,這種設計也讓開發者在日後編輯或擴展網頁內容時,能夠快速解析整體網頁編排的架構。

HTML 2.0 語法結構

參照原 W3C 歷史文件中 [5],可以發現有幾個標籤在現代 HTML 規範中已經被廢棄(Deprecated)或者不被建議使用,因此以下僅就目前仍在使用的部份進行介紹:

參考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  1. Document Structure(文件結構)

    <-- <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> -->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="HTML5 Example Page">
        <title>HTML5 Example</title>
        <base href="<https://example.com/>">
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
        <h1>Welcome to the HTML5 Example Page</h1>
        <p>This is the main content of the page.</p>
    </body>
    
    </html>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/20163203xddzAewaoA.png

    • <!DOCTYPE>:用來宣告文件的類型,以及 HTML 所使用的版本。一般沒特別標記都是最新板的 HTML5。而你會注意到 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 的宣告,這已經過時,現代 HTML5 已經簡化為簡單的 <!DOCTYPE html>
    • <HTML>:這是最頂層的容器,定義整個 HTML 文件的結構。我們可以在這裡宣告屬性,例如 lang="en" 定義這文件的語言是英文(未特別標記,都是美式英文)。
    • <BODY>:文件的主要內容部分。
    • <HEAD>:這是在 <HTML><BODY> 之間的資訊,做為 Metadata 的「容器」。 很多人會對於 Metadata 有所疑惑,簡單來說 Metadata 是**「提供有關於其他 Data 的資訊」**,例如:
      • <META …>:用來定義Meta 數據,比如字符編碼、描述等。
      • <TITLE …>:定義文件的標題,顯示在瀏覽器標題欄中。
      • <BASE …>:設定相對 URL 的基礎 URL。
      • <LINK …>:用於連結外部資源,在 HTML 3.2 後可以連結 CSS 與 JavaScript 檔案。
  2. Headings(標題)

    <h1>Main Title(H1)</h1>
    <h2>Subheading(H2)</h2>
    <h3>Section Title(H3)</h3>
    <h4>Subsection Title(H4)</h4>
    <h5>Smaller Heading(H5)</h5>
    <h6>Smallest Heading(H6)</h6>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/201632036GaBNukajL.png

    • <H1> ... <H6>:這是各層級的標題,一共分為這六個層級。
      • <h1> 通常用於網頁的主標題
      • <h2><h6> 普遍用於次級標題。

    這些層次的安排對 SEO(搜尋引擎最佳化)至關重要,因為搜尋引擎會優先分析這些標題。同時,這也是無障礙工具(如螢幕閱讀器)用來協助頁面導航的關鍵。

    隨著 Google、Yahoo! 和 AltaVista 等搜尋引擎的崛起,搜尋演算法不斷進步,SEO 成為網頁設計的核心。其中最著名的是 Google 的 PageRank 演算法。這個演算法不僅考慮關鍵字數量,還分析網站間的相互連結並賦予權重(整合成線性代數方程式)。因此,網站標題(尤其是 <h1>)和內文結構的最佳化變得至關重要。畢竟,優質的內容才能提高網站能見度,取決於搜尋引擎如何「閱讀」網站的重點內容,而不是單純放一堆罐頭文字。

  3. Block Structuring Elements(塊級結構元素)

    在HTML中,有幾個重要的區塊結構元素,這是用來安排跟組織網頁內文架構用的:

    <p>This is a paragraph of text.</p>
    
    <pre>
      This is preformatted text.
      Line breaks and spaces are preserved.
    </pre>
    
    <address>
        Contact us at:<a href="mailto:site@domain.com">example@domain.com</a>
    </address>
    
    <blockquote cite="<https://example.com/source>">
        This is a long quote from a source that should be cited properly.
    </blockquote>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/20163203FD5fBi7Xlx.png

    • <p>:一組就代表一個獨立的段落,在預設情況下,瀏覽器會自動在段落的前後添加一些間距,以便區分不同段落。
    • <pre>:這是用於「預格式化文章」的標籤。它的特點是會保留所有的空格和換行符號,因此非常適合用來顯示 程式碼片段 或其他需要精確對齊的內容。
    • <address>:這個標籤通常用於顯示聯絡資訊,比如電子郵件地址或實體郵寄地址。在 <address> 標籤中,常見的做法是使用 mailto: 語法建立可點擊的電子郵件連結。換句話說,當你點擊這樣的連結時,會自動開啟他們的預設電子郵件應用程式(電腦常見的是 Outlook、手機常見的是 Gmail 等),並直接填入指定的電子郵件地址。
    • <blockquote>:這個標籤用於表示較長的引用文字。它的一個重要屬性是 cite,用來提供引用內容的來源 URL。由於 HTML 誕生於學術基礎之下,必然會有使用 cite 屬性的需求,主要對於學術或新聞類型的網頁中,能方便讀者進一步查證原始資料來源,以提高內文的可信度。
  4. List Elements(列表元素)

    早期的 HTML 列表定義了無序(<ul>)以及有序(<ol>),這些設計初衷,只是為了陳列出一些簡單的數據,並不如現在還有美編與排版。

    • <ul>, <li>:無序列表。這種列表通常用於不需要特定順序的項目展示,列表項由 <li> 定義。
    • <ol>, <li>:有序列表。這種列表用於需要按照特定順序排列的項目,例如步驟或排名。
    • <dl>, <dt>, <dd>:定義列表。用於表示詞彙及其定義,<dt> 是定義的術語,而 <dd> 是該術語的解釋。這種結構常見於 FAQ(常見問題解答)頁面或詞彙表。
    <ul>
        <li>First item in unordered list</li>
        <li>Second item in unordered list</li>
    </ul>
    
    <ol>
        <li>First item in ordered list</li>
        <li>Second item in ordered list</li>
    </ol>
    
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/20163203Jzb4Fozgye.png

  5. Phrase Markup(短語標記)

    1. Idiomatic Elements(語法元素)

      • <cite>:屬於 <blockquote> 之中的標籤,用法相同。
      • <code>:顯示程式語言的區塊,通常會使用等寬字體(如 Consolas)來區分程式碼與普通文章的標籤,到現在這成為了技術文件中與程式設計師交流的核心元素。你在這篇文章中看到的 Code 區塊,就是當年為了展示程式碼的區塊,只是這裡加入了 CSS 的排版,那就是後期的事情了。
      • <em>:用來強調某些內容,這種強調通常以斜體顯示,但其作用是增加語義上的重點。
      • <kbd>:用來表示鍵盤輸入,這對於撰寫技術文件時非常有用,例如告訴用戶按什麼鍵執行某些操作。
      • <samp>:用來顯示系統或程式的輸出,這對於展示示例或錯誤訊息特別有用。
      • <strong>:與 <em> 類似,但它用來強調比 <em> 更重要的內容,通常以粗體顯示。
      • <var>:顯示變量名稱,在技術文件中用來標示程式或數學公式中的變量。
      <p><cite>HTML5 Specification</cite> is a comprehensive guide to HTML.</p>
      
      <p><code>document.getElementById()</code> is a common JavaScript method.</p>
      
      <p>This text is <em>emphasized</em> with italics.</p>
      
      <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
      
      <p>The <samp>output</samp> was successfully generated.</p>
      
      <p>This is <strong>strongly emphasized</strong> text.</p>
      
      <p>The variable name is <var>x</var>.</p>
      
      

      https://ithelp.ithome.com.tw/upload/images/20240914/20163203KqVC6N0S2x.png

    2. Typographic Elements(排版元素)

      <p><b>This text is bold</b> for emphasis.</p>
      
      <p><i>This text is italicized</i> for emphasis.</p>
      
      <p><a href="<https://www.google.com>">Visit Google Main page</a></p>
      
      <p>Line one<br>Line two</p>
      
      <hr>
      
      <p><img src="<https://flatlogic.com/blog/wp-content/uploads/2021/06/3.5-3.jpeg>" alt="HTML meme"></p>
      
      

      https://ithelp.ithome.com.tw/upload/images/20240914/20163203WZpfixtZjd.png

      • <b>:用來顯示粗體字。雖然 <b> 標籤在現代 HTML 中被認為是一個單純的「樣式」元素,但習慣上我們會用 <strong> 取代。
      • <i>:用來顯示斜體字,這標籤類似於 <em>,但更多是視覺上的修飾而非語義上的強調。
      • <a>:用於建立超連結。href 屬性用來指定要導向的目標網站或路徑,alt 屬性用來做 href 的標題。
      • <br>:強制換行符號,這用來在不開啟新段落的情況下將文章分為多行。
      • <hr>:插入水平線,通常用來分隔內容或作為視覺分隔符。
      • <img>:用於插入圖像,src 屬性指定圖像的路徑,alt 屬性提供圖像的替代文章,有助於提升可訪問性。
  6. Forms(表單)

    <form action="/submit" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
    
        <label for="accept">Accept terms:</label>
        <input type="checkbox" id="accept" name="accept">
    
        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="male"> Male
        <input type="radio" id="female" name="gender" value="female"> Female
        <input type="radio" id="others" name="gender" value="others"> LQBTQIA+
    
        <input type="hidden" name="token" value="123456">
    
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
    
    <form>
        <label for="select-example">Choose an option:</label>
        <select id="select-example" name="options">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    
        <label for="textarea-example">Your comment:</label>
        <textarea id="textarea-example" name="comment"></textarea>
    </form>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/201632039LKCWNyObM.png

    • <form>:用來定義用戶提交資料的表單。action 屬性是指定提交表單數據的 URL,method 屬性則是定義表單資料的提交方式,通常是 GETPOST。(這我們在 RESTful API 會再提到)
    • <input>:定義不同輸入類型的表單欄位,我們用 type 屬性來決定輸入的是文字方塊、密碼方塊、單選方塊、複選方塊等。
      • <input type="text">:最基本的文字方塊。
      • <input type="submit">:提交表單資料到伺服器的主要按鍵。
      • <input type="reset">:清除表單中的輸入資料,恢復到最初的狀態。
      • <input type="checkbox">複選方塊
      • <input type="radio">單選按鈕
      • <input type="hidden">:這是隱藏欄位,當時主要用於傳輸一些不希望用戶看到,但需要後端處理的資料。
    • <select><option>:用來建立下拉選單,用戶可以從中選擇一個選項。
    • <textarea>:定義多行文章輸入框,適合用於需要輸入長篇文章的情況。
  7. Character Entity Sets(字符實體集)

    <p>Use &amp; for < and > characters.</p>
    <p>Use &copy; for copyright and &reg; for registered trademarks.</p>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/20163203FMWxCuniIS.png

    在 HTML 1.0 和 2.0 時期,網際網路的使用者主要來自西方國家,尤其是英語系的使用者。當時的網頁通常使用 ASCII(American Standard Code for Information Interchange)的編碼,包含 128 個字符,涵蓋了基本的英文字母、數字和標點符號,適合用於單一語言環境。

    然而這些符號就包含了 HTML 語法會出現的符號,像是 &lt;(小於 < 符號)和 &gt;(大於 > 符號)這樣的符號在 HTML 中是做為語言的標籤使用的,因此就需要以**字符實體(Character Entities)**的形式出現,以免 HTML 的編譯器誤解這些符號而出現錯誤。

    範例中的 &amp; 用於表示 & 符號,而 &copy; 版權符號和 &reg; 註冊商標符號也是為不會被 HTML 語法干擾,而設計出來的語法。

  8. Hyperlinks(超連結)
    (iTHome 似乎不支援 Gif 檔案,不然這要用動畫呈現會比較清楚,就放上截圖囉)

    <p><a href="<https://www.facebook.com>">Click here to visit Facebook</a></p>
    
    <p><a href="<https://i.imgflip.com/4e3544.jpg>"><img src="HTML meme.jpg" alt="This is another html meme"></a></p>
    

    https://ithelp.ithome.com.tw/upload/images/20240914/20163203V1XNZLaNAz.png

    • 超連結是 HTML 的靈魂所在,也是 HTML 發明的初衷之一。
      • <a>:超連結標籤,用來將文章或圖片轉換為可點擊的路徑或網站,href 屬性則是指定該目標路徑或網站。
      • <IMG …>:就是把原本 這樣的 超連結標題連結轉換為圖片形式的超連結。

以上內文就是 HTML 2.0 所有保存至今的網頁元素,因為經過這麼多年依然存在,就證明他是最根本也是最核心的元素;而許多棄用的元素,都以排版的標籤有關,這些都逐漸轉移到 CSS 進行統一處理了,我們會在 CSS 篇來聊聊這些內容。下一篇文會從 3.2 版出發,看看能不能讓我直接寫完 HTML 5.3 的內文


上一篇
【Day 03】前端與後端的差異(2)成為全端工程師?| RESTful API | 版本控管與 Git
下一篇
【Day 05】HTML 與網頁發展的歷史筆記(2)HTML 3.2 與 4.0
系列文
從零開始全端實作 Express.js + TypeScript + DevOps 12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言