? ? ? ? ? ? ? ? ? ? ? ? ? 關(guān)于html靜態(tài)頁面書寫的知識點(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ǎng)聯(lián)盟 行為標(biāo)準(zhǔn)：DOM（ECMA制定的歐洲電腦廠商聯(lián)合會）
3.html:Hyper Text Markup Language （超文本標(biāo)記語言）
xhtml:Extensible HyperText Markeup Language（可擴(kuò)展超文本標(biāo)記語言）
4.聲明文檔類型? ???<!DOCTYPE HTML>
5.HTML基本語法：常規(guī)標(biāo)記：<標(biāo)記 屬性="屬性值">
空標(biāo)記：<標(biāo)記 屬性="屬性值"/>
6. 加粗：區(qū)別：這個標(biāo)簽對應(yīng) bold，即文本加粗，其目的僅僅是為了加粗顯示文本，是一種樣式／風(fēng)格需求；
這個標(biāo)簽意思是加強(qiáng)，表示該文本比較重要，提醒讀者／終端注意。為了達(dá)到這個目的，瀏覽器等終端將其加粗顯示；
總結(jié)：為了加粗而加粗，為了標(biāo)明重點(diǎn)而加粗。
7.傾斜：標(biāo)簽告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示；
標(biāo)簽中的文本表示為強(qiáng)調(diào)的內(nèi)容，對于所有瀏覽器的顯示效果來說，是把這段文字用斜體來顯示；
8.get與post的區(qū)別：get（冪等）是從服務(wù)器上獲取數(shù)據(jù)，post（非冪等）是向服務(wù)器傳送數(shù)據(jù)。
get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到。post是通過HTTP post機(jī)制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
對于get方式，服務(wù)器端用Request.QueryString獲取變量的值，對于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ù)查詢時，建議用Get方式；而在做數(shù)據(jù)添加、修改或刪除時，建議用Post方式；
9.link 和@import的區(qū)別：
link可以加載css外，@import是css提供的一種方式，也只能加載css；
link引用的css會和頁面同時加載，@import會等頁面全部下載完成后再被加載
@import存在兼容問題，低版本瀏覽器不識別。
link可以控制dom元素，@import不是dom可以控制的。
10.? 偽類和偽元素：偽類（單引號）代表某一刻的狀態(tài)：：after等
偽元素（雙引號）是指元素中特別的內(nèi)容：(:：last-child）等
a標(biāo)簽中順序：：link（默認(rèn)）? ：visited（鼠標(biāo)訪問后）? ：hover （鼠標(biāo)滑過） :active （訪問時）
11.css層疊：元素的樣式根據(jù)它樣式所占權(quán)重的大小進(jìn)行渲染（元素是1，類是10，id是100，偽類是1，偽元素是10）
包含塊：包含塊（Containing Block）是絕對定位的基礎(chǔ)，包含塊為絕對定位元素提供坐標(biāo)，偏移量和顯示范圍的參照物，定義元素為包含塊，給絕對定位元素的父元素添加position：relative,即父元素就是一個包含塊
12.font：加粗（bolder? normal? 100~500） 傾斜（italic oblique normal）字體/行高? "宋體"
13.word-spcing:詞間距（單詞與單詞之間的間隔）
letter-spacing:控制英文字母和漢字的字距
border:double dotted dashed
background-attachment:fixed：背景圖固定，相對瀏覽器
14.層級選擇器：子級選擇器，兄弟選擇器，通用兄弟選擇器
15.給子元素設(shè)置外邊距時:會默認(rèn)加到父元素上
給父元素或者子元素任意一個加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 重疊顯示
可變元素：
applet - java applet
◎ button - 按鈕
◎ del - 刪除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 圖片區(qū)塊(map)
◎ object - object對象
◎ script - 客戶端腳本
17.設(shè)置float屬性后，相當(dāng)于給該屬性加display:inline-block
18.visiblity:hidden/visible 隱藏可見，但是還是占空間
display：none 使對象完全消失，不占空間
overflow:hidden auto visible(默認(rèn)) inherit scroll
19.定位：相對定位：relative（相對于自己的定位），占位
絕對定位：absolute（相對于body的定位），不占位，如果有定位的父元素，則根據(jù)父元素進(jìn)行定位
固定定位：fixed（相對瀏覽器的窗口定位）
默認(rèn)值：static
20.讓一個元素始終在窗口水平 垂直位置居中：
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)值，空白會被瀏覽器忽略）/nowrap（文本不會換行，忽略回車換行以及空格）/pre（空格回車換行會被瀏覽器保留，其行為方式類似html中的pre標(biāo)簽）/pre-wrap（保留空白符和回車換行序列，正常進(jìn)行換行）/pre-line（合并空白符系列，但是保留換行符，正常進(jìn)行換行）/inherit
此屬性用來設(shè)置如何處理元素內(nèi)的空白
23.文字溢出省略號顯示：? ? width：value;
white-spacing:nowrap;
overflow:hidden;
text-overflow:ellipsis
24.png:支持透明，高清，色彩豐富，字節(jié)大
psd：photoshop源文件格式，只能通過ps打開
gif:支持動態(tài)圖片，圖片質(zhì)量差，字節(jié)小，不清晰，支持透明
jpg:不支持動圖，不支持透明，字節(jié)小，圖片清晰
25.alt+delete:填充前景色
ctrl+delete:填充背景色
26.css精靈圖（sprites）利用ps將圖片進(jìn)行整合，然后利用background-images,background-position進(jìn)行精確定位
優(yōu)點(diǎn):減少http請求數(shù)量，減少服務(wù)器壓力，減少圖片字節(jié)，提高網(wǎng)頁加載速度
缺點(diǎn)：后期不好維護(hù)，做圖片比較繁瑣
27.ie6最小高度的寫法：
hack1? min-height:value;_height：value
hack2? ? min-height:value;height:auto !import;height:value
28.高度塌陷解決辦法：
原因：父元素沒有高度，子元素浮動，父元素高度塌陷
解決辦法：在浮動元素與受影響元素之間加一個空元素，給空元素清除浮動
直接給受影響的元素加浮動。
28.萬能清除法：：? ? ? 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:只對ie6生效
*+html:只對ie7生效。
32.表單高級：
標(biāo)題
33.表格前后對比：
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（塊級格式化上下文）
a.上下相鄰的兩個盒子margin值疊加
為什么加float和display可以解決margin值重疊
為什么發(fā)生margin值重疊
b.一個元素的左邊一定挨著包含塊
c.BFC里面的子元素一定要參與高度計算，浮動也如此
為什么overflow可以解決高度塌陷問題。
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.
通過id和list綁定
通過id和form 綁定
novalidate加在form上，取消必填 autofocus高亮提示，可直接輸入
39.
40.怪異盒模型：ie6里面width包含margin與padding的值，因?yàn)闆]有聲明正確文檔類型。boxsizing:border-box觸發(fā)怪異盒模型。
41.
你好
你好
42.cursor:auto（默認(rèn)） crosshair（加號）? text（文本） wait（等待） help （幫助）progress（過程） inherit（繼承） move（移動） no-resize（向上或向右移動） 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（覆蓋，盒子完整，圖片可能會少） contain（圖片完整，盒子并未鋪完
background:rgba(0,0,0,.5)
background:hsl/hsla(120,100%,60%)色調(diào)（0~360） 飽和度（百分比） 亮度（百分比）
47.優(yōu)雅降級：先構(gòu)建站點(diǎn)的完整功能，針對瀏覽器進(jìn)行測試與修復(fù)，然后逐步針對各大瀏覽器進(jìn)行hack，使其可以在低版本瀏覽器上正常瀏覽
漸進(jìn)增強(qiáng)：先針對低版本瀏覽器進(jìn)行構(gòu)建頁面，完成基本的功能，然后針對高級瀏覽器進(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（兩邊對齊 其余均分）
align-items:center（垂直居中） flex-end（居下） flex-start（頂端）
flex-wrap:wrap（換行）? nowrap（不換行） wrap-reverse
align-content:flex-end（末端對齊）? flex-start（從主軸開始居上） center（居中） space-between（平分）
flex:1（占比，子元素空間分配，可以寫寬高，也可以不寫
flex-grow:
align-self:flex-end（只對某一個元素操作，側(cè)軸對齊方式）? flex-start
display:-webkit-box ,box不認(rèn)識，使舊版認(rèn)識，兼容性有差別，內(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)值，對列進(jìn)行協(xié)調(diào)，瀏覽器應(yīng)對列長度的差異進(jìn)行最小化處理）auto（自動排列，規(guī)定如何對列進(jìn)行填充）
column-span:all（默認(rèn)1），無其他數(shù)值，橫跨列數(shù)
50.響應(yīng)式布局：@media screen and (max-width:1400px) and (min-width:100px)
條件：orientation:landscape橫屏? portrait:豎屏
link寫法:
51.移動端布局：網(wǎng)格布局 懸掛式布局 百分比布局 流式布局 圣杯布局 輸入框布局
em:一個字的大小，相對單位，相對于當(dāng)前元素的文字大小
%：百分比 ，相對單位 相對于父元素的大小
vw:viewpoint width? 相對于body? 視窗寬度 視窗寬度的10% 10vw
vh:viewpoint height body高度的1%,1vh,相對單位，相對于body
rem：font-size:0.1rem;1rem等于html的font-
size大?。╤tml的font-size px單位乘以元素的font-size rem單位大小? 等于實(shí)際px）
52.屏幕分辨率：橫縱方向上的像素點(diǎn)數(shù)，單位為px 1px 為 1個像素點(diǎn)
屏幕像素密度：ppi=px 屏幕上每英寸可以顯示的像素數(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%)
簡寫：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過渡：transition-property:width? height? all (規(guī)定過渡屬性)
transition-duration:1s 10ms（過渡時間）
transition-timing-function:linear（勻速，速度曲線）
transition-delay:1s(等待時間)
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等計算在里面，padding會撐開盒子)
58.3D旋轉(zhuǎn)：transform;rotateX(360deg);transform:rotateY(360deg)順時針默認(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動畫：animation
@keyframes name(更改){
from {width:200px}
to{width:400px}
}
@keyframes name{
0%{width:10px ;background:red}}
然后css中引入動畫名稱：animation-name:
animation-duration:2s
animation-timing-function:linear;
animation-iteration-count:2;
animation-direction:alternate
animation-play-state:paused(動畫播放時狀態(tài)與hover連用)
animation-fill-mode:forwards(動畫結(jié)束時保留最后一幀效果)
backwards（動畫播放之前展示第一幀效果）
翻轉(zhuǎn)時背景圖片消失：backface-visibility:hidden(從而顯示另外一張壓在上面的圖片)
60.
61.iframe標(biāo)簽通過scrolling:no去掉滾動條
62.ie6中，如果將某一個div的高度設(shè)置為3像素。=，需要添加font-size:0
63.清除浮動的方法：在浮動元素下添加div
優(yōu)點(diǎn)：代碼少，瀏覽器支持好
缺點(diǎn)：如果頁面浮動布局多，就要多增加div
給父元素添加overflow:hidden
優(yōu)點(diǎn)：簡單，代碼少
缺點(diǎn)：不能和position配合使用
萬能清除法：：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)頁中就是以塊的形式顯示塊狀即顯示為矩形區(qū)域
默認(rèn)情況下，塊狀元素將會占據(jù)一行，兩個相鄰的塊狀元素不會出現(xiàn)并列顯示的現(xiàn)象，默認(rèn)情況下，塊狀元素會自上向下排列
塊狀元素可以設(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è)計特點(diǎn)：面對不同分辨率設(shè)備靈活性強(qiáng)
能夠快速解決多顯示設(shè)備問題
