# 20190924前端程式設計note

## HTML
### Table
主要語法大家如果不熟悉，可以再去看老師的code，或是[w3school](https://www.w3schools.com/html/html_tables.asp)看一下。
記住：
`<tr> `的r代表row
`<th>` 的h代表header
整個表格是一個row一個row展開，所以都是以一個`tr`包著裡面`th` or `td`

快捷鍵：`table > (tr>th* m(行的數目)) + (tr > td * m(行的數目)) * n(列的數目扣掉標題列)` (這邊看老師的檔案)

---
## CSS

### CSS selector
這個部分很重要，也有延伸很多很特別的寫法，像是有關parent, child的。老師上課沒有提到，如果有興趣的同學可以直接google "CSS selector 整理"，會有更多資訊。

| Selector(written in CSS file) | HTML (writen in HTML file)|
|----------|------|
| tag(當你設定這個tag後，後面用到此tag的都會被套用到) |<tag> |
| #id(一個id只能對應一個tag) |id="id_name"|
| .class(不同的tag中可以是同一個class) |class="class"|

Ex:
==< In CSS File >==

h1 {
text-align: center;
...
}

#This_is_the_id_you_named {
text-align: center;
...
}

.This_is_the_class_you_named{
text-align: center;
...
}
==< In HTML File >==

< h1 >這是內容< / h1 >
< h1 id = "This_is_the_id_you_named">
< h1 class = "This_is_the_class_you_named">

p.s. 如果你是css檔案中指定h1 tag，下面兩個指定id和指定class的也會因此被套用到。這個情況就是衝突產生，更多資訊可以看[這邊](https://www.webdesigns.com.tw/CSS-selector.asp)

### CSS img樣式修正
- 建議直接在瀏覽器做操作，更改完再貼回VS code的檔案
- Mac: Fn + F12 or 直接在網頁畫面上右鍵 -> 檢查
- Windows: 直接 F12
- img 中的一些大小屬性
- `width: 300px;` (px為網頁中常用到的單位，自己也可以試試其他單位 ex: em)可以查一下[網頁常用單位](https://www.tellustek.com/web-design/78-unit-for-web-design)
- `border-width: 5px;` (邊界寬度)
- `border-color: #aaaaaa; `(color可以直接在vs code裡面找，鼠標放在你的顏色的文字上ex: #aaaaaa上 會有調色盤給你選)
- `border-style: solid`

:::info
CSS有太多種，有時候你想改你要用的東西，就直接用關鍵字搜尋，或是直接到[w3school](https://www.w3schools.com/cssref/pr_background-color.asp)改但常見的`font-size, font-family, width` 等等要記得就好。
:::

###### tags: `前端程式設計`