html,css,js全阶段试题分析
1.行级元素有哪些？块级元素有哪些？行级元素如何转换成块级元素？
block元素的特点：
1.总在新行开始，2.高度，行高，以及外边距，内边距都是可控的，3.宽度缺省是它容器的100%，除非设定一个宽度，4.它可以容纳内联元素和其他块元素
常见的block元素：div,dl,form,h1,h2,h3,h4,h5,h6,hr,p,ul,table,menu
inline元素的特点：
1.和其他元素都在一行上，2.高，行高以及外距和内边距不可改变，3.宽度就是它的文字或图片的宽度，不可改变，4.内联元素只能容纳文本或者其他内联元素
常见的inline元素：br,em,i,img,input,lable,span,strong,
行级元素转换成块级元素：
1.使用display
2.使用float，该行的display属性会被赋予block属性，且拥有浮动特性。
3.position,当行内元素进行定位时，position:absolut,position:fixed，都会使原先的行内元素变成块级元素。
2.请回答，CSS代码，有几种常见的引入方式，分别是什么？
1.行内式：在标记的style属性中设定CSS样式
2.内嵌式：是将CSS样式集中写在网页的<head></head>标签对应的<style></style>里。
3.导入式：将一个独立的.CSS文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，语法如下：
<style type="text/css">
@import"mystyle.css";此处需要注意.css文件的路径
导入式会在整个网页加载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大，则会出现先显示无样式页面，闪烁过后才会出现页面的样式，这也算是一个缺陷。
4.链接式
链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标签来引入外部样式表文件，使用语法如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
使用连接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果。
3.web标准指什么？（一个高效网页的体系）
4.请简化一下CSS代码
#content{
margin:0 10px;
padding:0;
background:#ffffff;
}
#content div{
margin:0 10px;
padding:0;
font-size:14px;
text-align: center;
color:#e9e9e9;
}
#nav{
margin:0 10px;
padding:0;
background:#e0e0e0;
}
简化后的结果：
#content,
#content div,
#nav{
margin:0 10px;
padding:0;
}
#content{
background:#fff;
}
#content div{
font-size:14px;
text-align:center;
color:#e9e9e9;
}
#nav{
background:#e0e0e0;
}
5.各位web前端工程师，考你们一个小常识，在很多浏览器的body都有默认的margin，这个值是多少呢？
8px
6.
body{
padding:0;
margin:0;
}
#my-defined{
width:100px;
height:100px;
padding:0 100px;
margin:10px 20px 30px 40px;
border:1px solid orange;
background:orange;
}
请回答：在这个HTML页面中，orange颜色的区域宽度是多少，range区域距离页面左边的和上边的距离分别为多少？
橙色区域的宽度是302，距离页面左边和上边的距离分别是40和10.
7.用CSS、HTML编写一个两列布局的网页，要求右侧宽度为200PX，左侧自动扩展
.left{
height:100px;
background:pink;
opacity:0.5;
margin-right:100px;
}
.right{
float:right;
height:100px;
background:yellow;
width:100px;
}
效果图：
采用的是浮动来实现两栏布局
8.如何居中一个浮动元素？（提示：
#my-defined{
position:absolute;
width:300px;
height:500px;
left: 50%;
top: 50%;
margin-top: -250px;
margin-left: -150px;
}
在上面加代码即可）
斜体代码是新增的。
9.请根据下面的HTML和CSS代码，画出布局示意图
#page{
width:520px;
}
.nav{
width:200px;
float:right;
background: orange;
}
.main{
width:200px;
float:left;
padding-left:110px;
background:black;
}
.sub{
width:100px;
float:left;
margin:10px 0 10px -100px;
}
.nav, .sub{
border:1px dashed #000;
height:300px;
background: orange;
}
.sub{
height:280px;
}
效果如图所示：
10.form表单中method属性常用哪些值？他们的区别是什么？
<form action="action_page.php" method="GET">
或者
<form action="action_page.php" method="POST">
当用户在HTML表单中输入信息并提交之后，有两种方法将信息从浏览器传送到Web服务器，一种方法是通过URL，另外一种是在HTTP Request的body中。
主要区别如下：
GET：1.URL改变，在URL里显示HTML FROM参数的name/value值，2.只适合有少量参数的HTML Form，因为URL长度有字符限制，不能无限长，3.涉及安全性的信息，比如用户密码，不能用get，因为会在URL上显示，不安全。
POST：1.URL不改变，不在URL里显示HTML Form的数据，2.Form提交的信息没有长度限制，3.涉及安全性的信息，如用户密码，应该采用POST方式。
11.如何去掉ul>li结构中li前面的圆点？去除圆点后，每个li前面会有空余怎么解决？
list-style:none;
padding:0;
margin:0;
12.写出javascript语言typeof可能返回的结果？
string number object function undefined boolean
13.已知数组
var arr = ["google"，"microsoft"，"oracle"，"阿里"，"freewheel"，"IBM"，"爱立信"，“百度”，"企鹅"，"美团"，"去哪"，"58同城"，"新浪"，“搜狐”，“大众点评“，”360“，”汽车之家“，”巨人网络“，”携程“，”同城“，”4399“，”凤凰网“，”人民网“]
如果你想进前十的公司，那就请用效率最高的方法将此数组按照顺序连接成字符。
arr.join("")
js中的join()方法用于把数组中的所有元素放入一个字符串，参数是指定要使用的分隔符，如果省略该参数，则使用逗号作为分隔符。
效率最慢的连接..应该就是var一个字符串自己for循环拼接了吧。
14.请写出Html，css，javascript注释的代码形式
html中的注释形式是：<!— —>
css中的注释形式是：/* */
js中的注释形式是：//和/**/
15.请编写一段javascript脚本生成下面这段DOM结构，要求：使用标准的DOM方法或属性。
<div class="example">
<p class="slogan">姬成，你最帅！</p>
</div>
使用标准的DOM写的话如下：
var Example = document.createElementByTagName('div');
varExample=document.createElement('div');
varP=document.createElement('p');
Example.className='example';
P.className='slogan';
Example.appendChild(P);
document.getElementsByTagName('body')[0].appendChild(Example);
16.要为一个html元素绑定一个事件，如点击事件，请写出一个兼容各个浏览器的事件绑定方法
window.onload=function() {
Main=document.getElementById('main');
if(Main.attachEvent) {
Main.attachEvent("onclick",function() {
alert('ie');
})
}else{
Main.addEventListener("click",function() {
alert('chrom');
})
}
}
17.简述call，和apply方法的用途，和区别？
改变this指向，call传递的是连续参数，apply传递的是数组参数。
18.请自己封装一个Ajax
function AJAX(json){
if(json == null || typeof(json) != "object"){
return false;}
var url = json.url,
mathod = json.method,
data = json.data,
flag = json.flag,
callback = json.callBack,
xhr = null;
if(window.XMLHttpRequest){
xhr = new window.XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
if(method == 'get'）{
url += '?' + data + new Date().getTime();
xhr.open('get',url,flag);
}else {
xhr.open('post',url,flag);
}
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200){
callBack(xhr.responseText);
}
}
if(methos == 'get') {
xhr.send();
}else {
xhr.setRequestHeader('Content-Type','application/x-www-form-urle');
xhr.send(data);
}
}
19.为一个数组去重，eg：var arr = ['a'，'b'，234，23，'a'，'b'，3，1，234]；（要求在原型链上编写方法可得满分）
Array.prototype.deletesame=function() {
var tmp=[];
for(var i = 0; i < this.length; i++)
if(tmp.length != 0) {
for(var j = 0;j < tmp.length; j++)
if(tmp[j] == this[i]) {
break;
}
if(j == tmp.length - 1 && tmp[j] != this[i]) {
tmp.push(this[i]);
}
}
}else{
tmp.push(this[i]);
}
}
return tmp;
}
20.如今有一个Ul，里面有十亿个Li，要求点击li触发事件，弹出对应的li的内容
var ul = document.getElementsByTagName('ul')[0];
ul.onclick=function(e) {
var event = e || window.event;
vartar = event.target || event.srcElement;
if(tar.tagName.toLowerCase()==="li")
alert(tar.innerText);
}
看到这个题，一般的思路是for循环，遍历一万次，这样的话一万次的循环，效率很低。这里就可以考虑利用事件冒泡特性来提高效率，主要是利用事件代理。
事件代理（Event Delegation），又称之为事件委托，是javascript种常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。这么做的原因呢？众所周知，dom操作是十分消耗性能的，所以重复的事件绑定简直是性能杀手，而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。
另外就是event.target和event.srcElement的区别：
首先，event.srcElement和event.target都是指向触发事件的元素，它是什么就有什么样的属性。
IE浏览器支持window.event.srcElement，而firefox支持window.event.target。
21.如何阻止事件冒泡和事件默认事件
冒泡事件：即事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。在非IE浏览器中提供了一个事件对象stopPropagation，那么在IE浏览器中可以通过cancelBubble事件对象阻止。
默认事件：浏览器的默认事件就是浏览自己的行为，比如我们在点击<a href="#">的时候，浏览器跳转到指定页面，或者是当我们滚动鼠标时页面会向下滚动，但我们按空格键和按方向键时也会向下滚动，为了更好的用户体验，这时我们就需要阻止这种行为的发生。
阻止事件冒泡：
function stopBubble(e) {
if(e && e.stopPropagation) {
e.stopPropagation();
}else {
window.event.cancelBubble = true;
}
}
阻止浏览器的默认事件：
function stopDefault(e) {
if(e && e.preventDefault) {
e.preventDefault();
}else {
window.event.returnValue = false;
}
return false;
}
22.什么是DOM？
DOM的全称是Document Object Model，是一种用于HTML和XML文档的编程接口。
23.请利用javascript取非行间样式，要求兼容性各个浏览器
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, null)[attr];
}
}
element.style和getComputedStyle都可以获取元素的CSS样式，区别在于：
1.getComputedStyle方法是只读的，只能获取不能设置，而element.style能读能写。
2.getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象，即使没有CSS代码，也会把默认的祖宗八代都显示出来；而element.style只能获取元素的style属性中的CSS样式。
getComputedStyle和currentStyle都是只能获取属性，不能更改，但是二者兼容性不同。
getComputedStyle该属性兼容火狐谷歌，但不兼容IE
currentStyle该属性兼容IE，但不兼容火狐和谷歌。
24.运行test（）和new test（）的结果是什么？
var a = 5;
function test() {
a = 0;
alert(a);
alert(this.a);
var a;
alert(a);
}
0，5，0
0，undefined，0
25.有字符串“aaabbbcccdddeeefgggaa”，转换成连续不重复的字符串，eg：abcdefga（提示：用正则做可得满分）
var reg = /(.)\1*/g;
var str = 'aaabbbcccdddeeefgggaa';
str.replace(reg,str);
26.一串连续的数字，请实现打点功能，如：已知1000000000转换成1.000.000.000。（提示：用正则做可得满分，其他方法酌情给分）
var reg = /(?=(\B)(\d{3})+$)/g;
str.replace(reg,'.');
27.写出运算结果
alert(typeof(a)); undefined
alert(typeof(undefined)); undefined
alert(typeof(NaN)); number
alert(typeof(null)); object
alert(typeof(NaN)); number
var a = "123abc";
alert(typeof(+a)); number
alert(typeof(!!a));boolean
alert(typeof(a + "")); string
alert(1 == "1"); true
alert(NaN == NaN); false
alert(NaN == undefined); false
alert("11" + 11); 1111
alert(1 === "1"); false
alert(parseInt("123abc")); 123
var num = 123123.345789;
alert(num.toFixed(3));123123.345
28.打印当前年月日时分
vardate=newDate()
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
29.在CSS中，font-size设置的是字体的高还是宽，单位px，em是相对值还是绝对值
高 ；相对
30.有HTML结构如下，求他们之间的距离。
<div style="background-color:red;margin:0 0 100px 0;">123</div>
<div style="background-color:red;margin:200px 0 0 0;">234</div>
200px
31.你了解js对象吗，可以简单说说自定义构造函数创建对象的原理吗？
var this = {} return this//隐式返回this
var this = Object.create(Person.prototype)return this;//显式返回
32.你了解原型链吗？请写出一种原型链实现继承的方式
圣杯模式
33.使用javascript深度克隆一个对象（在原型链上编写可得满分）
Array.prototype.deepCopy=function (tar){
var tar= tar|| {} ;
for (var prop in this){
if (typeof (this[prop]) == 'object'){
tar[prop] = (this[prop].constructor === Array ) ? [] : {};
this[prop].deepCopy(tar[prop]);
}else {
tar[prop] = this[prop];
}
}
return tar;
}
34.描述一下预编译的过程
1.创建AO对象。
2.寻找形参和变量声明，将变量和形参作为AO对象的属性名添加到对象中，值为undefined。值得注意的是，函数声明不叫变量。
3.将实参值和形参值相统一。
4.在函数体里面寻找函数声明，将函数名作为属性名，值为这个函数的函数体。
35.请介绍一下js语言的特点
js语言是一种解释性的单线程的脚本语言
36.请介绍一下主流浏览器以及他们相应的内核，请介绍一下浏览器分为哪几个部分，内核呢？
IE trident
Chrome webkit/blink
Safari webkit Firefox
Gecko Opera presto
浏览器器分shell和内核内核分渲染引擎和js引擎
37.你了解js时间线嘛，能简单描述一下
1.创建document。document.readyState = ‘loading’;
2.解析script(⽆无defer async)阻塞执⾏行行
3.async异步加载，加载完执⾏行行
4.defer异步加载
5.遇到img等标签，解析dom结构，然后加载src内容
6.dom解析完毕，document.readyState = ‘interactive’;
7.按顺序执⾏行行defer脚本
8.dom触发DOMContentLoaded事件，由同步脚本阶段，转变为异步事件监听阶段
9.async下载并执⾏行行完，img的src等都下载完，触发document.readyState = ‘complete’;window触发load事件
38.请写出异步加载Js的几种方案
defer async function asyncLoaded(url, callback)
{ var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState) {//IE
script.onreadystatechange = function () {
if(readyState == "loaded" || readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
}else{//Chrome Safari Opera Firefox
script.onload = function () {
callback();
}
}
script.src = url;
document.head.appendChild(script);
}
39.
var a = (10 * 3 - 4 / 2 + 1) % 2; 1
b = 3; 3
b %= a + 3; 3
console.log(a++); 2
console.log(--b);2
1 2
40.
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
使用原生的Js，addEventListener，给每个li元素绑定事件，输出他们的顺序。（）
var li=document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
li[i].addEventListener('click',function (e) {
console.log(this.innerText);
})
}
41.一个字符串由[a-z]组成，找出第一个只出现一次的字母
vars='aabbccbdcjjm';
functionfindfirst(str) {
varlist=newArray();
for(vari=0;i
for(j=i+1;j
if(str[i]==str[j]) {
if(!find(list,str[i])){
list.push(str[i]);
}
break;
}
}
if(j==str.length) {
if(!find(list,str[i]))
{
returnstr[i];
}
}
}
}
functionfind(str,tar) {
for(vari=0;i
if(str[i]==tar)
{
returntrue;//有
}
}
returnfalse;//没有
}
console.log(findfirst(s));
42.
var name = "222";
var a = {
name:"111",
say:function(){
console.log(this.name);
}
}
var fun = a.say;
fun();
a.say();
var b = {
name:"333",
say:function(fun) {
fun();
}
b.say(a.say);
b.say = a.say;
b.say();
写出控制台的打印结果
222 111 222 333
43.
var str = "你成哥很帅";
str.length = 3;
console.log(str);
此程序执行结果为？为什么？
“你成哥很帅”
字符串的长度不能修改
44.请用多种方法创建对象
第一种，简单对象的创建，使用对象字面量的方式{}，例如var Cat = {}; Cat.name = "kitty"...添加属性
第二种，用function来模拟class，new defined()；
例如：
function Pet(name, age, hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
var maidou = new Pet("麦兜",“5”,“睡觉”);//实例化来创建对象
第三种，使用工厂方式来创建，new Object(),例如：var Dog = new Object();Dog.name="white"..
第四种，使用原型对象的方式，例如：
function Dog() {
}
Dog.prototype.name = "旺财";
Dog.prototype.eat = function() {
alert(this.name + "是个吃货~");
}
第五种，混合模型（原型和构造函数），例如：
funtcion Car(name, price) {
this.name = name;
this.price = price;
}
Car.prototype.sell = function() {
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry = new Car("凯美瑞",27);
第六种，动态原型的方式，例如：
function Car(name, price) {
this.name = name;
this.price = price;
if(typeof Car.sell == "undefined"){
Car.prototype.sell = function() {
alert("我是"+this.name+",我现在卖"+this.price+“万元”);
}
Car.sell = true;
}
}
var camry = new Car("凯美瑞",27);
45.在企业中，多人开发同一js文件，常会导致污染全局变量的事情发生，为有效的解决这种情况，你有什么好的建议吗？
一、定义全局变量命名空间
只创建一个全局变量，并定义该变量为当前应用容器，把其他全局变量追加在该命名空间下。例如：
var my = {};
my.name = {
big_name:"张三",
small_name:"李四"
};
my.work = {
school_work:"study",
family_work:"we are"
};
二、利用匿名函数将脚本包裹起来，例如：
(function() {
var exp = {};//定义一个exp包
var name = "哈喽";//临时变量
exp.method = function() {//临时方法
return name;
};
window.ex = exp;//把exp包挂在window.ex下
})();
当离开了这个函数域之后，局部变量和函数被销毁，exp定义的东西通通挂到了变量window.ex下，从而减少了很多污染，避免了不必要的冲突。
46.如何枚举一个对象中的所有自然属性，请写出具体代码。
for..in循环可以遍历对象中所有可枚举的对象属性（包括对象自有属性和继承的属性），不过需要注意的是，使用for...in循环遍历对象属性时返回的属性会因为各个浏览器不同导致对象属性遍历的顺序有可能不是当初构建时的顺序。如果只需要获取对象的实例属性（跳过继承属性），可以使用hasOwnProperty()进行过滤。例如：
varDog={
name:'Taidy',
age:2,
sex:'female',
color:'white'
}
for(prop in Dog){
if(Dog.hasOwnProperty(prop))
console.log(prop);
}
ojbect.keys(),返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致，两者最大的区别在于for...in还会遍历出一个对象从其原型链上继承到的可枚举属性。例如：
varDog={
name:'Taidy',
age:2,
sex:'female',
color:'white'
}
console.log(Object.keys(Dog));
47.让一个数组里面的数据，从小到大排列，var arr = [23,4,6,7,2,2,5,55,8]
var arr = [23,4,6,7,2,2,55,8];
function number(a,b) {
return a-b;
}
arr.sort(number);
48.es5的严格模式如何使用，使用时应注意写什么。
“use strict”声明必须放在第一行
49.选择html元素节点的集中方法，以及他们各自的兼容性问题及特点
getElementById();
getElementsByName();
getElementsByClassName(); ie8及以下不兼容
getElementsByTagName();
querySelectorAll();非实时ie7及以下不兼容
querySelector();非实时ie7及以下不兼容
50.请说出，节点类型的值为1，3，8，9的值对应的节点是什么
元素节点 ，文本节点，comment节点，document节点
51.请说出，鼠标事件的触发顺序，以及如何实现右键的事件监听
onmousedown,onmouseup,click
监听mousedown，判断button==2
52.数据格式JSON转换为字符串，以及把字符串转换为JSON的方法
JSON.stringify() json — > string
JSON.parse() string — > json
53.请说出几种你所熟悉的BOM对象，并介绍其一点或两点功能
1.window对象，它表示整个浏览器窗口，主要用来操作浏览器窗口，对窗口的操作主要是对坐标的调整。常用方法有：1）相对操作：moveBy——移动，resizeBy——调整大小，2）绝对操作：moveTo，resizeTo
2.location对象，它是window对象和document对象的属性，用来分析和设置页面的URL地址。
3.navigator对象，被认为是最重要的对象，它包含了一系列浏览器信息的属性，userAgent是最常用的属性，用来完成浏览器判断。
4.screen对象，主要是用来获取用户的屏幕信息。
54.请详细说明Position定位的值有什么区别，如果有不能兼容的问题，怎么解决？
相对于谁定位
是否脱离原来的位置
fixed ie6不兼容
解决方法：用js让元素的位置
高度等于滚动条滚过的长度+屏幕高度
宽度等于屏幕宽度
55.
56.请说出你所熟悉的选择的优先级关系（写权重，满分）
！important 无穷大
style 1000
id 100
class/attr/伪类 10
标签/伪元素 1
通配符 0
57.请说出display的值及含义
block 块级 占满整行 可以改变宽高
inline 行级/内联/行内 内容决定占位，不可以改变宽高
inlie-block 行级块 内容决定占位，可以改变宽高
58.写一个输入框，带有js功能，鼠标聚集提示信息消失，失去焦点显示提示信息
<input type="text" value="请输入关键字" style="color=‘#999’" onfocuse="if(this.value == "请输入关键字") {this.value='';this.style.color='black';}" onblur="if(this.value == '') {this.value="请输入关键字";this.style.color='#999';}">
59.
function fn(a, b) {
arguments[0] = 1;
console.log(a);
}
fn(2,1);
写出打印结果，并说明原因
1，arguments和实参的值是绑定的，改变arguments里面的值实际上也是改变实参值。
60.请将如下变量名转换为小驼峰式
my-first-name ——> myFirstName
var str = "my-first-name";
答案：
var reg = /-(\w)/g
str.replace(reg, function($,$1) { return $1.toUpperCase();})
61.请将形如aaaabbbb的字符串调换成bbbbaaaa的形式（采用正则做）
var str = "aaaabbbb";
var reg = /(\w)\1*(\w)\2*/gi;
console.log(str.replace(reg,"$2$2$2$2$1$1$1$1"));
