第一篇前端教學文章有介紹了Html、CSS及JavaScript是什麼(延伸閱讀:網頁三層次超直白說明:Html、Css、JavaScript簡介)今天就來認識認識這其中的「骨架:Html」及幾個常用的標籤。
認識Html架構
- Html 是透過「標籤」來進行標記,讓網站知道要呈現哪些內容
- Html 標籤前後需呼應,因此有開始標籤及結束標籤,如<p>文字</p>
- 會有些 HTML 元素沒有結束標籤,像是<br>
- 除了標籤(Tag)以外,Html中也會有屬性(Attribute)以及屬性值(Value)
Html的基本觀念

<html>
<head>
<meta charset=”utf-8″>
<title>多喜的前端初體驗</title>
</head>
<body>
網站內容
</body>
</html>
其中 head 就是「標頭tag」,專門放置網站的標題、描述、語文編碼、樣式表連結等等
body是「內文tag」,網站中的內容都會放在body內!
Html基本常用標籤

▪️ 標題:<h1>-<h6>
是用來呈現網頁中重要的大標題,H1為最大標題,遞減到H6(但通常不會用超過h4)。
語法:
<h1>標題文字</h1>
範例:
<h1>H1-區塊重要的大標題</h1>
<h2>H2-次要標題</h2>
<h3>H3-更次要的分類或標題</h3>
<h4>H4-內文中分類標題</h4>
<h5>h5-不太常用</h5>
<h6>h6-也不太常用</h6>
▪️ 段落:
處理文字段落的標籤,每寫一個p就屬於一個段落。
語法:
<p>文字內容</p>
範例:
<p>段落一:由 html 為基底所撰寫而成的網頁,其內容包含許多的標籤、元件。<p>
<p>段落二:而 html 的檔案架構就像是俄羅斯娃娃一樣,一個包著一個,一層接著一層,每個結構(娃娃)有它的作用即使用規則,我們藉由這個架構,將內容的元件疊加、拼湊、組合,網站就能逐漸成形!<p>
▪️ 超連結:<a>
透由a標籤能連結至其他地方,用法如下:
語法:
<a href=”連結網址”>顯示文字</a>
範例:
<a href=”https://dohee-crossthinking.com”>我是超連結,點下去看看~</a>
▪️ 圖像:<img>
顯示圖片的標籤。
語法:
<img src=”圖片網址” alt=”圖片失效時替代文字” title=”滑鼠移到圖片上顯示文字”>
範例:
<img src=”https://dohee-crossthinking.com/wp-content/uploads/2020/01/2-02.png” alt=”” title=”前端初學者的六個小疑問”>
▪️ 清單:<ul>、<li>
用來製作沒有順序的清單列表,用法如下:
語法:
<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
範例:
<ul>
<li>麥香紅茶</li>
<li>蘋果西打</li>
<li>可爾必思</li>
</ul>
▪️ 區塊:
區塊標籤,div在處理排版時非常常用到,要讓結構清楚,div的使用也很重要喔!
用法如下:
語法:
<div id=””>把區塊內容放在這</div>
範例:
<div id=”section_service”>把「服務項目」的介紹內容放在這個區塊裡</div>
<div id=”section_about”>把「關於我」的介紹內容放在這個區塊裡</div>
=====
以上就是Html的基本介紹,有沒有稍微再理解一點點了呢?
其實Html中的標籤、屬性還有非常非常多,上述是屬於比較常用到的冰山一小角而已😂
如果針對這部分想要更深入了解學習,可以參考《網頁前端入門學習:實用的五個資源》這邊的學習資源,但基本上不需要將每個元素都背起來、理解清楚,只要在需要使用時上去查查,多用幾次自然而然就記起來囉。
那麼多喜今天的介紹就到這邊囉~881👋🏻~
以上就是Html的基本介紹,有沒有稍微再理解一點點了呢?
其實Html中的標籤、屬性還有非常非常多,上述是屬於比較常用到的冰山一小角而已😂
如果針對這部分想要更深入了解學習,可以參考《網頁前端入門學習:實用的五個資源》這邊的學習資源,但基本上不需要將每個元素都背起來、理解清楚,只要在需要使用時上去查查,多用幾次自然而然就記起來囉。
那麼多喜今天的介紹就到這邊囉~881👋🏻~