前端面试总结(四)

1.对web的标准以及w3c的理解与区别。

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。
  或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构。
  表现即指css样式表,通过css可以是页面的结构标签更具美感。
  行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成。

2.xhtml和html有什么区别

XHTML 元素必须被正确地嵌套。
  XHTML 元素必须被关闭。(空标签必须使用结束标签)
  标签名必须用小写字母。(标签名和属性对大小写敏感)
  XHTML 文档必须拥有根元素

3.doctype?严格模式与混杂模式如何触发这两种模式,区别他们有什么意义?有什么优点?

** doctype文档声明。**
  <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
  IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题。

严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行
  混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容
  意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)
  触发:浏览器根据doctype是否存在和使用的是那种dtd来决定

** 严格模式**
user strict
  为什么用严格模式:
   消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
   消除代码运行的一些不安全之处,保证代码运行的安全;
   提高编译器效率,增加运行速度;
   为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
  另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。
  语法与行为改变:
    禁止this关键字指向全局对象
    全局变量显式声明
    禁止删除变量
    对象不能有重名的属性
    函数不能有重名的参数

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

行内元素: a b br i span input select
  块级元素:div p h1 h2 h3 h4 form ul
  Css盒模型:内容,border ,margin,padding

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

内嵌,
  导入外部样式@import,
  链入外部样式<link>,
  内部样式<head>
    1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用; 而@import是CSS提供的,只能用于加载CSS;
    2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
    3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

6.CSS选择器有哪些?哪些属性可以继承,优先级算法如何计算?内联和!important的区别是什么?

class 选择器 .inner
  id 选择器 #demo
  标签 选择器 p
  后代选择器 p a
  伪类选择器 a:hover
  伪元素选择器 a:after
  属性选择器 input[type=checkbox]

优先级就近原则,同权重情况下样式定义最近者为准;
  载入样式以最后载入的定位为准;

优先级为:
  !important > id > class > tag
  important比内联优先级高(style)

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

结构层 Html 由html或XHTML的标记语言负责创建。标签,就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,p标签表达了这样一种语义:“这是一个文本段”。
  表示层 CSS 由CSS负责创建。
  行为层 js 负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

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

HTML标记、具有上下文关系的HTML标记、用户定义的类、用户定义的ID、虚类、虚元素。

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

IE浏览器的内核Trident、
  Mozilla的Gecko、
  google的WebKit、
  Opera内核Presto;

10.浏览器兼容性的解决方法

1.在有的浏览器中,默认字体大小为12px,所以在设字体大小的时候,最小设为12px,如果在做的过程中,发现字体小于12,可直接作为图片使用
  2.a标签对里不能嵌套a标签对
  3.若给a标签内的内容样式加上样式,需要设置display:block;(在IE中如果设置宽高会自动变成块,在FF中则不会),但如果设置了float属性,就不需要设置display:block。
  4.ul,ol在FF默认情况下,有list-style-type样式和padding值,dl在IE和FF默认情况下,有padding值,所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
  5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
  6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
  7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
  8.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离,这时需要设置display:inline; //使浮动忽略}

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

Alt 当图片不显示是 用文字代表。
  Title 为该属性提供信息

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

Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

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

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

好处:
  1、减少了图片个数,这样减小了对服务器的请求。
  2、整个图片的变小了,使得图片下载速度更快。
  3、不用使用javascript代码,而是使用纯CSS就可以

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

所谓的标准模式是指,浏览器按W3C标准解析执行代码;
  怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式

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

1. 确保网站信息描述全站统一
  2. 清楚网站内部无效重复的信息
  3. 让用户能迅速准确的在网站查看相关内容
  4. 优化内部结构便于搜索引擎的理解和收录
  文件合并
  文件最小化/文件压缩
  使用CDN托管
  缓存的使用

16.什么是语义化的HTML?

1.语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
  2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
  3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
  4.支持多终端设备的浏览器渲染。

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

1)父级div定义height。
    原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。
    优点:代码简洁
    缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
  2)a.结尾处加空div标签clear:both b.结尾处加br标签clear:both。
    原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。
    优点:浏览器支持好
    缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。(不推荐使用)
  3)父级div定义伪类:after和zoom
    原理:IE8以上和非IE浏览器才支持:after zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
    缺点:代码不是非常简洁(极力推荐使用)
  4)父级div定义overflow:hidden。
    原理:通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout(zoom:1)
    优点:代码简介,不存在结构和语义化问题
    缺点:无法显示需要溢出的元素(亦不太推荐使用)
  5)父级div定义overflow:auto。
    原理:原理同方法6,在IE6中还需要触发 hasLayout(zoom:1)
    优点:代码简介,不存在结构和语义化问题
    缺点:firefox早期版本会无故产生focus,多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。
  6)父级div也浮动,需要定义宽度。
    这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用
  7)父级div定义display:table。
    原理:将div属性强制变成表格
    优点:不解
    缺点:会产生新的未知问题。(不推荐使用)

比较好的是第3种方式,好多网站都这么用

18.javascript的typeof返回那些数据类型?

返回数据类型
  undefined
  string
  boolean
  number
  symbol(ES6)
  Object
  Function

19.列举3种强制类型转换和2种隐试类型转换?

3种强制类型转换
  Number(参数)把任何类型转换成数值类型
  parseInt(参数1,参数2)将字符串转换成整数
  parseFloat()将字符串转换成浮点数字
  string(参数):可以将任何类型转换成字符串
  Boolean()可以将任何类型的值转换成布尔值
2种隐试类型转换
  加法运算符+是双目运算符,只要其中一个是String类型,表达式的值便是一个String。
  对于其他的四则运算,只有其中一个是Number类型,表达式的值便是一个Number。
  对于非法字符的情况通常会返回NaN:

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,326评论 0 25
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,224评论 24 450
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,097评论 2 19