這位老師講解的是真心好 地址(｡◕ˇ∀ˇ◕)。
1，這裏使用 UTF-8 編碼。
使用谷歌歐朋瀏覽器顯示正常
，但使用火狐，Edge，IE就是亂碼
，使用Sarifi瀏覽器也是亂碼
這是爲神馬呢？
因爲谷歌歐朋瀏覽器默認解碼是UTF-8，火狐IE（在中文系統）默認解碼是GB2312，Sarifi瀏覽器默認解碼是ISO-8859-1
解決方法：告訴瀏覽器編碼格式
<meta charset="utf-8" />
2.<h1></h1>的重要性僅次於<title></title>, 搜索引擎檢索完title標籤就會去查詢h1標籤
在html中，多個空格/換行 會被當做一個空格解析。
<hr/> 是水平線
<img src="1.jpg" alt="圖片" /> 這裏的alt會被搜索引擎檢索到
圖片格式： JPEG(和JPG是同一個東西)，支持顏色多，不支持透明，但壓縮率高，
GIF 支持顏色少，支持簡單的透明效果，支持動態圖
PNG 支持顏色多，支持複雜的透明效果
3. meta
<meta name="keywords" content="關鍵字內容"/>
<meta name="description" content="描述內容"/>
<!--表示5秒後跳轉到另一個url地址-->
<meta http-equiv="refresh" content="5;http://www.baidu.com"/>
4. 內聯標籤 iframe
<a href="http://www.sogou.com" target="iframe_a">搜狗</a>
<iframe src="http://www.baidu.com" name="iframe_a"></iframe>
<a></a> target="_self" 本標籤打開 target="_blank" 新窗口打開 target="name" 在名字爲"name"的 iframe 中打開
5. 引用外部css，瀏覽器可以緩存下來，提高速度
<link rel="stylesheet" type="text/css" href="1.css"/>
6. 塊元素主要用來做頁面佈局，內聯元素主要用來選中文本設置樣式
一般使用塊元素 包裹內聯元素，而不會使用內聯元素包裹快元素，例如
<div>
<span></span>
</div>
注意，<a></a> 標籤可以包含任意元素，除了本身
<p></p> 元素裏面不能放任何的塊元素
7.
#id{
background-color: yellow;
}
.className{
background-color: yellow;
}
h1{
background-color: yellow;
}
以上三個的 樣式都一樣的，可以使用 逗號, 來分組：
#id , .className, h1{
background-color: yellow;
}
8.
<p class="p1"></p>
<span class="p1"></span>
如果使用
.p1{
color: red;
}
p,span都能滿足，如果使用
span.p1{
color: red;
}
則必須滿足是 span標籤，且className爲p1
9.
<div>
<span></span>
<p><span></span></p>
</div>
後代選擇器，使用 空格
div p span{
color: red;
}
子元素選擇器，使用 > （注意 IE6以下不支持這種寫法）
div > span{
color: red;
}
10 僞類
a:link { } 就是 未訪問過的鏈接
div::selection{
color: red;
}
div::-moz-selection{
color: red;
}
11. 僞元素，首先理解下啥事僞元素，如下
要使首字變紅色，需將第一個字用元素圈起來 <p><span>正</span>文內容<p>
以前對於火狐瀏覽器，需要寫成 ::-moz-seleionct ，但現在火狐瀏覽器也支持 ::selection 寫法了。
p > span{
color: red;
}
我們可以使用僞元素： <p>正文內容</p>
p:first-letter{
color: red;
}
還有：
p:first-line{
background-color: lightblue;
}
p:before{
content: '文字前的位置 ';
}
p:after{
content: '文字後的位置';
}
12. title 屬性可以給任意標籤添加，鼠標移到上面會有“文字提示”
<p title="文字提示:這是第一行"> 文字內容 </p>
使用 中括號 [ ] 表示屬性
p[title]{
background-color: lightblue;
}
p[title=hello]{
background-color: yellow;
}
13.
<body>
<span>
我是相對於body標籤的第一個子元素
</span>
<p>我是相對於body標籤的第二個子元素</p>
<div>
我是相對於body標籤的第三個子元素
<p>我是相對於div標籤的第一個子元素</p>
</div>
</body>
使用 p:first-child 表示匹配p元素，且該p元素必須是第一個子元素
p:first-child{
background-color: lightcoral;
}
使用 :last-child 匹配最後一個子元素
使用 :nth-child(n) 匹配第n個子元素
p:nth-child(2){
background-color: lightcoral;
}
使用 :nth-child(even) 匹配偶數位的子元素， 使用 :nth-child(odd) 匹配奇數位的子元素
記法： even 4個字， odd 3個字
p:first-of-type 表示在當前類型 p 中的第一個
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
p:nth-of-type(2){
background-color: yellow;
}
14， + 和 ~ 都是選則兄弟元素，但 + 是之後緊挨着的那一個兄弟元素，~是之後所有的兄弟元素
span + p{
background-color: lightcoral;
}
span ~ p{
background-color: lightcoral;
}
15，現在我要匹配所有class不是hello的p元素
<p>第一個</p>
<p class="hello">第二個</p>
<p>第三個</p>
<p>第四個</p>
使用 :not( )
p:not(.hello){
background-color: black;
}
16，子元素會繼承 祖先元素的樣式， 但是 背景 background 不會繼承，
<div style="background-color: red;">
<span>我是why_su</span>
</div>
因爲 背景顏色默認是 transparent 透明的，所以看起來像是繼承了一樣。此問題在於，如果背景是圖片，繼承的話會出亂子：
17. 優先級
<p class="good bye"></p>
.good{
}
.bye{
}
級別一樣的，看排列順序，.bye 在 .good 之後，所以 .bye
對於 <p class="hellp"></p>
p.hello{
background-color: black;
}
.hello{
background-color: green;
}
p.hello{ } 因爲有兩個級別 相加，所以優先級更高
寫在 html中的 <p style="background-color: red;"></p> 優先級別最高，可以在css中使用 !important 來改變這個優先級
.bye{
background-color: black !important;
}
18，關於a 的僞類的 優先級順序
a:link{
color: cornflowerblue;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: black;
}
這樣子寫是沒錯的， 但因爲 a:active 鼠標點擊 其實同時滿足 :active和a:hover 這兩個狀態，所以鼠標點擊的時候會找最後面的一個樣式來展現，如果 調下順序：當鼠標點擊時，顯示的是 orange 而不是 black
a:active{
color: black;
}
a:hover{
color: orange;
}
此外，如果把 a:link 和 a:visited 寫在了 a:hover 和 a:active 後面，則不會有鼠標點擊 和 移入 的效果。
19.
<em> 斜體 </em>
<strong> 加粗</strong>
上標： 2<sup>2</sup>
上標帶鏈接： 周杰倫<sup><a href="http://www.sogou.com">[1]</a></sup>
下標: H<sub>2</sub>O
<pre>
pre 保存代碼中的格式，保留多個空行
code 用來存代碼，和pre一起用
<code>
window.onload = function(){
alert("hello why_su!");
}
</code>
</pre>
