网站首页 > 技术文章正文

大前端HTML+CSS+JavaScript+jQuery面试题(含答案)

ins518 2024-09-27 09:19:34 技术文章 10 ℃ 0 评论

HTML

语义化

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

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

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

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

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

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <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
常见的空元素: <br> <hr> <img> <input> <link> <meta>

页面导入样式时，使用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; 的区别

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

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

css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
常见的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有哪些继承属性

关于文字排版的属性如：
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)

毗邻的两个或多个 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", [baseWidget], widgetPrototype);

jQuery 与 jQuery UI、jQuery Mobile 区别？

jQuery 是 JS 库，兼容各种PC浏览器，主要用作更方便地处理 DOM、事件、动画、AJAX
jQuery UI 是建立在 jQuery 库上的一组用户界面交互、特效、小部件及主题
jQuery Mobile 以 jQuery 为基础，用于创建“移动Web应用”的框架

jQuery 和 Zepto 的区别？各自的使用场景？

jQuery 主要目标是PC的网页中，兼容全部主流浏览器。在移动设备方面，单独推出 jQuery Mobile
Zepto 从一开始就定位移动设备，相对更轻量级。它的 API 基本兼容 jQuery，但对PC浏览器兼容不理想

想了解更多最新面试套路以及面试题关注并私信回复“大前端”即可获取前端大量面试题资料以及电子书

上一篇：年薪50W前端工程师面试题大汇总!不收还等什么?
下一篇：干货| 这些Web前端必备面试题，你知道吗?

网站首页 > 技术文章正文

大前端HTML+CSS+JavaScript+jQuery面试题(含答案)

HTML

CSS

JavaScript

jQuery

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术文章 正文

大前端HTML+CSS+JavaScript+jQuery面试题(含答案)

HTML

CSS

JavaScript

jQuery

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术文章正文

取消回复欢迎你发表评论: