認識Html與常用標籤 - 跨域女子-多喜
文章推薦指數: 80 %
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檔的基本架構格式:
-是用來呈現網頁中重要的大標題,H1為最大標題,遞減到H6(但通常不會用超過h4)。
語法:標題文字範例:H1-區塊重要的大標題H2-次要標題H3-更次要的分類或標題H4-內文中分類標題h5-不太常用h6-也不太常用
▪️段落:處理文字段落的標籤,每寫一個p就屬於一個段落。
語法:
文字內容
範例:段落一:由html為基底所撰寫而成的網頁,其內容包含許多的標籤、元件。
段落二:而html的檔案架構就像是俄羅斯娃娃一樣,一個包著一個,一層接著一層,每個結構(娃娃)有它的作用即使用規則,我們藉由這個架構,將內容的元件疊加、拼湊、組合,網站就能逐漸成形!
▪️超連結:透由a標籤能連結至其他地方,用法如下:
語法:
語法:、
範例:
▪️區塊:區塊標籤,div在處理排版時非常常用到,要讓結構清楚,div的使用也很重要喔!用法如下:
語法:
那麼多喜今天的介紹就到這邊囉~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
延伸文章資訊
- 1常用HTML標籤- 電腦小天地myhkweb
常用HTML標籤 ; <html> … </html>, 指示文件的開始和結尾 ; <head> … </head>, 給瀏覽器用的資訊,但不顯示於瀏覽器上 ; <title> … </titl...
- 2HTML 語法常用的標籤(TAG)
HTML 語法常用的標籤(TAG) ... 網頁內容</body> </html> <title></title> 在瀏覽器的視窗標題欄要顯示的標題文字<body background=? bg...
- 3認識Html與常用標籤 - 跨域女子-多喜
Html基本常用標籤 ... 是用來呈現網頁中重要的大標題,H1為最大標題,遞減到H6(但通常不會用超過h4)。 ... 段落: 處理文字段落的標籤,每寫一個p就屬於一個 ...
- 4Day8 HTML 其他常用標籤 - iT 邦幫忙
語意標籤(Semantic) 語意標籤是HTML5新增的標籤,讓網頁結構更清楚,搜尋引擎可以更容易了解網頁。 語意標籤的用途與div和span類似,目的都是將內容 ...
- 5常用標籤 藝誠網頁設計公司
HTML常用標籤,你都知道嗎? 以下是HTML常用的標籤,希望可以對大家有用。 HTML常用標籤介紹. HTML標籤示範. 基本上HTML 元素都需同時使用開始與結束標籤,如果沒有 ...