# HTML CSS Notes
## Contents
[TOC]
## Hot Key in codepen
* Ctrl+D 可選取同一個字詞 (先用滑鼠選)
* Ctrl+/ comment
* Ctrl+L whole line select
* Tab indent
* Shift+Tab cancel indent
* Shift + ↑↓ 可往下選取
* TOC為HackMD目錄
### VScode
* alt+選取整合 ↑↓可快速搬運到想要位置
* 多行改內容 選取後ctrl+D
* alt + shift + f 快速整理縮排
* 尋找變數之定義 alt + f12
shift + f12，跳出的參考頁中，會把所有使用到的變數位置列出並可以直接移到該位置！
## HTML(Hyper Text Markup Language)
### 行內元素 inline
* tag a, img, span
無法做外距(margin) 的上下設定
### 區塊元素 block
* tag 大部分都是 h1~h6, p, list, form, table, div, hr 等等 可做外距(margin)內距(padding)設定
#### Inline-block 又是區塊又是行內
* tag 代表 buttom, input, select 可以併排
### head內元素
* head 區塊包含 meta, title, link
* HTML 與 CSS 連接需加入 <link rel="stylesheet" href="test.css"> 位在head內的title下面
### body內元素
* 可用 class 或是 id 設定 CSS
#### 大區塊(語意化標籤)
* header 網頁標頭，經常包含 logo、標題、導航列
* main 主要內容
* footer 網頁結尾，經常包含版權資訊、聯絡方式
* article 主要文章
* section 段落
* nav 導航列
* aside 跟主要內文沒有太直接關係的側欄
#### 內容元素 div & 清單
* div 用來分組用
* tag **ul** unorder list
* tag **ol** order list
* tag **li** list
* dl:definition list，裡面有 dt:definition term、dd:definition description，可以做出縮排的效果
#### 圖片相關
* img 圖片 src 圖片網址 title 鼠標停留在圖片上的提示文字
alt 圖片連結失效的替代文字
* figcaption 圖片說明文字
#### 文字相關
* h1~h6 網頁標題
* p 為段落內文 假文產生字 Lorerm ipsum
* tag **span** 當你想呈現一個段落內的文字有不同變化又不想換行，可使用span 操作 CSS 的 class 去作字體變化
* strong 粗體 em 斜體
* tag **a** target="_blank" 跳出新分頁 ="_self" 從這個網頁連結
* a href="#p3" 可以在文章內部快速導向至id="p3"的點
* tag **pre** 可保留原始格式的文字(空格與換行皆會顯示)
* code 放程式碼
* time 日期與時間
* tag **hr** 水平線
* tag **br** 換行
* escape 跳脫符號
```htmlmixed=
& → &
< → < <!-- lt 是縮寫 -->
> → > <!-- gt 是縮寫 -->
```
#### 崁入內容
* tag **iframe** 可崁入網頁 iframe src="網址" width="100%" height="500px"
* embed 嵌入一個外部資源，可以是影片、圖片、程序
* video 一段影片檔
* audio 一段聲音檔
* source 可填入不同的 video or audio 類型，讓瀏覽器選擇支援度高的媒體播放。
* canvas 通過 JavaScript 實現繪圖功能，甚至是動畫、遊戲
* svg 繪製一個向量圖
#### table 表格
* 階層順序如下 tr(列), th(標題), td (內容)
td 內容一列必須包在tr內
#### Form 表單
* form action = "送出表單後去哪"
method="GET or POST" =>傳給後端 ,class="" 搭配CSS id="c-form" =>與button 連動
* form 常搭配 label & input 使用 ul li
* form 下可以搭配 div table tr td 做應用
用div css內設定 display: table, table-row, table-cell 去做編排
##### 表單tag的一些屬性
1. value：預設內容，實體文字，通常用 placeholder 代替。
2. name：告訴後台這個 value 是什麼東西
3. placeholder:預設值，不是實體文字
4. checked 預設選項，適用於 radio & checkbox
5. selected 預設選項，適用於 option
6. require：必填
7. maxlength：最大長度，就字數限制啦
8. autocomplete：讓你不用記密碼
9. autofocus：一點進去就 focus
10. from：設定這個 input 所屬的 form，如果 input 不在 form 裡面的話會用到
11. list：把 datalist 引進 form 裡面
12. max/min：設定最大值或最小值
13. multiple：可以提交一堆 value
14. pattern：可以用 regular expression 檢查輸入的 value
15. step：間隔
##### input
* input type(文字輸入)= text(文字),password(密碼),submit(只能送出),search(搜尋),hidden(修改時隱藏),image,button,email(電子郵件)
* input type(選擇框)=date(日期),color,checkbox(複選) ,radio(單選),file(上傳檔案),number(上下選擇數字),range(範圍)
###### input細節
* input type="text" name="user-name" id="user-name" => id 與label的for作連動 或予以css設定
* input type="radio || checkbox" name="要設定相同名字" value="male" id="gender" checked 預設案label就點選male選取
例如name="sex" value="male" 才可以知道使用者選擇sex 內的 male
```htmlmixed=
<div>
興趣：
<input type="checkbox" name="interest" id="sport">
<label for="sport">運動</label>
<input type="checkbox" name="interest" id="reading">
<label for="reading">閱讀</label>
</div>
```
##### label
* label for = "與input作連動" 顯示姓名,性別,etc
* value = "放入後端值" =>例如:作為修改頁面
value ="male" 可使開發者知道使用者選擇哪個選項
* name應用 ex:作為search name="q" value="request.GET.q"
其後端query = request.GET.get('q') 可拿取使用者輸入資訊
或是在開發者F12內看到其name="male" 選擇了 value="female" 選項
##### button
* button 無動作按鈕，按下去不會發生任何事，但當你要使用 JavaScript 來操作時非常好用。
* button type="submit" form="c-form" => 與form 連動尋找其id
提交按鈕，按下會送出 form 裡所有的資訊
* type="reset" 作用是清除表單上的文字(重置表單內容)， value="清除重填"
```htmlmixed=
<form>
<input type="button" value="按了沒用">
<input type="submit" value="按了會傳送表單">
<input type="reset" value="按了會重置表單">
<form>
```
##### select
* select name id
搭配 option 使用 下拉選單
* option 單個選項內容
可加上 selected 屬性，表示為預設選項。
* optgroup 分組選項內容，但本身並不可選label 標籤是強制的，會顯示在選項中
```htmlmixed=
<form>
<select id="myAddress" name="myAddress">
<option>台北市</option>
<option>新北市</option>
<optgroup label="彰化縣">
<option selected>彰化市</option>
<option>花壇鄉</option>
<option>鹿港鎮</option>
<option>員林鎮</option>
</optgroup>
</select>
</form>
```
#### textarea
* textarea 是用來填寫段落文字，cols="30" 這是指寬，rows="5" 是高，而寬跟高都可以用 css 來設定。
### emmet 縮寫模組應用
* cheat sheet https://docs.emmet.io/cheat-sheet/
* .title => div class = title
* **>** contain **{}** contain word
* ul>li*5 *$* 照序列排
* img[src="" width=""] a[herf=""]
Emmet 縮寫
Emmet結果
### jade(pug) 樣板語言簡化HTML
* 需選擇jade語言
* (放屬性) 空格後，寫內文
* **|** =>接續文字
jade樣板語言示範
### emmet & jade(pug) 結合使用
* 建議主要使用Jade + 輔助使用 emmet
* 如果階層下面包很多 (去裝) .box3有p.content&hr
### google地圖
* google地圖利用分享或崁入地圖 => copy code
## CSS
* [寫樣式前CSS Reset](http://www.flycan.com/article/css/reset-css-562.html)
### 引入方式
1. Inline styling：就加一個 style attribute 進去
2. Internal：用 style 寫在 head 裡面
3. External ，先另外開一個檔案寫 CSS，再用 link 引入：<br><link rel="stylesheet" href="test.css"> 位在head內的title下面
### CSS (Cascading style sheets)重要的概念
* CSS 就是 Selector + declarations
* box-sizing: border-box;(將padding&border包含在內,邊框到邊框距離為width)
因此包含border,padding+content = width
一般預設為content-box,
Selector 又分為：
1. Element Selector：Element {}
2. 最單純的 Selector，一次選所有的 Element
3. Class Selector：.Class {}一次選一群 Class，可能是最常用的
4. ID Selector：#ID {}一次只選一個，畢竟 ID 只能用一次，所以 HTML 盡量用 Class
5. Attribute Selector：Element [ Attribute = ( Value )] {}選有這個 Attribute 的 Element，有各種奇奇怪怪的語法，頗好用，自己查
6. Universal Selector：*{}選所有的 Element ，不是繼承，可以用來 **Reset CSS**
```css
*{
padding:0; margin:0;
box-sizing: border-box;
}
```
8. Selector特殊規則
```css=
.one .two{} 底下的元素 /*兩個 class 中有空格*/
必須要是在 one 裡面的 two，才會被選擇到
.one > .two{} one底下的下一層元素 /* 以">"區分*/
必須是one裡面的下一層class有two才會被選到
.one.two{} 同時符合 /*兩個 class中沒有空格*/
某個區塊必須同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到
.one, .two{} 都會被選到 /*兩個 class 中出現逗號*/
class 中有 one 或 two，都會被編輯器所選擇到
.bg + .bg{} 要相鄰且 class="bg"後面的class="bg"都會被選到(同一層)
除了第一個.bg外，後面的.bg都會被選到
.bg ~ .bg{} 第一個class="bg" 旁邊的bg都會被選到(同一層)
如果第一個div是bg不會被選到，其附近的bg都會被選到
```
8. nth-child 為某階層下第幾個元素(會先看 nth-child(3) 才看前面的選擇器
因此如果.dad .div:nth-child(1) 第一個為span也不會選
```css
/*第三個*/
.dad .bg:nth-child(3) {
background-color: green;
}
/*偶數*/
.dad .bg:nth-child(even){
background-color: green;
}
/*奇數*/
.dad .bg:nth-child(odd){
background-color: green;
}
/* 1,4,7 */
.dad .bg:nth-child(3n+1) {
background-color: green;
}
```
9. before & after (可搭配hover使用)
before是在前面加,after在後面加，也可在tag內自設變數利用attr去取變數內的值放前或後
```css=
.dad .bg::before{
content: "$";
}
.dad .bg::after{
content: attr(country);
}
```
10. !important 可以略過一切重要權重第一
* *CSS接近性* 優先採納樣式順序為 行內設定 > 內部CSS >外部CSS 內部CSS是style寫在html內
* *CSS精確性* ex1: div p {} 把div內的p都改
* *CSS覆蓋性* 後面的CSS會蓋住前面的 id > class
ex2: div.class名稱(red) p 找div的class為red其內p改樣式
ex3: div p#black{} 找div內p有id為black改樣式
ex: **.env-img img{}**
=>只針對env-img內的img做設定，其他不受影響
* <strong>物件所佔據空間(看不到的尺寸) = width(content width) +margin(外距) + padding(內距) + border(邊框)，看的到的尺寸:width+border+padding</strong>
### 單位
1. px:最單純的單位
2. em:相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
例如 parent 是 12 px，2 em 就是 2*12= 24 px
4. %:跟 em 一樣，例如 parent 是 12 px，50% 就是 12*0.5= 6 px
5. rem:每個元素透過「倍數」乘以根元素的 px 值。
也就是 html 的 font-size，預設是 16 px,16*1.2=19.2
### sass (CSS簡寫語法)
* 不用+; 以及 color: red 要空一格
* 可以有明確階層概念，也可使用變數
* $代表變數便於管理色彩、尺寸 **&** => 代表下一層
使用範例
### color
* rgba(紅,綠,藍,透明)
ex:rgba(255, 0, 0, 0.6) → 不透明度 60% 紅色
* 可以把 # 色票號內的 rgb 記起來 利用透明度去做效果
### body
* box-sizing: border-box(將padding & border包含在內)
因此包含border,padding+content = width
一般預設為content-box,
* overflow:hidden 把多餘的不顯示
scroll 用滾輪去滑
### 動畫 動態CSS
* transition: all 3s easy-in; (放在物件內不放在hover)
第一個是要針對哪個部分 第二個是多久 第三個是漸變的動畫效果
* 要改變的狀態才寫在hover
* transform: scale(倍數) 寫在hover
滑鼠hover時變幾倍大
: rotate(XXXdeg) 旋轉幾度
: translate(xxpx,xxpx) 位移動畫 左右 右+ , 上下 下+
### display
* display:inline-block 可設定top,bottom,etc. 也有width & height(block) 可以與其他tag排在一列(Inline)
* display:inline 非block，無法自成一行 不能設定外邊距(margin)的上下，只能調左右margin&padding上下左右(但inline很少調整padding)，**沒有 width&height**
* display:block 自己成一區 其他東西下一行
### border
* box-sizing: border-box; (代表邊框到邊框距離為width)
因此包含border,padding+content = width
一般預設為content-box,
* border(邊界): style width color
solid 1px black; 外邊借用黑色實線包覆
* 畫三角形 利用border-top/right/bottom/left
```css
#box1 {
background: transparent;
height:0px;
width:0px;
border-top: 170px solid transparent;
border-bottom: 170px solid pink;
border-left: 170px solid transparent;
border-right: 170px solid transparent;
}
```
* border-radius: 5px; 邊角圓潤化 (畫圓形)
* box-shadow(陰影):
x偏移量(右) | y偏移量(底) | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
* border-top border-bottom
可在底下或上方做實線
ex:border-bottom: solid 10px #d1eecc;
### CSS選擇器
* ."class style 名稱"
{可在裡面宣告此物件的表示型態}
* #"id style 名稱" 只能使用一次，只是使用於html用id=""
### Position 定位
* 定位模式簡單分成 top,bottom,right,left
* position:static (預設) 不能更改
* position:relative (相對位置) 意義為用原先的定位點作偏移
**通常用於作為absolute的定位點** <br> ex:.relative{position:relative;top:50px;left:30px;}它會從原本的位置（相對地）被定位，例如 top: 50 px 代表從原本的位置上方空出 50 px。
* position:absolute (絕對上層位置)
**通常會有參考點，參考點的設置就是以設置 absolute 的位置往上找不是 static 的元素，做為參考點，通常以relative作為定位點**，如無上層定位點則以body作為定位點
可放置於relative & absolute & fixed中
使用absolute才可用 top left 使用 % 作定位
* position:fixed (怎麼滑都不會動) 適合放在導覽列
width:100%(平板手機皆可變動)
* postion:stricky 也放在導覽列 跨越某特定值前為relative
，跨越後為固定定位(fixed)
* 圖層順序:後面元素會蓋掉前面元素
**z-index:1;** => 表示永遠在圖層最上方(數字越大越前面)
### 虛擬(偽類)選擇器─超連結
* 偽類選擇器(超連結) a:link,visited,hover,active
link(預設一般情形超連結顏色)
visited(already visited)
hover(mouse point)
active(click)
* .namecard:hover .circle 表示滑鼠點到namecard物件時其會改變circle物件什麼東西
{border-radius:0px;} 圓角潤化 變成正方形
* 滑鼠有指標
```css=
.dad :nth-child(3):hover{
cursor: pointer;
}
```
### layout排版 padding & margin float
* margin(外距) 這個區塊(div)與其他區塊(div)的距離
margin: top right bottom left /*四值语法 上 右 下 左*/ 举例： margin: 2px 1em 0 auto;
/*三值语法 上 左右 下*/ /*兩值语法 上下 左右*/
* padding(內距) 這個區塊(div)與內部元件(element)的距離，正確來說是Border 與 Content 之間的距離
* margin & padding 一行輸入順序為 上 右 下 左
* text-align 圖片或是物件去做靠右靠左置中
#### float
* float:left and right 可以將div區塊從垂直變成**水平排列** 可作文繞圖
* 當div container 包了 3個 col 其下方區塊footer被其影響，可在footer{clear:both}去取消其影響，使footer避開所有浮動物件
#### 水平置中
1. align: center：不過這招只能用在文字，如果要用在元素的話要用 margin 解決
2. margin: 0 auto:可能是最單純的方法(只能使區塊div置中)
margin: 0 auto(需搭配width才可使用)
=> 0指上下 auto左右置中
3. Flexbox: justify-content: center (水平置中)
文字用 align，元素用 Margin
4. padding 也可達到水平置中
```css
padding: 30px 0px; /* 上下 30 左右 0 */
```
#### 垂直水平置中
1. div test前一個div dad需要為relative為定位點，可使用top & left (寫在子層)
可使test 移到中心點 50% 50% ，但因為為左上角對齊，因此用translate(-50%,-50%) 對齊中心點，並將line-height=height
```css=
.dad .test{
width: 100px; height:80px;
position: absolute; /*父層一定要是relative*/
overflow: hidden;
top:50%; left:50%; /*整個div移到中間*/
transform: translate(-50%,-50%);
/*物件中心點對齊div中心點*/
border: solid 1px black;
line-height: 80px; /*文字垂直置中*/
text-align: center; /*文字水平置中*/
}
.dad{
width: 500px; height:150px;
background-color: palegreen;
position: relative;
}
```
2. flex (寫在父層)
<a href="https://cythilya.github.io/2017/04/04/flexbox-basics/" target="_blank">如何用flex如何垂直水平置中</a>
利用 justify-content(水平置中)、align-items(垂直置中)，display: flex，即可達到置中，但line-height=height
```css=
.dad .test{
width: 100px; height:80px;
border: solid 1px black;
line-height: 80px;
}
.dad{
width: 500px; height:150px;
background-color: palegreen;
position: relative;
padding:0; margin:0;
box-sizing: border-box;
}
.dad{
display: flex; /* 預設flex-direction: row */
justify-content: center; /*水平置中*/
justify-content: flex-start; /*靠左*/
justify-content: flex-end; /*靠右*/
align-items: center; /*垂直置中*/
align-items: flex-start /*靠上*/
align-items: flex-end /*靠下*/
}
```
* 父層用flex 內層垂直置中用padding & display inline-block 去做
### Font 字體 文字
* font-size 大小
* font-weight 字體粗細
* letter-spacing 字元間距
* line-height 行距
* word-break: break-all 的特點是，換行的時候，不會管字單字的完整性，所以會出現單字被切掉的情況。
break-word 根據單字來換行，這就如同平常我們文章的顯示方式。
* white-space: nowrap (不換行，一直同一行)
white-space:pre (保留空白換行)
white-space:pre-wrap (保留空白但換行)
* text-overflow: ellipsis; 超過字以省略符號代替
### float 浮動編排
* 其display 須為 : inline-block 可設定 float
* float: right or left 可做排版呈現
* 如果其下面 div or footer 不想受其影響
，可使用 clear:both 去動作
### table 表格
* 階層順序如下 tr(列), th(標題), td (內容)
td 內容一列必須包在tr內
* border-collapse:separate; //預設值，邊框彼此間分開
border-collapse:collapse; //邊框合併為單一邊框
border-collapse:inherit; //繼承自父層的 border-collapse 屬性值
* tr:nth-child(odd or even) {} 對奇偶數做特別設定
* 但div比table標籤有更好的SEO
* 用div css內設定 display: table, table-row, table-cell 去做編排
### background 等應用
* 跟img差別為讓使用者下載圖片麻煩且可以使文字覆蓋於圖片上
* background-color: #色票號碼
* background-img:url('路徑')
* background-size: 寬 高 =>可以auto 絕對 或 百分比
cover(隨使用者縮放), contain(永遠維持整張圖);
* background-repeat: no-repeat, repeat-x, repeat-y
* background-position: bottom(Y軸上t中c下b) left(X軸左l中c右r)
## SEO一些概念與meta
1. meta name="description" content="..." 寫作文方式不能只寫關鍵字
* 查資料說摘要的內容並沒有直接影響到排名，但 description 還是相當重要，請盡量把重點放在越前面的地方越好，但也不要亂塞關鍵字，還是要讓語句保持通順。
* 好的 description 可以讓使用者更快速了解、此網頁內容是不是他需要的，找到「 更精準 」的 TA ，提高點擊率、降低跳出率，才是讓你的排名提高的關鍵。
* (如果網頁內容裡的關鍵字很多，不知道該怎麼下，其實也可以「 不要下 」，讓搜尋引擎去爬你的文章，如果有出現使用者的關鍵字，就會把那段標出來，出現在 description 上 )
2. meta og 社群相關 tag og 全名為： Open Graph Protocol
* 其實就是給社群媒體分享的 meta ，跟上面的內容很像，一樣是有 title, description，比較特別且重要的是 image 屬性，也可以直接設定分享圖的寬高等等。
* 如果想知道分享到社群的預覽樣貌，可以利用 Facebook debugger 進行偵錯，把網址貼上去，他就會說明 Facebook 抓取到的內容有哪些，呈現出來的分享結果會是怎樣。
```htmlmixed=
<head>
<meta property="og:type" content="type" />
<meta property="og:title" content="site_title" />
<meta property="og:description" content="site_description" />
<meta property="og:image" content="site_image" />
<meta property="og:url" content="site_url" />
<meta property="og:site_name" content="site_name" />
</head>
```
3. JSON - LD 全名為 JSON for Linking Data
* 跟 meta 有點像，目的是用一個固定格式呈現網頁內容，讓機器更快速且精準的判讀內容。 在搜尋列表中出現更多的資訊，進而吸引使用者點擊
4. 註解加入關鍵字 img alt加上圖片說明
5. 圖片壓縮小一點網頁較好讀取
## HTML5 新式標籤
## 小技巧
1. 如果div內的 tag a標籤中間有空白，則在前面div設定font-size :0; 使其空白為0px，這樣可以消除空白
###### tags: `HTML` `CSS`
Sign in with Wallet
Connect another wallet