###### tags: `HTML` # 基礎 / link / 有無序清單 / 相對路徑 / display / flexbox / borderbox # css link方式 1. 行內css <pre> <head> < style > CSS樣式 < /style > </head> </pre> 2. 外部css 建立css資料 style.css <pre> <head> <link href="外部建立的CSS連結"></link> </head> </pre> # html 基礎 1. html 頭尾成對語言 <html>內容</html> 2. php 不需要成對 <?php 內容 ?> 3. table 成對 < table> 內容 </ table> - table row <tr></tr> - table data <td></td> 4. form 成對<form>內容</form> 5. id: 綁定 css / js ,ID不可重複 一個網頁只能有一個 6. name: 欄位名稱 7. label for 是抓input id 8. form 不能包form 9. action 要去的地方 類似a tag 10. select 不一樣 # 有序 / 無序 清單 - 有序 <pre> < ol> < li>　1.內容　< /li> < li>　2.內容　< /li> < /ol> </pre> - 無序 <pre> < ul> < li>　．內容　< /li> < li>　．內容　< /li> < /ul> </pre> # ? <pre> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </pre> # 練習 - 一 花茶 紅色 咖啡 咖啡色 - 二 1.報名表單 如果同一頁面 有兩個form ? column coffee # 用中文方式寫程式 - 拆分為三個區塊 1. 前端顯示頁面 html css js前端顯示畫面 2. 後端整理資料 php 後端客人看不到 捷運票卡 購物網站 等等商業邏輯 3. 資料庫規劃 db 營收報表 - 把客戶模糊不清的需求 具象化 例: - 點飲料系統 1. 前端 點飲料畫面 2. 後端 計算多少錢 買幾杯 3. 資料庫 統計營收報表 - 麥當勞點餐 1. 前端 點麥當勞畫面 2. 後端 計算多少錢 買幾杯 3. 資料庫 營收報表 - 小紅帽故事書 1. 前端 故事書顯示的畫面 2. 後端 計算要去哪頁 放哪個聲音 放哪個圖片 3. 資料庫 台詞 圖片檔名 聲音檔名 - hr人事系統 1. 前端 員工出缺勤統計 2. 後端 計算出勤紀錄 3. 資料庫 員工實際打卡資料 - 學生成績登入系統 1. 前端 name chinese english math # 2022-04-14 # display 有三種屬性 局部排版改變 1. block 換行, 可搭配width 2. inline 不會換行, 不可搭配width 空白 3. inline-block 不會換行, 可搭配width 空白 4. flex 全面的排版 # flexbox - W3C相關資訊 card-list 藍色外盒 card 灰色物件 container 藍色 # border-box 盒子相關 padding 往內 margin 往外推 兩個元件很接近 (以前 推開br br) border border-box width = content + 2*padding + border contend-box width = content 預設 width(content) + border = 總共長度 設定後 box-sizing border-box width 總共長度 = content + padding + border # css 選擇器的一些屬性 h1,h2,h3 組合選擇器 CSS Combinators div + p 相近的第一個 div ~ p 兄弟層 div 空格 p 全部後代 div > p 第一層 a:hover a 去底線 text-decoration: none; input:focus table tr:nth-child(odd) tr:nth-child(even) ::before ::after # 相對路徑 ./css/style.css 當層 ../ 回上一層 ../../ 回上兩層 css 選擇器 CSS Selectors 權重 < p1,h1 .... < class < id < Inline CSS < !important