網(wǎng)頁基礎(chǔ)總結(jié)（4）

一.網(wǎng)頁基礎(chǔ)

1.選擇器優(yōu)先級關(guān)系

!important>ID>類>元素

內(nèi)聯(lián)樣式表>嵌入>外部

2.css盒模型

兩種模式 {

1.標準 content+padding(2)+margin(2)+border(2)

2.怪異 content(包括padding和border)+margin(2)

}

彈性盒模型{

彈性容器? 彈性子元素

}

3.浮動作用/特點

清除浮動的三種方式

加標簽 float

overflow：hidden

clearfix(給父元素加)

4.三種定位方式以及使用場景

absolute生成絕對定位元素奢啥，相對于static定位以外的第一個父元素進行定位

fixed生成絕對定位的元素琐凭，相對于瀏覽器窗口進行定位。

relative生成相對定位额获，相對于其正常位置進行定位。

5.常用的表單控件

①單行/多行文本框

②單選按鈕

③文件域

④提交按鈕

⑤復(fù)選框

⑥密碼框

⑧下拉菜單

⑨重置按鈕

6.新增的表單類型

tel? url? email search? number range color

7.pc端常用布局：定位? 浮動? flex? media

移動端常用布局：rem? 100%? flex? media

8.css3變形屬性：transform-rotate? 旋轉(zhuǎn)

transform-scale? 變形

transform-skew? ? 傾斜

transform-translate? 移動

9.css3動畫

10.HTML5拖拽API：

源：ondragstart? 拖拽前觸發(fā)

ondrag? ? ? ? 拖拽前聯(lián)系觸發(fā)

ondragend? ? 拖拽結(jié)束觸發(fā)

目標元素事件：ondragenter? 移入目標元素時觸發(fā)

ondragover? ? 移入目標元素后連續(xù)觸發(fā)

ondragleave? 離開目標元素時觸發(fā)

ondrop? ? ? ? 在目標元素釋放鼠標觸發(fā)

11.移動端試口viewport初始化縮放比例1：1禁止用戶手動縮放

12.PC端（>1200px）文字20px

@media(min-width>1200px){? }

移動端（<768px）文字12px

@media(min-width<768px){...}

13.locolstorage5個屬性：setItem()? getItem()? removeItem()? clear()? key()

14.css的優(yōu)先級

important>id>class>element>*

15.css3新的選擇器

波浪線（~）雕欺，:root? :only-child? :last-child? ::selection

16. css3新的屬性

文字陰影? text-shadow

文本換行? word-wrap:normal（默認）/ break-word（長單詞超出區(qū)域換行）

圓角邊框? border-radius

邊框陰影? box-shadow

服務(wù)端字體 font-face

字體圖標? IcoMoon

過渡? ? ? transion

變形? ? ? transform

二.JavaScript基礎(chǔ)

1.字符串/數(shù)組操作/數(shù)據(jù)類型/類型轉(zhuǎn)換

字符串 string

數(shù)組操作 push() 可向數(shù)組末尾添加一個或多個元素,并返回新的長度

pop() 刪除并返回數(shù)組的最后一個元素

join() 將數(shù)組中所有元素都轉(zhuǎn)換為字符串并連接在一起 返回字符串

reverse() 將數(shù)組中元素的順序顛倒 返回逆序的數(shù)組

sort() 將數(shù)組中的元素進行排序 返回排序后的數(shù)組

concat() 合并兩個數(shù)組 返回合并后的新數(shù)組

slice() 返回指定數(shù)組的一個片段或子數(shù)組 他的兩個參數(shù)分別為片段上的起始和結(jié)束位置

splice() 用于插入 刪除 或替換數(shù)組的元素 并返回刪除的部分數(shù)組

shift() 刪除數(shù)組的第一個元素并返回

unshift() 在數(shù)組的頭部添加一個或多個元素并返回數(shù)組的新長度

數(shù)據(jù)類型 string number undefined null NaN object function Boolean

類型轉(zhuǎn)換? 顯示轉(zhuǎn)換： 通過手動進行類型轉(zhuǎn)換

Javascript提供了以下轉(zhuǎn)型函數(shù)：

①轉(zhuǎn)換為數(shù)值類型：Number(mix)料饥、 parseInt(string,radix)、parseFloat(string)

這三個函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值陨收。

②轉(zhuǎn)換為字符串類型：toString(radix)、 String(mix)

③轉(zhuǎn)換為布爾類型：Boolean(mix)

2.For循環(huán)使用

for/for in/for each/while/switch

理解回調(diào)函數(shù)

3.函數(shù)返回值 return 函數(shù)傳參 形參/實參

4.預(yù)解析概念

定義

預(yù)解析：在當前作用域下,js運行之前鸵赖，會把帶有var和function關(guān)鍵字的事先聲明务漩，并在內(nèi)存中安排好拄衰。然后再從上到下執(zhí)行js語句。

預(yù)解析只會發(fā)生在通過var定義的變量和function上菲饼。

5.日期對象/了解正則常用符號/Math對象（5個）

①日期對象 date用于處理日期和時間

toSting把date轉(zhuǎn)換為字符串并返回結(jié)果

toLocaleString() 根據(jù)本地時間把date對象轉(zhuǎn)換為字符串并返回結(jié)果

getTime() 返回距1970年1月1日之間的毫秒數(shù)

setTime() 以毫秒設(shè)置Date對象

getFullYear() 方法可返回一個表示年份的 4 位數(shù)字

setFullYear() 用于設(shè)置年份

getMonth() 返回表示月份的數(shù)字

setMonth() 用于設(shè)置月份

②正則常用符號

+? 匹配任何至少包含一個前導字符串

*? 包含零個或者多個前導字符串

肾砂？ 匹配任何包含零個或者一個前導字符串

. 匹配任意字符串

{x} 匹配任何包含x個前導字符串

{x,y} 匹配任何包含x-y個前導字符串

$? 匹配字符串的行尾

^? 匹配字符串的行首

|? 匹配字符串的左邊或右邊

()? 包圍一個字符分組或者定義個反引用 可以使用/1/2 提取

③Math對象

Math.random() 可返回介于0~1之間的一個隨機數(shù)

Max(x,y) 返回x和y中的最高值

Min(x,y) 返回x和y中的最低值

Math.ceil(x) ceil()方法可對一個數(shù)進行上舍入

Math.floor() floor()方法可對一個數(shù)進行下舍入

Math.round() round()方法可以把一個數(shù)字舍入為最接近的整數(shù)

三.JavaScript高級

1.定時器的使用方式和使用場景

①一次性計時器：在指定時間觸發(fā)一次? setTimeout(進行觸發(fā)的事件,指定時間間隔)

取消計時器? clearTimeout()

②間隔性計時器：每隔一段時間便觸發(fā)? setInterval()

取消計時器? clearInterval()

2.理解閉包的概念

對于閉包，我這這樣理解的宏悦，在js中镐确，分為全局變量和局部變量。全局變量實在任何場景下都可以調(diào)用饼煞，可是局部變量就不一樣了源葫，在默認情況下是訪問不到的。這個時候就用到了閉包砖瞧，在函數(shù)中再申明一個匿名函數(shù)也可以稱為二重函數(shù)息堂，這樣父元素可以調(diào)用子元素的方法，子元素也可以調(diào)用父元素的屬性和方法块促，在什么情況下會用到閉包呢荣堰？一般在寫一些插件或者是其他的一些東西時用到。在js面向?qū)ο笾蟹庋b方法的時候也會用到閉包竭翠。一般情況下很少使用閉包振坚，因為閉包占用資源，降低了代碼的安全性斋扰。

3.談?wù)剬his的理解渡八。

this是js的一個關(guān)鍵字，隨著場合的不同传货，this所指的不一樣屎鳍。但是無論如何，this都指的是被調(diào)用的那個對象问裕。

地理定位 Geolocation

方法：getCurrentPosition() 當前的地理位置

cookies基礎(chǔ)

cookie也叫HTTP Cookie逮壁，要求服務(wù)器對任意HTTP請求發(fā)送Set-Cookie，因此粮宛，Cookie的處理原則上需要在服務(wù)器環(huán)境下進行貌踏。

格式 屬性=屬性值? cookie不會覆蓋? cookie有過期時間 如果不設(shè)置 過期時間為瀏覽器關(guān)閉

1.同源：協(xié)議相同（http? https[HTTP+SSL/TLS]? htp），端口相同窟勃，域名相同

定時器：setTimeOut(function(){},time);

setInterval(function(){},time)

cookie、localstorag逗堵、seccionstorage

cookie:會在請求時發(fā)送給服務(wù)端秉氧，服務(wù)端可以修改

有效期：在設(shè)置的時間內(nèi)有效

可以同源共享，但要符合規(guī)則

不超過4KB蜒秤，單個服務(wù)器不超過20個汁咏，單個瀏覽器不超過300個

localstorage：可以同源共享

有效期：不刪除永遠不會過期

seccionstorage：不可以同源共享

有效期：瀏覽器關(guān)閉就失效了

var students=["張三","李四","王五"];

students.forEach(function (eachName, index) {

console.log(index+1+":"+eachName)

}); //1:張三

//2:李四

//3:王五

js預(yù)解析（只發(fā)生在當前作用域下）：先解析變量亚斋、方法、參數(shù)攘滩，在預(yù)解析時會忽略所有的判斷

DOM：

BOM：核心window帅刊，瀏覽器解

變量：可以變化的量，在預(yù)解析時提前聲明漂问，不會同時定義

常量： 在預(yù)解析時提前聲明赖瞒，同時定義

作用域鏈：一個函數(shù)執(zhí)行的時候形成一個私有的作用域，如果有形參的話蚤假，先給形參賦值栏饮，然后再進行私有作用域的預(yù)解析

在全局作用域下不用var會報錯

ES6之前是沒有塊級作用域的概念的

回調(diào)函數(shù)的使用場景：

資源加載、ajax磷仰、DOM事件袍嬉、定時器、node.js