# [HTML] 基本
###### tags: `HTML/CSS`

>文章內容皆來自網路及課程，僅做個人學習筆記用途

## Hyper Text Makeup Language
用於建立網頁的標準標示語言，使用標記來詮釋文字、圖像或是其他能在瀏覽器裡顯示的內容

## 括號名稱
* () 小括號
* [] 中/方括號
* {} 花括號
* <> 角/間括號

## SEO 搜尋引擎最佳化

是一種透過了解搜尋引擎的運作規則來調整網站，以及提高目的網站在有關搜尋引擎內排名的方式。而HTML的撰寫結構會影響SEO，運用標籤的部分要注意結構

## 標籤
### 標題
HTML的標題語法為h1~h6，且會影響到SEO的計算
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

* 每個文章只會用一個h1，放最重要的內容
* h2為常用的文章標題
* h3為輔助用的文章標題，外觀較h2略細
* h4較常使用於側邊欄及網頁底部footer的部分
* h5及h6很少被使用

#### caption
* 表格的標題，caption的code在表格裡面，但他會顯示在表格外面

### 內文
#### 段落p標籤
#### 強調

| 視覺上 | |
| -------- | -------- |
| 描述外觀 | b bold |
| | i italic |

| 意義上 | |
| -------- | -------- |
| 強調重要性 | strong |
| | em |

#### 引用
* block
* 引用區塊
* cite
* 引用來源

### 圖片

* img
* 圖檔格式
* gif
* 可做動畫，256色彩，有透明色，但呈現樣貌為像素
* apng
* 可做動畫
* png
* jpg
* 破壞性高的壓縮圖檔
* jpeg
* 壓縮
* webp
* 壓縮，為google主推的新檔型，可有png的特性及 jpg的壓縮性
* ico
* figure
* 引用任何內容像是文字段落、圖片、圖表或程式碼片段等，且與主要內容有直接關係
* figcaption
* 用來說明 figure 區塊的標題
* picture
* 常應用於RWD，自動載入不同尺寸和檔案格式的圖片

<picture>
  <img src="XXX.jpg">
</picture>

* source
* 用來設定不同條件下使用的圖片及影像

### 特殊區塊
#### 某個特殊意義的區域
* div
* 區塊，不特別代表任何東西，使多個資料被歸為同一區，經常加上class做分類
* span
* 視為一行，用途是做 CSS，本身沒任何特殊意義也不帶任何標籤語意。
* article
* 主要文章區域
* section
* 各個章節，很多個p形成一個section
* nav
* 提供導航欄連結的區域
* aside
* 常用側邊欄
* header
* 網頁內容的標題區域
* footer
* 網頁內容至底版權區域

## 屬性相同，質會覆寫不會合併