小技巧：ul>li*3 打出來 可以用emmet快速做出

昨日疑問：我的HTML為何沒有快速工具emmet跑出來？

助教回答：要先儲存為.html的格式檔案才有用喔！

ＣＳＳ選擇器：：

a{font-size:18px;border-bottom:19px;}  ;border-bottom是底線

P:active{color:yellow;} 點下去是啟動 啟動變黃色

ＨＴＭＬ混遙關念：清單

ul>li

是確立我們的語法，讓檔案不會因為不同語系的電腦打開變亂碼

img 標籤的連結，因為圖片是存取在你自己的電腦中，所以要使用網路上可搜尋到的圖片連結，在 CodePen 上才會正常顯示
img 標籤記得補上後方的 alt 的敘述，這樣當圖片無法正常載入時，才會有替代的文字顯示，讓使用者知道這裡原本圖片的意義 (ex: )
css rest tool:

https://meyerweb.com/eric/tools/css/reset/

後面的設定會蓋掉前面的設定

為什麼會想介紹 CSS Reset 與 CSS normalize ？
因為在很久很久以前（喂～）。咳！重來。

在 W3C 制訂 HTML 與 CSS 規格時，並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式，只有提供資訊參考的範例[1]，加上IE 獨霸的時期，那時候還沒有其他瀏覽器， CSS Reset 的需求主要落在 IE 各版本之間的調整，後來 Firefox、safari、Chrome 陸續出現，網頁設計師必須要針對每個瀏覽器去做調整，因此 CSS Reset 的需求漸漸增加。

CSS-Tricks 在 2008 年就曾經做了一個調查："What CSS Reset Do You Use？"，有 27% 的人使用了 Eric Meyer 的版本 ，有趣的是那時候有 26% 的人根本不知道何謂 CSS Reset 。

（其實很好奇那時候台灣有多少人開始使用 CSS Reset 了？）

CSS Reset
有幾套常見的 CSS Reset

Reset CSS，此為 Eric Meyer 的版本
HTML5 Reset Stylesheet，HTML5 Doctor 網站修改自 Eric A. Meyer 的版本。
CSS Reset - YUI Library ，由 Yahoo UI Library v3 所提供的 CSS Reset 版本。
下面以 Eric Meyer 的版本來說

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! /
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/ tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
做法是把所有瀏覽器最不一致的地方強制歸 0，可以看到最一開始那一大串 html tag 的 margin、padding、border、outline 全都設為 0

優點是統整、重置了各個瀏覽器的樣式設定。
缺點是必須全部重新做設定，比較沒有彈性，而且在使用開發者工具時會看到一大坨的繼承鏈(inheritance chain)。

因此後來出現了 normalize.css [3]

CSS Normalize
因為 reset.css 重置了各個瀏覽器的樣式設定，使得有些有用、常用標籤的默認樣式必須要重新設定，因為這個問題，有人開發出了 normalize.css [4]

在 Normalize.css 的官方頁面上點出了他們的目標：[5]

保留有用的瀏覽器默認設置，而不是將其刪除。
為廣泛的 HTML 元素提供一般化的樣式。
修正瀏覽器的 Bug 與不一致。
透過微妙的改善提高可用性。
有詳細的文檔來解釋代碼。(每個樣式都有註解是處理什麼問題。)
因此 Normalize.css 被使用在 Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及其他很多的 framework 和網站上。

最大的特色就是保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整。

目前 reset.css 與 normalize.css 都有人使用，可以針對需求擇一使用即可。

另外， reset.css 與 normalize.css 不論用哪一套，都是在一開始就要引入網頁，因為它的目的就是在一開始幫你將各瀏覽器之間的差異進行調整。

以上是今天的介紹，各位看倌明天見囉～

參考資料：
[1] https://www.w3.org/TR/CSS2/sample.html
[2] https://css-tricks.com/poll-results-what-css-reset-do-you-use/
[3] https://meyerweb.com/eric/tools/css/reset/
[4] http://necolas.github.io/normalize.css/
[5] http://nicolasgallagher.com/about-normalize-css/
[6] http://blog.darkthread.net/post-2011-07-22-css-reset.aspx
[7] https://blog.miniasp.com/post/2012/03/14/Building-Website-is-not-that-easy-DOCTYPE-and-CSS-Reset-Normalize.aspx

行內元素 與 區塊元素的差異

行內元素:
li{display:inline

區塊元素
a{display:block;
height:50px }

用手機的時候可以點到比較大的區塊