---
# System prepended metadata

title: HTML標籤
tags: [共筆]

---

<style>
.red {
    color: red;
}
</style>

## h1~h6 標籤
使用上以重要性做排序，且不能亂跳，h1 h2 h4 h6

1. `<h1>標題</h1>`

* <strong class="red">一個頁面只能有一個 h1 標籤</strong>
* h1 有可能是 logo、新聞標題、產品名，要看哪個是最重要的資訊

2. h2~h6 可以多個


## ul、li 標籤
產品列表或是新聞列表...等會使用`ul`、`li`


## div 標籤
* 沒有語意的區塊標籤，用來排版，不要濫用

## 為什麼不全部都用 div 來寫?
* SEO
* 全部用 div，可讀性差，其他工程師會看的很辛苦
* 沒有語意，單純用來排版
* 拿 div 裝標題，等於告訴搜尋引擎，這段不重要


## 區塊元素 v.s. 行內元素
也可以直接透過開發者工具觀察

|類型|特性|有哪些|
|區塊|占滿整個版面，另起一行|h1-h6、p、div、ul、li|
|行內|不會換行，緊鄰排列|a、span、em|

## span
可以用來畫圖形 (三角形)
[畫三角形](http://apps.eky.hk/css-triangle-generator/zh-hant)


