html+css+javascript从入门到精通_大前端HTML+CSS+JavaScript+jQuery面试题（含答案）

HTML

语义化

1. HTML标签的语义化是指：通过使用包含语义的标签(如h1-h6)恰当地表示文档结构
2. css命名的语义化是指：为html标签添加有意义的class
3. 为什么需要语义化：

• 去掉样式后页面呈现清晰的结构
• 盲人使用读屏器更好地阅读
• 搜索引擎更好地理解页面，有利于收录
• 便团队项目的可持续运作及维护

简述一下你对HTML语义化的理解？

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

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

• 声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
• 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

HTML5 为什么只需要写 ？

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

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素有：a b span img input select strong(强调的语气)
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 常见的空元素:

  ---

页面导入样式时，使用link和@import有什么区别？

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

• 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
• 渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
• JS引擎则：解析和执行javascript来实现网页的动态效果
• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

• Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari,Chrome等。 [ Chrome的Blink(WebKit的分支)]

CSS

display: none; 与 visibility: hidden; 的区别

1. 联系：它们都能让元素不可见
2. 区别：

• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
• display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
• 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
• 读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

css hack原理及常用hack

1. 原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
2. 常见的hack有

• 属性hack
• 选择器hack
• IE条件注释

link 与 @import 的区别

• link 是HTML方式， @import 是CSS方式
• link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现FOUC
• link 可以通过 rel="alternate stylesheet" 指定候选样式
• 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
• @import 必须在样式规则之前，可以在css文件中引用其他文件
• 总体来说：link优于@import

CSS有哪些继承属性

1. 关于文字排版的属性如：
2. font

• word-break
• letter-spacing
• text-align
• text-rendering
• word-spacing
• white-space
• text-indent
• text-transform
• text-shadow
• line-height
• color
• visibility
• cursor

外边距折叠(collapsing margins)

1. 毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：

• 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
• 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
• 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
• 元素自身的margin-bottom和margin-top相邻时也会折

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

• 有两种， IE 盒子模型、W3C 盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border 和 padding计算了进去;

CSS选择符有哪些？哪些属性可以继承？

• id选择器( # myid)
• 类选择器(.myclassname)
• 标签选择器(div, h1, p)
• 相邻选择器(h1 + p)
• 子选择器(ul > li)
• 后代选择器(li a)
• 通配符选择器( * )
• 属性选择器(a[rel = "external"])
• 伪类选择器(a:hover, li:nth-child)
• 可继承的样式： font-size font-family color, UL LI DL DD DT
• 不可继承的样式：border padding margin width height

CSS优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• 优先级为: !important > id > class > tag important 比 内联优先级高

JavaScript

Javascript作用链域?

• 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
• 如果当前作用域没有找到属性或方法，会向上层作用域查找，直至全局函数，这种形式就是作用域链

谈谈this对象的理解

• this 总是指向函数的直接调用者
• 如果有 new 关键字，this 指向 new 出来的实例对象
• 在事件中，this指向触发这个事件的对象
• IE下 attachEvent 中的this总是指向全局对象Window

介绍JavaScript的原型，原型链？有什么特点？

• 原型：
• JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是该对象的原型
• JavaScript的函数对象，除了原型 [proto] 之外，还预置了 prototype 属性
• 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]。
• 原型链：
• 当一个对象调用的属性/方法自身不存在时，就会去自己 [proto] 关联的前辈 prototype 对象上去找
• 如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
• 原型特点：
• JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

JavaScript有几种类型的值？，你能画一下他们的内存图吗？

• 原始数据类型(Undefined，Null，Boolean，Number、String)-- 栈
• 引用数据类型(对象、数组和函数)-- 堆
• 两种类型的区别是：存储位置不同：
• 原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；
• 引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；
• 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
• 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

jQuery

jQuery 的实现原理？

• (function(window, undefined) {})(window);
• jQuery 利用 JS 函数作用域的特性，采用立即调用表达式包裹了自身，解决命名空间和变量污染问题
• window.jQuery = window.$ = jQuery;
• 在闭包当中将 jQuery 和 $ 绑定到 window 上，从而将 jQuery 和 $ 暴露为全局变量

jQuery.fn 的 init 方法返回的 this 指的是什么对象？ 为什么要返回 this？

• jQuery.fn 的 init 方法 返回的 this 就是 jQuery 对象
• 用户使用 jQuery() 或 $() 即可初始化 jQuery 对象，不需要动态的去调用 init 方法

jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

• 浅拷贝(只复制一份原始对象的引用) var newObject = $.extend({}, oldObject);
• 深拷贝(对原始对象属性所引用的对象进行进行递归拷贝) var newObject = $.extend(true, {}, oldObject);

jQuery 中的 bind(), live(), delegate(), on()的区别？

• bind 直接绑定在目标元素上
• live 通过冒泡传播事件，默认document上，支持动态数据
• delegate 更精确的小范围使用事件代理，性能优于 live
• on 是最新的1.9版本整合了之前的三种方式的新事件绑定机制

针对 jQuery 的优化方法？

• 缓存频繁操作DOM对象
• 尽量使用id选择器代替class选择器
• 总是从#id选择器来继承
• 尽量使用链式操作
• 使用时间委托 on 绑定事件
• 采用jQuery的内部函数data()来存储数据
• 使用最新版本的 jQuery

jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢?

• 在触发元素上的事件设置为延迟处理：使用 JS 原生 setTimeout 方法
• 在触发元素的事件时预先停止所有的动画，再执行相应的动画事件：$('.tab').stop().slideUp();

jQuery UI 如何自定义组件？

• 通过向 $.widget() 传递组件名称和一个原型对象来完成
• $.widget("ns.widgetName