> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/full-stack-first-meet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/full-stack-first-meet/san-30015b-qian-7aef5d-html.md).

# 三、\[前端] 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/full-stack-first-meet/san-30015b-qian-7aef5d-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.