# T1-v1 code review
###### tags: `好想工作室`
2021.04.27（Tue.）（Eva學姐）

> 參考網頁：
> 1. [HTML Documentation：tag的部分](https://html.spec.whatwg.org/#semantics)
> 2. [`<a>`的用法](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/a)

Html：
1.tag語易化用法（取代<div>）：
<header>、<footer>、<nav>、<span>、<p>、<a>
2.Html中tag的display預設搞清楚
3.<h1>只用一次（用於網頁重要的、主要的標題上）
4.<div>就像一個盒子，甚麼都可以裝，但若有更好的容器，
就別用<div>
5.<a>：anchor有很酷的用法！
CSS：
1.CSS specificity（權重）：
inline style > ID > Class/psuedo-class/attribute > Element
2.圖片不要存第三方網站再放連結，直接用本機的資料夾
3.display：block、inline-block、inline
4.CSS selectors（選擇器）
5.去找如何使內容水平置中，text-align應該用於文字
6.CSS box model
7.思考要用padding還是margin
8.width: fit-content可跟著上層元素一起跑
9.去看float的功能
其他：
1.BEM命名
2.功能性：可不可以使用 -> 好不好使用
3.空間是誰讓出來的，要想清楚
4.做好排版該做的事就好：不直接改icon，改外框就好
5.把東西搬到Linux使用
6.去參考其他網站如何寫的！

****

# <font color="#3881a1">Html</font>
## 1. tag語易化
取代`<div>`，可以讓別人在看你的code的時候，更快知道你在寫甚麼。
例如說：`<header>`、`<footer>`、`<nav>`、`<span>`、`<p>`、`<a>`

## 2. Html中tag的display預設搞清楚
| 內容 | 預設舉例 |
| ------------ | -------------------------- |
| block | div、p、ul、li |
| inline | span、a、input、img、em |
| inline-block | img、input、select、button |

## 3. `<h1>`只用一次
用於網頁重要的、主要的標題上。

## 4. `<div>`在幹嘛？
`<div>`就像一個盒子，甚麼都可以裝，但若有更好的容器，就別用`<div>`

## 5. `<a>`有很酷的用法！
`<a>`是anchor的縮寫，他建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。

覺得很酷的點是，他能到不同的頁面去，還能到同個頁面不同位置去！（這個時候就需要設id了，這也是id只能使用一次的用處）
另外就是如果想做假的連結就在href裡面加上「##」，就可以了。

****

# <font color="#3881a1">CSS</font>
## 1. CSS的權重
> 工具：[可以計算權重的網址Specificity Calculator](https://specificity.keegan.st/)
* 一般來說的公式長這樣：

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

## 2.圖片放上網頁的方式
圖片不要存第三方網站再放連結，直接用本機的資料夾

## 3. display properties
| 內容 | 說明 | 預設舉例 |
|------| ---- | -------|
|block|可以設定高度（height）、寬度（width）、上方與下方距離，自動換行| div、p、ul、li |
|inline|高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度 | span、a、input、img、em |
|inline-block|跟inline一樣不會自動換行，但跟block一樣可以改元素大小|img、input、select、button|

## 4. CSS selectors（選擇器）
之前整理在[第 7 節： The World of CSS Selectors](https://hackmd.io/eHr_V_76Reyi7I_bs-bYlw)的重點整理了。

## 5. 去找如何使內容水平置中，text-align應該用於文字
> 參考網頁：[CSS水平置中方法](https://medium.com/jarvishhc/%E5%AD%B8%E7%BF%92%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%88%B0%E7%8F%BE%E5%9C%A8-%E6%88%91%E4%B8%80%E7%9B%B4%E8%A6%BA%E5%BE%97%E5%88%87%E7%89%88%E6%98%AF%E6%88%91%E7%9A%84%E5%BC%B1%E9%A0%85-%E5%B0%A4%E5%85%B6%E6%98%AF%E6%B0%B4%E5%B9%B3%E7%BD%AE%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD-%E5%B0%8E%E8%87%B4%E4%B9%8B%E5%89%8D%E5%9C%A8%E7%B7%B4%E7%BF%92%E6%95%99%E6%A1%88%E7%9A%84%E6%99%82%E5%80%99-%E9%83%BD%E9%9C%80%E8%A6%81%E8%8A%B1%E8%A8%B1%E5%A4%9A%E6%99%82%E9%96%93%E5%8E%BB%E6%9F%A5%E8%B3%87%E6%96%99%E5%92%8C-try-and-696199935fd)

改用margin: 0 auto;
以及position置中

## 6. CSS box model
> 參考網頁：[深入理解 CSS Box Model ( 盒子模型 )](https://www.oxxostudio.tw/articles/202008/css-box-model.html)