Web 面试题汇总(三)

1.介绍js的基本数据类型。

A:

  • Six data types that are primitives:
    • Boolean. true and false.
    • null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
    • undefined. A top-level property whose value is not defined.
    • Number. An integer or floating point number. For example: 42 or 3.14159.
    • String. A sequence of characters that represent a text value. For example:  “Howdy”
    • Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.
  • and Object

2.介绍js有哪些内置对象?

3.说几条写JavaScript的基本规范?

A:

  • 总是使用var声明变量
  • 行末别忘了分号
  • 使用标准而不是不标准的功能
  • 使用驼峰命名(如:camelCaseNames)以及大写的常量(如:UPPERCASE),避免使用const关键字,因为IE不支持
  • 使用命名空间技术
  • 避免eval()除非反序列化(奇怪的是JSON解析并未提及)
  • 避免对象上使用with(), 数组使用for in
  • 使用对象以及数组字面量而不是更冗长的声明
  • 要知道truthy和falsy规则
  • JavaScript资源中不使用IE条件注释
  • 不修改内置对象的原型——这会让人颜面扫地,因为这是让JavaScript更加强大的功能之一,但你知道这会导致问题
  • 小心使用闭包以及不要循环引用
  • 同样,小心使用”this”

Reference:翻译:谷歌HTML、CSS和JavaScript风格规范

4.JavaScript原型,原型链 ? 有什么特点?

A:

  • 原型:每个对象都有一个原型对象,它充当继承方法和属性来源的模板对象。
  • 原型链:对象的原型对象也可能有原型,依此类推,便形成原型链。
  • 特点:强大而灵活。
继续阅读

Web 面试题汇总(二)

1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

A:每个元素被表示为一个矩形的方框,框的内容、内边距、边界和外边距像洋葱的膜那样,一层包着一层构建起来。

低版本IE的盒子模型的宽度包括框的内容、内边距和边界。

2.CSS选择符有哪些?哪些属性可以继承?

A:

  • 简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。
  • 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。
  • 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。
  • 伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。 
  • 组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。
  • 多重选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。

哪些属性可以继承?

  • 所有元素可继承:visibility和cursor。
  • 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  • 终端块状元素可继承:text-indent和text-align。
  • 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承:border-collapse。

3.CSS优先级算法如何计算?

A:CSS根据规则的重要性、专用性和源代码次序来计算优先级。

重要性和源代码次序相对简单,专用性是用四种不同的值(或组件)来衡量的,它们可以被认为是千位,百位,十位和个位:

  1. 千位:如果声明是在style 属性中该列加1分(这样的声明没有选择器,所以它们的专用性总是1000。)否则为0。
  2. 百位:在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位:在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位:在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
继续阅读

Web 面试题汇总(一)

1.Doctype作用?标准模式与兼容模式各有什么区别?

A: 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

2.HTML5 为什么只需要写 <!DOCTYPE HTML>?

A: HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行;而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

A:

  • 行内元素有:a b span img input select strong(强调的语气)
  • 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
  • 常见的空元素:br hr img input link meta
  • 鲜为人知的空元素:area base col command embed keygen param source track wbr

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

A:

  • link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
  • link支持使用js控制DOM去改变样式,而@import不支持;

5.介绍一下你对浏览器内核的理解?

6.简述一下你对HTML语义化的理解?

A:用正确的标签做正确的事情。

  • html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记
  • 确定上下文和各个关键字的权重,利于SEO;
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

7.HTML5的离线储存怎么使用,工作原理能不能解释一下?

8.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

继续阅读