###### tags: `html`
# 來杯React特調_w1基礎前端觀念
## 前後端交互作用

browser 實作 W3C 的規範，解析(畫)HTML後變成前端所看到的畫面。
畫面導致跑版是因為不同瀏覽器的解析(畫)可能有些微差異。

* HTML/CSS都是靜態的標籤檔案，不算是程式，只要有相應的軟體就可以讀取。

* 瀏覽器怎麼透過跟伺服器拿 HTML？
-> protocol協議(定) （常見的如 HTTP)

* 靜態網頁 -> 需要把 HTML 檔案放在伺服器(Server)上，其他人才能看到(不然你需要 一個隨身碟)
動態網頁 -> HTML 是用後端語言（NodeJS、PHP、Python...）動態產生出來的

browser → server 拿 HTML/CSS/JS

1. SSR(server side render):
-> Server 透過 backend(JS/Python/PHP) web server 產生 HTML/CSS/JS，再丟給前端
2. CSR(client side render):
->Server 直接將 HTML/CSS/JS 丟給前端，由前端執行 JS，調整 HTML/CSS
4. SSR + CSR: Next/Nuxt

## HTML架構

* 命名的重要以及SEO(語意化標籤)
* 範例:(導覽列)，較好的方式建議以下三種，
1. navBar 搭配 navItem
2. nav 搭配 navItem
3. navBar 搭配 navItem

* structure
1. header/main/footer
2. section控制bg+上下padding(破格設計/偽元素)
3. container控制左右(外壁)
4. inner 內壁 ex:w-75 mx-auto
5. row/col做layout排版，建議上面不要做任何樣式
* 單一職責原則(Single responsibility principle)

<header>
  <nav>
   <navitem></navitem>
   <navitem></navitem>
   <navitem></navitem>
  </nav>
</header>

<main>
    <section>
       <div class="container">
         <div class="inner_container">
             <div class="row">
                <div class="col-4"></div>
                <div class="col-4"></div>
                <div class="col-4"></div>
                <div class="col-4"></div>
                <div class="col-4"></div>
                <div class="col-4"></div>
             </div>        
         </div>
       </div>
    </section>
</main>
<footer></footer>

* margin:元件和元件間的距離
* padding:元件內部距離
* 避免產生margin塌陷問題(一個往上推，一個往下推)
* [Collapsing margins ](https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/)
1. 內外層均為塊元素。
2. 外層塊狀元素沒有 border、padding、overflow。
3. 內層第一個塊狀元素(空元素不算)，不包含 float、absolute。
* 解決辦法
1. 透過外元素的 padding
2. 外元素加入 border
3. 內元素更改屬性 (inline-block)
4. 內元素更改屬性 (float)

* 建議團隊統一一個方向推:ex右下

## 效能優化

* Netlify 介紹

加速你的網站 -> 減少 first rendering 時間
* uglify -> rename variable(把code變醜)
* minify -> reduce space/new line刪掉空格or換行
使用者優化，加速第一次秀出來的速度，關乎SEO

* bundle -> 讓檔案變小
通常會依照功能分 bundle，一支超巨大bundle .js 也不好
* 前端的打包工具(一起做上面三件事) -> webpack, gulp

結構化資料

* JSON-LD
* 語意化標籤

script一般放在body偏下，放在偏上時機在tracking-code

[lazy loading](https://medium.com/@mingjunlu/lazy-loading-images-via-the-intersection-observer-api-72da50a884b7)

## 重點整理

1. 我們看的到前端的code是因為我們把code從server上載下來，不然只能用隨身碟傳遞(笑
2. js是在瀏覽器上執行的
3. node.js是js在server上執行的環境，SSR
4. 論htnl structure的重要性
5. 語意化的命名