15個常用的HTML標籤與屬性基本介紹

15個常用的HTML標籤與屬性基本介紹

最後更新時間: 2021 年 5 月 14 日

在《Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構文章中,我們概要的認識了網頁的架構,知道<!DOCTYPE html>是宣告,功能是讓瀏覽器知道這是HTML,也知道網頁的架構就是由<html></html>、<head></head>、<body></body>三個大標籤(tags)所構成,分別表示網頁的工作範疇。

接著我們來簡單認識幾個常用的HTML標籤,及弄懂屬性(attributes)是什麼東西,知道怎麼使用常用的HTML標籤及屬性後,便可以運用基礎的知識,學習CSS,讓你具備架構網頁的知識與也知道如何設定選擇器(selectors),讓Python爬蟲來找尋你需要的資訊。

HTML標籤基礎知識

HTML標籤相當的多,不需要強求自己全部的標籤馬上要熟記在心,新手階段先學會常見的標籤,知道常見的標籤怎麼使用,對你的幫助會比因為要強記全部的標籤而失去學習的興趣來的多。

這裡我們主要介紹使用在<body>範圍內的標籤,這個<body>範圍的內容就是瀏覽器呈現給你看的網頁內容。

大多數的標籤都有開頭(opening)與結尾(closing),例如<p>代表開頭,</p>代表結尾,你要呈現的文字則放在開頭與結尾標籤中間,記得一定要打上結尾標籤喔。少部分的標籤不須結尾,例如<img>,就不必打結尾標籤了。

簡要的瞭解HTML基礎知識後,在探討HTML常見標籤前,我們來把學習HTML與你日常有的經驗作個連結,讓你在運用各種標籤時,更有概念。

請先假想你現在要寫一篇文章,可能是學校的作文作業、公司的工作報告或是你自己珍藏的旅行日記,文章中會有標題、段落、圖片,你會怎麼做呢?你可能會,拿出一張白紙、新建一個檔案或是在日記本的空白頁,寫下文章的標題,接著開始內文,建立一個一個的段落,有需要的地方,你還可以放上圖片、相片。

建立網頁的時候也是用相似的邏輯,如果你要下大標題,使用<h1>標籤,瀏覽器就會幫你以標題的模樣呈現出來;寫內文段落,使用<p>標籤,便是代表內文段落;想要加上漂亮的圖片、相片,你可以使用<img>標籤,便可以在你的網頁上放上圖片了。

這些標籤讓你覺得很陌生?那是因為你沒有去理解他使用的英文單字,各標籤中的英文都有他字面上的意思,當你知道是什麼意思後,就會好像在使用中文書寫一樣,得心應手了。

馬上來看看如何使用這些常見的HTML標籤!

15個常見的HTML標籤

段落文字<p>

<p>標籤是呈現網頁段落文字的標籤,文字段落大多都使用這個標籤,所以你在的網頁原始碼中,會看到許多<p></p>的標籤,以讓瀏覽器呈現出各個段落文字在網頁上。

為什麼使用p來代表段落文字?是來自於paragraph這個單字,以第一個字母p來代表。

下方的原始碼,呈現出的網頁文字就如其下的圖片,<p>標籤將他所包覆的文字呈現在網頁上。

<p>下雨吧,別再缺水了,一起來節水跟祈雨吧!</p>
網頁呈現的文字

標題<h1><h6>

代表標題的標籤有六個,分別從<h1><h2>依序到<h6><h1>代表這個網頁中主要標題。就像是文章的題目、一份工作報告的標題,都只會有一個,所以網頁的<h1>建議只用1次,瀏覽器與搜尋引擎才會知道你的主要標題是什麼,有利於搜尋引擎優化(SEO)

<h2><h3><h6>代表各個小標題,依照文章的層級,你可以依序列出各個小標,數字越大代表層級越低,h6就是最低的層級,h1是最大的標題。

為什麼使用h來代表標題呢?主要是使用標題的英文heading來表示,取單字的第一個字母h作為標題的標籤。

圖片<img>

想在網頁放上圖片,你可以使用<img>標籤,這個標籤不需要開頭與結尾標籤,單獨一個<img>標籤即可,我們稱這樣的標籤為空元素(empty element)。換句話說,他不像段落文字標籤,需要開頭<p>與結尾</p>這樣成對的包覆規則,<img>只需要單獨一個標籤就可以發揮功能了。

<img>標籤的使用上,主要在使用標籤的屬性(attributes),屬性包括圖片檔案來源src、圖片替代文字alt、高度height、寬度width。

例如你要在網頁放上一張小狗的圖片,你的HTML可以這麼寫:

<img src="dog.jpg" alt="dog" height="100" width="150">
<p>下雨吧,別再缺水了,一起來祈雨吧!</p>

呈現出的網頁內容會是下圖這樣:

img其實就是圖片的英文單字image之意,取這個單字的前三個字母代表。同樣的,屬性名稱src就是來源檔案的意思source file,alt是alternative text替代文字,height與width則是高度與寬度的英文。

需要特別留意,src屬性的值必須有圖片的副檔名,這邊的例子就是.jpg,如果沒有副檔名圖片無法顯示。

常見的圖片附檔名包括:

  • .jpeg
    靜態影像壓縮格式的圖片,由聯合圖像專家小組(Joint Photographic Experts Group),與jpg是一樣的意思,只是早期副檔名只能三個字母,所以只取jpg。雖有圖片失真的缺點,但因為檔案小的特性,有利於網頁傳輸,是很常見的網頁圖片格式。
  • .png
    可攜式網路圖形(Portable Network Graphics),圖片品質比.jpeg好,但檔案較大,可有透明底圖,常用於logo圖片。
  • .gif
    圖像互換格式(Graphics Interchange Format),可以插入多個影格產生動畫效果。
  • .svg
    可縮放向量圖形(Scalable Vector Graphics),向量圖的特性就是縮放不失真。

標籤的屬性可能讓你覺得有點複雜,但仔細拆解,其實就是將屬性名稱加上等號,要添加的屬性則填入引號內,不同屬性空一格表示。屬性可以選擇性的添加,依照你的需要為標籤添加屬性,當然如果像是<img>這類標籤,你一定得有src屬性,才可以添加上圖片。

屬性名稱="要給屬性的值"

選擇性的添加屬性是什麼意思呢?以前面的小狗圖片例子來說,你只想填寫檔案來源、替代文字,以及圖片高度,寬度你不想設定,如此一來,瀏覽器就會按照原本的圖面比例,幫你調整圖片寬度。

<img src="dog.jpg" alt="dog" height="200" >
圖片等比例放大了一些

超連結<a>

<a>標籤是錨anchor的縮寫,主要使用屬性href來展現功能,href是hypertext reference的縮寫。

<a href="填入轉跳的位置">我是超連結</a>

以上面的HTML為例,你點選「我是超連結」後,網頁就會轉跳到你在href屬性所設定的位置或網址。<a>標籤除了href這個屬性外,還有一個很常用的屬性是target,將屬性的值設為_blank,就可以讓你的超連結自動開新分頁,而不是預設的直接覆蓋掉原本的網頁。

<a href="https://selflearningsuccess.com" target="_blank">我是超連結</a>

<a>標籤的內容不僅可以是文字,也可以是圖片,若你想建立一個圖片的超連結,直接將文字替換為<img>標籤就可以了。

<a href="https://selflearningsuccess.com" target="_blank"><img src='dog.jpg' alt='dog' height='200'></a>

如果你對超連結(hyperlink)字面意思感到困惑,其實就是一個連結,連結到你指定的地方,只是這個連結是在HyperText 就是超文字中,所以加了個「超」字。還記得HTML的單字縮寫嗎?HTML的是HyperText Markup Language的縮寫,其中的HyperText 就是超文字,也有人翻譯為超文本,都是HyperText的意思。

其實超連結相當常見,任何一個網頁你點了某個圖片、文字,會跳出另一個頁面、轉跳到網頁的特定位置,都是超連結的呈現。

有序清單<ol>

在網頁列上有順序性的清單,使用<ol></ol>標籤,ol是ordered list有序清單的英文字母,各取單字的第一個字母形成的。實際的清單內容,則填在<li></li>標籤中。

<ol>
    <li>第1個</li>
    <li>第2個</li>
    <li>第3個</li>
</ol>

標籤中還可以再放入其他標籤,事很常見的用法,標籤可以一層一層的堆疊起來,展現出不同網頁內容。這邊我們看到<ul>標籤內還放了<li>標籤,瀏覽器看到<ul>便知道在網頁上呈現有序標籤,便會幫<li>標籤的內容加上1、2、3的順序。

無序清單<ul>

當你想在網頁上呈現沒有順序性的清單,可以使用<ul></ul>標籤,同樣的,實際的清單內容同樣是使用<li></li>標籤來呈現。

<ul>
    <li>第1個</li>
    <li>第2個</li>
    <li>第3個</li>
</ul>

ul是unordered list無序清單的英文字母,各取單字的第一個字母而形成;unordered是ordered的前面加上un字首,un字首代表「沒有、不」的意思,所以ordered加上un,就從原本的有順序的意思,變為unordered無順序的了。

<ul>標籤常用於選單中,你平常瀏覽的網頁有許多下拉式的選項便是使用<ul>標籤製作出來的。

空格<br>

<br>標籤的功用是空一行(a line break),br取自break的前兩個字母。

break的英文意思有打破的意思,也有休息的意思,這邊是休息一行的意思,所以網頁中會空一行。

註解

前面所提到的各種標籤都會顯示在網頁上,但如果你在編寫HTML時想在某個地方做個小筆記,提醒自己或其他人,這邊有什麼注意事項,你可以使用註解標籤。

<!-- 填入你的註解-->

你在<!-- -->中所填入的文字,瀏覽器將不會把這些文字顯示在網頁上。使用Ctrl+/(windows系統)或command+/(macOS系統)就可以在編輯器快速打出註解的符號。

區塊元素<div>

HTML是網頁的骨架,架構出來後,再用CSS來對網頁進行美化,而當你要美化網站時,你希望某個段落的一兩個字可以變為紅色,又或者某幾個段落文字要有背景顏色或邊框,你需要框選出一個範圍,<div><span>標籤便可以很明確的劃定位置。

在了解<div><span>這兩個標籤前,有個小觀念需要知道一下,就是區塊(block)與行內(inline)的概念。

區塊(block)呈現在網頁上是會換行的內容,行內(inline)則會在同一行。我們用前面<p>標籤的例子來做個說明。

你希望為文字加上紅色背景,你可以在<p>標籤外部包覆<div>標籤,讓<div>所包覆的內容形成一個區塊,你可以想像<div>就像是在他包起來的範圍畫了一個框框。接著在<div>開頭標籤內,填入CSS的樣式。

div是division這個單字取前面三個字母來表示,division是區分的意思,<div>標籤主要的功能就是在形成一個個的區塊,方便網頁排版美化,如果還不懂CSS沒關係,這裡你先理解<div>的概念就好了。

簡單的看個<div>的使用:

<div style="background-color:F9D9CA;">
    <p>下雨吧,別再缺水了,一起來祈雨吧!</p>
    <p>下雨吧,別再缺水了,一起來祈雨吧!</p>
</div>

行內元素<span>

延續前面的<p>標籤例子,如果你只想在「別再缺水了」這幾個字加上紅色底色,使用<div>會發生什麼事呢?

<div>包覆的那幾個字換行了,因為它是一個區塊,會自己有換行顯示的功能。

<p>下雨吧,<div style="background-color:F9D9CA;">別再缺水了</div>,一起來祈雨吧!</p>
這種用法主要用於舉例,通常不會在<p>標籤中放入<div>

如果你希望在行內劃分出一個小區域,你可以使用<span>標籤,他是行內元素,不會換行,可以保持你希望維持的段落文字格式。

光看文字與圖片也許不好理解,試著打打看,你會更清楚區塊與行內是什麼概念。

<p>下雨吧,<span style="background-color:F9D9CA;">別再缺水了</span>,一起來祈雨吧!</p>
<p>下雨吧,別再缺水了,一起來祈雨吧!</p>

常見的6個語意標籤

語意(Semantic)標籤是HTML 5新增的標籤,用於讓網頁結構更清楚,搜尋引擎可以更容易了解你的網頁。

語意標籤的用途與<div><span>類似,目的都在將內容劃分區域,只是<div><span>是沒有語意的。

這裡所指的語意是什麼意思呢?就例如,同樣是劃區一個區塊,你只知道<div>是一個區塊,這個區塊在做什麼你可能還需要細看內容才知道,但<header>劃分出來的區塊,你一眼就知道這是頁首的部分。

學習語意標籤很簡單,知道標籤的英文名代表什麼意思,在相對應的位置放上語意標籤,就可以讓開發者及搜尋引擎很快理解你的網頁架構,下圖就是語意標籤對照網頁架構的示意圖。

  • <header>頁首
  • <nav>導覽列
    nav是導覽、導航的英文navigation取前面三個字母
  • <main>主要內容
  • <section>區塊
    有主題性的區塊,基本上會有一個標題
  • <aside>側邊欄
  • <footer>頁尾

標籤屬性介紹

屬性(Attributes)是HTML標籤可以添加的額外資訊,讓標籤可以依照網頁開發者的需求,增加某些功能。

在前面介紹<img><a>標籤時有提到src、href、alt屬性,有些屬性只適用於特定的標籤,例如src就適用於<img>標籤,href適用於<a>標籤。當然也有屬性是任何一種標籤都可以附加的,例如style屬性,用來添加CSS。

屬性必須於開頭標籤輸入,如果是只有單一標籤,就將屬性填入該標籤即可。舉例來說,表示段落文字的<p>標籤,需要<p>開頭標籤與</p>結尾標籤,屬性你就必須填在開頭標籤中。下方原始碼你可以看到,style屬性是填在開頭標籤內。

<p style="color:CB8A90;">天氣怎麼這麼熱</p>

屬性怎麼填呢? 在標籤的代表字母後空一格,接者依序填上屬性名稱、等號、雙引號,雙引號中填入你需要的屬性值。

屬性名稱="屬性的值"

以style屬性來舉例,color代表文字的顏色,冒號之後填入顏色(可以是色碼、顏色、RGB),如此一來就可以添加文字的顏色。

遇到像是<img>這類的屬於空元素的標籤,不需要結尾標籤,直接將屬性填入<img>標籤中即可。

<img src="圖片位置或檔名" alt="圖片無法顯示時的替代文字">

以上便是常用的HTML標籤與屬性的概念介紹,HTML就是由許多不同功能的標籤所組成,標籤中可以添加屬性,為每個標籤增添額外的資訊。屬性都會放在開頭標籤中,閱讀HTML先看懂標籤的功能,在細看開頭標籤中的屬性。

15個標籤們分享給學習HTML的朋友,希望可以幫助你快速掌握HTML。

延伸閱讀:

Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

5本Python書推薦,強化你的程式語言觀念

12個入門Python線上課程:讓你快速學會寫程式

學Python可以做什麼:9個Python應用報你知

Python觀念,從 = 開始

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *