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

w3hexschool 鼠年全馬鐵人挑戰六角學院 html標籤、屬性前端新手村

jason06286 2020-02-23 13:18:33 ‧ 2332 瀏覽

分享至

瞭解Html標籤及特性

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

區塊元素

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

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

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

行內元素

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

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

<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>

總結

瞭解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>