# [FE101] 前端基礎：HTML 與 CSS

###### Date : 2021 May. 13 - 15

## HTML 基礎

- html, head, body
- h1 - h6, p
- lorem ipsum
- div, span
- sapn 行內排版，highlight 好用
- img
- `<img alt="img_text" title="descibe" src="URL" />`
- ul, ol, li
- pre, br
- table, th, tr, td
- th 標頭，tr 行，td 列
- a
- href: hypertext reference
- main, nav, footer 語意標籤
- iframe 遷入網頁
- `<iframe src="URL" width="100%" height="500px" />`
- form, input, textarea 表單相關
- input type=[ attr ]
- attr : text, password, email, date, radio, submit
- meta tag
- SEO : keyword, description
- og : 讓 facebook 等更容易抓到網頁
- JSON-ld ( Linking Data )
- rotbot.txt 給爬蟲看的檔案
- Google Search Console 可以看網頁的曝光率等等
- Escape 字元

     & => &
     < => &lt;
     > => &gt;

## CSS 選擇器 Selector

- 三種 CSS 用法
- 直接寫在標籤上
- 寫在 header 的 style 裡
- 使用外部資源
`<link rel="stylesheet" href="./style.css" />`
rel : relationship
href : hypertext reference
- Selector 基礎
- `*` : 全選
- `div` : 標籤等
- `#id` : 選擇 id ，只能有一個
- `.class` : 選擇 class ，可以有多個
- Selector 進階
- `div.class` : 同時符合
- `.class div` : 底下所有的元素
- `.class > div` : 底下一層的元素
- `div + span` : 同一層之後下一個的元素
- `div ~ span` : 同一層之後所有的元素
- Selector Pseudo-classes ( 假的 class )
- `:hover` : Pseudo-classes 之一，chrome debug 工具可以常開
- `.wrapper div:nth-child(n)` : Pseudo-classes 之一，下一層第 n 的元素
> 會看第 n 個元素是否符合條件 ( 例如 : div ，如果是 span 就選不到 )
- `.wrapper div:nth-child(odd)` : Pseudo-classes 之一，下一層個奇數個元素，也可用 even ，或是 3n, 5n+1 ...等
- `.span::before` : Pseudo-element
> style.css，如下 :

        .span::before {
            content: "$";
            color: red;
        }
        
        /* 其他寫法 */
        .span::before {
            content: attr(class);
            color: red;
        }
        .span::before {
            content: "";
            color: red;
        }

- Selector 權重
- 基本上 : id > class > tag
- 照順序上面順序比下來 : 0, 0, 0
- 如果都一樣就按造前後順序
- 以上都比不過 inline style : 1, 0, 0, 0
- 最後奧義 ( 盡量不要用 ) !important : 1, 0, 0, 0, 0

## CSS 各種裝飾

- background
- background: url("./bg.jpg") no-repeat center center;
- backgorund-size: 200px 200px;
- backgorund-size: contain; ( 取圖片的寬或高 )
- backgorund-size: cover; ( 常用，會縮放、填滿背景 )
- border & outline
- border: 2px solid gold;
- border-radius: 5px;
- outline: 2px solid black; ( 外框，原本的元素不會動到，少用 )
- 註 : 可以使用 border-top, bottom, left, right 來畫三角形
- margin & padding
- padding: 內距， pad 緩衝，所以是裡面的
- margin: 外距，margin 邊緣，所以是外面的
- 文字相關
- color: red;
- font-size: 30px
- font-weight: bold;
- font-family: 微軟正黑體;
- text-align: center;
- letter-spacing: 1px;
- line-height: 1.5em; ( 相對字體的距離 )
- word-break: break-word;
- white-space: nowrap;
- overflow & text-overflow
- overflow: scroll; ( 可以滾動 )
- overflow: hidden; ( 隱藏 )
- text-overflow: ellipsis; ( 可以將多的文字變 `...` )
- transition
- transition: all 0.5s ease; ( 需要加在原本的元素上，不是變化的 )
- 延伸 : [貝茲曲線](https://zh.wikipedia.org/zh-tw/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A) , [cubic-bezier](https://cubic-bezier.com/)

## CSS 盒模型 ( box model )

- 盒模型
- box-sizing: border-box; ( 把 border 的寬高內縮成元素的寬高 )
- display
- block: div, h1, p, ...
- inline: span, a, ...
- inline-block: 結合上面兩種優點
- 補充：

## CSS 定位 ( position )

- position
- static: 預設排版方式
- relative: 相對定位，依據上一個元素定位，不會影響到後面的排版
- abosulute: 針對某個參考點定位 ( relative, 沒有給就是參考視窗 )，會影響後面的排版
- fixed: 固定在視窗，相對於瀏覽器 ( viewport ) 定位
- sticky: 新屬性，如果視窗滑過就黏在上面，可以用在導覽列等等
- z-index
- 可以決定 z 軸的順序，越小越後面，值可以是負的

## 切版實戰
- inline-block 其實會有孔隙
- CSS Naming : 使用兩個底線 `__` 連接
- float, flexbox, gird
- reset.css vs. normalize.css

---
##### 心得 - 2021 May.15

終於進入前端的世界了，前面的 5 周基本上都是通用技能，CLI、Git、JavaScript基礎、網路基礎概念 ... 等，這周開始會介紹到 html, css 以前學的很雜亂，但藉由 huli 老師的整理，整個很有力，基本上會用到的都講了，較深入的也有補充資料。

html 相對好學，如果前面有跟著使用 markdown 語法，應該很快就可以上了，SEO 那邊講得很詳細，畢竟也是很新穎的領域，所以學校、外面的教材也很少提到，推一個。

CSS 選擇器也都有介紹到，包括假元素，都介紹的很詳細，也有試了很多狀況給我們了解是怎麼運作的，尤其是 nth-child 那邊示範了很多選不到的狀況，也蠻有趣的，可以跟著動手玩一下

CSS 盒模型 ( box moudel ) 跟定位 ( position ) 也都講得很詳細，還有最後實戰切版，直播切一個簡單的 facebook 網頁，也補充了很多知識