HTML

發表於 更新於

角色

在網頁裡，每項技術都扮演了重要的角色

HTML、CSS、JavaScript 為前端學習必修技術，若以蓋房子來比喻，各有自己負責的工作：

  • HTML（結構、內容）：蓋房子需要的基礎建材，鋼筋、水泥、門、窗等等。
  • CSS（樣式、外觀）：房子有了 HTML 骨架後，CSS 如同裝潢設計師，可以打造漂亮好看的房子。
  • JavaScript（事件、行為）：觸發事件的互動效果，如同房子內部設施開關所觸發後產生的能源。

這三項技術是前端的地基，它們有著密切的關係（結構、外觀、行為），房子結構不穩、格局奇怪，可能需要打掉重建，電源、配線也要重新設計。

結構

對於 HTML（HyperText Markup Language）而言，它扮演了「結構」的角色。這角色在網頁中，雖是最基礎但卻是很重要的骨幹，如同蓋大樓需要的鋼筋、水泥、門、窗等等基礎建材，它是網頁的基礎。總以巢狀結構出現，因此會有父、子元素的稱謂，例如：html 標籤有著兩個子元素，head、body，而這兩個子元素的父元素是 html。最後會構成像祖譜的結構，把它倒過來，很像一顆樹，一開始的節點叫做根節點（root node），也就是 html 元素，整棵樹又被稱為 DOM Tree（文件物件模型樹）。

HTML 結構設計將影響之後樣式、程式的撰寫

<!-- html 結構 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>結構</title>
  </head>
  <body></body>
</html>

標記

Markup（標記）是 HTML 的核心，意思是「使用標籤標記內容，產生語義化結構」。標記什麼內容？標記文字、圖片、影音資源等等，網頁中傳達資訊的媒體元素。

<!-- a 標籤標記了「泰山職訓網頁設計」文字 -->
<a href="https://wdaweb.github.io/" target="_blank">泰山職訓網頁設計</a>

元素

元素是由標籤（tag）及標記的內容（content）所組成，它有以下這些特性：

  • 不分大小寫，請養成使用小寫的習慣。
  • 大部份會有<>起始標籤，</>結束標籤，成雙成對，之間為標記的內容。
  • 具有屬性與值（name/value），屬性之間需要空格。
  • 元素屬性值不限制用單引號或雙引號，請養成使用雙引號的習慣。
<img src="./images/example.jpg" width="300" height="100" />

空元素

沒有結束標籤的元素，又稱「獨立標籤」、「無結尾標籤」、「空標籤」。
常見的空元素有 <meta>、<link>、<br>、<hr>、<img> … 等等。

HTML 舞台

HTML 是一個舞台，每個元素如同一位演員，瀏覽器在讀取創建 HTML 這個舞台時，它是由上而下進行解讀，元素會逐一被解讀成一位演員，每位演員有著它要做的基本工作來顯示內容。

「head」 演員像是舞台的後場，標記的是給瀏覽器或搜尋引擎才能看到的資訊，舞台前場的使用者是看不到的。
「body」 演員像是舞台的前場，標記的是給使用者欣賞瀏覽的文字、圖片、影片等等。

此外，還有兩位較為特別的演員，負責外觀的「style」與行為的「script」，「style」演員的工作是負責顯示樣式外觀，白話點就是幫演員們化妝，而讀取到最後會遇到「script」演員，可以把裡面標記的內容想成一套劇本，告訴演員們該如何演出及事件發生時該做甚麼事情。

元素演員得先上場，劇本才能上演好戲，若是劇本先出現，元素演員未上場，等同白念劇本了。

<!DOCTYPE html>
<html lang="zh-tw">
  <!-- head 紀錄的是給瀏覽器或者是搜尋引擎看的重要資訊，一般瀏覽者無法看到 -->
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="這是我的第一個網頁" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一個網頁</title>
    <style>
      /* 本頁使用的 css 樣式外觀，幫網頁化妝　*/
    </style>
  </head>
  <body>
    <!-- body 是顯示給瀏覽者觀看的內容，藉由標籤標記的文字、圖片、影片等等 -->
    <script>
      // 本頁使用的 js，想成一套劇本
    </script>
  </body>
</html>

HTML 元素上的屬性

任何語言寫法一定要養成書寫習慣，HTML 為標記語言，寫法很簡單，但屬性加上與前端框架應用會變得非常多，在順序上，養成習慣變得重要。

  1. id
  2. class
  3. 元素其他屬性
  4. 框架指令
<div id="main" class="bg-primary" title="主區塊" :class="styleClass" v-if="true">Hello World</div>

語義化

雖然在排版上，大多數習慣還是用 <div> 來排版，但 HTML5 提供更多語意標籤使用，甚麼是語意標籤？簡單說就是直接給標籤一個好懂的名稱，來表示其結構及意義，例如:

標籤名稱 說明
<header> 定義網頁頁首的區域。
<nav> 定義網頁導覽區域。
<footer> 定義網頁頁尾的區域。
<main> 定義網頁主要內容區域。
<section> 定義一個區段範圍。
<aside> 定義一個側邊區域範圍，次要區域。
<article> 定義文章內容。
<figure> 定義圖形影像的區塊。