認識Html與常用標籤 - 跨域女子-多喜

文章推薦指數: 80 %
投票人數:10人

Html基本常用標籤 ... 是用來呈現網頁中重要的大標題,H1為最大標題,遞減到H6(但通常不會用超過h4)。

... 段落: 處理文字段落的標籤,每寫一個p就屬於一個 ... Skiptocontent 學習_都是自己的事 認識Html與常用標籤 2020年3月17日 第一篇前端教學文章有介紹了Html、CSS及JavaScript是什麼(延伸閱讀:網頁三層次超直白說明:Html、Css、JavaScript簡介)今天就來認識認識這其中的「骨架:Html」及幾個常用的標籤。

認識Html架構 Html是透過「標籤」來進行標記,讓網站知道要呈現哪些內容Html標籤前後需呼應,因此有開始標籤及結束標籤,如

文字

會有些HTML元素沒有結束標籤,像是
除了標籤(Tag)以外,Html中也會有屬性(Attribute)以及屬性值(Value) Html的基本觀念 用HTML為基底所撰寫而成的網頁,裡面的就包含許多的標籤、元件,而Html的檔案架構可以用一個很可愛的東西形容:俄羅斯娃娃。

就像俄羅斯娃娃一樣,網站架構是一個包著一個,一層接著一層,而每個結構(娃娃)有它的作用及使用規則,我們藉由這個架構,將內容的元件疊加、拼湊、組合,網站就能逐漸成形啦! 網頁就像俄羅斯娃娃! 以下就是一個Html檔的基本架構格式:      多喜的前端初體驗     網站內容  其中head就是「標頭tag」,專門放置網站的標題、描述、語文編碼、樣式表連結等等body是「內文tag」,網站中的內容都會放在body內! Html基本常用標籤 ▪️標題:

-是用來呈現網頁中重要的大標題,H1為最大標題,遞減到H6(但通常不會用超過h4)。

語法:標題文字範例:H1-區塊重要的大標題H2-次要標題H3-更次要的分類或標題H4-內文中分類標題h5-不太常用h6-也不太常用 ▪️段落:處理文字段落的標籤,每寫一個p就屬於一個段落。

語法:

文字內容

範例:

段落一:由html為基底所撰寫而成的網頁,其內容包含許多的標籤、元件。

段落二:而html的檔案架構就像是俄羅斯娃娃一樣,一個包著一個,一層接著一層,每個結構(娃娃)有它的作用即使用規則,我們藉由這個架構,將內容的元件疊加、拼湊、組合,網站就能逐漸成形!

▪️超連結:透由a標籤能連結至其他地方,用法如下: 語法:顯示文字範例:我是超連結,點下去看看~ ▪️圖像:顯示圖片的標籤。

語法:範例: ▪️清單:

  • 用來製作沒有順序的清單列表,用法如下: 語法:
    • 項目一
    • 項目二
    • 項目三
    範例:
    • 麥香紅茶
    • 蘋果西打
    • 可爾必思
    ▪️區塊:區塊標籤,div在處理排版時非常常用到,要讓結構清楚,div的使用也很重要喔!用法如下: 語法:把區塊內容放在這範例:把「服務項目」的介紹內容放在這個區塊裡把「關於我」的介紹內容放在這個區塊裡 =====以上就是Html的基本介紹,有沒有稍微再理解一點點了呢?其實Html中的標籤、屬性還有非常非常多,上述是屬於比較常用到的冰山一小角而已😂如果針對這部分想要更深入了解學習,可以參考《網頁前端入門學習:實用的五個資源》這邊的學習資源,但基本上不需要將每個元素都背起來、理解清楚,只要在需要使用時上去查查,多用幾次自然而然就記起來囉。

    那麼多喜今天的介紹就到這邊囉~881👋🏻~ ===== 以上就是Html的基本介紹,有沒有稍微再理解一點點了呢? 其實Html中的標籤、屬性還有非常非常多,上述是屬於比較常用到的冰山一小角而已😂 如果針對這部分想要更深入了解學習,可以參考《網頁前端入門學習:實用的五個資源》這邊的學習資源,但基本上不需要將每個元素都背起來、理解清楚,只要在需要使用時上去查查,多用幾次自然而然就記起來囉。

    那麼多喜今天的介紹就到這邊囉~881👋🏻~ 也許你也會想看看>> 認識Html與常用標籤 2020年3月17日 第一篇前端教學文章有介紹了Html、CSS及Jav 廣告素材製作心法分享《三重商工》 2020年3月6日 在228連假前夕,跟著好夥伴阿比(比你懂一些- Windows、Mac適用:三款適合前端初學者的程式碼編輯器 2020年2月16日 既然要開始練習自己打程式,那麼挑選一款好用的代碼編 Dohee Hi~我是多喜👻 徘徊在視覺設計和網頁前端中的學習者,目前也是整合行銷公司的網頁前端設計師,在這邊想分享、記錄下我的跨領域學習歷程,希望能夠對你帶來一些幫助! 聯絡我 搜尋關鍵字: ▫️標籤HTML 前端初學者 前端學習 網頁設計 講座分享 ▫️最新文章 認識Html與常用標籤 廣告素材製作心法分享《三重商工》 Windows、Mac適用:三款適合前端初學者的程式碼編輯器 網頁前端入門學習:實用的五個資源 該怎麼調整跨領域學習的心態? 前端初學者的六個小疑問 平面設計與網頁設計有什麼不一樣? 設計師學習網頁前端程式前,想想這三件事! ▫️文章分類 前端初心者學習(5) 多喜の小劇場(2) 設計人的視角(2) 跨域女子Since2020



請為這篇文章評分?