HTML 中的標籤就像關鍵字一樣，每個標籤都有自己的語意（意義），例如<p>標籤代表段落，<b>標籤代表加粗。根據標籤的不同，瀏覽器會使用不同的方式來展示標籤中的內容。
在實際開發中，有時我們也會將HTML 標籤稱為HTML 元素。
屬性
↓
<div class=foo>C語言網</div>
↑ ↑ ↑
開始標籤內容結束標籤
除了class屬性外，開始標籤中還可以包含其它屬性訊息，例如id、title 等，這些我們會在後面進行解說。
注意：雖然HTML 標籤在語法上不區分大小寫，但為了規範和專業，強烈建議在定義標籤時一律採用小寫
（一）標籤語義
學習標籤是有技巧的，重點是記住每個標籤的語義。簡單理解就是指標籤的意義，即這個標籤是用來幹嘛的。根據標籤的語意。在適當的地方給一個最為合理的標籤,可以讓頁面結構更清晰。
（二）標題標籤h1-h6
為了讓網頁更有語意化，我們常常在頁面中用到標題標籤。 HTML提供了6個等級的網頁標題，即<h1> - <h6>
<h1>我是一級標籤</h1>
h是單字head的縮寫，意為頭部標題。
標籤語意：作為標題使用，並且依據重要性遞減。
● 特點：
1. 加了標題的文字會變的加粗，字號也會依序變大。
2. 一個標題獨佔一行。
（三）段落標籤與換行標籤
網頁中想讓文字分段顯示. <p>標籤用來定義段落樣式
<p>我是一個段落標籤</p>
p就是paragraph，段落的意思；可以將html分割為若干段落, 根據瀏覽器視窗大小自動換行, 段落與段落之間保有空隙.
在HIML中, 一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後才自動換行。如果希望某段文字強制換行顯示，就需要使用換行標籤<br/>.
break 強制換行單標籤行間距不大。
新聞案例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>國際新聞</title></head><body><h1>國際新聞</h1><h4>烏克蘭當天早上派出無人機攻擊了位於俄羅斯梁贊州和薩拉托夫州的軍用機場</ h4><p>當地時間12月5日，俄羅斯國防部發表聲明說，烏克蘭當天早上派出無人機攻擊了位於俄羅斯梁贊州和薩拉托夫州的軍用機場，但被俄軍防空系統攔截。攻擊中有3名俄軍士兵死亡，另有4人受傷。 </p><p>此外，由於烏克蘭無人機在軍用機場上方的墜落，導致俄軍兩架戰機的機體受損。數小時後，烏克蘭方面報告俄羅斯發動了新一輪飛彈襲擊。 </p><h4>俄方不可能交出札波羅熱核電廠控制權</h4><p>俄羅斯外交部發言人札哈羅娃向衛星通訊社表示，俄方不可能交出札波羅熱核電廠控制權。 </p><h4>拜登不會考慮使用俄羅斯石油來補充戰略石油儲備</h4><p>美國白宮稱，對俄羅斯對價格上限的反應並不感到驚訝。拜登不會考慮使用俄羅斯石油來補充戰略石油儲備。美國能源安全特使Hochstein表示，美國仍有足夠的戰略石油儲備（SPR）來應對緊急情況。拜登政府將於12月8日與美國石油業高層召開線上會議，討論如何支持烏克蘭的能源基礎設施。美國能源部長將於14日會見許多石油公司高層。 </p><p>C語言網<br/>2022-12-6</p></body></html>
顯示如下：
（四）文字格式化標籤
在網頁中，有時需要為文字設定粗體、斜體或底線等效果，這時就需要用到HTML中的文字格式化標籤。使文字以特殊的方式顯示。
標籤語意：突出重要性比普通文字更重要。
<strong>加粗</strong><b>加粗</b><em>傾斜</em><i>傾斜</i><del>刪除線</del><s>刪除線</ s><ins>底線</ins><u>底線</u>
展示如下：
（五）div和span標籤
<div>和<span>是沒有語意的,他們就是一個盒子,用來裝內容的。
division 分割分區span 跨距跨度
● 特點：
<div>標籤用來佈局,但是現在一行只能放一個<div>. 大盒子獨佔一行。
<span>標籤用來佈局，一行上可以多個<span>. 小盒子一行可以多個。
（六）圖像標籤和路徑
1. 圖像標籤
在HTML標籤中，<img>標籤用於定義HTML頁面中的映像。
<img src=圖片URL />
單字image的縮寫。意為圖像。
src是<img>標籤的必須屬性.它用來指定映像檔的路徑和檔名。
所謂屬性:簡單理解就是屬於這個圖像標籤的特性。
<imgsrc=bg.pngalt=/>
圖像標籤的其他屬性
圖像標籤使用注意點
（1）圖像標籤可以擁有多個屬性,必須寫在標籤名的後面。
（2）屬性之間不分先後順序,標籤名與屬性、屬性與屬性之間均以空格分開。
（3）屬性採取鍵值對的格式,即key= “value” 的格式，屬性= 屬性值”
2. 路徑
(1) 目錄資料夾和根目錄：
在實際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個資料夾來管理他們。
目錄資料夾：就是普通資料夾，裡面只不過存放了我們做頁面所需的相關素材，例如html檔案、圖片等。
根目錄：開啟目錄資料夾的第一層就是根目錄。
(2) VSCode開啟目錄資料夾
檔案－開啟資料夾.選擇目錄資料夾後期非常方便管理檔案. 或直接拖進來
頁面中的圖片會非常多，通常我們會新建一個資料夾來存放這些影像檔案( images) , 這時再查找影像,就需要採用「路徑」的方式來指定影像檔案的位置。
路徑可以分為：
（1）相對路徑，以引用檔案所在位置為參考基礎,而建立的目錄路徑。
（2）絕對路徑，是指目錄下的絕對位置,直接到達目標位置,通常是從磁碟機開始的路徑。
（七）超連結標籤
1. 連結的語法格式
<ahref=跳轉目標target=目標視窗的彈出方式>文字或圖像</a>
字anchor的縮寫：錨
兩個屬性作用如下
2. 連結分類
（1）外部鏈接，例如<a href=http://www.baidu.com>baidu<a>。
（2）內部鏈接，網站內部頁面之間的相互鏈接，直接鏈接內部頁面名稱即可，例如<a href=index.html>首頁<a>。
（3）空鏈接，當沒有確定鏈接目標時，<a href=#>首頁<a>。
（4）下載鏈接，如果href裡面地址是一個檔案或壓縮包，會下載這個檔案。
（5）網頁元素連結在網頁中的各種網頁元素,如文字圖像、表格、音訊、視訊等都可以添加超連結。