面试题小结!

HTML + CSS

1. 对WEB标准以及W3C的理解与认识?

(1)WEB 标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可提高搜索机器人对网页内容的搜索几率;
(2) 建议使用外链接css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面渲染速度,能更快地显示页面的内容;
(3) 样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,从而降低维护成本、改版更方便;
(4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性;
遵循w3c制定的web标准,能够使用户浏览的更方便,使网页开发者之间更好的交流。

2. xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML置标语言;
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须小写字母。
XHTML文档必须拥有根元素。

3. DocType 严格模式与混乱模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用哪种规范(html/Xhtml)一般为严格过渡基于框架的html文档
加入xml声明可触发,解析方式更改为IE5.5拥有IE5.5的bug详情

4.行内元素有哪些?块级元素有哪些?css的盒模型?

块级元素:div p [h1 - h6] ul li ol form等
行内元素: a b br i span input select
css盒模型:content 、border、margin、padding

5.css引入的方式有哪些?link和@import的区别是?

内联 内嵌 外链 导入
区别:同时加载
前者无兼容性,后者css2.1以下浏览器不支持
link支持使用JavaScript改变样式,后者不可

6.css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和!important哪个优先级高?

标签选择符 类选择符 id选择符
伪类A标签可以继承
列表 UL LI DL DD DT 可继承
优先级就近原则,样式定义最近者为准
载入样式以最后载入的定位为准
优先级为
!important > [ id > class > tag ]
Important 比 内联优先级高

7.前端页面有哪三层结构,分别是什么?作用是什么?

结构层HTML 表示层css 行为层js

8.css的基本语句构成是?

选择器{属性1:值;属性2:值;。。。。}
如果是 语法:
(自定义的样式名称){
样式内容

例:
li(为li标签设定){
width:300px;<--!宽300-->
height:22px;<--!高22-->
font:12px/23px 宋体;<--!字体大小/行高 字体样式-->
text-align:center;<--!对其方式:居中-->
background:url(on.gif) no-repeat 45px -80px;<--! 背景图片 平铺样式-->
list-style:none;<--! li标签显示方式:无提示标记-->
}

9.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?

IE(IE内核) 火狐(Gecko)谷歌(webkit)opear(Presto)

10.写出几种IE6 BUG的解决方法

  1. 双边距BUG float引起的 使用display:inline;
  1. 3像素问题 使用float引起的 使用display:inline -3px 或者 margin-right:-3px;
    3.超链接hover点击后失效 使用正确的书写顺序 link visited hover active;
    4.ie z-index问题 给父级添加position:relative;
    5.png透明 使用js代码改;
    6.Min-height 最小高度 !Important解决;
    7.select 在ie6下遮盖 使用iframe 嵌套;
    8.为什么没有定义1px左右的宽度容器(IE6 默认的行高造成,使用over:hidden,zoom:0.08,line-height:1px);

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

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方;
title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开了就没有了,有点类似jQuery的hover,你可以自己试试,另外,HTML的绝大多数标签都支持title属性,title属性就是专门做信息的。

12.描述css reset的作用和用途?

Reset重置浏览器的默认属性,浏览器的品种不同,样式不同,然后重置,让他们统一。例如(*{margin:0;padding:0;});

13.解释css sprites,如何使用。

css精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量;

14.浏览器标准模式和怪异模式之间的区别是什么?

所谓的标准模式是指,浏览器按W3C标准解析执行代码;
怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载页面并显示,忽略DTD声明,将使页面进入怪异模式(quirks mode)。
盒子模型渲染模式的不同
使用window.top.document.compatMode 可显示为什么模式。

15.你如何对网站的文件和资源进行优化?期待的解决方案包括:

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

16. 什么是语义化的HTML?

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器爬虫和机器很好的解析。
1.语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有css的时候能够清晰的看出网页的结构增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。
(总结:直观的认识标签对于引擎的抓取有好处)

17.清除浮动的几种方式,各自的优点

1.使用空标签清除浮动clear:both (理论上能清除任何标签,,,增加无意义标签)
2.使用overflow:hidden(空标签元素清除浮动而不得不增加无意义代码的弊端,使用zoom:1用于兼容IE)
3.使用after伪元素清除浮动(用于非IE浏览器)

JavaScript

1.JavaScript的typeOf返回哪些数据类型?

Object、number、function、boolean、underfind

2.列举3种强制类型转换和2种隐式类型转换

强制(parseInt,parseFloat,number)
隐式(==,===)

3.split() join()的区别

split()方法:用于把一个字符串分割成字符串数组。
join()方法:用于把数组中的所有元素放入 一个字符串。
(总结:前者是切割成数组的形式,后者是将数组转换成字符串);

4.数组方法pop() push() unshift() shift()

Push()尾部添加; pop()尾部删除;
unshift()头部添加;shift()头部删除;

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

事件绑定就是针对dom元素的事件,绑定在dom元素上
普通事件即为非针对dom元素的事件;

例如:
普通事件

var btn = document.getElementById(’hellow');
btn.onclick = function() {
      alert(1);
};
btn.onclick = function() {
      alert(2);
};        //这个事件只会弹出2;

事件绑定

var btn = document.getElementById('hellow');
btn.addEventListener('click' , function (){
     alert(1);
},false);
btn.addEventListener('click', function () {
alert(2);
},false);       //这个事件首先会弹出1,  然后弹出2;

6. IE和DOM事件流的区别?

1.执行顺序不一样;
2.参数不一样;
3.事件加不加on
4.this指向问题;

7.IE 和标准下有哪些兼容性的写法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement || ev.target

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

1、get 是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段--对应,在URL中可以看到;post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送单ACTION属性所指的URL地址。用户看不到这个过程;
2.GET 请求有如下特性:他会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。

3.get传送的数据量较小,不能大于2kb;
post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异。

  1. get安全性非常低,post安全性较高;
    (总结:一个在url后面 一个放在虚拟载体里面有大小限制 安全问题应用不同一个是论坛等只需要请求的,一个是类似修改密码的)

9.call和apply的区别?

相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同
Object.call(this,obj1,obj2,obj3)调用一个对象的一个方法,以另一个对象替换当前对象

Object.apply(this,arguments)应用于某一对象的一个方法,用另一个对象替换当前对象。

10.ajax请求时,如何解释json数据?

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法?

b.prototype = new a ;

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value) {
    if (!value) { 
          if(obj.currentStyle) {
                return obj.currentStyle(attr)
            } else {
                  obj.getComputedStyle(attr,false)
              }
              }  else {
                     obj.style[attr] = value
              }
        }

13.事件委托是什么?

利用事件冒泡的原理,让自己的所触发的事件,由它的父级元素代替执行!
事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父级或者祖先元素,甚至根元素(document);
JQery 为绑定和委托事件提供了.bind(), .live()和 .delegate()方法;详情

14.闭包是什么,有什么特性,对页面有什么影响?

闭包就是能够读取其它函数内部变量函数。详情

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

详情

16.添加 删除 替换 插入到某个节点的方法?

obj.appednChild()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解释json 的原理,以及为什么不是真正的ajax?

动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作

18. JavaScript的本地对象,内置对象和宿主对象?

本地对象为array obj regexp等可以new 实例化
内置对象为gload Math等不可以实例化的
宿主为浏览器自带的document,window等

19.document load 和 document ready 的区别?

Document.onload 是在结构和样式加载完才执行js
Document.ready 原生没有这个方法,jquery 中有$().ready()(function)

20. "=="和"==="的不同?

前者会自动转换类型
后者不会

21.javascript的同源策略?

一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名,协议和端口号的组合

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

function  oSort(arr) { 
      var   result = {};
      var   newArr = [];
      for (var i = 0; i < arr.length; i++){
            if (!result[arr]) {
                  newArr.push(arr)
                  result[arr] = 1
            }
        }
          return newArr
  }

未完待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,199评论 0 8
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 113,805评论 24 450
  • 忙了一天,她回家时已经精疲力尽,只想好好地趴在床上,安静睡上一个晚上。但是,她又强迫自己保持清醒着,五岁的孩子明天...
    青果无心阅读 126评论 0 0
  • 感恩我还呼吸着空气,能看着花草树木欢声笑语*感恩生命本身的恩赐*感恩情绪给我向内看的机会*感恩碰到的问题锻炼我的心...
    晴晴zhang阅读 712评论 0 1