0629
===

Bootstrapt跨裝置網站框架應用(術)伊君毅

---

## JS 手刻 [David William Baum](https://www.davidwilliambaum.com/)
* 註解很重要 不指自己看懂 還要讓別人看到

分解別人的程式方法與流程
1. 觸發條件 **起點** [Cheat Sheets：JavaScript](https://medium.com/better-programming/modern-frontend-hacking-cheatsheets-df9c2566c72a)
2. 畫面有什麼變化 -> 用 JS 控制　CSS 達到我要的效果 **終點** [CSS3 transform 屬性 scale(x,y)](http://www.wibibi.com/info.php?tid=CSS3_transform_%E5%B1%AC%E6%80%A7)
* 老師有給範例

## 語意標籤
[搜尋引擎最佳化-維基百科 SEO](https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96)
nav 跟 div 沒有差別
但是為什麼要有 nav
是因為排名是用機器人來看內容並評定分數
nav 是給機器人看的
* 主要有
nav
h1 標籤一定要出現過一次 是用來表示往業主題
h1 標籤在一個 html 只能出現一次
標題標籤需要巢狀式寫法運作
父層出現過 h2 子層要由 h3 開始
main
h2
section
h3
div
h4
span
h5
section
h3
footer

<nav>
        <h1></h1>
    </nav>
    <main>
        <section>
        </section>
    </main>
    <footer></footer>

* 老師有給範例

## 標簽屬性
淺藍色都是標簽屬性
style 是標籤樣式，全重很高，不建議使用
alt 是 SEO 用來判斷圖片的

[HTML attribute reference](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Attributes)
Global attribute 是指所有都能使用
hidden 是影藏物件

## 表單
name 一般是給後端用的

radio 由於是單選，所以同一組的 name 要一樣

select 一定配 option

<select name="" id="">
            <option value=""></option>
        </select>

ul 一定配 li

<ul>
            <li></li>
        </ul>

<textarea name="" id="" cols="30" rows="10"></textarea>

required 會先檢查 資料錯誤會暫停並出現提示

##SCSS
可以簡化 CSS 語法
SASS ＝ CSS ＋ JS
但是練習用 SCSS 因為保留大刮號`{}`的寫法
間容 CSS 的寫法

* BUG
發生錯誤 輸入視窗會暫停

要安裝 [Live Sass Compiler
ritwickdey.live-sass
](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass#review-details)
開啟 Live Sass

$main_color: blue;

body{
    color: white;
    background-color: $main_color;
    
    &:hover{
        color: blue;
    }
    @media(max-width:991px){
    font-size: 12px;
    }
}

[css3中-moz、-ms、-webkit,-o分别代表的意思，以及微信浏览器内核分析](https://www.cnblogs.com/EasonJim/p/6140097.html)
SCSS有跨瀏覽器支援

* 支援巢狀結構
.flex .box 空一格 這種叫做後代選擇器

＆代表自己，例如：
＆：hover

###### tags: `跨裝置企業平台與資料庫整合設計班`