前端面试总结(四)

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

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

2.xhtml和html有什么区别

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

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

** doctype文档声明。**
   声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 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,
  链入外部样式,
  内部样式
    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:

你可能感兴趣的:(前端面试总结(四))