前端工程学习日记第三天

小技巧：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 }

用手机的时候可以点到比较大的区块