余晖落尽暮晚霞，黄昏迟暮远山寻
本站
当前位置：网站首页 > 编程知识 > 正文

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

xiyangw 2022-12-05 09:47 13 浏览 0 评论

HTML

语义化

  1. HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构

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

  2. css命名的语义化是指：为html标签添加有意义的class

  3. 为什么需要语义化：

  • 去掉样式后页面呈现清晰的结构

  • 盲人使用读屏器更好地阅读

  • 搜索引擎更好地理解页面，有利于收录

  • 便团队项目的可持续运作及维护

简述一下你对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; 的区别

  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", [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浏览器兼容不理想

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


相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者：前端藏经阁转发链接：https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事，试了一下Koa，第一次搞感觉还不错，这个项目比较基础但还是比较完整了，...

MongoDB 集群如何工作?

一、什么是“MongoDB”？“MongoDB”是一个开源文档数据库，也是领先的“NoSQL”数据库，分别用“C++”“编程语言”编写，使用带有“Schema”的各种类似JSON的文档，是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案，用于实现高可用。复制集这里部署相关的复制集，用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本，当发生硬件或者服务中断的时候，将会从副本中恢复数据，并进行自动...

一次线上事故，我顿悟了MongoDB的精髓

大家好，我是哪吒，最近项目在使用MongoDB作为图片和文档的存储数据库，为啥不直接存MySQL里，还要搭个MongoDB集群，麻不麻烦？让我们一起，一探究竟，继续学习MongoDB分片的理论与实践，...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用，但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多，但此软件收费，所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台，目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警（MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具，之前有用过Swagger、APIManager、Confluence，现在用的还是Confluence。我个人一直不喜欢用Swagger，感觉“代码即文档”，让代...

Mac安装使用MongoDB

下载MongoDB包：https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全，不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储，那一定涉及到数据的备份与恢复，下面给大家介绍下：MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注：mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编，除了分享技术文章之外还有很多福利，私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包，自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

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

一周热门
标签列表
最新留言
本站文章转载自互联网及网友投稿，文章内容仅供学习参考，不构成建议，也不代表本站赞同其观点。
如有侵权请联系jellybean52032@gmail.com，提供原文链接地址以及资料原创证明，本站将会立即删除。