iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 02:瞭解Html標籤及特性-標籤下的好,架構沒煩惱!

瞭解Html標籤及特性

每個Html標籤都有其功能及特性,或許很抽象。我用遊戲來做譬喻,Html標籤就像是遊戲中的職業有各種功能,而屬性就像遊戲中的公會,每個職業都有利屬於他的公會,而Html公會主要分成兩大類:

區塊元素

  1. 每個區塊元素都獨占整行,寬度默認為父元素的寬度,高度默認為元素內容的高度
  2. 可以定義寬高,即使定位再小的寬度也會獨占一行
  3. 設置所有的margin及padding任何邊距都生效
  4. 可以嵌套行內元素及區塊元素

懶人包:我會自動換行,我像大哥,我能決定我的長寬範圍。

<h1>我是大標題,我只會有一個</h1>
<h2>我是次標題,我可以有很多個</h2>
<p>段落文字內容</p>
<ul>
  <li>我是沒有順序的列表</li>
  <li>我是沒有順序的列表</li>
</ul>
<ol>
  <li>我是有順序的列表</li>
  <li>我是有順序的列表</li>
</ol>
<div class="box">我沒有意義,但我用於網頁排版</div>

https://ithelp.ithome.com.tw/upload/images/20200223/20124879GVaKxNiyq1.png

行內元素

  1. 元素寬高由元素內容決定,定義寬高無效
  2. 相鄰行內元素同在一行顯示,直到一行排滿了才會換行
  3. 設置margin、padding的上下邊距無效,只有設置左右邊距才生效
  4. 行內元素可以嵌套其他行內元素但是不能嵌套塊級元素

懶人包:我無法換行,只能像小弟一個跟一個,我只能決定我的寬範圍。

<a href="#">我是個連結</a>
<input type="text" placeholder="我是表格">
<input type="button" value="我是按鈕">
<img src="https://www.weya.com.tw/photos/shares/google/5d26dc6de5b8c.png" alt=""><!-- 我是圖片標籤 -->
<span>無意義,用於插入CSS樣式</span>

https://ithelp.ithome.com.tw/upload/images/20200223/201248790bzw560gwX.png

總結

  • 瞭解Html標籤的語意,有助於架構正確完整。
  • 瞭解Html標籤的屬性,有助於排版,可以搭配CSS來改變屬性利於排版。
  • 以上只是介紹常用的標籤,Html標籤有很多種,但大致上就是分為區塊元素、行內元素,觀念有自然排版沒煩惱!
  • html大致上架構會如下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  寫入Html標籤
  
</body>
</html>

尚未有邦友留言

立即登入留言