【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤
閱讀時間約 6 分鐘
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
由於結果會跟著瀏覽器顯示出來，相較於其他程式語言，HTML不會很抽象難懂，就算寫錯了，也非常好透過瀏覽器除錯。
什麼是HTML標籤？
每一種程式語言，都會有自己獨特的語法（syntax），藉由熟悉程式的語法我們可以跟不同的載具、軟體及其他程式語言做溝通。
而HTML的語法，主要是由HTML標籤（HTML Tag）所組成，一個標籤通常會由一組小括弧<>及在小括弧裡頭放入一小段語意單字。
通常標籤都是成對的出現，只要將要呈現在網站上的文字內容，用起始標籤（Opening Tag）及結尾標籤（Closing Tag）包起來，通常結尾標籤會比起始標籤多了一個「/」符號作為區分。
舉例來說，如果我想要建立一個標題我會（請點開程式碼閱讀）：
在範例中，我使用了<h1>標籤及其結尾標籤</h1>，並把我想要的內容放到中間，一個段落就可以很簡單的透過HTML建立出來了。
最常用的這四種標籤
在還沒有打開一個網頁前，我們幾乎可以預測到裡面可能會有怎麼樣的內容，像是宣傳的圖片、文章、文章的標題、文章的段落等，其實這些常見的網頁內容，都可以透過HTML標籤建立出來。
以下我將舉四個常見的HTML標籤做示範，他們分別是：
- <h1>
- <p>
- <a>
- <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
｜聯絡我：[email protected]
422會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助