都HTML5面試題（含答案）

今天為大家帶來了一份意向不到的干貨大禮，那就是HTML5面試題及相關題目的答案，是不是很驚喜，是不是很意外，還等什么，一起學起來吧。H5/web前端開發學習交流群109559647

1、文字超出顯示為省略號

[css] view plain copy print?

//單行：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

2、div垂直居中

[html] view plain copy print?

position: absolute;

top: 50%;

left: 50%;

background-color: #000;

-webkit-transform: translateX(-50%) translateY(-50%);

3、瀏覽器加載過程

瀏覽器接收到html代碼，可能是一份完整的文檔，也可能是一個chunk，即開始解析。解析過程是先構建dom樹，再根據dom樹構建渲染樹，渲染樹根據渲染樹就會繪制到瀏覽器上。構建dom樹的過程即根據html代碼自上而下構建dom樹，當遇到script文件加載/執行會阻塞后面dom樹的構建(javascript可能會改變dom樹)，而遇到css文件則會阻塞渲染樹的構建，即dom樹依然繼續構建(除非遇到script標簽并且css文件依舊未加載完成)，但不會渲染繪制到頁面上。而無論哪個阻塞，該加載的文件還是會加載，例如html文檔中的其他css/js/圖片文件。至于javascript被加載后就會被執行，執行的過程也阻塞樹的構建。是執行完了才解析其他內容，而不是執行完了才加載其他內容。

4、http請求過程

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接后發起http請求

d. 服務器端響應http請求，瀏覽器得到html代碼

e. 瀏覽器解析html代碼，并請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

5、sessionStorage和localStorage的區別，以及cookes和web storage的區別

sessionStorage用于本地存儲一個會話(session)中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

6、web storage和cookie的區別

Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。

7、Ajax請求的原理?

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.

(2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

8、原型、原型鏈

每個函數都有一個prototype(原型)屬性;對象是沒有原型的 ，但是有_proto_(原型鏈)，指向父級函數的原型。

9、事件委托、事件冒泡、事件捕獲

一個div里面有個span元素 ，當鼠標單擊span時，這個事件算是誰的?div還是span?

事件冒泡： IE認為，這個事件首先觸發span,然后依次往父節點傳遞，最終傳遞到document，(這個過程稱為冒泡)

事件捕獲：網景瀏覽器認為，任何事件都首先觸發document，然后依次往下傳遞到span元素，(這個過程稱為捕獲)

事件委托：根據事件冒泡機制，任何事件都會冒泡到document，事件委托就是把所有事件處理函數綁定到document，根據事件參數判斷事件源對象，判斷不同的對象給予不同的處理函數，

10、跨域

a: josnp (最常用一種方式 ，耗時最短，最有效)是通過get請求

簡單來說就是利用jsonp動態添加一個script標簽，而script標簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議了

b :服務器設置響應頭

http://localhost:8080 發起ajax請求

接口所在服務器http://localhost:8090

“Access-Control-Allow Origin”，“http://localhost:8090”

c : 服務器重定向(代理)

http://localhost:8080 發起ajax請求

本地服務器接口 http://localhost:8080做一個代理接口，后端調后端 繞過安全協議

都前端學習路線：前端開發基礎

作為一名傳統C/C++碼農，在互聯網時代的今天，不得不學習一些web開發技術，在自學前端開發的過程中，也親身實踐了兩個項目，從基礎編碼到學會使用框架，收獲甚多。

在決定開發Yue虛擬化平臺時候，自己買了幾本HTML5，CSS，JavaScript相關的基礎書籍，開始自學之旅，在對前端開發流程有了初步認識后，就開始研發自己的項目。在研發過程中，大量的查閱文檔資料，最終歷時5個月，才將項目完成。那時候，每天晚上下班到家后，自己坐在書房里就開始編碼，經常熬到后半夜，卻也異常的興奮，因為從事開發多年，當家里人再問我碼農是做什么的時候，終于可以拿出直觀的東西了。

必定前端開發接觸的少，也不是工作的主要部分，完全是因為興趣，因此，平時開發前端機會也比較少，對于自己經常用到的模塊，還是需要總結一下，下次可以直接引用。

javascript基礎

數據類型轉換

1.json->stringJSON.stringify(obj)2.string->json或objvar obj=eval("(" + jsonstr + ")”);3.obj->strobj.toString()4.number->strString(num)5.str->numberparseInt(str)

獲取對象(即：操作元素節點，nodeType值為1)

文本節點就是文本內容

標題

，h1本身就是一個元素節點var obj=document.getElementById("obj_id”) #通過HTML元素的ID屬性直接定位，返回一個具體對象var objs=document.getElementByName(“objs_name”) #通過HTML元素的name屬性定位，返回一個數組var objs=document.getElementTagName(“tagname”) #通過HTML元素標簽名稱定位，如：tagname是label，input，div等，返回一個數其他方法IE不支持，不建議使用，如：getElementByClass

操作元素的屬性(即：操作屬性節點，nodeType值2)

文本節點就是文本內容

標題

，id,name,class就是屬性節點1.部分屬性可以通過node.id的方式訪問屬性節點2.通過dom方法var node=elem.getAttributeNode(“attir_name”) #獲取屬性節點，然后操作：node.nodeName，node.nodeValuevar node=elem.getAttribute(“attr_name”) #IE不支持，不建議使用

JS操作文本(即：操作文本節點，nodeType值3)

文本節點就是文本內容

標題

，”標題”兩個字就是文本節點步驟：獲取元素節點—>獲取元素節點的子節點方法：node.firstChild.nodeValue方式讀寫文本節點其實文本節點可以歸類為元素節點的子節點

新建一個完整的元素節點(包括屬性節點和文本節點)

var newElem=document.createElement(“h1”) //創建一個h1元素節點給元素添加屬性節點有2種方法：var newAttr=document.creaetAttribute(“id”) //創建id屬性節點newElem.setAttributeNode(newAttr) //將屬性節點附加到元素節點或newElem.setAttribute(“id”, “abc”) //直接給元素添加屬性節點給元素添加文本節：newElem.createTextNode(“這是標題”)

將一個元素節點添加到父節點

var newElem=document.createElement(“h1”)parentElem.appendChild(newElem)

將一個元素的子節點替換

var element=element.replaceChild(newChild, oldChild)

將一個元素在父節點刪除

var parent=document.getElementById(“parent”)var child=document.getElementById(“child”)parent.removeChild(child)

js處理按鈕事件

document.getElementById(“btn”).onclick=function_name;function function_name(){ //do sth}

js操作select下拉菜單

var selected=document.getElementById("select_id”)1.獲取選項值var index=selected.selectedIndex;var value=selected.options[index].value;2.添加新的optionselected.add(new Option(“新選項"))

js操作input文本框

var value=document.getElementsById("input_id").value;

js操作單選按鈕

var radioBtns=document.getElementByClass(“class_radio”)var i=0;for( i in radioBtns){ if(radioBtns.checked){//checked是布爾值 //do sth }}

js操作復選按鈕

document.getElementById('identify').checked //返回值為布爾值

置灰操作

document.getElementById("id").setAttribute("disabled", "disabled");

js操作css樣式

document.getElementById(“id”).style.color=“#FF0000”

js獲取URL參數(2種方法)

方法1：

function getQueryString(name) { var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r=window.location.search.substr(1).match(reg); if (r !=null) return unescape(r[2]); return null; }

方法2：

function GetRequest() { var url=location.search; //獲取url中"?"符后的字串 var theRequest=new Object(); if (url.indexOf("?") !=-1) { var str=url.substr(1); strs=str.split("&"); for (var i=0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; }

使用方法：

var hostname=getQueryString("hostname"); alert(hostname) var port=getQueryString("port"); alert(port) var password=getQueryString("password"); alert(password) var para=GetRequest(); alert(JSON.stringify(para))

js打開新的窗口

window.open(url, name, paras)函數，例如：window.open('url.html?hostname=1.1.1.1&port=1234')

傳統ajax與jQuery發送HTTP請求的方法

傳統Ajax方式：

function ajax(url, fnSucc, fnFaild){ //1.創建對象 var oAjax=null; if(window.XMLHttpRequest){ oAjax=new XMLHttpRequest(); }else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務器 oAjax.open('GET', url, true); //open(方法, url, 是否異步) //3.發送請求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange=function(){ //OnReadyStateChange事件 if(oAjax.readyState==4){ //4為完成 if(oAjax.status==200){ //200為成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } };}

jQuery方式：

$.ajax({ url: “/xxx”, //URL method: “GET/POST/PUT/DELETE”, //HTTP請求類型 async: false, //同步為false，異步為true或默認不寫 data: JSON.stringify(jsondata), //POST、PUT、DELETE才有 dataType: "json”, //返回數據類型 beforeSend: function (request) { //發送前做什么處理 request.setRequestHeader('X-CSRFToken', getCookie("csrftoken")) }, success: function (result) { //返回結果處理 //alert(JSON.stringify(result)) } });$.get({ url: "static/html/checkenv.html”, //發送請求的URL地址. data: "", //(可選參數) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中 dataType: "json”, //返回數據類型 success: function (result, textStatus, jqXHR) {//返回結果處理 document.getElementById("mainsession").innerHTML=result; } });$.post({ url: "/api/xxx”, //發送請求的URL地址. data: JSON.stringify(jsondata), //(可選參數) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示 ddataType: "json”, //返回數據類型 success: function (result, textStatus, jqXHR) { document.getElementById("mainsession").innerHTML=result; } });

區別：

1.$.ajax可以控制同步，異步請求，而$.get和$.post都是異步

2.$.ajax可以發送前做預處理，而$.get和$.post都不行

其他還有：

load( url, [data], [callback] )

getJSON(url,[data],[callback])

jquery的便利

可以通過jQuery快速實現對HTML-DOC的快速處理。

id選擇器$(“#id”).click(function (){ //do sth});類選擇器$(“.class”).click(function (){ //do sth});

此外，有些操作js無法實現，或實現起來比較復雜，需要用到jquery，遍歷json對象：$.each()方法 或 $.map()方法

CSS3與Bootstrap

傳統的CSS需要自己完成大量樣式的編寫，而bootstrap是一個基于css編寫的強大樣式庫，在引用的時候，只需要對HTML元素的class屬性中直接引用就可以了。

基本CSS概念方法：

選擇器原則：盡量使用ID選擇器和class選擇器

ID選擇器#id{ //some style}類選擇去.class{ /some style}

其他情況均根據以上兩類去復合

布局：

默認每個元素占用一行如果想讓兩個元素在同一行，使用float屬性如果想清除float屬性，使用clear屬性盡量使用相對布局，即：子元素相對于父元素的位置，position屬性設置為relative每個元素都有盒模型，設置margin、border、padding屬性

定位：

HTML元素的位置，position屬性position:relative;相對定位，相對參照物就是他原來的位置，使用相對定位移動div時候，會覆蓋其他divposition:absolute;絕對定位，相對于瀏覽器窗口，已經脫離文檔流。一般彈出窗口會這么用(設置了z-index屬性)

層級關系(圖層關系)：

HTML元素顯示出圖層關系，使用z-index屬性，值越大越在上層。z-index值越大，越在最上層

超出邊界如何處理：

如果瀏覽器窗口改變，overflow屬性，值可以是：visable，hidden，scroll，auto，insert

?著作權歸作者所有：來自51CTO博客作者Lee_1985的原創作品