1.html5 與 html4的區(qū)別
? 如果文檔第一行為<!DOCTYPE html> 說明該頁面使用的是html5酪术；
? 否則使用的就是html4
2.html骨架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>我是標(biāo)題</title>
</head>
<body>
...
<p>此處可以包含各種標(biāo)簽</p>
...
</body>
</html>
?
3.塊級(jí)元素吃沪，行內(nèi)元素
| 元素 | 特點(diǎn) | 標(biāo)簽 |
|---|---|---|
| 塊級(jí)元素 | 1.塊元素獨(dú)占一行 2.塊元素可以設(shè)置width,height 3.塊元素的寬以瀏覽器的寬為主 | p,div,ul,dl,pre,address,h1~h6... |
| 行內(nèi)元素 | 1.一行內(nèi)可以放多個(gè) 2.行元素不可以設(shè)置width,height 3.行元素以文內(nèi)容的大小為準(zhǔn) | a b em strong i img... |
img雖然是行內(nèi)元素，但是他比較特殊危号，可以設(shè)置width,height
4.Html文檔流
html文檔流：把元素按照從上而下牧愁，從左到右的順序默認(rèn)排列。不在一行的元素從上而下外莲，在同一行的元素從左到右排列猪半。元素可以脫離文檔流顯示。
5.布局的三種方式
? 1.框架布局
<!-- 框架集與body同級(jí)，所以有frameset不能有body -->
<frameset rows="200,*">
<frame src="https://www.baidu.com">
<frameset cols="20%, *" noresize="no">
<frame src="https://www.youku.com">
<frame src="https://www.taobao.com">
</frameset>
</frameset>
? 框架布局在h5中并不推薦办龄，h5中有frameset的替代方案
? 2.表格布局
<table border="1" align="center">
<!-- caption表示表頭 -->
<caption>這是一張課程表</caption>
<tr>
<th colspan="5">課程表</th>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td rowspan="2">星期五</td>
</tr>
<tr>
<td>上課</td>
<td>不上課</td>
<td></td>
<td></td>
</tr>
</table>
?
? 3.div布局
? 待續(xù)烘绽。。俐填。
6.Html實(shí)體字符
| 符號(hào) | 字符碼 |
|---|---|
| < | < |
| > | > |
| ; | " |
| >> | » |
| << | « |
| 空格 |   |
實(shí)體字符對(duì)照表：http://tool.xker.com/htmlchar.php
7.CSS引用方式
? 1.行內(nèi)樣式表 <span style="color:'red';width:100px;height:100px" />
? 2.內(nèi)部樣式表 （位于head中）
<style>
p{width:100px;height:100px;color:red}
</style>
? 3.外部樣式表 <link rel="stylesheet" href="xxxx.css" />
?
8.CSS選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器安接，匹配頁面上任何元素 |
| #id | id選擇器，匹配特定id的元素 |
| .class | 類選擇器英融，匹配class包含特定類 |
| element | 標(biāo)簽選擇器 |
9.CSS選擇器優(yōu)先級(jí)
? ID > CLASS > 元素 > *通配符
10.文本越界省略設(shè)置
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
? <span>內(nèi)文本自動(dòng)換行盏檐，類似于聊天氣泡的效果
max-width: 200px; word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;
11.CSS關(guān)系選擇器
| 選擇器 | 含義 |
|---|---|
| E F | 包含選擇符，選擇所有被E元素包含的F元素 eg. ul li |
| E > F | 子選擇符驶悟，選擇所有作為E元素的直接子元素F胡野，對(duì)更深一層的元素不起作用 |
| E + F | 相鄰選擇符，選擇緊貼再E元素之后的F元素痕鳍，只選擇相鄰的第一個(gè)元素 |
| E ~ F | 兄弟選擇符硫豆，選擇E元素之后所有的F元素，可包含多個(gè) |
12.CSS屬性選擇器
| 選擇器 | 含義 |
|---|---|
| E[attr] | 屬性選擇器eg. option[disabled]{color:red} 選擇帶有disabled屬性的option元素笼呆，設(shè)置顏色為紅色 |
| E[attr="abc"] | 選擇attr屬性等于abc的元素 |
| E[attr~="value"] | 選擇有attr屬性的元素熊响，且屬性值列表中有一個(gè)符合val的元素 |
| E[attr^="p"] | 選擇有attr屬性的元素，且屬性值列表中以p開頭的元素 |
| E[attr$="p"] | 選擇有attr屬性的元素诗赌，且屬性值列表中以p結(jié)束的元素 |
| E[attr*="p"] | 選擇有attr屬性的元素汗茄，且屬性值列表中有p的元素 |
13.CSS偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:link | 設(shè)置超鏈接a在未被訪問前的樣式（特指a標(biāo)簽） |
| E:visited | 設(shè)置超鏈接a在被訪問過后的樣式（特指a標(biāo)簽） |
| E:hover | 設(shè)置鼠標(biāo)懸停再元素上時(shí)的樣式 |
| E:active | 設(shè)置元素再鼠標(biāo)按下時(shí)的樣式 |
| E:not(s) | 匹配不含有s選擇器的元素E eg. div:not(.d1) 選擇除了類名為d1的元素 |
| E:first-child | 父元素的第一個(gè)子元素E，E必須包含父元素才能使用 |
| E:last-child | 父元素的最后一個(gè)子元素E铭若，E必須包含父元素才能使用 |
| E:only-child | 父元素的唯一一個(gè)子元素E洪碳，E必須包含父元素才能使用 |
14.position定位
position屬性指的是本體相對(duì)于上級(jí)的定位，position又分絕對(duì)定位（position:absolute）和相對(duì)定位（position:realtive）叼屠，默認(rèn)值是static瞳腌，意味著元素沒有定位。如果用position來布局頁面环鲤，父級(jí)元素的position屬性必須為relative或者absolute纯趋，行元素加了position:absolute后可以設(shè)置寬和高（加了float和fixed以后也可以設(shè)置寬和高）
15.瀏覽器內(nèi)核
? 1.Gecko內(nèi)核 前綴-moz- firefox
? 2.webkit內(nèi)核 前綴-webkit- chrome,safari,360,世界之窗，獵豹
? 3.trident內(nèi)核 前綴-ms- IE
? 4.presto內(nèi)核 前綴-o- opera
16.清除浮動(dòng)3中方式
? 1.使用空div
.clear{clear:both}
<div class="clear"></div>
? 2.使用偽元素
.box::after{content:"";display:block;clear:both}
.left,.right{width:100px;height:100px;background:red;float:left}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
? 3.使用overflow:hidden
.box{overflow:hidden}
.left,.right{width:100px;height:100px;background:red;float:left}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
17.css使用自定義字體
? 將字體文件放入本地目錄后冷离，可以通過以下方式進(jìn)行引用吵冒，自定義字體樣式要通過@font-face進(jìn)行聲明，兩個(gè)參數(shù)西剥，font-family指明自定義字體的名字痹栖，
@font-face {
font-family: qst;
src: url("res/qst.tff");
}
li{font-family:qst}
18.CSS3自定義動(dòng)畫
? 動(dòng)畫是CSS3.0的高級(jí)特性，類似于自定義字體的使用瞭空，動(dòng)畫需要使用@keyframes進(jìn)行定義揪阿，動(dòng)畫的內(nèi)容可以用from-to來進(jìn)行屬性過度的設(shè)置疗我，同時(shí)也可以使用百分比來進(jìn)行設(shè)置；
@keyframes myAnimation {
from{background-color: orange}
to{background-color: red}
}
@keyframes myAnimation {
0%{background-color: orange}
50%{background-color: red}
}
? 完整的動(dòng)畫屬性定義： animation:動(dòng)畫名 執(zhí)行時(shí)間 插值器 延時(shí)時(shí)間 執(zhí)行次數(shù)
animation: myAnimation 2s linear 1s infinite
19.字體圖標(biāo)
字體圖標(biāo)通過字體的方式實(shí)現(xiàn)一下圖片南捂，可以有效的減小包的大形饪恪（字體文件比圖片小的多）
20.CSS Sprite
CSS雪碧圖，將n多個(gè)小圖片集成到一張大圖中溺健，使用過程中麦牺，能有有效的較少網(wǎng)絡(luò)請(qǐng)求的次數(shù)，減少請(qǐng)求造成的延時(shí)鞭缭，提高用戶體驗(yàn)剖膳。CSS中通過background-image，background-position來定位當(dāng)前標(biāo)簽需要顯示的圖片內(nèi)容
21.px em rm
? px：以px為單位的字體岭辣，修改瀏覽器字體大小后不會(huì)發(fā)生改變吱晒，他的大小跟屏幕的分辨率有關(guān)系。
? em：以em為單位的字體沦童，修改瀏覽器的字體大小后會(huì)發(fā)生改變仑濒，隨瀏覽器字號(hào)大小的調(diào)整而改變。一個(gè)em是網(wǎng)頁瀏覽器的基礎(chǔ)文本尺寸高度偷遗，一般情況下是16px躏精，所有未經(jīng)過調(diào)整的瀏覽器都符合：1em=16px；em有繼承性鹦肿，從包含標(biāo)簽中繼承尺寸。
<!-- 這種情況下 div_p_16會(huì)變顯示8px -->
div{font-size: .5em}
.div_p_16{font-size: 1em}
.p{font-size: 16px}
<div>
<p class="div_p_16">我是1em</p>
</div>
<p class="p">我是16px</p>
? rem:rem是基于html的辅柴，他跟em類似箩溃，但是區(qū)別在于，rem不受包含標(biāo)簽的影響碌嘀，始終是基于瀏覽器字體大小的涣旨。推薦使用！
22.CSS hack
? 在css中股冗，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法霹陡，我們使用它來解決不同瀏覽器中顯示效果不一致的問題。
? 條件hack
? 不寫在<style></style>中,他與style標(biāo)簽同級(jí)
<!-- IE11 后實(shí)現(xiàn)已經(jīng)和Chrome Firefox之類無大區(qū)別-->
<!--[if 關(guān)鍵詞 ie 版本號(hào)]>
HTML代碼塊止状，示例課見bootstrap基礎(chǔ)模板
<![endif]-->
? 屬性hack
? 和條件hack不同烹棉，這一般放在css屬性中
? _ 選擇ie6及以下
.test{
_color:red;
}
? \9 選擇ie6及以上
.test{
color:red\9;
}
? 選擇符hack
? *+ 可指定ie789， 一般放在css屬性中
*+ .test{color:red;}
