# T1-v2 code review
###### tags: `好想工作室`
2021.05.04（Tue.）（Penghua學長）

> 參考網站：
> 1.[meyer reset css](https://meyerweb.com/eric/tools/css/reset/)
> 2.[Normalize css](https://necolas.github.io/normalize.css/)
> 3.[HTML - tag 基礎標籤介紹](https://yakimhsu.com/project/project_w6_HTML_tag.html)
> 4.[apple官網](https://www.apple.com/tw/?afid=p238%7Csd9nZSawW-dc_mtid_18707vxu38484_pcrid_516088632910_pgrid_12618487622_&cid=aos-tw-kwgo-brand--slid---product--)：可看到h1下在logo處
> 5.[CSS 權重 (css specificity)](https://ithelp.ithome.com.tw/articles/10196454)
> 6.[HTML Symbols](https://www.w3schools.com/html/html_symbols.asp)
> 7.[相對路徑 / 絕對路徑](https://ithelp.ithome.com.tw/articles/10247622)

Html：
1.h1很多都下在logo的地方（如apple官網）
2.html5 tag 的用途？為什麼要用這個tag？（語易化！）
3.class的命名不直觀，用詞應該更加明確
4.html symbols 可參考w3schools（如©可用他的entity：&copy取代）
CSS：
1.可以去理解一下重要的tag的預設（default）
（像是h1~h6、p、ul、li的預設margin）
2.知道tag的預設後，可了解reset CSS
（因default在不同瀏覽器上會不一致）
3.box-sizing的default是content-box
4.沒用rwd的話，要注意不跑版問題（可設min-width）
5.column的value：width | count | gap
6.CSS的權重要再更熟（可看mdn文件）
7.footer部份為什麼<a>沒有完全包住<img>？
（因為<a>預設屬性是inline，所以大小不能調整，
但把<a>的display改成inline-block就可以包住<img>）
其他：
1.盡量不要點html檔打開，而是使用vscode的live server
2.放圖片方式：相對路徑 / 絕對路徑

****

# <font color="#3881a1">Html</font>
## 1. H1要下在哪裡？
大多數網頁都只會使用一個`<h1>`，然後會下在整個網頁的重點，因為`<h1>`很可能跟SEO有關係，另外大多數網頁都會把`<h1>`下在logo處。（例如apple官網）

## 2. 為什麼不用`<div>`就好？還要有一大堆的Html tag？
語易化！可以讓看你code的人更快進入狀況、知道你到底在寫甚麼（當然也包刮自己回來看Code的時候更清楚）

## 3. Class命名命太爛，爛到自己也看不出來是甚麼
class命名應該要更加直觀，假如連自己在看都還要想這個class在幹嘛的話，就代表class該重新命名了！用詞要更明確，但這個需要靠經驗來變強。

## 4. Html symbols
可以不用直接複製symbols貼上（有可能會出錯），所以可以查html symbols，利用其符號的enities（字元實體符號）代替。

****

# <font color="#3881a1">CSS</font>
## 1. 可去理解一些重要tag的default
像是tag的margin、display(inline、inlne-block、block)、font-size等等的，可以看【[這裡](https://www.w3schools.com/cssref/css_default_values.asp)】。

## 2. reset CSS，把CSS給重置！
因為多數tag都有default，但問題是default在不同的browser會不一致！
所以我們可乾脆整個重置CSS，讓這些不必要的default都變不見。
* 有三種方式：
1. [meyer reset css](https://meyerweb.com/eric/tools/css/reset/)：這個是幾乎把所有的default全部給移除的方法
2. [Normalize css](https://necolas.github.io/normalize.css/)：這個則是把部分default（可能是較常見的）給移除的方法
3. 我兩個都不要，移除甚麼我自己決定

## 3. box-sizing的default是content-box
* box-sizing有兩種value：
1. content-box：
width與height只包括內容本身的寬和高，不包括邊框（border）、內邊距（padding）、外邊距（margin）。
<font color="red">注意</font>：內邊距、邊框和外邊距都在這個盒子的外部。
<font color="#a3a2a0">例如，如果 .box {width: 350px; border: 10px solid black;} ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。</font>
2. border-box：
width和height屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。
<font color="red">注意</font>：內邊距和邊框都將在盒子內。
<font color="#a3a2a0">例如，.box {width: 350px; border: 10px solid black;} ，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。</font>

## 4. 沒用rwd的話，會跑版耶
設定一個min-width，這樣版面縮小的時候，他就會維持在最小的寬度，不會在更小了！

## 5. Column的value？
* columns有幾種value：
1. column-width、column-count：
column-count及column-width只能二擇一，前者是直接定義欄位數量，後者則是定義欄位寬度。
也可以直接打columns（這樣跟利用column-count、column-width是一樣的，只是要記得要加s！）

.paragraph{
    columns: 2;
}
.paragraph{
    columns: 3em;
}

2. column-gap：
指的是欄位跟欄位之間的距離。

## 6.CSS的權重要再更熟
> 工具：[可以計算權重的網址Specificity Calculator](https://specificity.keegan.st/)
* 一般來說的公式長這樣：

   ！importatnt
 > inline style
 > ID
 > Class/psuedo-class/attribute
 > Element/psuedo-element

## 7. footer部份為什麼`<a>`沒有完全包住`<img>`？
因為`<a>`預設屬性是inline，所以大小不能調整，但把`<a>`的display改成inline-block就可以調整大小，也就可以包住`<img>`。

****

# <font color="#3881a1">其他</font>
## 1. 用vscode的live server開網頁看！
盡量不要點html檔打開，而是使用vscode的live server

## 2. 放圖片方式：相對路徑 / 絕對路徑
> [相對路徑 / 絕對路徑](https://ithelp.ithome.com.tw/articles/10247622)