? ? ? ? ? ? ? ? ? ? ? ? ? 關(guān)于html靜態(tài)頁(yè)面書寫的知識(shí)點(diǎn)整理
1.web標(biāo)準(zhǔn)：結(jié)構(gòu)，表現(xiàn)，行為 結(jié)構(gòu)（xhtml,xml）表現(xiàn)（css）行為（DOM ECMASCRIPT）
2.W3C：萬(wàn)維網(wǎng)聯(lián)盟 行為標(biāo)準(zhǔn)：DOM（ECMA制定的歐洲電腦廠商聯(lián)合會(huì)）
3.html:Hyper Text Markup Language （超文本標(biāo)記語(yǔ)言）
xhtml:Extensible HyperText Markeup Language（可擴(kuò)展超文本標(biāo)記語(yǔ)言）
4.聲明文檔類型? ???<!DOCTYPE HTML>
5.HTML基本語(yǔ)法：常規(guī)標(biāo)記：<標(biāo)記 屬性="屬性值">
空標(biāo)記：<標(biāo)記 屬性="屬性值"/>
6. 加粗：區(qū)別：這個(gè)標(biāo)簽對(duì)應(yīng) bold讹俊，即文本加粗泡挺，其目的僅僅是為了加粗顯示文本，是一種樣式／風(fēng)格需求助析；
這個(gè)標(biāo)簽意思是加強(qiáng)犀被，表示該文本比較重要，提醒讀者／終端注意外冀。為了達(dá)到這個(gè)目的寡键，瀏覽器等終端將其加粗顯示；
總結(jié)：為了加粗而加粗锥惋，為了標(biāo)明重點(diǎn)而加粗昌腰。
7.傾斜：標(biāo)簽告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示开伏；
標(biāo)簽中的文本表示為強(qiáng)調(diào)的內(nèi)容，對(duì)于所有瀏覽器的顯示效果來(lái)說(shuō)遭商，是把這段文字用斜體來(lái)顯示固灵；
8.get與post的區(qū)別：get（冪等）是從服務(wù)器上獲取數(shù)據(jù)，post（非冪等）是向服務(wù)器傳送數(shù)據(jù)劫流。
get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中巫玻，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在URL中可以看到祠汇。post是通過(guò)HTTP post機(jī)制仍秤，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個(gè)過(guò)程可很。
對(duì)于get方式诗力，服務(wù)器端用Request.QueryString獲取變量的值，對(duì)于post方式我抠，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)苇本。
get傳送的數(shù)據(jù)量較小，不能大于2KB菜拓。post傳送的數(shù)據(jù)量較大瓣窄，一般被默認(rèn)為不受限制。但理論上纳鼎，IIS4中最大量為80KB俺夕，IIS5中為100KB。
get安全性非常低贱鄙，post安全性較高劝贸。但是執(zhí)行效率卻比Post方法好。
建議：
get方式的安全性較Post方式要差些逗宁，包含機(jī)密信息的話悬荣，建議用Post數(shù)據(jù)提交方式；
在做數(shù)據(jù)查詢時(shí)疙剑，建議用Get方式氯迂；而在做數(shù)據(jù)添加、修改或刪除時(shí)言缤，建議用Post方式嚼蚀；
9.link 和@import的區(qū)別：
link可以加載css外，@import是css提供的一種方式管挟，也只能加載css轿曙；
link引用的css會(huì)和頁(yè)面同時(shí)加載，@import會(huì)等頁(yè)面全部下載完成后再被加載
@import存在兼容問(wèn)題，低版本瀏覽器不識(shí)別导帝。
link可以控制dom元素守谓，@import不是dom可以控制的。
10.? 偽類和偽元素：偽類（單引號(hào)）代表某一刻的狀態(tài)：：after等
偽元素（雙引號(hào)）是指元素中特別的內(nèi)容：(:：last-child）等
a標(biāo)簽中順序：：link（默認(rèn)）? ：visited（鼠標(biāo)訪問(wèn)后）? ：hover （鼠標(biāo)滑過(guò)） :active （訪問(wèn)時(shí)）
11.css層疊：元素的樣式根據(jù)它樣式所占權(quán)重的大小進(jìn)行渲染（元素是1您单，類是10斋荞，id是100，偽類是1虐秦，偽元素是10）
包含塊：包含塊（Containing Block）是絕對(duì)定位的基礎(chǔ)平酿，包含塊為絕對(duì)定位元素提供坐標(biāo)，偏移量和顯示范圍的參照物悦陋，定義元素為包含塊蜈彼，給絕對(duì)定位元素的父元素添加position：relative,即父元素就是一個(gè)包含塊
12.font：加粗（bolder? normal? 100~500） 傾斜（italic oblique normal）字體/行高? "宋體"
13.word-spcing:詞間距（單詞與單詞之間的間隔）
letter-spacing:控制英文字母和漢字的字距
border:double dotted dashed
background-attachment:fixed：背景圖固定，相對(duì)瀏覽器
14.層級(jí)選擇器：子級(jí)選擇器俺驶，兄弟選擇器幸逆，通用兄弟選擇器
15.給子元素設(shè)置外邊距時(shí):會(huì)默認(rèn)加到父元素上
給父元素或者子元素任意一個(gè)加float
給父元素加padding或border
16.內(nèi)聯(lián)元素：盒模型左右支持，上下不支持暮现，水平從左到右排列秉颗，寬高為內(nèi)? ? ? 容大小（span strong em i br a img（行內(nèi)塊） input（行內(nèi)塊））
塊狀元素： （div p li ul ol? tr h1等 ）border 重疊顯示
可變?cè)兀?/p>
applet - java applet
◎ button - 按鈕
◎ del - 刪除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 圖片區(qū)塊(map)
◎ object - object對(duì)象
◎ script - 客戶端腳本
17.設(shè)置float屬性后送矩，相當(dāng)于給該屬性加display:inline-block
18.visiblity:hidden/visible 隱藏可見，但是還是占空間
display：none 使對(duì)象完全消失哪替，不占空間
overflow:hidden auto visible(默認(rèn)) inherit scroll
19.定位：相對(duì)定位：relative（相對(duì)于自己的定位）栋荸，占位
絕對(duì)定位：absolute（相對(duì)于body的定位），不占位凭舶，如果有定位的父元素晌块，則根據(jù)父元素進(jìn)行定位
固定定位：fixed（相對(duì)瀏覽器的窗口定位）
默認(rèn)值：static
20.讓一個(gè)元素始終在窗口水平 垂直位置居中：
div{width:200px;height:200px;position:fixed/absolute;left:0;top:0;right:0;bottom:0;margin:auto}
div{width:200px;height:200px;position:fixed/abolute;left:50%;top:50%;margin:-100px 0 0 -100px（自身寬高一半）};
21.ie透明度：filter:alper(opacity:50)
22.刪除線：? ?<u></u>? ?<del></del>? <s></s>
22.white-spacing:normal（默認(rèn)值，空白會(huì)被瀏覽器忽略）/nowrap（文本不會(huì)換行帅霜，忽略回車換行以及空格）/pre（空格回車換行會(huì)被瀏覽器保留匆背，其行為方式類似html中的pre標(biāo)簽）/pre-wrap（保留空白符和回車換行序列，正常進(jìn)行換行）/pre-line（合并空白符系列身冀，但是保留換行符钝尸，正常進(jìn)行換行）/inherit
此屬性用來(lái)設(shè)置如何處理元素內(nèi)的空白
23.文字溢出省略號(hào)顯示：? ? width：value;
white-spacing:nowrap;
overflow:hidden;
text-overflow:ellipsis
24.png:支持透明，高清搂根，色彩豐富珍促，字節(jié)大
psd：photoshop源文件格式，只能通過(guò)ps打開
gif:支持動(dòng)態(tài)圖片剩愧，圖片質(zhì)量差猪叙，字節(jié)小，不清晰，支持透明
jpg:不支持動(dòng)圖穴翩，不支持透明犬第，字節(jié)小，圖片清晰
25.alt+delete:填充前景色
ctrl+delete:填充背景色
26.css精靈圖（sprites）利用ps將圖片進(jìn)行整合芒帕，然后利用background-images,background-position進(jìn)行精確定位
優(yōu)點(diǎn):減少http請(qǐng)求數(shù)量歉嗓，減少服務(wù)器壓力，減少圖片字節(jié)副签，提高網(wǎng)頁(yè)加載速度
缺點(diǎn)：后期不好維護(hù)遥椿，做圖片比較繁瑣
27.ie6最小高度的寫法：
hack1? min-height:value;_height：value
hack2? ? min-height:value;height:auto !import;height:value
28.高度塌陷解決辦法：
原因：父元素沒有高度，子元素浮動(dòng)淆储，父元素高度塌陷
解決辦法：在浮動(dòng)元素與受影響元素之間加一個(gè)空元素冠场，給空元素清除浮動(dòng)
直接給受影響的元素加浮動(dòng)。
28.萬(wàn)能清除法：：? ? ? after{content："";display:block;width:0;height:0;overflow:hidden;clear:both;}
29.去除textarea 下面的橫杠：resize:none
30:瀏覽器內(nèi)核：Trident:三叉戟? ie 360 世界之窗 騰訊
Gecko:壁虎? Mozilla Firefox（開源）
Presto:Opera Presto 渲染速度最快
Webkit safari :chrome
Blink:chrome
31.css hack三種形式：
css屬性前綴法 選擇器前綴法 ie條件注釋法
條件注釋法：這段文字只在IE顯示
屬性前綴法：*（6/ 7）+（6/7）-（6）_（6）#（6/7）color
color:red\9: ie6~ie10
color:red\0:ie8~ie10
color:red\9\0:ie9~ie10
選擇器前綴法：*html:只對(duì)ie6生效
*+html:只對(duì)ie7生效本砰。
32.表單高級(jí)：
標(biāo)題
33.表格前后對(duì)比：
css:width:200px;height:200px;border:1px solid red;border-spacing:10px;background:red;vertical-align:top;text-align:center;
html:width="200"? height="200"? border="1" bordercolor="red" cellspacing="10" cellpadding="10" bgcolor="red" valign="top" align="center"
新增：border-collapse:collapse（合并邊框）/separate（邊框分開）加table里
empty-cells:hide（拼成不規(guī)則效果碴裙，刪掉表格內(nèi)容）show（顯示）
table-layout:fixed（固定寬度）auto
34.BFC（塊級(jí)格式化上下文）
a.上下相鄰的兩個(gè)盒子margin值疊加
為什么加float和display可以解決margin值重疊
為什么發(fā)生margin值重疊
b.一個(gè)元素的左邊一定挨著包含塊
c.BFC里面的子元素一定要參與高度計(jì)算，浮動(dòng)也如此
為什么overflow可以解決高度塌陷問(wèn)題点额。
35.產(chǎn)生BFC環(huán)境：
根元素（body）
float部位none
position為absolute fixed
display為inline-block table-cell? table-caption flex? inline-flex
overflow不為visible
36.html5新增標(biāo)簽：section article? aside? header? nav? footer main figure figurecaption? mark canvas audio video
37.表單新增type屬性
number? range date month week search color email
38.
通過(guò)id和list綁定
通過(guò)id和form 綁定
novalidate加在form上舔株，取消必填 autofocus高亮提示，可直接輸入
39.
40.怪異盒模型：ie6里面width包含margin與padding的值还棱，因?yàn)闆]有聲明正確文檔類型载慈。boxsizing:border-box觸發(fā)怪異盒模型。
41.
你好
你好
42.cursor:auto（默認(rèn)） crosshair（加號(hào)）? text（文本） wait（等待） help （幫助）progress（過(guò)程） inherit（繼承） move（移動(dòng)） no-resize（向上或向右移動(dòng)） pointer（手型）
43.iframe鏈接：珍手，設(shè)備信息
44.ui狀態(tài)的偽類選擇器
：checked
：disabled
:enabled
:read-only
:read-write
:default
45:text-shadow:水平位移? 垂直位移 模糊 描邊（2px 2px 1px blue,2px 3px 1px red 可疊加）
box-shadow:0? 0? 5px red inset（默認(rèn)outset,）可疊加
border-radius:10px 10px 10px 10px （左上 右上 右下 左下）
word-break:normal（默認(rèn)） break-all（從單詞里換行办铡，非中日韓換行模式） keep-all（空格或連接符換行）
46.背景新增屬性：
background-origin:padding-box（默認(rèn)） content-box border-box
background-clip:content-box padding-box（默認(rèn)）
background-size:cover（覆蓋，盒子完整琳要，圖片可能會(huì)少） contain（圖片完整寡具，盒子并未鋪完
background:rgba(0,0,0,.5)
background:hsl/hsla(120,100%,60%)色調(diào)（0~360） 飽和度（百分比） 亮度（百分比）
47.優(yōu)雅降級(jí)：先構(gòu)建站點(diǎn)的完整功能，針對(duì)瀏覽器進(jìn)行測(cè)試與修復(fù)稚补，然后逐步針對(duì)各大瀏覽器進(jìn)行hack童叠，使其可以在低版本瀏覽器上正常瀏覽
漸進(jìn)增強(qiáng)：先針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能课幕，然后針對(duì)高級(jí)瀏覽器進(jìn)行效果厦坛，交互，達(dá)到更好的體驗(yàn)
48.彈性盒子 display:flex
flex-direction:row-reverse（橫著反向） column（豎著） column-reverse（豎著反向）定義主軸
justify-content:center（居中） flex-end（主軸從末尾排） flex-start（主軸從頭排） space-around（左右邊距一樣） space-between（兩邊對(duì)齊 其余均分）
align-items:center（垂直居中） flex-end（居下） flex-start（頂端）
flex-wrap:wrap（換行）? nowrap（不換行） wrap-reverse
align-content:flex-end（末端對(duì)齊）? flex-start（從主軸開始居上） center（居中） space-between（平分）
flex:1（占比乍惊，子元素空間分配粪般，可以寫寬高，也可以不寫
flex-grow:
align-self:flex-end（只對(duì)某一個(gè)元素操作污桦，側(cè)軸對(duì)齊方式）? flex-start
display:-webkit-box ,box不認(rèn)識(shí)亩歹，使舊版認(rèn)識(shí)匙监，兼容性有差別，內(nèi)核
order:1（排列最后）
49.css多列：
column-count:屬性規(guī)定元素應(yīng)該被分隔的列數(shù)
column-gap：屬性規(guī)定列之間的間隔大小
column-rule:屬性設(shè)置列之間的寬度小作，樣式和顏色規(guī)則
column-rule-color? column-rule-style? column-rule-width
column-fill:balance（默認(rèn)值亭姥，對(duì)列進(jìn)行協(xié)調(diào)，瀏覽器應(yīng)對(duì)列長(zhǎng)度的差異進(jìn)行最小化處理）auto（自動(dòng)排列顾稀，規(guī)定如何對(duì)列進(jìn)行填充）
column-span:all（默認(rèn)1）达罗，無(wú)其他數(shù)值，橫跨列數(shù)
50.響應(yīng)式布局：@media screen and (max-width:1400px) and (min-width:100px)
條件：orientation:landscape橫屏? portrait:豎屏
link寫法:
51.移動(dòng)端布局：網(wǎng)格布局 懸掛式布局 百分比布局 流式布局 圣杯布局 輸入框布局
em:一個(gè)字的大小静秆，相對(duì)單位粮揉，相對(duì)于當(dāng)前元素的文字大小
%：百分比 ，相對(duì)單位 相對(duì)于父元素的大小
vw:viewpoint width? 相對(duì)于body? 視窗寬度 視窗寬度的10% 10vw
vh:viewpoint height body高度的1%,1vh,相對(duì)單位抚笔，相對(duì)于body
rem：font-size:0.1rem;1rem等于html的font-
size大蟹鋈稀（html的font-size px單位乘以元素的font-size rem單位大小? 等于實(shí)際px）
52.屏幕分辨率：橫縱方向上的像素點(diǎn)數(shù)，單位為px 1px 為 1個(gè)像素點(diǎn)
屏幕像素密度：ppi=px 屏幕上每英寸可以顯示的像素?cái)?shù)量 pixels per inch殊橙，與屏幕尺寸 屏幕分辨率有關(guān)
像素：邏輯像素和物理像素（設(shè)備像素）
物理像素：1DPR/100=1vw（px單位） iphone 6 為26.66
vw與rem合作確定等比縮放布局
font-size:100px (31.25vw)
53.背景顏色漸變：
線性漸變：background:linear-gradient(red,blue)
-wibkit-linear-gradient(left,red,blue,yellow)
background:linear-gradient(to right,red,blue)
background:linear-gradient(45deg,red,blue)
徑向漸變：radial-gradient:(red,blue)
repeating-gradient:(red,blue 20%)
repeating-linear-gradient(red,yellow 10%,red 20%)
repeating-radial-gradient(red,yellow 20%)
簡(jiǎn)寫：background:-webkit-gradient(linear,0,0,0,100%,from (red),to (blue));
線性辐宾，從（0，0）開始膨蛮，垂直漸變
background:-webkit-gradient(linear,0,0,0,100%,color-step(0,red),color-step(0.2,blue));
54.css3過(guò)渡：transition-property:width? height? all (規(guī)定過(guò)渡屬性)
transition-duration:1s 10ms（過(guò)渡時(shí)間）
transition-timing-function:linear（勻速叠纹，速度曲線）
transition-delay:1s(等待時(shí)間)
transition:all 2s linear 2s
55.transform
transform:translateX translateY translate
transform:rotate(180deg)
transform:scale(倍數(shù)) scaleX scaleY
transform:skewX(90deg)
56.字體漸變：
font-size:60px;background-image:repeating-linear-gradient(red 10%,blue 20%);color:transparent(透明)；-webkit-background-clip:text(背景只能文字顯示)
57.box-sizing:border-box(邊框與padding等計(jì)算在里面敞葛，padding會(huì)撐開盒子)
58.3D旋轉(zhuǎn)：transform;rotateX(360deg);transform:rotateY(360deg)順時(shí)針默認(rèn)
3D景深：perspective:200px;(向前伸展誉察，觀察角度)
perspective-origin:top left(觀察距離)
transform-origin:bottom top(旋轉(zhuǎn)基點(diǎn))
transform-style:preserve-3d（父元素上允許子元素保留3D屬性）flat(子元素不保留3D屬性)
59.css動(dòng)畫：animation
@keyframes name(更改){
from {width:200px}
to{width:400px}
}
@keyframes name{
0%{width:10px ;background:red}}
然后css中引入動(dòng)畫名稱：animation-name:
animation-duration:2s
animation-timing-function:linear;
animation-iteration-count:2;
animation-direction:alternate
animation-play-state:paused(動(dòng)畫播放時(shí)狀態(tài)與hover連用)
animation-fill-mode:forwards(動(dòng)畫結(jié)束時(shí)保留最后一幀效果)
backwards（動(dòng)畫播放之前展示第一幀效果）
翻轉(zhuǎn)時(shí)背景圖片消失：backface-visibility:hidden(從而顯示另外一張壓在上面的圖片)
60.
61.iframe標(biāo)簽通過(guò)scrolling:no去掉滾動(dòng)條
62.ie6中，如果將某一個(gè)div的高度設(shè)置為3像素惹谐。=持偏，需要添加font-size:0
63.清除浮動(dòng)的方法：在浮動(dòng)元素下添加div
優(yōu)點(diǎn)：代碼少，瀏覽器支持好
缺點(diǎn)：如果頁(yè)面浮動(dòng)布局多豺鼻，就要多增加div
給父元素添加overflow:hidden
優(yōu)點(diǎn)：簡(jiǎn)單，代碼少
缺點(diǎn)：不能和position配合使用
萬(wàn)能清除法：：after{content="" overflow:hidden;height:0;clear:both'visibility:hidden;display:block}
64.vertical-align用法：必須給父元素加text-align:center;
當(dāng)前元素：display:inline-block;vertical-align:middle
當(dāng)前元素后：
span{vertical0-align:middle;width:0;height:100%;display:inline-block}
65.內(nèi)聯(lián)元素與塊狀元素的區(qū)別：
塊狀元素在網(wǎng)頁(yè)中就是以塊的形式顯示塊狀即顯示為矩形區(qū)域
默認(rèn)情況下款慨，塊狀元素將會(huì)占據(jù)一行儒飒，兩個(gè)相鄰的塊狀元素不會(huì)出現(xiàn)并列顯示的現(xiàn)象，默認(rèn)情況下檩奠，塊狀元素會(huì)自上向下排列
塊狀元素可以設(shè)置自己的寬度和高度
塊狀元素一般都作為其他元素的容器桩了，它可以容納其他內(nèi)聯(lián)元素和其他塊狀元素。
66.標(biāo)準(zhǔn)盒模型和怪異盒模型：
標(biāo)準(zhǔn)：content+border+padding 實(shí)現(xiàn)：box-sizing:content-box
怪異：content? 實(shí)現(xiàn)：box-sizing:border-box
67.響應(yīng)式布局：
設(shè)計(jì)特點(diǎn)：面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快速解決多顯示設(shè)備問(wèn)題
