# 9/02 HTML - 基礎實作
###### tags: `HTML` `2021/09/02` `進度筆記` `前端心得`
---
## 今日講課 - HTML 的部分
數位方塊
林峻生 先生 - 全端工程師
# 用上課檢核清單:
https://docs.google.com/spreadsheets/d/1ByByN4fmdqmpiDSvHJyHAC2xC-rZnLg-l-YF1H3GHxY/edit#gid=0
寫程式部分的步驟比較多, 操作一小段 code 後就會等我們一下, 告訴我們現在的步驟在哪, 現在 OK 了沒
## 做網頁的工作機會
很多, 需求很大, 工作量龐大, 現在這個時代的網頁會越來越多更難, 應用層次很廣, 網頁是個開始入門, 未來會更多需求
爬蟲, 金融爬蟲, 越懶越好, 想要自動化
## 暫時分組
<!-- 
-->
## 跟網頁相關的部分
- 前端: 廣義上打開網頁看得到的所有的畫面
例如畫面上呈現的 UI 畫面
User 搜尋時打字 → 輸入訊息 → Google Server → 資料庫中尋找 → 撈資料 → Google Server → User
go
- 後端
你看不到的部分, 例如管資料庫, 從資料庫中拿資料, 語言部份很多, 學的東西更不固定
## 甚麼是前端?
基本概念~
- HTML: 網頁標籤
例如是房屋的鋼筋水泥, 骨架的部分, 是網頁框架, *架構*
- CSS: 呈現樣式
例如房屋中的裝潢, 即網頁中的樣式
- JS: 進行呼叫
如果裝潢的時候買個吊燈, 放了電線, 這個管路的問題, 你按下開關去互動, 就像是 JS, 可以去切換, 回應, 呼叫
http://www.species-in-pieces.com/#
因此先從 HTML 學起
## 先來個基礎
[下載 VS Code](https://code.visualstudio.com/docs/?dv=win)
以前版本沒有各種兼容, 可能寫某些語言會套用專門寫某種語言的文字編輯器, 像 VS for C 系列語言
VS Code 有兼容性~
↑ 記得開 PATH 選項
---
做一個基本網頁
右鍵新增文字文件
# HTML 元素組成
## HTML 參考資料
https://developer.mozilla.org/zh-TW/docs/Web/HTML
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics
寫程式會用到一大堆不同括號,
() → 圓括號
[] → 中括號
{} → 大括號
<> → 角括號
### Opening / Closing tag
開頭結尾標籤, 有頭有尾
- 元素(Element)通常包住內容
```
<html>
<head>
給瀏覽器看的內容, 讓瀏覽器知道的網頁資訊和語言(大概概念)
</head>
<body>
寫給 User 看的
<h1>hello world!!!</h1>
</body>
</html>
記得有父層→子層關係
```
- → 按下 TAB 縮排
## 基本網頁
剛剛寫的 Hypertext Markup Language, HTML 存成有 .html 副檔名的檔案
- ↑ 比較古老的傳統方法
## 開發者除錯工具
- dev Tool
可以找到元素
縮到最小可以看到 head 和 body
滑鼠放到 head 上會沒顯示, body 主體的部分全部都看得到, 是給 User 看的
### 進入標籤
```
<h1></h1>
````
## 降低採坑機率
用英文檔名~
減少編碼不支援的情況發生
# 開發網頁現代工具
- VS Code
開啟檔案
每次上課只要開上課正在使用的資料夾就好
- 搜尋
- 安裝外掛(安裝各種程式語言外掛)
### 安裝 HTML CSS support
### HTML Snippets
### Live Server
### Bracket Pair Colorizer
### Color Highlight
可以快速看到顏色
### Material Icon
可以把顏色換成好看的 Icon
### Power mode(選配)
小心安裝, 特效超多! 有夠吃資源
# 作筆記(HackMD)
https://vip.studycamp.tw/t/topic/420
[Markdown 文法 ](https://hackmd.io/@VsQ_Erf8QDS3ndjx9qWsYQ/ByDMsuhM-/https%3A%2F%2Fhackmd.io%2FCwYwhgzAbApgHFAtHAnAIzY4awBNkwCsA7ImFCBCHAIxwBMhhIQA%3Fboth?type=book)
## 在 VS Code 編輯後
編輯後沒存檔的話, 網頁沒刷新不會即時更新
快捷鍵: Ctrl+S
- 記得開 File(檔案) -> Auto save(自動存檔功能)
## 思考
如何算是好的工程師?
獨立思考, 自行解決問題 → Google
如果別人的 Code 和你不一樣, 可以從環境(作業系統, 文字編輯器), 然後再去看程式碼, 找出問題點
### 如何在 HTML 內插入圖片?
- 插入圖片
```
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grapefruit slice atop a pile of other slices">
```
- 連到外部指定地方的方法
```
href : hypertext reference
<a href="網址" target='_self'>文字</a> ， 可以在現在的頁面去連到其他網頁(不開新分頁)。
<a href="網址" target='_blank'>文字</a> ， 可以開個新頁面去連到其他網頁(不開新分頁)。
```
### 精準輸入
先輸入你想要什麼_(空格)_敘述事情(轉換成英文)
或是使用""來鎖定關鍵字
---
# [W3C](https://zh.wikipedia.org/wiki/%E4%B8%87%E7%BB%B4%E7%BD%91%E8%81%94%E7%9B%9F)
[World Wide Web Consortium (W3C)](https://www.w3.org/)
全球資訊網協會（W3C）, 致力促進網路應用開發技術和內容提供者有個共同標準的相容性和協定的規範, 總部位於 MIT , 全球各地有辦事處
---
### 讓網頁跟你寫的 HTML 同步
搭配 Auto save, 在你寫 code 的地方按右鍵, 用 Live server
### 建立檔案 div
在左方 Ctr panel → add file → div.html
- 記得加入副檔名
### 在 VS Code 中快速開啟網頁
在新建的 div.html → 輸入 驚嘆號 "!"
會直接建立網頁的粗始框架~
```
<!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>
</head>
<body>
</body>
</html>
```
## 寫筆記註解的方式
- 按下 Ctr+?(/), 會出現註解的符號(HTML)
```
<!-- 這句看不見，一句話的註解 -->
<!-- 將一個段落隱藏看不見
這
段落
輸出時
會看不見
-->
```
## 自動補全(emmet)
會自動幫你補 closing tag, 曾經名為 zen coding, 可以通過內容輔助高速度的編寫和編輯
## 程式碼整理
Alt+shift+f, 自動對齊~
# 標籤內容
- div tag, division: 像是房子內的鋼筋, 隔間, 柱子
```
<div></div>
```
# 寫 CSS
幫房子裝潢, 幫柱子上顏色
CSS 選擇器 Selector = 屬性(Property) + 值(Value)
要寫在:
```
<head>
<style>
</style>
</head>
```
## CSS 和 HTML 比較沒有邏輯順序的問題
- HTML 是標記語言
- CSS (Cascading Style Sheets), 是階層式樣式表
- CSS 有權重和優先度問題
CSS 參考資料:
https://blog.hinablue.me/css-grid-layout/
---
# div 的問題
- 1. div 會佔滿整行
- 2. div {} 是標籤選擇器
- 3. id 幫忙取個名字
- id 不能跟他人名稱重複
- 可以用樣式表 # {} 去改變 div {} 標籤的選擇器, 有權重問題(用了某個標籤後面會有權重值在計算), id 比 div 的優先度大~
- 使用 id 可以改變 box1 的顏色值
- 權重一樣的話, 就會判斷先後順序, 後來塗的漆面會蓋過之前塗的漆, 下面的值會覆蓋上面的值, 程式碼是一行一行讀取的
- 先看權重，再看順序
```
html tag → id
id 在 CSS 中的選擇器 → # {}
```
# 俯視圖片
所有東西都放在桌子上時, 會照順序往下排
瀏覽器長出這些東西時
- 是由左往右, 再由上到下
如果左到右沒空間, 會從上往下判斷有沒有位置去排
也可以換標籤來試試看
## 可以用 float 屬性
- float 會施展漂浮咒讓東西浮起來
- float 可以取消 div 預設佔滿整個橫排, 並套用值的設定, 例如靠左
參考資料:
https://ithelp.ithome.com.tw/articles/10224091?sc=pt
[[新手前端]float與clearfix -白話就是，為什麼背景底圖不見了?! ](https://ithelp.ithome.com.tw/articles/10109275)
[關於float與clear屬性](https://ithelp.ithome.com.tw/articles/10201274)
### 但如果下了 float: right
一開始下 left
但如果下 right
會有先來後到, 照著 box 2, box3 的標籤順序, 去調整位置
### 調整 float 位置
在 pink box1的下面蓋一道牆
- 幾個 clear 用法
clear 這道牆要蓋在 box1 下面, box2 上面
不過最快速的是 both 這個值
或是另外開個 id wall1 標籤 直接分割
---
# 課堂練習-試著把下面四個圖案解出來:
比例: A B C = 1 : 2 : 3
記得存四個 .html 檔案出來
# 不同的語言有相同邏輯
學程式的目標和動力或是熱情是甚麼？
找一個你有目標的事情, 真的沒有就想著薪水, 能精進英文能力更好
<!--
## 找工作 - 如果你不小心發現這一行, 也許是個偶然(?)
CakeResume(電商居多), Yourator(中小企業), meet.jobs, · f2etw-jobs · GitHub,
台灣提到面議都是 4 萬, 要小心某些人力銀行(?)
-->
## 附錄前端技能樹
https://github.com/kamranahmedse/developer-roadmap?fbclid=IwAR3g58oMsGbReunY8WS48VKBjxtsiASFJZp_PHMuoqG4UNHUg8f-bWZO3xM#frontend-roadmap
https://github.com/goodjack/developer-roadmap-chinese?fbclid=IwAR2xVNIFPFOp9JELyBKk5x5rlFbzlxiYUjWrunOPLQX2oqnVLzh5sscqq08
Sign in with Wallet
Connect another wallet