前方端面试题

 

 1.xhtml暨html有啊分别

HTML是一致栽基本的WEB网页设计语言,XHTML是一个冲XML的置标语言

绝要害的不比:

     XHTML 元素必须为正确地嵌套。

     XHTML 元素必须吃关门。

  
标签名必须用小写字母。

     XHTML 文档必须拥有根元素

2、简述一下src与href的别:

href
是依为网资源所在位置,建立与当下元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是凭为外部资源的岗位,指向的情节将会见放到至文档中即签所在位置;在恳求src资源时会将该针对性的资源下载并使用到文档内,例如js脚本,img图片与frame等要素。当浏览器解析到该因素时,会中断其他资源的下载和拍卖,直到将该资源加载、编译、执行了,图片与框架等因素呢这样,类似于以所依赖于资源嵌入当前签内。这也是干什么以js脚本放在脚而非是脑部。

3、行内元素来安?块级元素来安?
空(void)元素来那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

4、 form中的action属性和method属性的义是什么?method常用值有怎么样?

action属性用于指定form表单提交的后台程序地址;method属性用于指定form表单提交的方。

method的常用值有:get和post

5、 表单元素新增的属性有什么样?

required: 必填色

placeholder:提示信息,点击input内容时会熄灭

pattern:校验正则表达式

autofocus:自动获取焦点

autocomplete:自动完成

6.通向指定服务器交由数据的方法有什么样?

   Ajax  表单Form  

   URL?参数 

   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)
 $.Ajax({})

JS Ajax: 5步。(参考25题)

7、写一个function,清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {

   if (str && typeof str === “string”)
{

            return
str.replace(/(^\s*)|(\s*)$/g,””);  
//去除前后空白符

           }

8、如何破一个数组里面再的素?

var arr1
=[1,2,2,2,3,3,3,4,5,6],

 var arr2 = [ ];

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

        if(arr2.indexOf(arr1[i]) <
0){

         arr2.push(arr1[i]);

        }

}

document.write(arr2); //
1,2,3,4,5,6

9、请描述一下cookies,sessionStorage和localStorage的界别

sessionStorage用于地方存储一个对话(session)中的多寡,这些多少只有以跟一个对话中之页面才能够访问并且当会说话了晚数为随后销毁。因此sessionStorage不是平等栽持久化的当地存储,仅仅是会见讲话级别之囤积。而localStorage用于持久化的地面存储,除非主动去数据,否则数据是永恒不见面晚点的。

web
storage和cookie的区别

Web
Storage的定义与cookie相似,区别是其是以重新不行容量存储设计之。Cookie的高低是受限的,并且每次你请一个初的页面的当儿Cookie都见面给发送过去,这样平空浪费了带动富,另外cookie还需要指定作用域,不可以跨域调用。

除外,Web
Storage拥有setItem,getItem,removeItem,clear等办法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不得以或缺的:Cookie的企图是跟服务器进行交互,作为HTTP规范的同样有些要在
,而Web Storage仅仅是为以地方“存储”数据而好。

10、cookie和session的别是啊?

   Cookie 保存于客户端本机;

   Session保存在劳动器端;

  联系:session的id存在cookie中。

11.页面导入样式时,使用link和@import有什么界别?

1).link属于XHTML标签,而@import是CSS提供的;

2).页面被加载的时,link会同事给加载,而@import引用的CSS会等交页面被加载了再加载;

3).import只来当IE5上述才能够让识别,而link是XHTML标签,无兼容问题;

4).link 方式的样式的权重>@import的权重

12.概括描述下一定Position:

Relative:相对固化。相对于自家本来位置一定,原DOM空间会保留;

Absolute:绝对定位。相对于第一个非static定位的祖宗元素进行固定,会去除原DOM空间;

Fixed:固定定位器窗口进行稳定; 会删除DOM空间

Static: 默认值。没有一贯,元素出现于常规的流中(忽略
top, bottom, left, right z-index 声明)。

Inherit:规定于父元素继承 position 属性的值。

13.display闹怎样值?说明他们之图。

  block         象块类元素一样显示。

  none          缺省值。象行内元素类型一样显示。

  inline-block    象行内元素一样显示,但其内容象块类型元素一样显示。

  list-item     象块类元素一样显示,并补充加样式列表标记。

  table         此元素会作为块级表格来展示

  inherit       规定当由父元素继承 display 属性的价值

14、jquery中安拿数组转化为json字符串,然后重新转发回来?

$.parseJSON

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用:$(array).stringify();

15.JSON 的了解?

JSON(JavaScript Object Notation) 是一模一样栽轻量级的数据交换格式。

它们是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带富小

如:{“age”:”12″, “name”:”back”}

JSON字符串转换为JSON对象:

var obj =eval(‘(‘+ str +’)’);

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON对象转换为JSON字符串:

var last=obj.toJSONString();

var last=JSON.stringify(obj);

16、什么是响应式设计?响应式设计之基本原理是啊?

  
根据不同装备的屏幕尺寸、分辨率、方向等,统一网站亮也歧功能。

  
移动优先。可以采用JS跳反差手机站和PC站,可以运用MediaQuery检测不同装备的性展示不同的CSS,可以动用各种响应式前端框架。

  
优点:用户体验好,尤其是手机端。

  
缺点:包含大量冗余代码,开发成本较生(但是多小于开发手机站+PC站的模式)

17. visibility:hidden和display:none的区别?

行使display:none隐藏以后,元素的长空被放飞,其余元素得以占空间;

用visibility:hidden仅仅是圈无展现,但是元素的上空仍然占据,别的元素无法以。

18、 列举数组相关的常用方法

push/pop, shift/unshift, split/join,
slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列举字符串相关的常用方法

indexOf/lastIndexOf/charAt,
split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、科普的浏览器内核有怎样?

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核:Netscape6及以上版本,FireFox(火狐),MozillaSuite/SeaMonkey等

Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari(苹果自带的浏览器),Chrome(谷歌)等。   [ Chrome的:Blink(WebKit的分支)]

21.title与h1的区别、b与strong的区别、i与em的区别?

   title属性没有明了意义就代表是单标题,H1则象征层次分明的题目,对页面信息的抓取也发出坏十分之震慑;

  strong是表明要内容,有弦外之音加强的意思,使用阅读设备看网络时:<strong>会重读,而<b>是显得强调内容。

  i内容显示也斜体,em代表强调的公文;

22、网页验证码是干嘛的,是为了解决什么安全问题。

  区分用户是电脑还是人数的公家机关程序。可以防范恶意破解密码、刷票、论坛灌水;

  有效防止黑客对某个一个一定注册用户用特定程序暴力破解方式展开连发的登陆尝试。

23.对前者工程师是职务你是如何理解的?

a.
前端是极度靠近用户的程序员,前端的力量就是是力所能及让成品于 90分叉进化到 100
分,甚至又好

b.
与型,快速高质量好实现力量图,精确到1px;

c.
及组织成员,UI设计,产品经理的牵连;

d.
做好的页面结构,页面重构和用户体验;

e.
处理hack,兼容、写起美丽的代码格式;

f.
针对服务器的优化、拥抱时前端技术。

24、什么是闭包(closure),为什么而为此其?

闭包是凭借有且访问另一个函数作用域中变量的函数,创建闭包的无比广的方式就是在一个函数内创造另一个函数,通过其它一个函数访问这函数的片段变量,利用闭包可以突破作用链域,将函数内部的变量和方传递至表面。可以将闭包简单了解成“定义在一个函数内部的函数”

闭包的特色:

1.函再三内再度嵌套函数

2.里面函数可以引用外层的参数和变量

3.参数与变量不见面被垃圾回收机制回收

//li节点的onclick事件还能够是的弹出当前吃点击的li索引

 <ul id=”test”>

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script
type=”text/javascript”>

    var nodes =
document.getElementsByTagName(“li”);

    for(i = 0;i<nodes.length;i+=
1){

      nodes[i].onclick =
function(){

      console.log(i+1);        //不用闭包的话,值每次都是4

        }(i);

    }

</script>

25、Ajax是呀?如何创建一个Ajax?

ajax全叫:Asynchronous javascript and XML,即异步的JavaScript和xml,也如页面无刷技术。这里的异步可以概括的敞亮也:向服务器发送请求的时候,我们不要等结果,而是可以以做任何的作业,等到有了结果它好会因设定开展持续操作,与此同时,页面是勿见面发生整页刷新的,提高了用户体验。

什么创建一个Ajax?

(1)创建XMLHttpRequest对象,也就是是创办一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方、URL及证明信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的多寡

(6)使用JavaScript和DOM实现有刷新

26.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原来生JS实现Jq的ready方法?

window.onload()方法是得等交页面内连图形的有所因素加载了后才会行。

$(document).ready()是DOM结构绘制了后即便执行,不必等及加载了。

27.(设计题)想实现一个针对页面某个节点的牵引?如何做?(使用原来生JS)

应对出概念即可,下面是几乎单要点

给要拖拽的节点绑定mousedown,
mousemove, mouseup事件

mousedown事件触发后,开始拖拽

mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

mouseup时,拖拽了

28、 apply, call和bind有什么分别?

三者都可以管一个函数应用至其他对象及,注意勿是自对象.apply,call是直执行函数调用,bind是绑定,执行得重新调用.

apply和call的界别是apply接受数组作为参数,而call是接受逗号分隔的卓绝多只参数列表,

代码演示

    function Person() {

    }

    Person.prototype.sayName() {
alert(this.name); }

    var obj = {name: ‘michaelqin’}; //
注意就是一个屡见不鲜对象,它不是Person的实例

    1) apply

    Person.prototype.sayName.apply(obj,
[param1, param2, param3]);

    2) call

    Person.prototype.sayName.call(obj,
param1, param2, param3);

    3) bind

    var sn =
Person.prototype.sayName.bind(obj);    

    sn([param1, param2, param3]); //
bind需要先绑定,再实践

   sn(param1, param2, param3); //
bind需要先绑定,再履行

29、iframe有那些缺点?

*iframe会阻塞主页面的Onload事件;

*招来引擎的查找程序无法解读这种页面,不便宜SEO;

*iframe和主页面共享连接池,而浏览器对相同域的总是起限量,所以会见影响页面的交互加载。

下iframe之前需要考虑当下点儿个短。如果急需运用iframe,最好是通过javascript

动态为iframe添加src属性值,这样好绕开以上两独问题。

30、如何缓解ajax跨域问题?

jsonp、
iframe、window.name、window.postMessage、服务器上设置代理页面

团结的做法:

jQuery中ajax的使用

$.ajax({

dataType:’jsonp’

})

 

 

 

 

 

 

相关文章