# 三、\[前端] HTML

## 前後端運作方式

先以情境舉例。你的面前有三樣東西:

* 瀏覽器 terminal/client
* HTML + CSS + Javascript
* 伺服器 server
* PHP
* 資料庫 database
* MYSQL

  瀏覽器會發出 request 給伺服器，伺服器會去資料庫撈資料。資料庫找到資料後，伺服器會把資料回傳給瀏覽器。

流程大概是這樣

> Client (request)→ Server → Database Client ← Server ← Database

前端有什麼東西?

* HTML - 資料、架構
* CSS - 外觀
* Javascript - 動作

## 網頁架構

```markup
<!-- 架構範例 -->

<div id="header">
<div id="logo">
<img src="/image/logo.png" alt="logo">
</div>
</div>

<div id="content">
</div>

<div id="footer">
</div>
```

網頁由很多的 tag(標籤)組成。有分成起始標籤 `<p>` 與結尾標籤 `</p>` 組成，這樣是一組，p 代表段落 paragraph 的意思。一起用起來就像是 `<p>content</p>`，代表有一個段落在這裡。

在網頁上很常看見的超連結怎麼表示？用 `<a></a>`。整個用起來是這樣的感覺。a for Anchor，代表通往其他網址的錨點

```markup
<a href="www.google.com">content</a>
```

Html 的架構就是一層包著一層。

## 常見的標籤

```markup
<!-- div -->
<div id="" class=""> division，區塊的意思。平常會當作容器使用，方便進行把內容置中等等的操作</div>

<!-- h1 -->
<h1>header，標題，通常 h1 在一個頁面上只有一個，就是網站的名字。總共有六個層級</h1>

<!-- img -->
<!-- image，圖片，要填入 source 和 alternative。img 不需要填入內容。不需要結束標籤的標籤，叫空標籤 -->
<img src="圖片地址" alt="替代文字">

<!-- a -->
<a href="" target="_blank"> Anchor，超連結，hyper text reference，新開分頁</a>

<!-- p -->
<p>paragraph，段落</p>

<!-- ul ol li -->
<ul>
<li>項目A。UL是 unorder list，ol 是 order list</li>
<li>項目B。li 就是 list</li>
</ul>
```

重新整理一次這些標籤

* div
* h1 - h6
* img
* a
* p
* ul / ol / li

## 架構的命名 id class

除了了解架構之外，也需要了解什麼東西能方便我們定義、操作這些架構。

Html 有兩個命名系統，id 和 class。id 只能命名一次，一個網頁不能出現第二個同樣的 id，通常是給 Javascript 使用。class 比較像是屬性，可以重複出現，通常是給 css 使用

```markup
<div id="header">
    ...    
</div>
```

在網頁上方的導覽列，通常會用 `div id="header"></div>`，因為獨一無二。購物車點選區塊也是如此。商品清單因為重複性高，可以使用 `<div class="product">...</div>`。網頁最下方也是獨一無二，可以使用 `<div id="footer">...</div>`。總之，有很多長得很像的重複區塊，就用 class；比較獨特的，就用 class。

Logo 也是 id。Login 的話都有可能，因為它是 button，可能會用 class 幫它設計樣式，也可能因為 Login button 很獨特，可能會用 js 多增加行為，所以需要 id。

## 命名練習

先列架構

* body
  * \_header
    * \_logo
    * \_bar
  * \_content
    * \_page-title
    * \_section-wrap
      * .container (置中用)
        * .posts
        * \_sidebar
  * \_footer

排成 html

```markup
<div id="header">
    ...
</div>
```

小結

* 架構 (一層包一層)
* 常見的 tags (標籤)
* 命名系統 id / class