search

HTML語法

hashtag
HTML語法

HTML（超文字標記語言）是一種用來建立網頁結構和內容的標記語言。所有網頁的HTML內容都是由標籤所組成，呈現出相似的「基本架構」，但差異在於內容的組成、排版、框架、樣式等層面（就像每個人的身體骨架結構相似，但外貌、智力、個性等因素不同）。以下是一些基本的HTML語法和元素：

一個網頁的基本結構主要包括<!DOCTYPE html>聲明和三個主要元素，這些元素都是「必需存在」且「不能更改其標籤」，相關說明如下：

元素 說明

<!DOCTYPE html> 定義HTML的類型（doctype），會放在所有 HTML 的開頭，主要定義 HTML 的類型（ doctype )，意思是告訴瀏覽器這份文件是 HTML5 的規範，只要是網頁都需會放入。

  • <html></html> 根元素，包含所有在此頁面上顯示的內容。

  • <head></head> head元素，雖然使用者不會看到，但卻是必要的重要資訊（例如網頁標題、頁面說明、CSS等）。

  • <body></body> body元素，包含所有要呈現給使用者看的內容。

  • HTML 檔案，一律存檔為 .html 格式 ( 雖然 .htm 也支援，但相對來說比較不好 )。

  • 雖然在 HTML 存檔時可以用大小寫命名，例如 Apple.html 和 apple.html，但不同的瀏覽器會有不同的讀取規則，有些瀏覽器會區分檔名的大小寫，有些瀏覽器則會認為是同一個檔案，因此建議檔案名稱一律使用小寫字母，並且避免特殊字元或中文字 ( 因這些文字也會被轉換成字母和數字 )。

  • HTML 所有元素都是由「標籤」組成，標籤裡的字母 ( 包含屬性名稱 ) 一率使用「小寫」字母 ( 雖然大小寫混用還是可以正常運作，但通常任何一個常寫程式開發者都不會這樣做，這麼做也會造成整體程式碼不容易閱讀，且容易出錯 )。

// Some code
<!DOCTYPE html>
<html>
<head> 
    <!-- 此處放置網頁的元信息，如標題、CSS、JavaScript 等 -->
    <title>網頁標題</title>
</head>
<body>
    <!-- 此處放置網頁的實際內容 -->
    HTML 由 Tim Berners-Lee 於 1989 年創建，最初是用於在歐洲核子研究組織（CERN）內部網絡上共享科學文檔。隨著網際網路的普及，HTML 成為了網頁開發的標準語言。HTML 是一種簡單的語言，易於學習和使用。它可以用來創建各種各樣的網頁，包括簡單的文字網頁、複雜的多媒體網頁和互動網頁。
HTML 是網頁開發的基礎語言，它是每個網頁開發人員都需要掌握的語言。使用 HTML 做報告有許多好處，包括：
可在所有裝置上查看： HTML 報告可在所有裝置上查看，包括桌上型電腦、筆記型電腦、平板電腦和智慧型手機。這意味著您可以將報告分享給任何人，無論他們使用何種裝置。
可自訂： HTML 報告可自訂，以符合您的需求。您可以更改字型、顏色、版面配置和其他元素。這讓您可以創建一個看起來專業且吸引人的報告。
可輕鬆更新： HTML 報告可輕鬆更新。如果您需要在報告中添加新資訊或更改，您可以編輯 HTML 程式碼，然後重新發佈報告。這比使用傳統的文字處理器更容易更新報告。
可與他人共享： HTML 報告可輕鬆與他人共享。您可以將報告發佈到網站，或透過電子郵件發送給他人。這讓您可以輕鬆將報告分享給您的同事、客戶或學生。
圖片：使用  元素來插入圖片，src 屬性指定圖片的 URL：
使用 HTML 做報告是一種很好的方法來創建一個可在所有裝置上查看、自訂、輕鬆更新和輕鬆分享的報告。只要了解HTML語法，也能輕鬆的用記事本做網頁文本。
</body>
</html>

將上面的程式碼放到筆記本，另存成Gitbook.html，就能用各種瀏覽器(ex: Chrome、Edge、Firefox...等)瀏覽。如圖1-0所示。

圖1-0

hashtag
HTML的層次結構

從HTML的架構可以看出，它實際上形成了一個層次嵌套的「樹狀結構」。在這個結構中，外層的元素被稱為「父元素」，而內層的元素被稱為「子元素」。父元素和子元素之間存在著一種「相對關係」。一個元素可以同時是其他元素的父元素和子元素，形成交錯的關係。此外，除了父元素和子元素，還有「子孫元素」、「祖先元素」和「兄弟元素」等相對的術語。例如，在下面的圖示中，我們使用樹狀結構的方式呈現了之前提到的網頁架構：<head></head>裡會包含其他許多像是<meta>等不會被看到的資訊 ( 提供給瀏覽器或搜尋引擎看的 )，<body></body>裡則是要給使用者看到所有內容。

HTML 文件結構：一個 HTML 文件應該包含以下結構：

圖1-1

在下面章節，筆者將由結構由上層到下層拆解介紹，希望看完後，讀者能更了解如何撰寫HTML文件。

PreviousHTML開發Next<head>

Last updated