前端面试题_k..docx

前端面试题by gyfnice2014/7/22HTML1.HTML与XHTML的区别？最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。XHTML标签名必须用小写字母，里面的属性必须有引号。XHTML文档必须拥有根元素。2.doctype是做什么的？Doctype是html里必要的开场白，它被要求是因为浏览器发展的历史遗留原因。如果你忽略它，浏览器会采用不同的模式渲染页面，导致与一些标准产生冲突。如果指明了Doctype，浏览器会尽最大可能遵循相关标准，保证其渲染页面时一致性。（最典型的是盒子模型，在怪异模式下，其对宽度的计算是不一致的）。就像汽车里的安全带一样，就像你知道的一样，如果没有安全带，也不会对我开车的行为有任何影响，那你怎么才能知道你是否需要安全带呢？你不需要知道，因为当出事的时候再知道就已经晚了。安全最重要。3. data- attributes有什么好处？能语义化的在Dom上存储相关数据。能通过JavaScript中的Dom API简单的拿到数据。能利用CSS进行相应数据的布局4.script, script async and script defer有什么区别？HTML中的script标签允许把定义在页面中JavaScript代码开始执行。正常执行scriptscript标签默认的执行行为是同步执行，也就是当加载执行脚本时会阻塞HTML的正常渲染。所以如果过多的脚本放在页面头部，会导致页面延迟加载等。延迟执行defer script延迟脚本执行直到HTML渲染完成的时候。它的好处就是能保证脚本在执行过程中相关Dom节点是已经存在的。然而因为不是每个浏览器都支持它，所以不要太依赖它。异步执行async script不关心脚本什么时候会被加载执行。异步是两全其美的：HTML在解析渲染的同时脚本也能同时被加载，当脚本加载成功时，这个时候HTML渲染会被阻塞，交给加载好的脚本去执行。使用这个属性建议加载一些第三方js插件（不依赖原页面）。5.cookie/localStorage/sessionStorage的区别？localStorage, sessionStorage and cookies 都是客户端存储情况。它们都遵循同一个规则：same-origin（同源策略），只允许来自同一站点的资源访问，不同站点是不能访问到它们的。localStorage and sessionStorage它们的功能近乎一样，唯一不同点就是生存周期。用sessionStorage存储的数据在关机后会被删除，而localStorage不会，所以如果想把数据持续的存在客户端上，localStorage比sessionStorage会好一些。CookieCookie也是可以存储数据（以字符串的形式），不过可以被用户篡改，所以要存储敏感的数据，session（服务器端的存储）是唯一的选择。因为每个请求发送时（包括原始页面请求、Ajax、图片、脚本、CSS、fonts）都会带着cookie一起发送，所以cookie不应该存储信息量过大的数据。CSS1.在CSS中ID、CLASS选择器有什么区别？ID选择器是唯一的。Classes选择器不是唯一的。ID选择器在浏览器中有特殊的功能（超链接里的锚点）。2.CSS优先级规则？Inline-style +1000ID + 100class/pseudo class/state attribute + 10element + 13.描述一下box-sizing？为了展示的目的，每个元素在页面上被认为是一个盒子。盒子模型有自身的一些属性，比如width，padding，border，margin。你能改变盒子模型的特性通过box-sizing属性。它里面属性包括：content-box (默认), padding-box, 和border-box.Content-box: 盒子内容包括width height但不包括 padding/border/margin.Padding-box: 内容包括到 padding.Border-box: 内容包括到 border，但不包括margin.4.有哪些隐藏内容的方法？Display: none(不占据文档流的位置)visibility:hidden(占据文档流的位置)width: 0; height: 0;text-indent: -1000px利用绝对定位（position：absolute）将元素移出屏幕范围5.解释下浮动和它的工作原理？浮动是指一个盒在当前行中被变换到左边或者右边。浮动最有意思的特点是内容将沿着它的边缘放置（或者可以通过“clear”属性阻止它们这么做）。内容从一个左浮盒的右边往下或者从一个右浮盒的左边往下放