# 9/03 HTML - 基礎實作
###### tags: `HTML` `2021/09/03` `進度筆記` `前端心得`
---
## 今日講課-上午的部分
- [9/12 可能要去豐原領參考書](https://docs.google.com/spreadsheets/d/10KoQgvqQ_e8r6Imdi0sFr2GFIQnE-zwXQcSwopGLGKY/edit#gid=0)
- 小複習, 開發工具 VSCode, 便利外掛, 快捷鍵 !
- HTML 結構, CSS 外觀, CSS 架構, CSS 選擇器的寫法, 幫標籤命名, 第一個屬性是 id, id 有唯一性
- 預設的 div 標籤會占滿整行, 就算沒寫 width 也會(很多 tag 都會有這種性質), 用屬性 float 去解決 div 佔滿整行的效果
- CSS 的 clear 屬性, 可以換行, 有點像牆壁隔間
- 一開始拿到題目, 先做大範圍, 像是方塊先做出大小, 再解決方塊的簡單位置, 最後再做難一點的隔間
參考資料: https://ithelp.ithome.com.tw/articles/10224091?sc=pt
---
# CSS 像是做加法
寫 CSS 如果這行沒有成功, 記得刪掉不必要的屬性, 才不會太冗長
---
## 巢狀結構-看整體的步驟
- 由大而小, 由左而右
先看大區塊, 由上而下, 有三個大區塊(紅色框框), 再由左而右看小區塊(藍框綠框)
- 所以套一個類似接近圖塊
### [Emmet 快捷鍵](https://docs.emmet.io/cheat-sheet/)
### 命名 tag 的方法
- 1. 記得英文為主, 可以加數字
- 2. 單字單字間以 ``-`` 號分隔不同單字, 記得養成良好習慣, 盡量用大家習慣的命名法, 有些大公司的框架命名幾乎都是以 `-` 號去命名, 像是 FB, 亞馬遜~
- 3. 命名盡量有意義(根據這個圖案下去命名)
- 4. 盡量避免用只有自己懂的單字縮寫, 像是什麼 TIGF 之類的
---
↓像這這可能就 box-top, box-mid, box-bottom
### emmet 快速寫法
```
div>div*3
一個 div 包著3個 div
跟 div>div+div+div 相同
```
```
div>div+(div>div*2)+div
```
- 想要一步展完, 要對 emmet, 整體結構理解
### emmet 小練習
↓一句話簡化這張圖~
```
比較複雜的解法↓
div>div+div+div+(div>div)+(div>div)
優化↓
div>div*3+(div>div)*2
```
## 從大區塊的方塊到小方塊
第一個挑戰
- 寫的時候從最外層開始寫
建立方塊位置 →
```
外框方塊 600 * 600
頂部方塊 600 * 150
中方塊 (300 * 150) x2
底部方塊 600 * 150
寬*高
```
- 圖片長得不太對, 因為 div 佔滿了一行
---
# 課堂練習挑戰 1
記得這堂課教的重點~
- 由上而下, 先從大框框 → 包住所有顏色的大框框
- 由左而右, 中間一個框框, 包住左右兩個框框
- 在從中間細分的兩個框框去調整
- 最後是底部的框框
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 600px;
height: 600px;
}
#box-mid {
width: 600px;
height: 150px;
}
#box-top {
width: 600px;
height: 150px;
background-color: pink;
}
#box-left {
width: 300px;
height: 150px;
background-color: yellow;
float: left;
}
#box-right {
width: 300px;
height: 150px;
background-color: rgb(190, 185, 219);
float: left;
}
#box-bottom {
width: 600px;
height: 150px;
background-color: rgb(190, 133, 0);
}
</style>
</head>
<body>
<div id="box">
<div id="box-top"></div>
<div id="box-mid">
<div id="box-left"></div>
<div id="box-right"></div>
</div>
<div id="box-bottom"></div>
</div>
<!--
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
<div></div>
</div> -->
</body>
</html>
```
# 課堂練習挑戰 2
分析區塊
----
## 長寬高單位
依據父層的寬度去調整, 如果用 100% 就是跟父層一樣大
因為寫死的 pixel 不太好改, 如果改成 % 值
- 一開始先學會用 pixel, 先固定住大小, 如果圖層的父子層數過多會很考驗邏輯判斷XD
---
# 課後作業-剩下的 float 挑戰~
記得老師教的比例計算~
## 課後挑戰 3
## 9/4 檢討
↓由上而下
↓由左而右
可以分割步驟, 或是全部分析完整體架構再一次寫~~
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 600px;
height: 600px;
}
#top {
width: 600px;
height: 150px;
background-color: pink;
}
#mid {
width: 600px;
height: 300px;
/* background-color: yellowgreen; */
}
#mid-left {
width: 150px;
height: 300px;
background-color: yellow;
float: left;
}
#mid-right {
width: 450px;
height: 300px;
background-color: teal;
float: left;
}
#mid-right-top1 {
width: 150px;
height: 100px;
background-color: rgb(190, 185, 219);
float: left;
}
#mid-right-top2 {
width: 300px;
height: 100px;
background-color: green;
float: left;
}
#mid-right-mid1 {
width: 300px;
height: 100px;
background-color: purple;
float: left;
}
#mid-right-mid2 {
width: 150px;
height: 100px;
background-color: peachpuff;
float: left;
}
#mid-right-bot1 {
width: 150px;
height: 100px;
background-color: grey;
float: left;
}
#mid-right-bot2 {
width: 300px;
height: 100px;
background-color: royalblue;
float: left;
}
#bot {
width: 600px;
height: 150px;
background-color: rgb(190, 133, 0);
}
</style>
</head>
<body>
<div id="box">
<div id="top"></div>
<div id="mid">
<div id="mid-left"></div>
<div id="mid-rifght">
<div id="mid-right-top1"></div>
<div id="mid-right-top2"></div>
<div id="mid-right-mid1"></div>
<div id="mid-right-mid2"></div>
<div id="mid-right-bot1"></div>
<div id="mid-right-bot2"></div>
</div>
</div>
<div id="bot"></div>
</div>
```
---
## 課後挑戰 4
提示:
## 9/4 檢討
CSS 寫的東西盡量放在跟 HTML ``<body>`` 中一樣的相對位置
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 600px;
height: 800px;
}
#top-box {
width: 600px;
height: 150px;
background-color: pink;
}
#mid-box {
width: 600px;
height: 500px;
/* background-color: yellowgreen; */
float: left;
}
#mid-left-box {
width: 450px;
height: 500px;
float: left;
/* background-color: yellow;*/
float: left;
}
#mid-upper-left-box {
width: 500px;
height: 300px;
float: left;
}
#minor-upper-left-box {
width: 150px;
height: 300px;
background-color: yellow;
float: left;
}
#minor-upper-right-box {
width: 350px;
height: 300px;
/* background-color: yellow; */
float: left;
}
#minor-mid-box1 {
width: 300px;
height: 100px;
background-color: rgb(190, 185, 219);
float: left;
}
#minor-mid-box2 {
width: 300px;
height: 100px;
background-color: purple;
float: left;
}
#minor-mid-box3 {
width: 300px;
height: 100px;
background-color: violet;
float: left;
}
#mid-lower-left-box1 {
width: 450px;
height: 100px;
background-color: teal;
float: left;
}
#mid-lower-left-box2 {
width: 450px;
height: 100px;
background-color: lightskyblue;
float: left;
}
#mid-right-box {
width: 150px;
height: 500px;
background-color: rgb(241, 210, 214);
float: left;
}
#bottom-box {
width: 600px;
height: 150px;
background-color: rgb(190, 133, 0);
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="top-box"></div>
<div id="mid-box">
<div id="mid-left-box">
<div id="mid-upper-left-box">
<div id="minor-upper-left-box"></div>
<div id="minor-upper-right-box">
<div id="minor-mid-box1"></div>
<div id="minor-mid-box2"></div>
<div id="minor-mid-box3"></div>
</div>
</diV>
<div id="mid-lower-left-box1"></div>
<div id="mid-lower-left-box2"></div>
</div>
<div id="mid-right-box">
</div>
</div>
<div id="bottom-box"></div>
</div>
</body>
</html>
```
----
## VScode 功能之一
複製: 點任一行複製後直接就能任意貼上
任意移動: ALT+上下左右, 可以一次移動多行
刪除: 直接 Ctr+X
## 切版的概念
以某網站舉例:
切分出三塊後, 結構上, 上面又可以細分:
:
---
# 找 FB 上的版面來做切版練習
## 在這之前工具介紹
長這樣
## 盒模型, box-model
可以看到
```
邊框, 實體線路會影響寬高
border: 1px solid black;
粗細; 造型是實體一條線; 顏色
```
### 邊框會影響實體寬度
### 內距: padding
如果寫了 20px, 就會往內推20 px 大小(寬高都有影響 )
- Padding 這參數, 會影響盒子元素的實體大小, 例如 box 大小500px * 500px, 加了 padding 20px → box 大小成 540px
- 1 參數時: 四邊
- 2 參數時: padding 20px 5px : 上下, 左右
- 3 參數: 上, 左右, 下
- 4 參數: 上, 右, 下, 左
- padding 是依照父層的寬度, 暫時可以先不用 % 值去調整, 用 %值可能會遇到父層調整的問題~
### 小練習-只要左邊的內距
如何用原力去推動方塊(?
padding:0px 0px 0px 10px
padding-left: 10px;
---
外距: margin
參數
比較不建議用 margin 去推父層, 但可以用自己去推父層推開(實務上不太會這樣做)
記得由外而內由上而下由左而右,
overflow-hidden 不能下
- 解決方法, 不要用 margin 去推自己
如果下 margin-top: 5px; 應該要會發現推不下去(但我推下去了, 可能是瀏覽器比較新的問題?)
### Collapsing margins 參考資料:
https://ithelp.ithome.com.tw/articles/10225741
https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/
## Emmet
```div#box-$*5```
自動把 box 依照順序從 1 排到 5
```p$aaa```
# CSS 顏色的寫法
## 直接寫顏色英文
## 把 RGB 轉換成 16 進制
## RGB 的寫法
---
## 課堂小練習-1
自己做一個這種 ↓
## 課堂小練習-2
追加封印 float(X_X)
### 可以讓計算功能 Calc 自動幫你算大小
```
width: calc(500px - 40px);
運算符號左右兩邊要記得空格
```
### 可以讓 margin 自動幫你算
```
margin-left: auto
```
### 練習-2 解答
## 課堂小練習-3
追加封印 float(X_X)
最下面那張 ↓
### 練習-3 解答
應該要左右(水平移動推到最滿) AUTO
如果上下下了 AUTO 就會變置中
---
# [Position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)
如果有東西超出區外, 就要調整一下這個
- 位置的預設是: static
1. static - 靜止不動
2. relative - 相對位置(通常最常使用)
3. absolute - 絕對位置
4. fixed - 固定位置
如果不要使用盡量不要使用, 如果有其他方法可以解決就不要用到這個屬性, 除非迫不得已, 才去使用
這屬性下有幾個值可以調整:
```
position: relative;
top: ;
left: ;
right: ;
bottom: ;
```
例如 ```bottom: 10px``` 方塊往上推
參考資料:
https://ithelp.ithome.com.tw/articles/10212202
## relative 值
通常會用 relative 這個值去移動方塊, 並不是真的移動, 看起來像是移動了
但實際上這方塊對網頁來說還在原處
實際上是值去改變了, 可能會造成網頁誤判和 debug 出問題
---
## absolute 值
absolute 會移動真的實體位置, 像是 float 一樣會浮起來, 只要是除了 static 以外的 position 屬性都可以~
移動是根據父層任何 position 的屬性去移動, 但如果父層沒有任何 position 值, 他就會依據父層的父層去移動, 像這是沒寫就是依據 body
如果沒有依據父層去定位的話, 就使用 relative 就好了
例如, BOX-B 的上面是 BOX-A, 那你在 BOX-A 下了 position, BOX-A 就是 B 的父層, 這時在B 下 bottom: 0 px 他會移動到藍色方塊最下面
如果沒在 Box-A 下 position 屬性, 那就會以 body 為主
## fixed 值
- 會以瀏覽器本身去定位
- 本身跟 float 一樣會浮起來
# body 的值被誰影響?
body 本身值是預設 100%, 會預設 margin 8px, 記得在 body { margin:0;} 消除預設 8px, 而 body 本身會被內容物的 pixel 影響, 被撐開
# Position - 參考資料
https://ithelp.ithome.com.tw/articles/10212202
# Position 回家作業
示範: 一個 .html 檔案內的 "八個方塊" 長的跟下面的布局一樣
長這樣 ↓
大框框距離可能 50px, 上下可能 10px
實際做水平垂直置中的方法:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
width: 300px;
height: 300px;
background-color: royalblue;
}
#box-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 125px;
left: 125px;
right: 125px;
bottom: 125px;
}
</style>
</head>
<body>
<div id="box">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
<div id="box-7"></div>
<div id="box-8"></div>
</div>
<!--
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
<div></div>
</div> -->
</body>
</html>
```
---
# 快捷鍵 - 複選
選你要改的東西
滑鼠反白(或是方向鍵)你要選的東西, 按下一次 Ctr+D 複選他會幫你選取符合這個頁面, 例如想選 都是 500 px 的值一起改, 按一次 Ctr+D 同時改兩個值, 再按一次就再多選一個值, 但不能跳值
## 快捷鍵 - 同時輸入
- 多行列同時一起 typing
快捷選法, shift 按一下會選旁邊的字體, 複製過去
例如要選多行不同的字, 先反白你要的字, Ctr+D 選擇多行你要的字, Shift+end 會選到最後面, 開始做減法 → shift 按住, 用方向鍵往左邊移動到不同的字 → 放開 shift 輸入
## 可以用開發者工具當尺
---
# 課後任務 - Position 檢討(從這裡到 transform 都是步驟)
分兩個大區段, 再用 clear 一刀分隔
# 實用小技巧-直屬選擇器
## 大框作法
## 實作:
```
div#Outter-frame>div#row-$*2>div#box-$*4
```
## 大框 CSS 直屬選擇器用法:
複習一下之前 emmet 直屬選擇器用法 ↓
可以用 emmet 技巧, `#row-1>div, #row-2>div` 從父層選擇子層一次下四個大 boxes
## 實作
```
#row-1>div,#row-2>div {
width: 300px;
height: 300px;
border: solid black;
float: left;
margin: 20px 10px 30px 20px;
position: relative;
}
#row-2 {
clear: both;
}
/* #row-2>div {
width: 300px;
height: 300px;
border: solid black;
float: left;
margin: 20px 10px 30px 20px;
} */
```
---
## 大框內的小紅方塊做法
也可以這樣, 用逗號分隔後一次下八個 boxes
一次下所有的小紅框 boxes
在 CSS 選擇器的地方 ``#row1>div>div,#row2>div>div``
或是
剪下你要的幾個行列的文字後, 對應你要的行列文字, 選取後 Ctr+D, 選取好後, 接著一次選擇所有的 div 空格貼上
## 實作:
```
div#red-$*8
```
----
# 用 CSS 直屬選擇器做紅框移動的方法
## 實作:
在父層(大框)下 relative
## 接著做小紅框位置
在子層(小紅框)下 absolute
# 接著用父層的寬高去剪掉小紅框
# 接著更簡化方塊的移動
# 可以用 transform 這個屬性
``
transform: translate(x, y); X 軸 - 值 往左, + 值往右
transform: translateX(); Y 亦同
transform: translateY();
如果下 % 數就是下在自身身上, 例如用在紅色 box, 就是紅色 box 自己的大小寬高
``
父層盡量用 relative 寫, 子層用 absolute 寫
## 實作:
## 整體 code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
#row-1>div,#row-2>div {
width: 300px;
height: 300px;
border: solid black;
float: left;
margin: 20px 10px 30px 20px;
position: relative;
}
#row-2 {
clear: both;
}
/* #row-2>div {
width: 300px;
height: 300px;
border: solid black;
float: left;
margin: 20px 10px 30px 20px;
} */
#row-1>div>div, #row-2>div>div {
width: 50px;
height: 50px;
background-color: red;
border: solid black;
position: absolute;
}
#red-1 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(50%);
left: calc(50%);
transform: translate(-50%, -50%);
}
#red-2 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(10%);
left: calc(50%);
transform: translate(-50%, -50%);
}
#red-3 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(+82%);
left: calc(+30%);
transform: translate(0%, 0%);
}
#red-4 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(40%);
left: calc(90%);
transform: translate(0%, 0%);
}
#red-5 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(82%);
left: calc(82%);
transform: translate(0%, 0%);
}
#red-6 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(42%);
left: calc(2.5%);
transform: translate(0%, 0%);
}
#red-7 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(42%);
left: calc(82.5%);
transform: translate(0%, 0%);
}
#red-8 {
/* top: 125px;
left: 125px; */
/* position
top: 50%;
left: 50%; */
position: relative;
top: calc(92%);
left: calc(0%);
transform: translate(0%, 0%);
}
</style>
</head>
<body>
<div id="Outter-frame">
<div id="row-1">
<div id="box-1">
<div id="red-1"></div>
</div>
<div id="box-2">
<div id="red-2"></div>
</div>
<div id="box-3">
<div id="red-3"></div>
</div>
<div id="box-4">
<div id="red-4"></div>
</div>
</div>
<div id="row-2">
<div id="box-5">
<div id="red-5"></div>
</div>
<div id="box-6">
<div id="red-6"></div>
</div>
<div id="box-7">
<div id="red-7"></div>
</div>
<div id="box-8">
<div id="red-8"></div>
</div>
</div>
</div>
</body>
</html>
```
---
# 回家練習(不算作業但可以提早做) - 進入切 FB 版面
---
# CSS Diner
https://flukeout.github.io/
HTML: Select the plates
左邊 CSS Editor 寫答案,右邊 HTML Viwer 是結構
最右邊前七題有提示
# 邊玩邊練習所有 CSS 選擇器 用法
## 4 後代選擇器
Descendant Selector
## 12
A+B 跟 A 相鄰的 B 選起來, 鄰層選擇器
## 13
A~B 跟 A 同一層的都選, 通用同層的選擇器, CSS 不能往前只能往後
## 14
A>B , 直屬選擇器, 父層下的子層會選到
## 15 之後算進階, 盡量玩完
## 27 attribute
----
# 前端進階技能樹
[交互式學習平台](https://www.freecodecamp.one/)
- 非營利組織, 從向學生介紹 HTML, CSS 和 JavaScript 的教學
[APCS 大學程式設計先修檢測](https://web.ntnu.edu.tw/~algo/)
[Awesome CS Training](https://github.com/goodjack/awesome-cs-training)
- 以 台灣高中生 為出發點的 資訊培訓相關資源彙整
[網頁前端程式入門、工作文章整理](https://github.com/nicehorse06/software-job-note)
[設計模式 Design Pattern](https://github.com/Kantai235/php-design-pattern)
[Modern Data Engineering Landscape Study Guide](https://github.com/datastacktv/data-engineer-roadmap)
[前端、後端或 DevOps 開發人員學習地圖(中文版)](https://github.com/goodjack/developer-roadmap-chinese)
[依舊技能樹](https://drive.google.com/file/d/1hyOjAdnHv167tAT1UlA9GTqfHMzkrG6A/view)
[線上課程精華整理：JS 和前端版各方大神推薦（主要 Udemy）](https://hackmd.io/5-MQ7oV-S5Wb-72fWWlrPg)
[你不知道的JS (系列叢書(簡體))](https://github.com/weiqinl/You-Dont-Know-JS-CN)
[從 ES6 開始的 JS 學習生活](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/intro.html)
---
Sign in with Wallet
Connect another wallet