都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的原创作品