# HTML/CSS的基本常識(一)

> 嘿～你好! 我是Mizok
> 這是一篇為NEUX提供的課堂講義
> 講義內容主要是為了讓設計師/PM能夠快速對切版的常識有一些基本的理解
> 以便在工作過程中能夠對一些工序的難度有基本的判斷能力
> 在這篇講義中我們會使用[jsfiddle](https://jsfiddle.net/)來作為實際演練的平台

## 元素 Element

**元素**(Element)就是網頁構成的基本單位，
通常一個網頁都會有成千上百個**元素**在裡頭。

### 元素的種類(Type)

**元素**的種類不只一種，就好比說遊戲Minecraft中的**方塊**有很多不同材質。
根據不同的**目的/使用場景**，網頁**元素**也有很多種類，而最常見的網頁元素就是`div`**(Division)**。

這邊舉幾個常見的**元素**作為範例，大家不妨試試在[jsfiddle](https://jsfiddle.net/)中寫寫看:

- `div`**(Division)**:div元素就像是Minecraft中的基本泥土方塊，又或者說是樂高(Lego)的2*2積木，它能夠形成大多數我們在網頁中看到的區塊。
- `a`**(Anchor)** : a元素的作用就是超連結，a元素會把被它包起來的所有元素，變成一個可以點擊的連結
- `input`**(輸入框)**: input元素顧名思義就是我們常見的輸入框，是一種表單元素(Form Element)
- `select`**（下拉選單）**: 在select元素裡面置入`option`元素之後就會變成一個簡單的下拉選單，也是一種表單元素(Form Element)

### 元素的巢狀化排列(Nesting)

我們把『**元素**裡面可以被塞入其他**元素**』這種規則稱為『巢狀化(Nesting)』（但是並不是所有的元素裡面都可以塞其他的元素）。
這邊我們舉個簡單的例子，假如我們想要在div元素裡面塞入a元素，那我們就必須要在`html`文檔中這樣寫：

<div>
    <a></a>
</div>

巢狀化排列的用途主要是用來定義元素的父子層關係，通常我們把外層的元素稱為『父層（Parent）』,而內層的元素則稱為『子層（Children）』。

> 但是實際視覺呈現上，子層不一定會出現在父層的內部，這點我們接下來會講到。