三、[前端] HTML

前後端運作方式

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

• 瀏覽器 terminal/client

• HTML + CSS + Javascript

• 伺服器 server

• PHP

• 資料庫 database

• MYSQL

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

流程大概是這樣

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

前端有什麼東西?

• HTML - 資料、架構

• CSS - 外觀

• Javascript - 動作

網頁架構

<!-- 架構範例 -->

<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，代表通往其他網址的錨點

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

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

常見的標籤

<!-- 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 使用

<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

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

小結

• 架構 (一層包一層)

• 常見的 tags (標籤)

• 命名系統 id / class