第一篇前端教學文章有介紹了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👋🏻～
