2024 網頁x人因xDjango 實務課程 07 HTML 標籤大全

Caffeine 咖啡因

發佈於2024 網頁x人因實務課程

2025/03/06 更新2024/03/06 發佈閱讀 28 分鐘

前言

終於來到標籤這一堂課了，你網頁內容的所有，基本上都由標籤所組成。所以換句話說，標籤就是整個網頁的最基礎最重要的內容。接下來，我們將學到各式各樣的標籤，讓大家可以學習這些標籤，之後才得以設計這些網頁。那麼.....

Let's go！

整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。

文字類型

標題 <H1> - <H6>

說明

顧名思義，就是通常用來當作標題使用。隨著 H 後方的數字越小，這個標題的文字就越大。

範例

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <h1>h1標題</h1>
    <h2>h2標題</h2>
    <h3>h3標題</h3>
    <h4>h4標題</h4>
    <h5>h5標題</h5>
    <h6>h6標題</h6>
</body>
</html>

大家可以根據自己想要的標題大小，或是目前標題屬於第幾層，來選擇適當的 標題標籤 ！

段落

說明

用來區分不同段的文字內容。

範例

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是我的第一段</p>
    <p>這是我的第二段</p>
</body>
</html>

雖然目前看起來就只是分不同行而已，但是一旦文字多起來，像是這樣：

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>當你面對程式設計的挑戰時，不要氣餒；當你感到挫折時，不要放棄。每一次的嘗試都是進步的一步，每一次的失敗都是成功的鋪路石。</p>
    <p>堅持努力，繼續前行，你將會發現自己在程式設計之路上不斷成長，不斷突破自我，最終達到心中的目標。相信自己，你擁有無限的潛力，只要你勇敢地踏出第一步，就能創造出屬於自己的輝煌。</p>
</body>
</html>

就會像是這樣分出不同段落。

修飾類型

加重標記

說明

用於標註任何你認為重要的段落或是文字。

範例

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是一段<strong>文字</strong>。</p>
</body>
</html>

大家可以發現，被標註  的文字，會被顯示為粗體。

粗體

說明

用於標註任何你想更改為粗體的文字。

範例

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是用來示範<b>粗體</b>的範例</p>
</body>
</html>

這邊其實跟上一個 很像，被標註的字體都會呈現粗體樣式。那......他們有什麼區別呢？

在視覺上而言，兩者皆以粗體方式呈現。但就意義上而言，兩者分別為這兩種：

物理標記：告訴瀏覽器我需要用指定的樣式去顯示這段文字，但它本身並沒有其它的作用。
邏輯標記：告訴瀏覽器我需要用強調的樣式去顯示這段文字，它是強調文件邏輯的，並非只是通知瀏覽器應該如何顯示。

所以對於  標籤來說，他更重要的是去特別告訴開發者，這段文字是很重要的，也就是所謂的 邏輯標記 。而  只是單純用來顯示粗體，無任何意義，也就是所謂的 物理標記 。

當然，對於使用者而言，這兩者在視覺上無任何差別。

斜體

說明

用於標註任何你想更改為斜體的文字。

範例

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是用來示範<i>斜體</i>的範例</p>
    <p>這是用來示範<em>斜體</em>的範例2</p>
</body>
</html>

大家也可以發現， 與 兩個也都是在標示斜體樣式的功能。那他們又有什麼區別？

其實與剛剛的  、  類似，他們兩者的差異是在使用的時機。

 多數使用在重要語氣的地方
 多數使用在標示書籍、作者、署名的地方

當然，一樣對於使用者視覺上來說，無任何差別。

連結 <a>

說明

用於將指定的文字，附上超連結的屬性。

屬性

href

這是定義這個超連結要前往哪個網址的屬性。

我們可以指定這個超連結前往高科大：

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是一個前往<a href="https://www.nkust.edu.tw/">高科大</a>的連結</p>
</body>
</html>

也可以指定這個連結，發給我 gmail 。

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=C111118223@nkust.edu.tw">發送郵件</a>
</body>
</html>

點擊發送郵件後：

download

我們可以設定這個屬性，讓連結點進去後，可以下載某個檔案。比方說，我們來製作一個下載 高科大logo 的連結：

請注意！ href 屬性仍要寫上去，並且定義為空白。

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <a download="https://www.nkust.edu.tw/var/file/0/1000/img/513/182513897.png" href="">
    	下載高科大 LOGO
    </a>
</body>
</html>

當我們點擊超連結後，會顯示出：

這樣，我們就做出一個下載的連結了。

target

這裡是定義，點擊的這個網址，要在此處、新分頁、或是某個小框框中顯示就好。那我們可以這樣做：

taget = "_self"

這樣設定的網址，點擊後會在 此處頁面 顯示，若是有設定某個 特定框架 ，則會顯示在這個框架中。

如果只是 此處頁面 顯示

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <a href="https://www.nkust.edu.tw/" target="_self">前往高科大</a>
</body>
</html>

點擊後，則會前往高科大頁面，並在此處頁面顯示：

如果是 特定框架 顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>這是一個小框架</h2>
    <a href="/newPage2/" target="_self">前往框架2</a>
</body>
</html>

當我點擊 前往框架2 後，就會顯示出這樣的畫面：

你會發現，新網頁並沒有出現在整個頁面，而只是出現在這個框架之中。

taget = "_blank"

這樣設定的網址，點擊後則是會在 新分頁 中顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>這是一個小框架</h2>
    <a href="/newPage2/" target="_blank">前往框架2</a>
</body>
</html>

當我點擊 前往框架2 後，就會顯示出這樣的畫面：

而這就是點擊超連結後，出現在新分頁的網頁

taget = "_top"

這樣設定的網址，點擊後則是只會在 此處頁面 顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>這是一個小框架</h2>
    <a href="/newPage2/" target="_top">前往框架2</a>
</body>
</html>

當我點擊 前往框架2 後，就會顯示出這樣的畫面：

大家可以發現，這次就不再只是小視窗更改網頁，而是整個畫面都更改網頁了。

因此 _top 與 _self 最大的區別就是：

_self 更改的是視窗
_top 更改的是整個畫面

小字

說明

將所標記的字體，改成迷你的小字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<small>小字</small>的示範</p>
</body>
</html>

而這，就是小字的樣式。

上標

說明

將所標記的字體，改成上標的文字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<sup>上標</sup>的示範</p>
</body>
</html>

下標

說明

將所標記的字體，改成下標的文字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<sub>下標</sub>的示範</p>
</body>
</html>

底線 <ins>

說明

將所標記的字體，更改為帶有底線樣式的文字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<ins>底線</ins>的示範</p>
</body>
</html>

刪除線 <del>

說明

將所標記的字體，更改為帶有底線樣式的文字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<del>刪除線</del>的示範</p>
</body>
</html>

原文格式 <pre>

說明

將所標記的字體，根據其原本的內容格式，進行顯示。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>大家好
我是 Ting
    </pre> 
</body>
</html>

大家可以發現，<pre> 內的所有文字，會依照他的內容進行顯示，包括空格、換行都會被顯示在其中。

<pre> 與  最大的區別就是，  不會記錄換行與多個空格，他會直接像是一段字一樣，持續接下去。

雙引號 <q>

說明

將所標記的字體，改成帶有雙引號的文字。

示範

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>這是一個<q>雙引號</q>的示範</p>
</body>
</html>

空標籤

照片 <img>

說明

可以顯示任何圖片，但需要提供網址。

示範

請注意，若要更改圖片，只要在 src = "" 雙引號裡面，更改圖片網址即可。

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <img src="https://www.nkust.edu.tw/var/file/0/1000/img/513/182513897.png"/>
</body>
</html>

換行

說明

一個空行，經常用於換行使用。

示範

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是一串<br>文字</p>
</body>
</html>

分隔線 <hr>

說明

用於新增一個分隔線，做為區隔。

示範

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
</head>
<body>
    <p>這是一串<hr>文字</p>
</body>
</html>

區塊

區塊 <div>

在上一個課程當中，我們有介紹到，製作網頁的時候，我們經常需要將各個標籤組成一個群組。除了方便管理外，更重要的是，要為不同的群組做不同的設計。

用個最常見的情況來說就是，由於 html 預設不同標籤只能從上到下排。因此我們在沒做任何設定的情況下，無法達到左右排序，因此這時候就需要區塊來幫忙了。

我們可以利用區塊，設定多個群組，然後將其設定為左右排序。利用這樣的上下排序與左右排序，我們可以組合成各式各樣的網頁內容。

舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Layers of Div</title>
    <style>
        /* 添加一些基本样式，以便更好地区分不同的层级 */
        .container {
            display: flex;
        }
        .left {
            flex: 1;
            background-color: lightblue;
            padding: 10px;
        }
        .right {
            flex: 1;
            background-color: lightgreen;
            padding: 10px;
        }
        .top {
            background-color: lightcoral;
            padding: 10px;
        }
        .bottom {
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Multiple Layers of Div</h1>
    <div class="container">
        <!-- 左侧内容 -->
        <div class="left">
            <h2>Left</h2>
            <p>This is the left content.</p>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
            <h2>Right</h2>
            <p>This is the right content.</p>
        </div>
    </div>
    <!-- 上方内容 -->
    <div class="top">
        <h2>Top</h2>
        <p>This is the top content.</p>
    </div>
    <!-- 下方内容 -->
    <div class="bottom">
        <h2>Bottom</h2>
        <p>This is the bottom content.</p>
    </div>
</body>
</html>

那這邊目前先不多做 div 的介紹，我們將在後續介紹 css 的時候，一併介紹 div 的實際用法。

行內區塊

由於我們在一串文字當中，經常會需要在某些字上面做標示，比如說做螢光記號、標紅字、粗體等等......

雖然我們有不同標籤可以達到類似功能，比方說粗體的  ，但這些標籤較不靈活只有單一作用，因此我們會用  來代替這些標籤。

透過  我們可以設定某些  的樣式，這樣就能針對部分文字使用不同種的樣式，比方說：

<!DOCTYPE html>
<html>
<head>
    <title>我的簡單網頁</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is <span class="highlight">highlighted</span> text.</p>
    <p>This is <span style="font-size: 24px;">more bigger word's </span> example.</p>
    <p>This is <span style="color: red;">red word's</span> example.</p>
</body>
</html>