---
# System prepended metadata

title: T1-new-v3 code review
tags: [好想工作室]

---

# T1-new-v3 code review
###### tags: `好想工作室`
2022.03.10（Thu.）（Andy）

```
CSS：
Html：
1.<main>的範圍
2.<head></head>研究一下
CSS：
1.container中的width可以用百分比
2.把一些沒用的css移除掉
3.命名注意：image-container > image-content
4.image的width、height記得設定（去符合外容器）
5.margin、padding使用情境
6.了解一下vertical-align
其他：
1.<h1></h1>的位置
```

****

# <font color="#3881a1">HTML</font>
## 1. `<main>`的範圍
`<main>`

## 2. `<head></head>`研究一下
> 參考網站：
> 1. [w3s-HTML head](https://www.w3schools.com/html/html_head.asp)
> 2. [HTML 與 CSS (9) - head](https://ithelp.ithome.com.tw/articles/10252381)
> 3. [HTML <meta name="viewport" content=""> 標籤 (tag) - 設定](https://www.fooish.com/html/meta-viewport.html)
* **`<title>`**
決定了文件的標題，只能是文字，而且他會顯示在瀏覽器上的bar或tab上。而且他的內容對於search engine optimization (SEO)是非常重要的。
* **`<style>`**
可以在`<style>`中下CSS。
* **`<meta>`**
character set, page description, keywords, author of the document, and viewport settings.
用來描述`<head>`中的元資訊
    1. `<meta charset="UTF-8">`：指定網頁編碼
    2.  `<meta http-equiv="X-UA-Compatible" content="IE=edge">`：tell Microsoft Internet Explorer to use the latest rendering engine (edge)
    3. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：通過設置viewport，來控制螢幕的寬度和縮放比例
        * width=device-width：
        指定瀏覽器頁面的寬度同裝置 (device) 的寬度
        * initial-scale=1.0：
        指定畫面初始縮放比例為 100%，即不放大也不縮小
        * minimum-scale=1, maximum-scale=1：
        加上以上兩個參數，可以防止使用者用手指做畫面的縮放
        * user-scalable=no：
        功能同上（可以防止使用者用手指做畫面的縮放）
* **`<link>`**
用來定義現在的文件與外部資源關係。
* **`<script>`**
可以在`<script>`中下JS。

****

# <font color="#3881a1">CSS</font>

## 4. image的width、height記得設定
## 5. margin、padding使用情境
## 6. 了解一下vertical-align
> 1. [Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#fnref-1)
> 2. [Vertical-Align: All You Need To Know (CSS)](https://christopheraue.net/design/vertical-align)

****

# <font color="#3881a1">其他</font>
## 1. `<h1></h1>`的位置