# 第五週｜課程直播｜切版班 by yellamoon
###### tags: `yellamoon` `第五週` `直播筆記` `2021夏季切版班`

---

method 用來傳送出去給後台

<form action="/index.html" method="post">
    <label for="myName">姓名：</label>
    <input id="myName" type="text">
    
    <label for="tel">電話：</lablel>
    <input id="tel" id="tel" type="text">
    
    
    <input type="submit" value="表單送出">
    <button>表單送出</button>

</form>
電腦看得懂name="" 都適用name傳送資料
看不懂class \ id 

中文會變亂碼、

submit：vt.使服從，使屈服
sub mit
紗布 米呢 （諧音）
記憶法：用紗布包米，米就被 屈服 了

<label for="tel">電話：</lablel>
<input id="tel" id="tel" type="text">

type 可以選很多種類
ex: date \ number
建議不要用date

日曆通常用套件，不用表單。
因為會出現很多麻煩，原生撈出來的格式會每個瀏覽器都不一致。
各類瀏覽器的支援度不夠高
用別人寫好的套件

post:

http做電商很危險，個人資料會洩漏。
https個人資料才不會被看到
s:save 加密

身分證、信用卡號都會被看光


value 是重點，傳到後台的資料

---
select 這個語法
會有原生內建語法無法更改，如圖

---
###### 地雷 原生input改不動（預防針）

input type="checkbox"
checkbox 也是基本上很難去改的語法

地雷
input type="radio"
也是基本上很難去改的語法

必須用隱藏他們，另外做新的，很麻煩。


會因此和設計師、工程師吵架吵很兇喔～RIP
要用空的<div></div>去改。很難，如圖

### Value="" 預設代值

<input value="" readonly
<input value="" disable

讓你只能看不能修改這個表單的內容，把你特別要用的寫進去

##### placeholder=""

預設浮水印的字樣

地雷
<input type="botton">

botton要自己另外寫javascrip才可以把資料送到伺服器

required 就是不能改，以後會遇到設計師可能要各種修改，跟他們說無法謝謝。

re quired
綠 塊兒 ,綠塊兒＝需要

#### normalize.css版本

h1{
fz  2rem
}

16px*2=32px 自動用倍數

boostrap用normalize.css
不適用cssrest

看設計師如何選擇 我們前端工程配合他

#### css base 全站
---
.header
.footer
table

/*layout*/
特別要全站都設定某些樣式，幫你節省全站都要寫的東西

*boostrap 有時候class 命名會用h2? *

全站樣式的路徑設定：
app/aset/style/setting/_base.scss

help/_base.scss

之後要用boostrap5的util搭配自己的手寫。

假設，boostrap 是很多預先寫好的class
就很好理解了

utilities :通用類別

utility | 美 juˈtɪlǝtɪ | | 英 juːˈtiliti |
n. (plural utilities)
1 效用，實用，功利 [U]
▸ The store deals in objects of domestic utility.
那家商店出售家庭用品。
2 有用之物 [C] [P1]
3 公用事業；公用事業公司；公用事業公司股票 [C] [P1]
▸ I found that I had forgotten to pay the bills for utilities.
我發現忘了付水電及瓦斯的費用。

#### boostrap 首頁有寫範例
---
*and 向右推margin rigt
＊ms向左推 margin left

通常 8px 為一個單位

boostrap首頁 左側選單點選。通用類別 去看 他的utilities

元件介紹

盡量減少頁面的命名.blog-pagination這樣命名就是不好，容易有衝突。

元件設計上，不用頁面名稱命名。
.card
.pagination
多去看boostrap命名方式

div class="card mb-3"
要用外觀命名不要用頁面名稱去命名

厲害的人自己設計出獨特的元件。

ul>li*3{$}

## Modal 互動視窗
---
data-bs-target="exampleModal"

可以寫input 進去
按這個連結有彈跳效果

bs-target 對應 id

# 第五週設計稿會用到bst5
* pc版
* 不用rwd
* 眼睛
* hover:閃
* 鉛筆－各種資料
* 左邊欄位layout
* 做一頁就可以提交
* icon助教會講怎麼載入

### utilities 介紹：
---
.mb-3{
margin-bottom:3rem;
}
.text-primary{
color:blue;
}

通用類別，是用一個小積木，組出各種樣式

### helper =你永遠記不起來的酷東西，小東西，很容易忘

例如：
* 圖片取代文字

.text+hide{
overflow:hidden;
xxx...
}

helper 做出一個功能，用多個語法去滿足的

---

例如：
css三角形

---

用了
base
tuil
你就１００分

---

layout.ejs
html boostrap css link:

---

他有自己額外寫東西


專業工程師
週一到週五 五個工作日 要切版web layout 週五下班前要切完，才是正常的前端工程師。