# 🏅 Day 1 - 基本 HTML 標籤與 CSS 運用

## HTML 語意標籤
語意標籤可以增加可讀性，透過閱讀標籤就了解該區塊的意思，幫助搜尋引擎以及瀏覽器的顯示跟搜尋。

### 基本 HTML 標籤介紹
**h1 ~ h6 **
一個網頁一定會有一個 h1 標題標籤，用來標示網頁中最重要的資訊。其餘 h2 ~ h6 標題標籤依照重要性依序使用。

**img**
圖片使用 img 標籤，圖片位址放在標籤內 src 屬性中。
將 alt 屬性內補上描述，當圖片失效時可以呈現出文字，讓使用者可以了解原本圖片的意義。

**a**
連結使用 a 標籤，網址連結放在標籤內 href 屬性中。
當目前沒有要連至特定網頁時可以設定為 `<a href="#"> ... </a>`

**p**
一個段落、一句話 .. 都可以使用，讓文字具有語意。

**ul li、ol li**
ul、ol 的子層只能是 li。
條列式項目、清單、選單、產品陳列等等都可以使用 ul li 列表結構，
若是該列表有順序則可以使用 ol li 結構。

## CSS 類別選擇器
通常在設定 HTML 標籤樣式時，我們會在 HTML 標籤命名 class（一個 HTML 標籤可以有多個 class），
並在 CSS 中運用 `.` 來設定樣式。像是：

<p class="text border">類別選擇器</p> 

.text {
  color: #ffffff;
}

.border {
  border: 1px solid #000000;
}

> 根據上述程式碼設定，p 標籤內文字會變為白色，並在外層有一圈黑色線條（如圖）
> 
> 同學可以再自行嘗試其他樣式設定看看

## CSS 擬態選擇器
通常運用在連結、按鈕、表單輸入，可以增加使用者體驗
- **:hover** : 滑鼠滑過時的樣式
- **:active** : 滑鼠按下的樣式
- **:focus** : 聚焦時的樣式
延續上述例子：

<p class="text border">類別選擇器</p> 

.text {
  color: #ffffff;
}

/* 將 text 加上 hover 效果 */
.text:hover {
  color: #AA0601; 
}

.border {
  border: 1px solid #000000;
}

> 當滑鼠滑過 p 標籤時，文字會變為紅色（如圖）
> 
> 同學可以再自行嘗試其他樣式設定看看

### 相關影音章節：
- CSS - VS Code 網頁編輯器、HTML 基礎教學
- CSS - CSS常用語法

題目
---
請複製此[模板](https://codepen.io/hexschool/pen/NWJodWL)，依照下圖根據語意為 HTML 加上標籤，並加入 CSS 樣式設定
（只需調整 HTML、CSS 區塊內 `＊` 的地方）
> 提示：
> - 「部落格」為最重要的標題資訊，文字左側有 8px 寬的線條，線條顏色為 `#9F1213`
> - 圖片連結為 `https://github.com/hexschool/2022-web-layout-training/blob/main/week3-4/blog-1.png?raw=true`
> - 「情人特別企劃」為文章標題，文字顏色為 `#650300`
> - 「MORE」為連結，可以點選，文字顏色為 `#650300`，當滑鼠滑過會改變文字顏色為 `#AA0601`

模板與解答皆有載入 CSS Reset 清除瀏覽器預設設定，
使用 Codepen 可直接在 `Settings > CSS > CSS Base > Reset` 設定

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/WNmPopX
-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen／答案 |
|:----------:|:--------------------:|
| xxx | [CodePen]() |