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