---
# System prepended metadata

title: '[HTML] 基本'
tags: [HTML/CSS]

---

# [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
  * 網頁內容至底版權區域

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




