fbpx

學習_都是自己的事

認識Html與常用標籤

2020 年 3 月 17 日

第一篇前端教學文章有介紹了Html、CSS及JavaScript是什麼(延伸閱讀:網頁三層次超直白說明:Html、Css、JavaScript簡介)今天就來認識認識這其中的「骨架:Html」及幾個常用的標籤。

認識Html架構

  • Html 是透過「標籤」來進行標記,讓網站知道要呈現哪些內容
  • Html 標籤前後需呼應,因此有開始標籤及結束標籤,如<p>文字</p>
  • 會有些 HTML 元素沒有結束標籤,像是<br>
  • 除了標籤(Tag)以外,Html中也會有屬性(Attribute)以及屬性值(Value)

Html的基本觀念

用 HTML 為基底所撰寫而成的網頁,裡面的就包含許多的標籤、元件,而 Html 的檔案架構可以用一個很可愛的東西形容:羅斯娃娃。 就像俄羅斯娃娃一樣,網站架構是一個包著一個,一層接著一層,而每個結構(娃娃)有它的作用及使用規則,我們藉由這個架構,將內容的元件疊加、拼湊、組合,網站就能逐漸成形啦!
網頁就像俄羅斯娃娃!
以下就是一個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=”http://dohee-crossthinking.com”>我是超連結,點下去看看~</a>

▪️ 圖像:<img>
顯示圖片的標籤。

語法:
<img src=”圖片網址” alt=”圖片失效時替代文字” title=”滑鼠移到圖片上顯示文字”>

範例:
<img src=”http://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👋🏻~

也許你也會想看看 >>

Dohee

Dohee

Hi~我是多喜👻
徘徊在視覺設計和網頁前端中的學習者,目前也是整合行銷公司的網頁前端設計師,在這邊想分享、記錄下我的跨領域學習歷程,希望能夠對你帶來一些幫助!

聯絡我