摘要:復(fù)習(xí)整理有什么新特性新增語(yǔ)義化標(biāo)簽等新增用于繪畫的元素用于媒介回放的和元素本地緩存有更好支持和是什么,文檔是什么是用來描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言,文檔也被成為網(wǎng)頁(yè),它包含標(biāo)簽和純文本是什么它不是標(biāo)簽,它為瀏覽器提供一種信息聲明,告訴瀏覽器
復(fù)習(xí)整理 html 1.html5有什么新特性?
新增語(yǔ)義化標(biāo)簽、等
? 新增用于繪畫的
? 用于媒介回放的video和audio元素
? 本地緩存有更好支持(localStorage和sessionStorage)
2.html是什么,html文檔是什么?html是用來描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言,html文檔也被成為網(wǎng)頁(yè),它包含html標(biāo)簽和純文本
3.是什么?它不是html標(biāo)簽,它為瀏覽器提供一種信息聲明,告訴瀏覽器html是用什么版本編寫的,用來表示html的版本
4.html文檔的類型有html、html+、html2.0、html、3.2、html4.01、xhtml 1.0、html5等
css 1.簡(jiǎn)述flex布局flex布局:彈性布局,設(shè)置間距相同的布局、單行單列布局的時(shí)候相當(dāng)好用
display可以設(shè)置為flex、inline-flex。
設(shè)置display:flex的時(shí)候,子元素的float、clear、vertical-align屬性都將全部失效。
容器屬性:
flex-direction設(shè)置主軸的排列方向,有 row(豎直向下排列)、row-reverse(豎直向上排列)、column(垂直向右排列)、column-reverse(垂直向左排列)
flex-wrap 設(shè)置是否排列在一條線上,有nowrap、wrap和warp-reverse三個(gè)選項(xiàng)
flex-flow是flex-direction和flex-wrap的簡(jiǎn)寫
justify-content定義項(xiàng)目在主軸上的對(duì)齊方式有 flex-start | flex-end | center | space-between | space-around
align-items定義交叉軸的對(duì)齊方式 flex-start | flex-end | center | baseline | stretch
align-content定義多跟軸線的對(duì)齊方式
項(xiàng)目屬性:
align-self(改項(xiàng)目的對(duì)齊方式)
order (項(xiàng)目排列順序)
flex-grow(項(xiàng)目放大比例)
flex-shrink(項(xiàng)目縮小比例)
flex-basis(在分配多余空間時(shí),項(xiàng)目占據(jù)的主軸空間)
flex(flex-grow,flex-shrink,flex-basis的縮寫)
2. 簡(jiǎn)述grid布局? 網(wǎng)格布局
3. 幾種實(shí)現(xiàn)水平垂直居中的方法使用display:flex,justify-content:center,align-item: center實(shí)現(xiàn)
確定高寬情況下
.test {
position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; },或者 .test { position: absolute; margin:auto; left:50%; top:50%; margin-top: -height/50; margin-left: -width/50; },
不確定高寬
.test {
position: absolute; margin:auto; left:50%; top:50%; transform: translate(-50%,-50%) },4. 常見塊級(jí)元素和內(nèi)聯(lián)元素
塊級(jí)元素: div、form、table、p、h1-h6、dl、li、ul、ol等
內(nèi)聯(lián)元素: a、strong、br、img、i、span、label、input、textarea、select等
? absolute(絕對(duì)定位,相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位)
relative(相對(duì)定位,相對(duì)于其正常位置進(jìn)行定位) fixed(相對(duì)于瀏覽器窗口進(jìn)行定位) static(默認(rèn)值,沒有定位,元素出現(xiàn)在正常的流中) inherit(繼承父元素position屬性的值) sticky(relative和fixed的結(jié)合體,當(dāng)元素在屏幕內(nèi)飾relative,滾出屏幕時(shí)顯示為fixed)6. css3的新屬性
1. transfrom(對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜)、animation(動(dòng)畫效果)和transition(添加過渡效 果) 2. 三個(gè)邊框效果: border-radius(創(chuàng)建圓角邊框)、border-shadow(陰影)、border-image(使用圖片繪制邊框) 3. 文字效果新增word-wrap、text-overflow和text-shadow,以上等等7.block、inline和inline-block的區(qū)別
display:block
block元素又叫做塊級(jí)元素,它獨(dú)占一行,多個(gè)block元素各占一行。默認(rèn)情況下block元素 寬度自動(dòng)填滿父元素寬度
可以設(shè)置weight和width屬性,塊級(jí)元素設(shè)置了width還是獨(dú)占一行
可以設(shè)置padding和margin屬性
display:inline
1.inline元素又叫內(nèi)聯(lián)元素,不會(huì)占一行,多個(gè)內(nèi)聯(lián)元素會(huì)排列在一行,一行排列不下去才會(huì) 行,,寬度隨元素的內(nèi)容變化
2.設(shè)置width和weight屬性無效
3.inline元素的margin和padding屬性,水平方向上都能產(chǎn)生邊距效果,豎直方向上不會(huì)產(chǎn)生 效果
display: inline-block
內(nèi)聯(lián)塊級(jí)元素?fù)碛衖nline元素的多個(gè)占據(jù)同行特性和block元素的設(shè)置高度寬度特性和設(shè)置 padding和margin特性
8. display:none和visiblity:hidden的區(qū)別? 為none的時(shí)候不占空間,為hidden的時(shí)候隱藏元素依然占據(jù)空間
? 為none的會(huì)產(chǎn)生回流和重繪,visiblity:hidden的時(shí)候只產(chǎn)生重繪
? visiblity:hidden的子孫元素設(shè)置visiblity:hidden時(shí)會(huì)失效
9. 什么是BFC, BFC用來解決什么問題格式化上下文:特點(diǎn)是內(nèi)部的子元素不會(huì)影響外部的元素,可以用來解決margin穿透和清除浮動(dòng)
一個(gè)塊格式化上下文由以下之一創(chuàng)建:
1)根元素或其它包含它的元素 2)浮動(dòng)元素 (元素的 float 不是 none) 3)絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed) 4)內(nèi)聯(lián)塊 (元素具有 display: inline-block) 5)表格單元格 (元素具有 display: table-cell,HTML表格單元格默認(rèn)屬性) 6)表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性) 7)具有overflow 且值不是 visible 的塊元素, 8)display: flow-root 9)column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文,即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。10.盒子模型有哪些,如何設(shè)置
iE盒子模型: 內(nèi)容(content+padding+border)+邊界margin 高寬包含padding和border
標(biāo)準(zhǔn)盒子模型: content+padding+border+邊界margin 高寬指的是content
通過box-sizing:content-box設(shè)置標(biāo)準(zhǔn)盒子模型,box-sizing:border-box設(shè)置ie盒子模型
11.css選擇器有哪些選擇器有id選擇器、元素選擇器、屬性選擇器、類選擇器、后代選擇器、子元素選擇器、相鄰兄弟選擇器、偽類和偽元素。
12.清除浮動(dòng)的四種方式在浮動(dòng)的元素樣式中加入clear:both
在浮動(dòng)元素下面插入清除浮動(dòng)的塊級(jí)元素
給浮動(dòng)元素設(shè)置偽類,偽類樣式設(shè)置display為block,clear:both
設(shè)置BFC(格式化上下文),如浮動(dòng)父元素設(shè)置overflow:auto
13.如何用css實(shí)現(xiàn)一個(gè)三角形? 定義一個(gè)div元素,讓它的內(nèi)容高寬為0,通過border來實(shí)現(xiàn)
div { width: 0; height: 0; border: 40px solid; border-color: transparent transparent red; }
以上css樣式通過設(shè)置底部border邊為紅色,其他邊為透明色,實(shí)現(xiàn)了一個(gè)底部寬40,高20的紅色的三角形
js 1. addEventListener的第三個(gè)參數(shù)的作用指定事件是否在捕獲或者冒泡階段執(zhí)行,true為在捕獲階段執(zhí)行,false默認(rèn),在冒泡階段執(zhí)行
2.什么是事件冒泡,什么是事件捕獲事件冒泡指事件從發(fā)生的目標(biāo)開始,沿著文檔逐層向上冒泡,到documnent為止,事件捕獲則相反,從documnet開始,沿著文檔向下,直到目標(biāo)事件為止,
3.如何阻止事件冒泡和事件捕獲ie下設(shè)置e.cancelBubble = true,在符合w3c的瀏覽器設(shè)置e.stopProgation()阻止事件冒泡,也可以通過preventDefault阻止默認(rèn)行為,因?yàn)槭录幚淼哪J(rèn)行為就是冒泡或者通過return false
使用stopImmediatePropagation() 阻止事件捕獲,需要注意的是stopImmediatePropagation() 也能阻止事件冒泡,調(diào)用后,不僅父類元素冒泡被阻止,同時(shí)該元素綁定的同類事件也會(huì)執(zhí)行
4.typeof返回的數(shù)據(jù)類型string、number、boolean、undefined、object、function
5.列舉三種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換強(qiáng)制(parseInt、parseFloat、number)
隱式(== ===)
6.split() join()區(qū)別前者將字符串切割成數(shù)組形式,后者將數(shù)組轉(zhuǎn)為字符串
7. ajax請(qǐng)求get和post方法的區(qū)別get主要是獲取資源,post請(qǐng)求服務(wù)器端資源
get傳輸數(shù)據(jù)通過url,post通過http的post機(jī)制,將要傳輸?shù)臄?shù)據(jù)放在請(qǐng)求實(shí)體中發(fā)送給服務(wù)器
get傳輸數(shù)據(jù)量小,post傳輸數(shù)據(jù)量大
get不安全,post安全性較高
get只能支持ASCII字符傳輸,傳遞中午字符會(huì)亂打;post支持標(biāo)準(zhǔn)字符集,可以傳遞中文字符
8.call、apply和bind的區(qū)別call和apply都可以改變this的指向,區(qū)別在于傳入apply的第二個(gè)參數(shù)是一個(gè)數(shù)組,call后面是對(duì)象
bind后面的參數(shù)也是對(duì)象,但是bind不會(huì)立即執(zhí)行
9.ajax請(qǐng)求時(shí),如何解析json數(shù)據(jù)使用JSON.parse()把json數(shù)據(jù)轉(zhuǎn)化為js對(duì)象,使用JSON.Stringify()把js對(duì)象轉(zhuǎn)化為json字符串
10.閉包是什么,有什么特性閉包就是能夠讀取函數(shù)內(nèi)部變量的函數(shù),使得函數(shù)不被GC回收,如果過多使用,就會(huì)造成內(nèi)存泄露
11.添加 刪除 替換 插入到某個(gè)節(jié)點(diǎn)的方法創(chuàng)建新節(jié)點(diǎn)
createElement() // 創(chuàng)建一個(gè)具體元素
createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
添加、移除、替換、插入
appendChild() // 添加
removeChild() // 移除
replaceChild() // 替換
insertBefore() // 插入
12.document onload和doucment ready的區(qū)別onload是在結(jié)構(gòu)和樣式、外部js及圖片加載好后執(zhí)行js,ready是在dom樹創(chuàng)建完成后就執(zhí)行,是jquery里面的方法
13.函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別函數(shù)聲明在js解析時(shí)就會(huì)進(jìn)行函數(shù)提升,因此在同一作用域中,不管函數(shù)聲明在哪定義,該函數(shù)都可以調(diào)用,函數(shù)表達(dá)式只有在執(zhí)行到那一塊后,才可以調(diào)用
14. null和undefined的區(qū)別? null表示‘空’的對(duì)象,轉(zhuǎn)化為數(shù)值是0,undefined是一個(gè)表示無的原始值,轉(zhuǎn)化為數(shù)值是NAN,
? 變量為聲明,默認(rèn)是undefined,null表示尚不存在的對(duì)象
? undefined表示為未初始化的變量返回的值,null表示一個(gè)尚不存在的對(duì)象返回的值,undefined可以看做空的變量,null看做空的對(duì)象
15. new操作符干了什么創(chuàng)建了一個(gè)空對(duì)象。
把所創(chuàng)建的空對(duì)象的_ proto _指向構(gòu)造函數(shù)的prototype
執(zhí)行構(gòu)造函數(shù)中的代碼,構(gòu)造函數(shù)中的this指向?qū)ο?/p>
返回該對(duì)象(除非構(gòu)造函數(shù)中返回一個(gè)對(duì)象或者函數(shù))
16.實(shí)現(xiàn)深度克隆JSON.parse(JSON.stringify());
17.什么是同源策略它是瀏覽器的一種約定,腳本只允許訪問同一站點(diǎn)的資源,協(xié)議相同,域名相同,端口號(hào)相同,就是同一站點(diǎn)
在瀏覽器中,