整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
都HTML5面試題（含答案）
今天為大家?guī)砹艘环菀庀虿坏降母韶洿蠖Y，那就是HTML5面試題及相關(guān)題目的答案，是不是很驚喜，是不是很意外，還等什么，一起學(xué)起來吧。H5/web前端開發(fā)學(xué)習(xí)交流群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代碼，可能是一份完整的文檔，也可能是一個(gè)chunk，即開始解析。解析過程是先構(gòu)建dom樹，再根據(jù)dom樹構(gòu)建渲染樹，渲染樹根據(jù)渲染樹就會繪制到瀏覽器上。構(gòu)建dom樹的過程即根據(jù)html代碼自上而下構(gòu)建dom樹，當(dāng)遇到script文件加載/執(zhí)行會阻塞后面dom樹的構(gòu)建(javascript可能會改變dom樹)，而遇到css文件則會阻塞渲染樹的構(gòu)建，即dom樹依然繼續(xù)構(gòu)建(除非遇到script標(biāo)簽并且css文件依舊未加載完成)，但不會渲染繪制到頁面上。而無論哪個(gè)阻塞，該加載的文件還是會加載，例如html文檔中的其他css/js/圖片文件。至于javascript被加載后就會被執(zhí)行，執(zhí)行的過程也阻塞樹的構(gòu)建。是執(zhí)行完了才解析其他內(nèi)容，而不是執(zhí)行完了才加載其他內(nèi)容。
4、http請求過程
a. 域名解析
b. 發(fā)起TCP的3次握手
c. 建立TCP連接后發(fā)起http請求
d. 服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼
e. 瀏覽器解析html代碼，并請求html代碼中的資源
f. 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶
5、sessionStorage和localStorage的區(qū)別，以及cookes和web storage的區(qū)別
sessionStorage用于本地存儲一個(gè)會話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
6、web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請求一個(gè)新的頁面的時(shí)候Cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
7、Ajax請求的原理?
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象.
(2)創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù)
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新
8、原型、原型鏈
每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性;對象是沒有原型的 ，但是有_proto_(原型鏈)，指向父級函數(shù)的原型。
9、事件委托、事件冒泡、事件捕獲
一個(gè)div里面有個(gè)span元素 ，當(dāng)鼠標(biāo)單擊span時(shí)，這個(gè)事件算是誰的?div還是span?
事件冒泡： IE認(rèn)為，這個(gè)事件首先觸發(fā)span,然后依次往父節(jié)點(diǎn)傳遞，最終傳遞到document，(這個(gè)過程稱為冒泡)
事件捕獲：網(wǎng)景瀏覽器認(rèn)為，任何事件都首先觸發(fā)document，然后依次往下傳遞到span元素，(這個(gè)過程稱為捕獲)
事件委托：根據(jù)事件冒泡機(jī)制，任何事件都會冒泡到document，事件委托就是把所有事件處理函數(shù)綁定到document，根據(jù)事件參數(shù)判斷事件源對象，判斷不同的對象給予不同的處理函數(shù)，
10、跨域
a: josnp (最常用一種方式 ，耗時(shí)最短，最有效)是通過get請求
簡單來說就是利用jsonp動(dòng)態(tài)添加一個(gè)script標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議了
b :服務(wù)器設(shè)置響應(yīng)頭
http://localhost:8080 發(fā)起ajax請求
接口所在服務(wù)器http://localhost:8090
“Access-Control-Allow Origin”，“http://localhost:8090”
c : 服務(wù)器重定向(代理)
http://localhost:8080 發(fā)起ajax請求
本地服務(wù)器接口 http://localhost:8080做一個(gè)代理接口，后端調(diào)后端 繞過安全協(xié)議
↓↓↓
1
四川師范大學(xué)
●
2
成都理工大學(xué)
●
此外
中國科學(xué)院成都生物研究所
中科院成都信息技術(shù)股份有限公司
四川大學(xué)華西天府醫(yī)院
也在對外招人
超多崗位，快一起來看
↓↓↓
3
中國科學(xué)院成都生物研究所
●
編制內(nèi)科研崗位
博士后/特別研究助理
聯(lián)系人
楊顏嘉 028-82890956
4
中科院成都信息技術(shù)股份有限公司
●
Java開發(fā)工程師
項(xiàng)目實(shí)施工程師
業(yè)務(wù)開發(fā)工程師
前端開發(fā)工程師
測試開發(fā)工程師
C++開發(fā)工程師
初級AI圖像算法工程師
項(xiàng)目運(yùn)維工程師
產(chǎn)品經(jīng)理
聯(lián)系方式
聯(lián)系人：鄒老師
5
四川大學(xué)華西天府醫(yī)院●
醫(yī)院感染管理專職人員
住培學(xué)員和進(jìn)修學(xué)員管理崗
人事大數(shù)據(jù)管理崗
一大波好工作來襲
有你心儀的嗎？
轉(zhuǎn)發(fā)周知
快快告訴正在找工作的TA
都前端學(xué)習(xí)路線：前端開發(fā)基礎(chǔ)
作為一名傳統(tǒng)C/C++碼農(nóng)，在互聯(lián)網(wǎng)時(shí)代的今天，不得不學(xué)習(xí)一些web開發(fā)技術(shù)，在自學(xué)前端開發(fā)的過程中，也親身實(shí)踐了兩個(gè)項(xiàng)目，從基礎(chǔ)編碼到學(xué)會使用框架，收獲甚多。
在決定開發(fā)Yue虛擬化平臺時(shí)候，自己買了幾本HTML5，CSS，JavaScript相關(guān)的基礎(chǔ)書籍，開始自學(xué)之旅，在對前端開發(fā)流程有了初步認(rèn)識后，就開始研發(fā)自己的項(xiàng)目。在研發(fā)過程中，大量的查閱文檔資料，最終歷時(shí)5個(gè)月，才將項(xiàng)目完成。那時(shí)候，每天晚上下班到家后，自己坐在書房里就開始編碼，經(jīng)常熬到后半夜，卻也異常的興奮，因?yàn)閺氖麻_發(fā)多年，當(dāng)家里人再問我碼農(nóng)是做什么的時(shí)候，終于可以拿出直觀的東西了。
必定前端開發(fā)接觸的少，也不是工作的主要部分，完全是因?yàn)榕d趣，因此，平時(shí)開發(fā)前端機(jī)會也比較少，對于自己經(jīng)常用到的模塊，還是需要總結(jié)一下，下次可以直接引用。
javascript基礎(chǔ)
數(shù)據(jù)類型轉(zhuǎn)換
1.json->stringJSON.stringify(obj)2.string->json或objvar obj=eval("(" + jsonstr + ")”);3.obj->strobj.toString()4.number->strString(num)5.str->numberparseInt(str)
獲取對象(即：操作元素節(jié)點(diǎn)，nodeType值為1)
文本節(jié)點(diǎn)就是文本內(nèi)容
標(biāo)題
，h1本身就是一個(gè)元素節(jié)點(diǎn)var obj=document.getElementById("obj_id”) #通過HTML元素的ID屬性直接定位，返回一個(gè)具體對象var objs=document.getElementByName(“objs_name”) #通過HTML元素的name屬性定位，返回一個(gè)數(shù)組var objs=document.getElementTagName(“tagname”) #通過HTML元素標(biāo)簽名稱定位，如：tagname是label，input，div等，返回一個(gè)數(shù)其他方法IE不支持，不建議使用，如：getElementByClass
操作元素的屬性(即：操作屬性節(jié)點(diǎn)，nodeType值2)
文本節(jié)點(diǎn)就是文本內(nèi)容
標(biāo)題
，id,name,class就是屬性節(jié)點(diǎn)1.部分屬性可以通過node.id的方式訪問屬性節(jié)點(diǎn)2.通過dom方法var node=elem.getAttributeNode(“attir_name”) #獲取屬性節(jié)點(diǎn)，然后操作：node.nodeName，node.nodeValuevar node=elem.getAttribute(“attr_name”) #IE不支持，不建議使用
JS操作文本(即：操作文本節(jié)點(diǎn)，nodeType值3)
文本節(jié)點(diǎn)就是文本內(nèi)容
標(biāo)題
，”標(biāo)題”兩個(gè)字就是文本節(jié)點(diǎn)步驟：獲取元素節(jié)點(diǎn)—>獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)方法：node.firstChild.nodeValue方式讀寫文本節(jié)點(diǎn)其實(shí)文本節(jié)點(diǎn)可以歸類為元素節(jié)點(diǎn)的子節(jié)點(diǎn)
新建一個(gè)完整的元素節(jié)點(diǎn)(包括屬性節(jié)點(diǎn)和文本節(jié)點(diǎn))
var newElem=document.createElement(“h1”) //創(chuàng)建一個(gè)h1元素節(jié)點(diǎn)給元素添加屬性節(jié)點(diǎn)有2種方法：var newAttr=document.creaetAttribute(“id”) //創(chuàng)建id屬性節(jié)點(diǎn)newElem.setAttributeNode(newAttr) //將屬性節(jié)點(diǎn)附加到元素節(jié)點(diǎn)或newElem.setAttribute(“id”, “abc”) //直接給元素添加屬性節(jié)點(diǎn)給元素添加文本節(jié)：newElem.createTextNode(“這是標(biāo)題”)
將一個(gè)元素節(jié)點(diǎn)添加到父節(jié)點(diǎn)
var newElem=document.createElement(“h1”)parentElem.appendChild(newElem)
將一個(gè)元素的子節(jié)點(diǎn)替換
var element=element.replaceChild(newChild, oldChild)
將一個(gè)元素在父節(jié)點(diǎn)刪除
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.獲取選項(xiàng)值var index=selected.selectedIndex;var value=selected.options[index].value;2.添加新的optionselected.add(new Option(“新選項(xiàng)"))
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操作復(fù)選按鈕
document.getElementById('identify').checked //返回值為布爾值
置灰操作
document.getElementById("id").setAttribute("disabled", "disabled");
js操作css樣式
document.getElementById(“id”).style.color=“#FF0000”
js獲取URL參數(shù)(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)函數(shù)，例如：window.open('url.html?hostname=1.1.1.1&port=1234')
傳統(tǒng)ajax與jQuery發(fā)送HTTP請求的方法
傳統(tǒng)Ajax方式：
function ajax(url, fnSucc, fnFaild){ //1.創(chuàng)建對象 var oAjax=null; if(window.XMLHttpRequest){ oAjax=new XMLHttpRequest(); }else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務(wù)器 oAjax.open('GET', url, true); //open(方法, url, 是否異步) //3.發(fā)送請求 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或默認(rèn)不寫 data: JSON.stringify(jsondata), //POST、PUT、DELETE才有 dataType: "json”, //返回?cái)?shù)據(jù)類型 beforeSend: function (request) { //發(fā)送前做什么處理 request.setRequestHeader('X-CSRFToken', getCookie("csrftoken")) }, success: function (result) { //返回結(jié)果處理 //alert(JSON.stringify(result)) } });$.get({ url: "static/html/checkenv.html”, //發(fā)送請求的URL地址. data: "", //(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中 dataType: "json”, //返回?cái)?shù)據(jù)類型 success: function (result, textStatus, jqXHR) {//返回結(jié)果處理 document.getElementById("mainsession").innerHTML=result; } });$.post({ url: "/api/xxx”, //發(fā)送請求的URL地址. data: JSON.stringify(jsondata), //(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示 ddataType: "json”, //返回?cái)?shù)據(jù)類型 success: function (result, textStatus, jqXHR) { document.getElementById("mainsession").innerHTML=result; } });
區(qū)別：
1.$.ajax可以控制同步，異步請求，而$.get和$.post都是異步
2.$.ajax可以發(fā)送前做預(yù)處理，而$.get和$.post都不行
其他還有：
load( url, [data], [callback] )
getJSON(url,[data],[callback])
jquery的便利
可以通過jQuery快速實(shí)現(xiàn)對HTML-DOC的快速處理。
id選擇器$(“#id”).click(function (){ //do sth});類選擇器$(“.class”).click(function (){ //do sth});
此外，有些操作js無法實(shí)現(xiàn)，或?qū)崿F(xiàn)起來比較復(fù)雜，需要用到j(luò)query，遍歷json對象：$.each()方法 或 $.map()方法
CSS3與Bootstrap
傳統(tǒng)的CSS需要自己完成大量樣式的編寫，而bootstrap是一個(gè)基于css編寫的強(qiáng)大樣式庫，在引用的時(shí)候，只需要對HTML元素的class屬性中直接引用就可以了。
基本CSS概念方法：
選擇器原則：盡量使用ID選擇器和class選擇器
ID選擇器#id{ //some style}類選擇去.class{ /some style}
其他情況均根據(jù)以上兩類去復(fù)合
布局：
默認(rèn)每個(gè)元素占用一行如果想讓兩個(gè)元素在同一行，使用float屬性如果想清除float屬性，使用clear屬性盡量使用相對布局，即：子元素相對于父元素的位置，position屬性設(shè)置為relative每個(gè)元素都有盒模型，設(shè)置margin、border、padding屬性
定位：
HTML元素的位置，position屬性position:relative;相對定位，相對參照物就是他原來的位置，使用相對定位移動(dòng)div時(shí)候，會覆蓋其他divposition:absolute;絕對定位，相對于瀏覽器窗口，已經(jīng)脫離文檔流。一般彈出窗口會這么用(設(shè)置了z-index屬性)
層級關(guān)系(圖層關(guān)系)：
HTML元素顯示出圖層關(guān)系，使用z-index屬性，值越大越在上層。z-index值越大，越在最上層
超出邊界如何處理：
如果瀏覽器窗口改變，overflow屬性，值可以是：visable，hidden，scroll，auto，insert
?著作權(quán)歸作者所有：來自51CTO博客作者Lee_1985的原創(chuàng)作品
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
