【自學程式】什麼是HTML標籤?初學網頁開法必備的四個HTML標籤

【自學程式】什麼是HTML標籤?初學網頁開法必備的四個HTML標籤

更新於 發佈於 閱讀時間約 6 分鐘

HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。

它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。

由於結果會跟著瀏覽器顯示出來,相較於其他程式語言,HTML不會很抽象難懂,就算寫錯了,也非常好透過瀏覽器除錯。


什麼是HTML標籤?


每一種程式語言,都會有自己獨特的語法(syntax),藉由熟悉程式的語法我們可以跟不同的載具、軟體及其他程式語言做溝通。

而HTML的語法,主要是由HTML標籤(HTML Tag)所組成,一個標籤通常會由一組小括弧<>及在小括弧裡頭放入一小段語意單字。

通常標籤都是成對的出現,只要將要呈現在網站上的文字內容,用起始標籤(Opening Tag)及結尾標籤(Closing Tag)包起來,通常結尾標籤會比起始標籤多了一個「/」符號作為區分。

舉例來說,如果我想要建立一個標題我會(請點開程式碼閱讀):



在範例中,我使用了<h1>標籤及其結尾標籤</h1>,並把我想要的內容放到中間,一個段落就可以很簡單的透過HTML建立出來了。


最常用的這四種標籤


在還沒有打開一個網頁前,我們幾乎可以預測到裡面可能會有怎麼樣的內容,像是宣傳的圖片、文章、文章的標題、文章的段落等,其實這些常見的網頁內容,都可以透過HTML標籤建立出來。

以下我將舉四個常見的HTML標籤做示範,他們分別是:

  1. <h1>
  2. <p>
  3. <a>
  4. <img>


使用<h1>建立網頁標題


建立網站的內容,就跟寫作一樣,需要有起承轉合,也需要能幫助讀者釐清閱讀內容的「標題」

在HTML中,有一系列專門建立標題的HTML標籤,他們通常以h開頭,從文字大小由大至小分別為<h1><h2><h3><h4><h5><h6>


在建立一個標題時,我們可以使用該標籤的起始標籤及結尾標籤將文字包住,就可以建立出我們想要大小的標題了。


使用<p>建立網頁段落



建立好標題後,我們可以使用<p>標籤來建立文章段落,一組<p></p>就代表完整的一個段落,如果想要另起新的段落的話,我們就會使用第二組的<p></p>標籤:


使用<a>建立超連結


說完了<h1>及<p>標籤,大家現在對於HTML標籤就有了初步的認識,但要靠著這兩個標籤就想要排版出一段文章是不可能,所以接下來我就要介紹另外一個常常在網頁中看到的HTML標籤:a連結。

<a>連結與<h1>及<p>標籤一樣,都是成對的出現,並在其中放入我們想要的內容,但我們常見的超連結,除了會顯示連結的名稱外,點擊後來會連到其他網頁,這是怎麼做到的呢?



透過程式碼,我們可以看到<a>標籤與<h1>及<p>標籤有些不同,在<a>起始標籤的部分多了一段href="www.google.com"的文字。

在這裡只要先知道,在href=” ”的引號中,填入我們想要連結的網址,並一樣將顯呈現的文字內容填入成對的標籤內,就可以打造出超連結的效果。

通常我們並不會單一個<a>標籤自己存在使用,而是有可能與<p>段落混用,在一些特定的文字上加入連結,創造一些行銷的網頁效果。

從範例程式碼當中,我們可以了解到HTML標籤是可以被堆疊的,在一組標籤中,還可以建立出例外一組標籤,但使用時必須注意,這些標籤必須成對出現,不然就會出錯。


使用<img>建立圖片


學習<a>連結標籤後,我們接著要了解一個少數在HTML這個語言中,不成對的HTML標籤<img>


透過<img>標籤我們可以很輕鬆的建立出一張圖片,從範例中我們可以看到,它只需要自己一個獨立標籤就能創造出效果,而不需要結尾標籤。

<img>除了是不成對的標籤外,他也有與文字標籤或是<a>標籤不同的屬性,分別為<src>及<alt>,兩個的意思分別為sourcs及alternative description,代表著圖片的來源及替代敘述。

我們可以在src=” ”中填入圖片網址,或是圖片在本機電腦的位置,就可以在瀏覽器當中呈現圖片了。

而alt=” ”的作用在於,圖片有時候可能會因為各種原因,像是網路不好、圖片連結失效而導致圖片失效,這時候在alt=” ”中填入替代文字,就可以在文字失效時帶入替代圖片出現的文字

另外一個alt的作用在於,世界上有許多因視障而不良於使用網站的用戶,這些用戶可以使用特別的軟體,將網站內的內容讀出來,但因為圖片並不是文字,沒有辦法被讀取到,我們就必須加上alt裡的替代文字,創造無障礙的網站環境

在初學網頁開發時,很多人都會偷懶不填alt裡的值,但其實這是網頁開發的大忌,因為沒有人可以完全保證這張圖片可以被另外一端的使用者看到,甚至可能會帶有歧視視障者的意味。

在今天章節當中,主要是要讓大家對於HTML標籤有初步的認識,後續會跟大家分享更多有關HTML標籤的基礎知識,請大家敬請期待!

關於網頁技術的問題,歡迎你下方留言跟我討論與交流:)

希望今天的文章有幫助到正在閱讀的你,如果你喜歡我的文章的話,可以留下你的愛心或是收藏我的文章,也或者可以點選「贊助」,你的一杯咖啡絕對是我持續寫下去的動力!或是透過拍拍手,用你小小的行動支持我的創作!


我是Vivian,我們下次見。


也許你會對這個有興趣:



關於我:

2019年從英文系畢業,2021下定決心開啟轉職工程師的新生活,相信不斷學習會有成長的一天。

|Instagram: Vivian Yeh|vivian_enlife

|聯絡我:vivian.enlife@gmail.com


avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
443會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言
avatar-img
留言分享你的想法!
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?