https://www.bilibili.com/video/BV14J4114768?from=search&seid=9148519948521068374
HTML:
http://www.w3school.com/
https://developer.mozilla.org/zh-CN/ (權威)
常用瀏覽器和對應內核(渲染引擎)：
Chrome: Blink (Webkit分支)
FireFox: Gecko
Safari: Webkit
Opera: Blink
IE: Trident
- HTML-基本標簽
<!DOCTYPE>標簽
告訴瀏覽器使用哪種版本HTML顯示網頁（HTML5，HTML4）
不是一個HTML標簽嫁怀，是文檔類型聲明標簽
lang語言
定義當前文檔顯示的語言，<html>標簽屬性
en-英文, zh-CN中文
charset字符集
<meta>屬性酪呻。字符的集合，以便計算機能夠識別和存儲各種文字盐须。
UTF-8-萬國碼, GB2312-簡體/繁體中文, GBK-國標
標題標簽h1: 獨占一行玩荠。
段落標簽p: a.自動換行;b.段落和段落之間保有空隙。
文本格式化標簽: 粗體(strong)贼邓，斜體(em)阶冈，下劃線(ins)，刪除線(del)塑径。
盒子標簽: div和span眼溶，沒有語義，只放內容晓勇，用來布局。div是分割灌旧，分區(qū)绑咱；span是跨度，跨距枢泰。
圖片:
alt-圖片不能顯示時描融，文字提示；
title-鼠標放到圖片上衡蚂，文字顯示;
width/height-默認只設置一個窿克，單位px
鏈接:
href: 地址
target: _self(當前窗口打開)和_blank(新窗口打開)
分類: 外部鏈接骏庸，內部鏈接(html文件等)，空鏈接(#)年叮，文件下載鏈接(zip, img)具被，網頁元素鏈接(圖片等)，錨點鏈接(快速定位到具體位置)
特殊字符:
空格
大于 >
小于 <
列表:
作用：布局
分類：無序列表(ul/li)只损，有序列表(ol/li)一姿，自定義列表(dl/dt-dd)
注: li {list-style: none} -> 去掉li的小圓點
表格:
作用：展示數(shù)據
標簽：table > thead/tbody(語義化) > tr > th(居中, 加粗)/td
屬性：table -- align(left,center,right),
? ?? ?? ?? border(邊框),width(表格寬度),height,
? ?? ?? ???cellpadding(文字與單元格間隔),
? ?? ?? ???cellspacing(單元格間間隔)
合并單元格：跨行合并--rowspan；跨列合并--colspan
表單:
作用：收集, 交互數(shù)據
組成：表單域跃惫，表單控件(元素)叮叹，提示信息3部分
表單域：把信息提交給服務器(屬性--action，method爆存，name)
表單控件:
input(屬性--name, value, checked, maxlength, type--submit/reset)
label--綁定input元素蛉顽，擴大聚焦提升用戶體驗 label-for/input-id
注：單選按鈕要加name
select--默認選中selected；radio默認選中checked
textarea
- CSS
作用: 結構(html)和樣式(css)分離
選擇器
分類：基礎選擇器和復合選擇器
基礎選擇器: 包括標簽先较，類携冤，id和通配符4種選擇器
復合選擇器: 包括后代(空格)，子(>)拇泣，兄弟(~所有兄弟, +相鄰兄弟)噪叙，并集(,)，鏈接偽類和focus偽類6種選擇器
霉翔？睁蕾？？偽類選擇器：包括鏈接债朵，結構偽類
鏈接偽類：LVHA必須按順序
a:link 未被訪問的鏈接
a:visited 已被訪問的鏈接
a:hover 鼠標懸浮(常用)
a:active 鼠標按下未彈起
focus偽類選擇器: 獲取焦點的表單元素(input)
input:focus { background-color: yellow }
字體
font-style：italic傾斜子眶；normal正常
font-weight: normal(400)/bold(700)/bolder/lighter/ number(100-900)
font-size: 標題h特殊，需要單獨指定字體大小(body中設置不生效)
font-family
**復合字體 - font: font-style font-weight font-size/line-height font-family**
注：SWSF復合字體必須按順序寫序芦，font-size和font-family必須有
文本
color
text-align: left/center/right
text-decoration: none/underline(下劃線)/overline/line-through ->
*應用: 取消a標簽下劃線*
text-indent(首行縮進): 2em(em是相對單位臭杰，相當于1個文字大小)
line-height:上間距+文本高度+下間距
*注：單行文字垂直居中 - height和line-height設置同一值*
css引入方式
行內式(style="")，嵌入式(<style>)谚中，鏈接式(<link>)三種渴杆。
emmet語法:
html
1.標簽名+tab鍵
2.*同級標簽: div*10
3.>父子標簽: ul>li; div>span
4.+兄弟標簽: div+p
5.帶有class和id標簽: p.gray; span#two
6.$自增標簽: .demo$*3->demo1 demo2 demo3
7.{}生成內容標簽: div{hello}*3; div{$}*3
css
1.簡寫: w->width; h->height; w100->width:100px;
ti2em->text-indent:2em; lh20px->line-height:26px;
tac->text-align: center;
tdn->text-decoration: none;
元素顯示模式
html一般分為**塊**元素和**行內**元素
塊元素: h1-h6，p宪塔，ul/ol/li磁奖，div
特點: 1.獨占一行；2.寬高,內外邊距可配某筐；3.默認寬度是父100%比搭；
4.塊元素內可任何元素
行內元素：a, em, ins, del, span(跟文字相關，文字一行滿了會自動換行)
特點: 1.一行可放多個南誊；2.寬高無效身诺，!!!內外邊距只對左右起作用蜜托；
3.默認寬度是自身內容寬度；4.行內元素內只可放文本和行內元素(特殊a)
行內塊元素：input, img, td
特點: 1.一行可放多個(行內)霉赡；2.寬高,內外邊距可配(塊)橄务；3.默認寬
度是自身內容寬度(行內)；
元素模式轉換：
display: block 行內->塊
display: inline 塊->行內
display: inline-block *->行內塊
注：p同廉，h1-h6文字標簽內不能使用塊元素(如p里放div);
鏈接里不能放鏈接仪糖；
a里面可以放塊級元素，a轉換一下塊級元素更安全迫肖。
背景圖片
!!!優(yōu)點：非常便于控制位置锅劝，如精靈圖(把中間最核心的地方顯示到屏幕中)
background-color
background-image: none ｜ url
注：既可以添加背景顏色，也可以添加背景圖片蟆湖，不過背景圖片會壓住背景顏色
background-repeat(平鋪): repeat | no-repeat | repeat-x | repeat-y
background-position(位置): x y (方位和精確名詞)
注:1.如果是方位名詞故爵，top center和center top是一樣的；
如果有一個參數(shù)如top隅津，第二個參數(shù)默認是center诬垂。
2.如果是精確名詞，第一個是x坐標伦仍，第二個是y坐標结窘；
如果只有一個參數(shù)如20px，代表x坐標充蓝，第二個參數(shù)默認垂直居中(50%)隧枫。
3.如果是混合單位，第一個一定是x坐標谓苟，第二個一定是y坐標官脓。
background-attachment(滾動/固定): scroll | fixed
用途:視差滾動
background復合寫法, 沒有特定順序, 一般按：
background: 背景顏色，圖片地址涝焙，平鋪卑笨，滾動，位置
css三大特性: 層疊性仑撞，繼承性和優(yōu)先級
層疊性：就近原則->解決樣式沖突赤兴，不沖突不層疊
繼承性：子繼承父的樣式(text-, font-, line-, color)
注：行高可以有單位也可以沒有單位。沒有單位如1.5隧哮，子元素的行高為子元素的字體*1.5桶良。
優(yōu)先級：選擇器相同，執(zhí)行層疊性近迁；選擇性不同，計算權重
css權重
繼承和*：0 (0,0,0,0)
標簽：1 (0,0,0,1)
類和偽類：10 (0,0,1,0)
id：100 (0,1,0,0)
行內樣式style：1000 (1,0,0,0)
!important: 無窮大
注：權重計算：
1.!!!等級判斷從左到右簸州，某一位數(shù)值相同鉴竭，則判斷下一位數(shù)值
2.權重可以疊加歧譬，但永遠不會進位
例：10個ul -> (0,0,0,10)
盒子模型
頁面布局三大核心：盒子模型，浮動和定位搏存。
盒子模型組成：自身內容瑰步，邊框，內邊距和外邊距4部分璧眠。
border-collapse: collapse; /* 合并相鄰的邊框,多用于table */
padding: 如果盒子沒有指定width/height缩焦，此時padding不會撐開盒子
margin: 0 auto -> 塊級盒子水平居中(要有width)
行內和行內塊級元素水平居中 -> text-align: center
margin塌陷：父子元素同時添加上外邊距，此時父元素會塌陷較大的责静。
解決：1.父元素加上邊框袁滥；2.父元素加上內邊距；3.父級元素觸發(fā)BFC（4種overflow,float）
margin合并：兄弟元素同時添加上灾螃，下外邊距题翻，會選擇較大的
解決：父級元素觸發(fā)BFC（4種）
注：行內元素只設置 左右內外邊距，上下不起效果（要轉換）;
什么時候用margin腰鬼，什么時候用padding嵌赠？
一般沒有設置的寬高的盒子用padding；沒有用margin熄赡。
css3-圓角姜挺，盒子陰影，文字陰影
圓角應用
設置圓形：border-radius是寬度的一半(正方形)彼硫；border-radius: 50%炊豪；
圓角矩形：border-radius是高度的一半；
設置不同的圓角：border-radius：左上乌助，右上溜在，右下，左下他托。
盒子陰影
box-shadow: h-shadow(必寫) v-shadow(必寫) blur spread color inset掖肋；
注：1.outset默認值不可出現(xiàn)，否則陰影無限; 2.盒子陰影不占用空間
文字陰影
text-shadow: h-shadow(必寫) v-shadow(必寫) blur color赏参；
css浮動
!!!!!傳統(tǒng)三種方式：普通流(標準流)志笼，浮動，定位把篓。
網頁布局第一準則：
多個塊級元素 縱向排列找標準流,多個塊級元素 橫向排列找浮動
(網頁布局一般采用標準流的父元素上下排列纫溃，子元素浮動左右排列)
網頁布局第二準則：
先設置盒子大小，再設置盒子位置
浮動最典型的應用：讓多個塊級元素一行顯示韧掩。
浮動特性：1.脫標紊浩；2.浮動的元素會在一行內顯示并且頂部對齊；3.浮動元素會有行內塊元素特性
脫標：
1.脫離標準普通流的控制（浮）移動到指定位置（動）坊谁。
2.浮動的盒子不會保留原先的位置费彼。(半脫標是指會壓住盒子，但不會壓住文字口芍，本質文字環(huán)繞)
浮動元素一行顯示：
一行顯示滿了后會換行
浮動元素會有行內塊元素特性：
行內元素設置浮動后箍铲，具有塊元素特性。
!!!浮動元素之間沒有空隙鬓椭，塊狀有颠猴。
浮動注意點
1.浮動和標準流父盒子搭配(布局先上下用標準流父盒子，再內部元素左右浮動排布)小染。
2.一個元素浮動了翘瓮，理論上其余兄弟元素也要浮動;
浮動的盒子只會影響后面的標準流，不影響前面的氧映。
思考：父盒子一定要有高度嗎春畔？無限滾動場景
理想狀態(tài)，讓子孩子撐開父盒子岛都。
但如果子元素都浮動律姨，則父元素高度為0(浮動不占用位置)。
-->為什么要清除浮動臼疫？
因為父盒子很多情況下不方便給高度择份，但子盒子浮動又不占位置，
最后父盒子的高度為0烫堤，就會影響下面的標準流盒子荣赶。
簡版:子元素浮動，父盒子沒高度鸽斟，影響下面布局
清除浮動本質
清除浮動本質就是清除浮動元素脫離標準流造成的影響拔创；
如果父盒子本身有高度，則不需要清除浮動富蓄；
清除浮動后剩燥，父盒子會根據浮動的子盒子自動檢測高度。
!!!清除浮動方法
1.額外標簽法 - <div class="clear"></div> --> 不推薦(冗余)
2.父級添加overflow屬性 --> 有瑕疵(無法顯示溢出)
3.父級添加after偽元素(額外標簽法的升級版) --> 推薦
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6立倍、7 專有 */
*zoom: 1;
}
4.父級添加雙偽元素 --> 推薦+
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
css書寫順序--專業(yè)
導航欄:
注意：實際開發(fā)中灭红，不會直接用鏈接a而是用li+a方法;
目的：1.語義更清楚;2.直接用a有故意堆砌關鍵字嫌疑,會降低網站排名(不利于SEO)
定位
定義: 將盒子定在某一個位置
定位 = 定位模式+邊偏移
定位模式position:static(默認,不能邊偏移), relative, absolute, fixed, sticky5種
邊偏移：top(相對父元素上邊線), bottom, left, right
relative是相對它原來的位置來說的。
盒子位置變了口注，但占有原來位置变擒，后面盒子仍以標準流方式對待它。
所以relative相對定位沒有脫標寝志，典型應用給absolute絕對定位當?shù)?
absolute是相對它祖先元素來說的娇斑。
!!!!!注意：1.如果**沒有祖先元素**策添，或者**祖先元素沒有定位**，則以瀏覽器為準定位毫缆。
2.如果祖先元素有定位(非staic)舰攒，則以最近一級有定位的祖先元素為參考點。
3.絕對定位不再占有原來位置(脫標)悔醋。
注：絕對定位比浮動飄的還要高。
記：子絕父相
fixed是以瀏覽器可視窗口為參考兽叮。
注：固定定位也脫標芬骄，可以看做一種特殊的絕對定位。
技巧：固定在版心右側位置 -- 小算法: left: 50%;margin-left:xpx;(版心一半,例關閉按鈕)
sticky 粘性定位 (可以看作固定定位和相對定位的結合)
寫法：position: sticky; top:10px鹦聪。
注: 1.以瀏覽器可視窗口為參考账阻，脫標。(同fixed)
2.粘性定位占有原先位置泽本，不脫標淘太。(同relative)
3.必須添加top，left规丽，bottom蒲牧，right中一個才生效。
區(qū)別：（主要看是否脫標和定位基準點）
重點：子絕父相
層疊
z-index
注：1.越大越往上赌莺；2.屬性值一樣冰抢，后來居上；3.數(shù)字后不能加單位;
!4.只有定位的盒子才有z-index艘狭，標準流和浮動沒有index挎扰。
面試擴展：
如何使絕對定位的盒子居中？
注: 1.加了絕對定位的盒子是不能通過margin:0 auto實現(xiàn)水平居中的巢音，需要通過left遵倦，top計算方法。
2.固定定位官撼，實現(xiàn)思路同絕對定位梧躺，不過它是針對瀏覽器窗口的。
定位特殊性:
絕對定位和固定定位和浮動類似歧寺。
1.行內元素添加絕對定位和固定定位燥狰，也可以設置寬高。
注: 之前可以通過轉換和浮動設置斜筐。
2.塊級元素添加絕對定位和固定定位龙致，如果不給寬度，默認大小是內容的寬度顷链。
3.脫標的盒子不會出發(fā)外邊距坍塌(浮動目代，絕對(固定)定位)
!4.絕對定位和固定定位會完全壓住盒子。但浮動只會壓住下面標準流的盒子，不會壓住標準流里的文字榛了。
原理: 浮動之所以不會壓住文字在讶，因為浮動最初是為了做文字環(huán)繞效果的，文字會圍繞這個圖片霜大。
!注: 如果一個盒子既有l(wèi)eft屬性也有right屬性构哺，則默認會執(zhí)行 left屬性 。同理 top bottom 會執(zhí)行 top战坤。
總結：網頁布局
1.標準流：
可以讓盒子上下排列或左右排列曙强。。
2.浮動:
可以讓多個塊級元素一行顯示或左右對齊盒子途茫。碟嘴。
3.定位：
定位最大的特點就是層疊的概念。囊卜。
隱藏
1.display 隱藏元素娜扇，不再占有原來位置
2.visibility 隱藏元素，繼續(xù)占有原來位置
3.ovderflow 溢出隱藏栅组。默認visible雀瓢。hidden隱藏；
scroll 溢出和不溢出都顯示滾動條玉掸；
auto 溢出的時候才顯示滾動條致燥，不溢出不顯示滾動條。
!!!!!注: 使用定位的盒子排截，使用overflow:hidden要慎用嫌蚤，會隱藏多余內容。
精靈圖
使用方式 - background-image断傲；
精靈圖優(yōu)點：復雜的背景圖標脱吱，字體圖標做不了；
精靈圖缺點: 1.圖片比較大认罩，需請求加載箱蝠；2.圖片放大或縮小會失真；3.圖片制作完后更換復雜垦垂；
解決：字體圖標宦搬。
字體圖標
!字體庫：icomoon和iconfont
優(yōu)點：1.隨意變換大小和顏色，透明劫拗，陰影间校；2.字體文件小，文件一旦加載后页慷，立馬渲染憔足，減少服務器請求胁附；
css三角
原理：一個矩形里放一個盒子，使用絕對定位滓彰。
使用方法：border設置透明控妻；一個需要的border設置樣式。
border: 5px solid transparent;
border-bottom-color: pink;
直角
/* 1.只保留右邊的邊框有顏色 */
border-color: transparent red transparent transparent;
/* 2. 上邊框寬度要大揭绑， 右邊框 寬度稍小弓候， 其余的邊框該為 0 */
border-width: 100px 50px 0 0 ;
用戶界面樣式及布局技巧
鼠標樣式 cursor: default/pointer/move/text/not-allowed；
取消表單輪廓線: outline: 0或none 可以去掉藍色邊框線他匪；
防止拖拽文本域: resize: none;
vertical-align: baseline/middle/top/bottom 僅支持行內和行內塊元素
應用 - 解決圖片底部默認空白間隙問題：
1.vertical-align:top/middle/bottom(推薦); 2.display:block
當行文本溢出文字省略號:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出文字省略號: （只適合webkit瀏覽器和移動端）
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin負值應用：
1.浮動列表邊框弓叛，往左側移動-1px壓住前面的邊框
注: hover設置邊框
a. 如果盒子沒有定位，則鼠標經過添加相對定位即可
b. 如果li都有定位诚纸，則利用z-index提高層級
文字圍繞浮動元素：
float，文字標準流就行
css初始化：
轉 鏈接
