前端基础(一)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000; min-height: 19.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "PingFang SC"; color: #000000 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px Helvetica; color: #000000 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "Times New Roman"; color: #000000; min-height: 18.0px }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 }
span.s1 { font: 16.0px Helvetica }
span.s2 { }
span.s3 { font: 16.0px "PingFang SC" }
span.s4 { font: 16.0px Helvetica }
span.s5 { font: 16.0px Helvetica; text-decoration: underline }
span.s6 { font: 16.0px "Times New Roman" }
span.Apple-tab-span { white-space: pre }
ol.ol1 { list-style-type: upper-alpha }

1.标签上title与alt属性的区别是什么?

title是设置鼠标移动到图片上时显示的内容,而alt是用于当图片没有正常显示时出现的提示文字,另外alt还用于在seo中针对图片的优化说明.

2.<p>标签内的文字是什么颜色的?

<style>

.classA{color:blue !important;}

.classB{color:red;}

</style>

<body>

<p class=‘classB classA’ style=‘color:green’>123</p>

</body>

答:文字是blue蓝色,! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级

3. css单位px,em,rem的区别。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

px的特点:

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

EM特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

4.DOMContentLoaded 与 OnLoad事件的区别。

onload会在html,css,js,图片等资源文件加载完成后执行里面的代码,而DOMContentLoaded则只需在html,css,js加载完成后就执行里面的代码。

5.“==”和“===”的不同。

==用于一般比较,===用于严格比较,==在比较的时候可以转换数据类型,===严格比较,只要类型不匹配就返回flase

6.JavaScript的数据类型都有哪些?

JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object,Object本质上是由一组无序的名值对组成的

7. var foo = “11” + 2 - “1”;

foo 输出的是?

typeof foo输出的是?

foo输出的是111,首先字符串11+数字2,执行字符串连接为112,而后减1,是将112执行隐式类型转换为数字112后再减1,所以最后结果是111

typeof foo,为number

8.split() join()的区别在哪?

split是将字符串分割为数组,而join是将数组中的值连接为字符串

9.数组方法pop() push() unshift() shift()的区别在哪?

pop是删除数组最后一位

push是在数组最后一位插入一个新元素

unshift是在数组开头添加一个或更多元素

shift是将数组开头的元素删除

10.JavaScript的事件流模型都有哪些?

在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.

原始事件模型简单来说就是用on+事件名的方式绑定的事件,比如onclick,onsubmit等

dom2事件模型就是通过addEventListener绑定的事件,可以通过event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为

IE模型也提供了一个event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.

事件处理函数的注册和删除是通过元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),与dom2不同的是eventType有on前缀

11.请按执行顺序写出几次alert()语句a的值:

function fn1() {

var a = 1;

function fn2() {

alert(a++);

}

return fn2;

}

var f = fn1();

f();

f();

两次:第1次1,第二次2,var f=fn1()的时候只是调用了fn1这个函数并将fn2作为返回值返回,并未执行fn2里面的内容.

在第一个f()的时候就是执行fn2里面的内容,同时因为fn2是一个闭包函数,调用了fn1中的a,所以a为1,至于a++,因为a++为后自加,先引用a,再进行自加操作,所以第一次弹出为1,而第二个f(),因为a的值已经++过了,所以弹出2.

12.请按要求操作数组。a:

i. 如何删除数组a中第2个元素(即:“B”)?

var a = [“A”, “B”, “C”, “D”];

a.splice(1,1);

ii. 如何删除数组a中最后一个元素?

var a = [“A”, “B”, “C”, “D”];

a.pop()

iii. 如何将“NEW”插入数组a的“B”和“C”之间?

var a = [“A”, “B”, “C”, “D”];

a.splice(2,0,”new”);

13.以下技术您用到过哪些?

EasyUI  BootStrap  jQuery   jQuery Mobile  zepto  ExtJS

angular react  backbone  redux grunt  gulp  seats nodeJS

swiper web pack requireJS

14.var stringArray = [“Hello”, “World”],给出您能想到的最好的方法输出“Hello World”。

stringArray.join(“ ”);

15.typeof输出的类型有哪些A.number  B.string C.null  D.undefined

16.以下关于Array数组对象的说法不正确的是(c)

A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数。

B.reverse用于对数组数据的倒序排列。

C.向数组的最后位置加一个新元素,可以用pop方法。

D.unshift方法 用于向数组删除第一个元素。

17.以下哪些是css伪类?(c,d)after和before是伪元素

A.after  B.before C.hover  D.nth-child

18.javascrip的基本数据类型有哪些?(a,b,e,f,g)

A.number B.string  C.object  D.array  E.null F.undefined  G.boolean

19.以下不是html5元素的有哪些?(b,c)

A.footer B.center C.font D.frame

20.下面有关浏览器中使用js跨域获取数据的描述。说法错误的是?a

A.域名,端口相同,协议不同,属于相同的域。

B.js可以使用jsonp进行跨域。

C.通过修改document.domain来跨子域。

D.使用window.name来进行跨域。

21.下述有关css属性position的属性值的描述。 语法错误的是?b

  1. static:没有定位,元素出现在正常的流中。
  2. fixed:生成绝对定位的元素,相对于父元素进行定位。
  3. relative:生成相对定位的元素,相对于元素本身正常位置进行定位。
  4. absolute:生成绝对定位的元素,相对于static定位意外的第一个祖先元素。

22.CSS实现隐藏页面元素的方法有哪些?

display:none;  visibility: hidden;opacity:0;  position:absolute;left:-10000px;

23.请写出打印出来的值。

var flag = true;

if (flag) {

var a = 10;

}

function fn() {

var b = 20;

c = 30;

}

fn();

console.log(a);

console.log(c);

console.log(b);

答:10,30,报错(b是在fn内部定义,全局并没有b这个变量)

24.xhtml和html有什么区别?

xhtml比HTML严谨性会高点,然后基本语言都还是沿用的HTML的标签,只不过废除了部分表现层的标签,同事在标准上要求高了点比如标签的严格嵌套,标签结束等等

25.每个html文件里开头都有个Doctype。这是代表了什么意思?

版本声明

26.问题 strong与em的异同?

语义都是语气加重,strong在显示上是变粗,而em是斜体显示

27.行内元素有哪些?块级元素有哪些?

块状:* <ol>

* <ul>

* <dl>

* <table>

* <h1>...<h6>

* <p>

* <blockquote>

* <dt>

* <address>

* <caption>

* <div>

内联(行内):

* a - 锚点

  * abbr - 缩写

  * acronym - 首字

  * b - 粗体(不推荐)

  * bdo - bidi override

  * big - 大字体

  * br - 换行

  * cite - 引用

  * code - 计算机代码(在引用源码的时候需要)

  * dfn - 定义字段

  * em - 强调

  * font - 字体设定(不推荐)

  * i - 斜体

  * img - 图片

  * input - 输入框

  * kbd - 定义键盘文本

  * label - 表格标签

  * q - 短引用

  * s - 中划线(不推荐)

  * samp - 定义范例计算机代码

  * select - 项目选择

  * small - 小字体文本

  * span - 常用内联容器,定义文本内区块

  * strike - 中划线

  * strong - 粗体强调

  * sub - 下标

  * sup - 上标

  * textarea - 多行文本输入框

  * tt - 电传文本

  * u - 下划线

  * var - 定义变量

28.css选择符有哪些?哪些属性可以继承?优先级算法如何计算?

选择符:http://www.360doc.com/content/14/0104/22/15643_342679505.shtml

除了这些都可以继承:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

原则一: 继承不如指定

原则二: #id > .class > 标签选择符

原则三:越具体越强大

原则四:标签#id >#id ; 标签.class > .class

CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:

* 元素标签中定义的样式(Style属性),加1,0,0,0

* 每个ID选择符(如 #id),加0,1,0,0

* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0

* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1

然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,

然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

29.HTML5文档类型和字符集是?

<!DOCTYPE html>

<meta charset="UTF-8">

30.HTML5中canvas是什么?datalist是什么?

canvas:绘图标签,可以使用它制作游戏和图像处理

datalist:<datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值

31.请分别使用原生js,jquery获取标签信息。(<div id=“div1”>这是一个DIV标签</div>)

document.getElementById(“div1”).innerHTML;

document.querySelector(“#div1”).innerText;

$(“#div1”).html()

32.求下面两种情况下,a和b的值是多少?

题目1:var a = 1;  function func1(){a=b=5;} alert(a); alert(b);

题目2:var a = 1;  function func1(){var b = 1;a=b=5;}alert(a);alert(b);

题目1答:如果在alert(a)前没有调用func1的话就1,和报错,b没定义,如果调用了func1的话就是5,5

题目2答:如果在alert(a)前没有调用func1的话就1,和报错,b没定义,如果调用了func1的话就是5,和报错,因为b是在func1中定义的局部变量,在全局获取不到

34.将数组[“a”, “b”, “c”, “d”]转化为字符串”d#c#b#a”;

[‘a’,’b’,’c’,’d’].join(“#”)

35.对应写出下列输出值。

alert(typeof(null))

alert(typeof(NaN))

alert(typeof(undefined))

alert(typeof(“undefined”))

alert(NaN == undefined)

alert(NaN == NaN)

答:

alert(typeof(null))//object

alert(typeof(NaN))//number

alert(typeof(undefined))//undefined

alert(typeof("undefined"))//string

alert(NaN == undefined)//false

alert(NaN == NaN)//false

36.获取enent目标对象的方法(要求兼容性)。

document.onclick = function (ev){

var e = ev||window.event;

}

37.经常使用的页面开发工具以及测试工具。

sublime,hbulider,webstorm,测试工具:mocha

38.经常使用什么脚本库,开发或使用过什么应用或组建。

jquery,zepto

39.请写出代码执行结果

var a;

alert(a);                   ___undefined_________

alert(typeof a);        undefined______________

alert(b);                  报错_________________

40.旧版本的IE浏览器(如:IE6,IE7)的默认盒模型,W3C定义的合模型,二者之间有什么不同?

ie的width是包含border和padding的,也称为怪异模式,触发条件是在没写版本声明的时候

而w3c的width就width不含border和padding

41.以下HTML代码片段,有几种方法让该div在浏览器中横向居中?

<div style=“width:200px;height:100px;”></div>

第一种:<div style=“width:200px;height:100px; margin:0 auto”></div>

第二种:<div style="width:200px;height:100px; position:absolute; left:50%; margin-left:-100px;”></div>

第三种:<div style="width:200px;height:100px; position:absolute; left:50%; transform:translate(-50%,0)"></div>

42.以下css代码片段,在IE6,IE7,IE8,Firefox,Chrome下分别呈现什么颜色?

.browers{

background-color:#000000;/*黑色*/

background-color:#ff0000\9;/*红色*/

+background-color:#00ff00;/*绿色*/

_background-color:#0000ff;/*蓝色*/

}

在firefox和chrome中显示的是黑色

在ie8下是红色(\9是ie8的hack)

在ie7下是绿色(+是ie7的hack)

在ie6下是蓝色(_是ie6转有hack)

43.如何做到让一个div隐藏但是却在html流中占位?

visibility: hidden;和opacity:0;

44.请写一段json字符串,包含所有的数据类型.

{"a":"string","b":5,"c":[1,2,3,4],"d":{"e":"obj"}}

45.请按执行顺序写出几次alert()语句a的值:

var a = 10;

function fn() {

alert(a);

var a = 100;

alert(a);

}

fn();

alert(a);

undefined,100,10

46.请按执行顺序写出几次alert()语句a的值:

function fn1(){

var a = 1;

function fn2(){

alert(a++);

}

fn2();

}

fn1();

fn1();

1,1

47.下面的输出是?

<style>

.red{color:red;}

.blue{color:blue;}

</style>

<p class=“blue red”></p>

蓝色

48.怎样添加,移除,移动,复制,创建和查找节点?

appendChild,removeChild,replaceChild,cloneNode,createElement,getElementById(ByTagName)

49.用js写一个正则匹配标签中是否包含一个class?

var className = "active";

var reg = new RegExp(“\\b"+className+"\\b");

50.阅读以下代码回答:hello world 是什么颜色?

<style>

.classA{color:red;}

.classB{color:yellow;}

</style>

<p class=“classB classA”>hello world</p>

yellow

51.完善以下代码:

<div style=“height:50px;” id=“content”>

<p>铝神公司</p>

</div>

(1).请用CSS实现”铝神公司”在div内水平垂直居中?

(2).请用javascript将字体设置为红色.

答:(1)

第一种写法:

*{

margin: 0;

}

div{

text-align: center;

line-height: 50px;

}

第二种写法:

*{

margin: 0;

}

div{

display: table;

width: 100%;

}

div p{

display: table-cell;

width: 100%;

text-align: center;

vertical-align: middle;

}

第三种写法:

*{

margin: 0;

}

div{

position: relative;

}

div p{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

(2)

第一种:content.style.color=“red”,高级浏览器id不用获取

第二种:  document.getElementById(“content”).style.color=“red”

第三种:document.querySelector(“#content").style.color="red";

52.写一个函数,将一串字符串中空格替换”.”,如replace(“铝 神 欢 迎 你”)=“铝.神.欢.迎.你”

第一种:

function re(s){

return s.replace(/\s/g,".");

}

第二种:

function re(s){

return s.split(" ").join(".");

}

53.请用CSS实现4个div的水平排列占满一行,要求4个div宽度相同,有10px的padding值.

div{

float: left;

width: 25%;

height: 100px;

background-color: #ccc;

padding: 10px;

box-sizing:border-box;

}

54.对作用域上下文和this的理解,看下列代码:

var  User =  {

count:1,

getCount:function(){

return this.count;

}

};

console.log(User.getCount());//??

var func = User.getCount;

console.log(func());//??

1,undefined

55.<!DOCTYPE html>中DOCTYPE有什么作用,去掉会有什么影响?

声明文档类型,在ie6下如果去掉会进入怪异模式,width包含padding和border

56.HTML行内元素有哪些,块级元素有哪些?画出CSS盒模型。

上面有

57.内联和important哪个优先级更高?

important更高

58.清除浮动的几种方式?

第一种:clear:both;

第二种:overflow:hidden;

第三种:父级一起浮动

第四种:父级定义:after伪元素配合zoom解决ie6,7

第五种:父级加position:absolute

59.HTML5存储类型有哪些?

cookies:存储大小为4k

localstorage:以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除,大小为5m

sessionstorage:HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存

离线缓存(application cache):本地缓存应用所需的文件

Web SQL:关系数据库,通过SQL语句访问

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

60.HTTP状态码有哪些,分别代表什么意思?

如果是1开头的代表请求已被接受,需要继续处理

如果是2开头这一类型的状态码,代表请求已成功被服务器接收、理解、并接受

如果是3开头这类状态码代表需要客户端采取进一步的操作才能完成请求

如果是4开头这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理

如果是5开头这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生,也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理

61.CSS3新增伪类选择器有哪些?

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n)    p:nth-last-child(2)    同上,从最后一个子元素开始计数。

:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

:nth-last-of-type(n)    p:nth-last-of-type(2)    同上,但是从最后一个子元素开始计数。

:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。

:root    :root    选择文档的根元素。

:empty    p:empty    选择没有子元素的每个 <p> 元素(包括文本节点)。

:target    #news:target    选择当前活动的 #news 元素。

:enabled    input:enabled    选择每个启用的 <input> 元素。

:disabled    input:disabled    选择每个禁用的 <input> 元素

:checked    input:checked    选择每个被选中的 <input> 元素。

:not(selector)    :not(p)    选择非 <p> 元素的每个元素。

::selection    ::selection    选择被用户选取的元素部分。

62.用CSS3编写:div旋转90度,0.5秒后变圆,0.5秒后方法两倍。

63.举例2种强制类型转换和1种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== - ===)

64.split()  和join()的区别

split是将字符串切割为数组,而join是将数组连接为字符串

66.事件绑定和普通事件有什么区别

区别就是普通事件只支持单个事件,而事件绑定可以添加多个事件

67.ajax请求的时候get和post方式的区别

第一:ajax.open方法的第二个参数如果是get请求路径中是带有参数的,而post就只是路径

第二:如果是post方式在open方法和send方法之间还要设置请求的头:ajax.setRequestHeader("Content-Type", “application/x-www-form-urlencoded");

第三:ajax.send方法如果是get的话参数留空就行,而post需要将参数以序列化的格式传入

68.call和apply的区别

call和apply都是改变函数内部的this指向,第一个参数也都放的是要改变this对象,区别主要在第二个参数上,call从第二个开始放的是正常的参数,而apply放的是数组

69.事件委托是什么,使用事件委托有什么好处?

就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。

70.如何阻止事件冒泡和默认事件

阻止事件冒泡:ie:window.event.cancelBubble=true;而非ie:e.stopPropagation();

阻止默认事件:ie:window.event.returnValue = false;return false;而非ie:e.preventDefault();

72.跨域的方法

1> document.domain + iframe      (只有在主域相同的时候才能使用该方法)

2> window.name + iframe

3>html5中的postMessage()

4>CORS

5>jsonp

6>websocket

跨域支持post请求的:

1>CORS

2>window.postMessage

3>html5的websocket

4>iframe http://www.jianshu.com/p/4773501f1adf

5>flash proxy

73.编写一个数组去重的方法

Array.prototype.unique3 = function(){

var res = [];

var json = {};

for(var i = 0; i < this.length; i++){

if(!json[this[i]]){

res.push(this[i]);

json[this[i]] = 1;

}

}

return res;

}

74.Ajax请求Json数据后如何解析

第一种:使用eval

第二种:使用JSON.parse()

第三种:new Function("return" + strJSON)();

75.如何实现多标签页之间的通讯。

调用 localstorge、cookies 等本地存储方式

76.简述什么是按需加载,然后实现一个图片按需加载的js。

图片的按需加载又称为延时加载,随着用户的滚动条滑动来按需获取图片。代码略,课件中有

77.简述下闭包,有什么好处和坏处。

闭包的好处有:

1.缓存

2.面向对象中的对象

3.实现封装,防止变量跑到外层作用域中,发生命名冲突

4.匿名自执行函数,匿名自执行函数可以减小内存消耗

闭包的坏处:

1.内存消耗

2.性能差

78.什么是模块开发,怎么实现一个模块开发。

一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

可以使用模块加载器比如sea.js或者require.js

79.实现一个多列的等高布局。

80.zoom是什么,有什么用?

Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

81.怎么优化一个首屏的加载速度,可以从js和css等多方便考虑

可以

1.可以使用延迟加载,通过js将第二屏出现的图片设置问延迟加载,优先加载第一屏的图片,如果不想自己写js推荐一个lazyload这个插件

2.尽可能压缩图片大小,可以利用在线图片压缩工具tinypng

3.将JS放到HTML最后的地方,能最后加载,优先保证基础信息阅读。可以参考雅虎优化原则

83.怎么实现一个对象的继承。

Object.prototype.extend = function(obj){

//在函数里,把obj属性复制到自身

for(var k in obj){

if(obj.hasOwnProperty(k)){

if(this[k] == undefined){

this[k] = obj[k];

}

}

}

}

var kitty = {color:‘yellow‘,climb:function(){alert(‘我会爬树‘);}};

var tiger = {color:‘yellow and black‘};

tiger.extend(kitty);

tiger.climb();

84.简述下平时开发用到的技术栈。

作者:何幻

链接:http://www.zhihu.com/question/33179506/answer/75015013

来源:知乎

著作权归作者所有,转载请联系作者获得授权。

浏览器环境IE6~8 IE9+ Chrome Firefox Safari Opera Edge

HTTP协议URI Cache Session Cookie Request Response

HTMLW3C HTML4.01 HTML5 DOM 语义化

CSSCSS1~3 选择器 盒模型 Flex 媒体检测 响应式 渲染引擎

JavaScriptEcmaScript3~5~6 Lexical-scope prototype-chain AJAX js引擎

编辑器Emacs Vim WebStorm Atom Sublime-Text

发布部署合并 压缩 单元测试 Node.js Grunt Gulp Yeoman Phantom JSLint

框架类库jQuery Zepto UnderScore Backbone Knockout React AngularJS

模块管理CommonJS Webpack

UI框架BootStrap SemanticUI jQueryUI Foundation

推送技术WebSocket 轮询 长连接

跨域技术iframe JSONP CORS

数据可视化D3 Echarts HighCharts Canvas

异步编程Promise $.Deferred Generator

CSS预处理器LESS SASS Stylus

客户端模板Handlebars Haml Jade Mustache

相关语言CoffeeScript TypeScript Dart WebAssembly

WebApp/PCReact-native ionic

85.css选择器中,以下排序正确的为(a)

A、行内样式>id>class>标签

B、行内像是>class>id>标签

C、id>class>行内样式>标签

D、标签>class>id>行内样式

86.在JavaScript中,以下哪个变量名是非法的(b)

A、Name B、9name    C、Name_a D、Name9

87.请选择结果为真的表达式(c)

A、null instance Object B、null === undefined C、null == undefined D、NaN == NaN

88.var a = new Object();

a.value = 1;

b = a;

b.value = 2;

console.log(a.value);

输出正确的是:(b)

A、1 B、2 C、undefined D、以上都不正确

89.  var a = 3;

(function() {

window.a = 2

var a = 1;

})()

console.log(a)

输出为:(b)

A、1 B、2 C、3 D、undefined

91.<p>标签内的文字颜色是什么?

<style>

.classA{color:blue !important;}

.classB{color:red;}

</style>

<body>

<p class=‘classB classA’ style=‘color:green’> 123 </p>

</body>

蓝色

100.微信分享怎么实现

分为3种:

第一种使用微信默认分享,分享标题为分享页的title标签的内容,如果是分享给朋友,描述中为网页链接,分享小图标为网页中第一张符合大小的图片

第二种是使用微信的jssdk,wx.onMenuShareTimeline分享到朋友圈.和wx.onMenuShareAppMessage分享给朋友。

第三种如果是做微信广告,部署到腾讯服务器下,可以使用WeixinJSBridge调用分享接口

105.ajax出问题时怎么判断是前端的问题还是后台的

首先测试api是否能正常调用,比如可以模拟一些数据发送一下,如果是get请求就直接浏览器地址栏中拼接上然后看返回结果。在确认api调用正常的情况下,基本就可以确定是属于前端的问题。

技术方面问题:

108.如何解决在移动端1px的线比实际粗

1.设置为0.5px

2.判断如果在retina屏上就使用tranform对它进行缩放

@media screen and (-webkit-min-device-pixel-ratio: 2){

.radius-border:before{

content: "";

pointer-events: none; /* 防止点击触发 */

box-sizing: border-box;

position: absolute;

width: 200%;

height: 200%;

left: 0;

top: 0;

border-radius: 8px;

border:1px solid #999;

-webkit-transform(scale(0.5));

-webkit-transform-origin: 0 0;

transform(scale(0.5));

transform-origin: 0 0;

}

}

109.如何计算移动端rem的值

如果html的font-size为10px,2rem就是20px.

110.ajax请求到显示流程

1.创建ajax对象

2.调用open方法

3.调用send方法

4.添加onreadystatechange事件

5.判断返回的状态码是否为成功的状态码

6.通过调用ajax的responesText属性返回数据

113.向后台请求数据,有几种方式

用的最多的就是get和post.

除了这两个还有:

HEAD

类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头

PUT

传说当前请求文档的一个版本

DELETE

发送一个用来删除指定文档的请求

TRACE

发送请求的一个副本,以跟踪其处理进程

OPTIONS

返回所有可用的方法;可检查服务器支持哪些方法

CONNECT

用于ssl隧道的基于代理的请求

121.以下localStroage的使用方式,哪些是正确的?abe

A.localStorage. setItem(“lastname”, “smith”);

B.document.getElementById(“result”).innerHTML=loaclStorage.getItem(“lastname”);

C.localStorage.lastname=“Smith”;

D.document.getElementByid(“result”).innerHTML=localStorage.lastname;

E.localStorage.removeItem(“lastname”);

122.以下关于Array数组对象的说法不正确的是?c

A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数.

B.reverser用于对数组数据的排序排列.

C.向数组的最后位置加一个新元素,可以用pop方法.

D.unshift方法用于向数组删除第一个元素.

123.var stringArray=[“Hello”,”World”],给出您能想到的最好的方法输出”Hello, World”

stringArray.join(“,”);

时间: 2024-10-13 03:12:43

前端基础(一)的相关文章

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

前端基础html

前端基础之html HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.re

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

8月5日前端基础复习

复习前端基础相关知识 ctrl+tab 切换文档ctrl+tab 切换程序alt+F4 关闭程序F2 重命名F5 刷新页面windows+D 显示桌面windows+E 打开资源管理器—————— 浏览器发送过去,就是请求报文,服务器返回的信息就是响应报文.在服务器上应该存在我们请求的页面的数据.————————HTML:超文本标记语言.html是一个网页文件的扩展名.和txt,jpg,mp3是一样的.html文件就是网页文件.后缀名和文件之间是没有直接关系的.后缀名仅仅决定了文件的打开方式.真

day 46 前端基础 基本框架

HTML标签格式 HTML标签是由尖括号包围的关键字,如<html>, <div>等 HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束.结束标签会有斜线. 也有一部分标签是单独呈现的,比如:<br/>.<hr/>.<img src="1.jpg" />等. 标签里面可以有若干属性,也可以不带属性. 标签的语法: <标签名 属性1="属性值1

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

前端基础:HTML标签(下)

前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含textarea.select和label标签: 表单的属性:action,将表单数据提交到指定服务器的某个程序,程序收到表单提交过来的数据(即表单数据)做相应处理,比如:https://baidu.com:**method**,表单的提交方式get/post/update等,默认为get: 注意 f