2024 網頁x人因xDjango 實務課程 07 HTML 標籤大全
前言
終於來到標籤這一堂課了，你網頁內容的所有，基本上都由標籤所組成。所以換句話說，標籤就是整個網頁的最基礎最重要的內容。接下來，我們將學到各式各樣的標籤，讓大家可以學習這些標籤，之後才得以設計這些網頁。那麼.....
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>
大家可以根據自己想要的標題大小，或是目前標題屬於第幾層，來選擇適當的 標題標籤 ！
段落 <p>
說明
用來區分不同段的文字內容。
範例
<!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>
就會像是這樣分出不同段落。
修飾類型
加重標記 <strong>
說明
用於標註任何你認為重要的段落或是文字。
範例
<!DOCTYPE html>
<html>
<head>
<title>我的簡單網頁</title>
</head>
<body>
<p>這是一段<strong>文字</strong>。</p>
</body>
</html>
大家可以發現，被標註 <strong> 的文字，會被顯示為粗體。
粗體 <b>
說明
用於標註任何你想更改為粗體的文字。
範例
<!DOCTYPE html>
<html>
<head>
<title>我的簡單網頁</title>
</head>
<body>
<p>這是用來示範<b>粗體</b>的範例</p>
</body>
</html>
這邊其實跟上一個 <strong> 很像，被標註的字體都會呈現粗體樣式。那......他們有什麼區別呢？
在視覺上而言，兩者皆以粗體方式呈現。但就意義上而言，兩者分別為這兩種：
- 物理標記：告訴瀏覽器我需要用指定的樣式去顯示這段文字，但它本身並沒有其它的作用。
- 邏輯標記：告訴瀏覽器我需要用強調的樣式去顯示這段文字，它是強調文件邏輯的，並非只是通知瀏覽器應該如何顯示。
所以對於 <strong> 標籤來說，他更重要的是去特別告訴開發者，這段文字是很重要的，也就是所謂的 邏輯標記 。而 <b> 只是單純用來顯示粗體，無任何意義，也就是所謂的 物理標記 。
當然，對於使用者而言，這兩者在視覺上無任何差別。
斜體 <i> <em>
說明
用於標註任何你想更改為斜體的文字。
範例
<!DOCTYPE html>
<html>
<head>
<title>我的簡單網頁</title>
</head>
<body>
<p>這是用來示範<i>斜體</i>的範例</p>
<p>這是用來示範<em>斜體</em>的範例2</p>
</body>
</html>
大家也可以發現，<em> 與 <i> 兩個也都是在標示斜體樣式的功能。那他們又有什麼區別？
其實與剛剛的 <b> 、 <strong> 類似，他們兩者的差異是在使用的時機。
<em>多數使用在重要語氣的地方<i>多數使用在標示書籍、作者、署名的地方
當然，一樣對於使用者視覺上來說，無任何差別。
連結 <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 更改的是整個畫面
小字 <small>
說明
將所標記的字體，改成迷你的小字。
示範
<!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>
而這，就是小字的樣式。
上標 <sup>
說明
將所標記的字體，改成上標的文字。
示範
<!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>
下標 <sub>
說明
將所標記的字體，改成下標的文字。
示範
<!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> 與 <p> 最大的區別就是， <p> 不會記錄換行與多個空格，他會直接像是一段字一樣，持續接下去。
雙引號 <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>
換行 <br>
說明
一個空行，經常用於換行使用。
示範
<!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 的實際用法。
行內區塊 <span>
由於我們在一串文字當中，經常會需要在某些字上面做標示，比如說做螢光記號、標紅字、粗體等等......
雖然我們有不同標籤可以達到類似功能，比方說粗體的 <b> ，但這些標籤較不靈活只有單一作用，因此我們會用 <span> 來代替這些標籤。
透過 <span> 我們可以設定某些 <span> 的樣式，這樣就能針對部分文字使用不同種的樣式，比方說：
<!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>
像在這個範例中，我們就設計了三種特別的內容：
- 螢光色標記
- 較大字體標記
- 紅字標記
因此這就是 <span> 能帶來的，特別字設計。
結語
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了各式各樣的標籤運用，雖然今天不會帶大家走太多流程，主要是讓大家知道有怎麼樣的標籤存在。在後續的課程，會慢慢教大家如何去更加善用這些標籤的。
接下來，我們將介紹表單的製作方式，讓大家可以與使用者作互動。
你可能也想看
