---
# System prepended metadata

title: 基礎 / link / 有無序清單 / 相對路徑 / display / flexbox / borderbox
tags: [HTML]

---

###### 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


