---
# System prepended metadata

title: day 1  認識html基礎標籤 + 開發環境

---

# day 1  認識html基礎標籤 + 開發環境

# 入門打個針

### 技術價值衡量

全國性質大專競賽:
題目:html、css設計官網
https://www.itsa.org.tw/itsacontest/2025/history.php

104:
![image](https://hackmd.io/_uploads/SyGrpaJHel.png)
![image](https://hackmd.io/_uploads/HJj9T6kSel.png)

外面課程價格:

https://hahow.in/courses/56c1e3b3e91d590900234105
https://www.hexschool.com/qa/how-to.html


3~6個月 學習時間
![image](https://hackmd.io/_uploads/HJ_GRT1Hee.png)


這邊都免

知識哪有這麼貴，網路自學 + AI全部免費

# 開發工具

如果你很牛逼:txt、doc 
vscode、atom(老人)、sublime(老人2)、cursor(AI)

- [vscode](https://code.visualstudio.com/download)


![image](https://hackmd.io/_uploads/rynGsZaExl.png)
![image](https://hackmd.io/_uploads/rk1F3-pNex.png)

settings
![image](https://hackmd.io/_uploads/HJ7i3baNge.png)
![image](https://hackmd.io/_uploads/ryB2n-T4lg.png)


# HTML是撒小

超文本標記語言（英語：HyperText Markup Language)，簡稱：HTML

瀏覽器可以直接解析並渲染成視覺化的網頁。

## 常見標籤(tag)

- <html></html> 包覆整個html檔
- <head></head> 文件標頭，內容是不渲染得比較像設定檔通常放靜態資源 跟SEO有相關 舉例:title、meta標籤
- <body></body> 渲染內容
- h1 ~ h6 標題
- div 段落(無意義)
- span 小擴展(無意義)
- a 超連結
- img 圖片
- p 文字
- ul、ol (無序清單、有序清單)
- li 清單物件
- section 區塊
- article 文章
- nav 導覽列
- menu 菜單
- header、footer
- ...

**不用記、過目即可**


## 語意化（Semantic）HTML 

什麼是語意化?

ans:使用有意義的標籤來建構html


因為機器、爬蟲程式、搜尋引擎、AI看的是標籤(tag)，而不是渲染後的內容，所以**多使用語意化標籤**能夠讓機器更好理解分析你的網站。
- 有助於可存取性（Accessibility，簡寫 a11y）
	- 幫助 輔助技術（如螢幕閱讀器）理解網頁結構
	- 強化無障礙設計，例如：<nav> 可以讓使用者快速跳轉主選單<main> 告訴輔助技術哪裡是網頁主內容
- 增加被搜尋引擎 index(索引)的機會
- 有助於社群預覽: 

![image](https://hackmd.io/_uploads/HkW5ffTNlx.png)


## 實作練習
	
### 快捷鍵

! tab -> 快速產生html template
lorem tab -> 快速產生假文
	

### 即時預覽 (hot reload)
開發好用 讚讚
	
![image](https://hackmd.io/_uploads/H17Fwfp4eg.png)

	
# 小練習
	
✅ 任務要求：

使用 <html>, <head>, <body> 建立基本結構

設定 title，命名為「名字 - 個人簡介」

使用 a 連結某個網頁	

使用 header 放置你的名字與職稱

使用 img 插入一張個人頭像（可用 placeholder）

使用 p 撰寫一段個人簡介

使用 ul 或 ol 寫出 3 個以上的興趣

使用 section 包裝不同內容段落（例如「關於我」、「興趣」、「聯絡我」）

使用 footer 放上聯絡方式（email 或電話）

文字內容可用lorem。
	
範例
	
```html
<html>
  <head>
    <title>小明 - 個人簡介</title>
  </head>
  <body>
    <header>
      <h1>小明</h1>
      <h2>前端學徒</h2>
    </header>
    <section>
      <h3>關於我</h3>
		<a href="https://pizzanote.dev">連結</a>
      <img src="https://via.placeholder.com/150" alt="小明的大頭照">
      <p>我對網頁設計充滿興趣，目前正在學習 HTML 和 CSS...</p>
    </section>
    <section>
      <h3>我的興趣</h3>
      <ul>
        <li>畫畫</li>
        <li>烘焙</li>
        <li>寫網頁</li>
      </ul>
    </section>
    <footer>
      <p>聯絡我：<a href="mailto:xiaoming@example.com">xiaoming@example.com</a></p>
    </footer>
  </body>
</html>

```
	
	
ps:記得提一嘴img src alt設定