初级前端面试题(一) 之 html/css/js

目     录

一、 HTML

1. .如何理解HTML语义化的?

2.  HTML标签有哪些?

3. Canvas 和SVG的区别

二、CSS 

1. BFC是什么?

2. 如何实现垂直居中?

3. css选择器 优先级如何确定?

4. 如何清除浮动?

 5. 盒模型的区别?

6. display 的 block、inline 和 inline-block 的区别?

7. 对 CSS 工程化的理解? 

三、扩展

3.1 自适应,rem、em、vw的区别

3.2 说一下HTML5 drag API 

3.3 预处理器普遍会具备的特性? 

四、JavaScript

1. 基本类型

 2. 检测数据类型的方式

3. null和undefined的区别

4. 如何判断某对象是空对象?

5. 原型链是什么

6.this的指向

7. new 做了什么 

8.立即执行函数

9.闭包

10. js如何实现类

11. v-if 和v-show 的区别


一、 HTML

1. .如何理解HTML语义化的?

      语义化标签是写HTML的一种方法论。例如段落用P,标题h1--h6,内容用main 等等。明确了HTML书写规范,适合搜索引擎来检索,适合我们阅读,利于团队维护。

2.  HTML标签有哪些?

header、footer、main、video 等等

3. Canvas 和SVG的区别

   Canvas 主要是用笔刷来绘制2D图形,SVG 使用标签来绘制不规则矢量图的。

相同点:都是用来绘制2D图形的。

不同点:

  • Canvas 画的是位图,SVG画的是矢量图;
  • SVG 节点过多时渲染慢,Canvas 性能更好一点,但是吧,写起来比较复杂;
  • SVG支持分层和事件,Canvas 不支持,但可以用库来实现。

二、CSS 

1. BFC是什么?

BFC,块级格式化上下文。

1. 触发BFC的条件【5个】

  •  浮动元素
  • 绝对定位元素
  • 行内块元素
  • overflow 值不是visible的块元素/overflow:hedden
  • 弹性元素,display:flex

2. 解决了什么问题

  • 清除浮动
  • 防止垂直方向上的margin合并

2. 如何实现垂直居中?

  • flex布局 【最优先,使用次数最多】
  • margin-top:50%
  • translate:50%
  • absolute margin auto
  • table 自带属性;
  • div 装成table;(display:table)

3. css选择器 优先级如何确定?

  • 越具体的越优先;
  • 相同的优先级,后面的覆盖前面的;
  • 有!important 的优先级最高

4. 如何清除浮动?

 4.1 给父元素添加.clearfix

.clearfix:after{content:'';display:block;clear:both;
}

4.2  给父元素添加:overflow:hidden 

 5. 盒模型的区别?

标准盒模型是content-box,总宽度=width+margin+padding+border ;

第二种是IE盒模型 border-box,总宽度就是width。

相同点:

 都是用来指定宽度

不同点:

 border-box 更好用

6. display 的 block、inline 和 inline-block 的区别?

(1)block:会独占一行,多个元素会另起一行,可以设置 width、height、margin 和 padding 属性;
(2)inline:元素不会独占一行,设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性,不能设置垂直方向的 padding 和 margin;
(3)inline-block:将对象设置为 inline 对象,但对象的内容作为block 对象呈现,之后的内联对象会被排列在同一行内。

7. 对 CSS 工程化的理解? 

CSS 工程化是为了解决以下问题:
1.宏观设计:CSS 代码如何组织、如何拆分、模块结构怎样设计?
2.编码优化:怎样写出更好的 CSS?
3.构建:如何处理我的 CSS,才能让它的打包结果最优?
4.可维护性:代码写完了,如何最小化它后续的变更成本?如何确保任何一个同事都能轻松接手?我一般会用到预处理器:Less、 Scss 等。

三、扩展

3.1 自适应,rem、em、vw的区别

都是相对单位。

不同点:

  • rem相对html绕开了复杂的层级关系
  • em 相对父麻烦
  • vw 可视窗口1%

3.2 说一下HTML5 drag API 

  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发;
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发;
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发;
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发;
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触 发;
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发;
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

3.3 预处理器普遍会具备的特性? 

  • 嵌套代码的能力,通过嵌套来反映不同 css 属性之间的层级关系 ;
  • 支持定义 css 变量;
  • 提供计算函数;
  • 允许对代码片段进行 extend 和 mixin;
  • 支持循环语句的使用;
  • 支持将 CSS 文件模块化,实现复用。

四、JavaScript

1. 基本类型

number、boolean、string、null、undefined、object、symbol、bigint

ps: 对象用为空用unll,非对象为空用undefined

 2. 检测数据类型的方式

  • typeof
其中 数组、对象、null 都会被判断为object
  • instanceof
  • constructor
  • Object.prototype.toString.call()

3. null和undefined的区别

undefined 表示 未定义,null表示空对象。

4. 如何判断某对象是空对象?

  • 使用JSON 自带的stringify 
if(JSON.stringify(aObj)=='{}'){console.log(aObj,'是一个空对象');
}
  • 使用ES6的方法 Object.keys()
if(Object.keys(bObj).length<0){console.log(bOnb,'是空对象');
}

5. 原型链是什么

原型就是一个为对象实例定义了一些公共属性和公共方法的对象模板。 

原型链:是多个原型的集合,或者说 原型链是原型对象创建过程的历史记录。

  •  解决了什么问题?

在没有class的情况下实现[继承]

  • 缺点

不支持私有属性。calss 支持。

6.this的指向

简单来说  this 就是 call 的第一个参数 ,箭头函数没有this

全局作用域指向window
方法中指向所属对象

构造函数调用中

指向实例化对象
  • func(p1,p2) ==func.call(undefined,p1,p2)
  • obj.child.method(p1,p2) ==obj.child.method.call(obj.child,p1,p2)
var obj = {foo: function(){console.log(this) //obj}
}obj.foo()  obj.foo() 等价于obj.foo.call(obj),所以,这里的this 指向obj

7. new 做了什么 

this 是执行上下文中的一个属性,它指向最后一次调用这个方法的对象。
  • 创建临时对象/新对象
  • 绑定原型
  • 指定this=临时对象
  • 执行构造函数
  • 返回临时对象

8.立即执行函数

 声明一个匿名函数,然后立即执行它。这种做法就是立即执行函数。

立即执行函数是为了创建一个局部变量。

优点:兼容性好。

9.闭包

       闭包是一种语法特性。 js的所有函数都支持闭包,「函数」和「函数内部能访问到的变量」的总和,就是一个闭包。

解决了什么问题?

  • 避免污染全局环境;
  • 提供对局部变量的间接访问;
  • 维持变量,使其不会被垃圾回收。

使用不当可能造成内存泄漏。

10. js如何实现类

有两个方法,一种是使用原型,一种是使用calss

class Dog {static kind = '狗' // 等价于在 constructor 里写 this.kind = '狗'constructor(name) {this.name = namethis.legsNumber = 4// 思考:kind 放在哪,放在哪都无法实现上面的一样的效果}say(){console.log(`汪汪汪~ 我是${this.name},我有${this.legsNumber}条腿。`)}run(){console.log(`${this.legsNumber}条腿跑起来。`)}
}
const d1 = new Dog('啸天')
d1.say() 

11. v-if 和v-show 的区别

1.   相同点:都是控制显示隐藏的。

2.   不同点:

    (1) 控制手段不同;

    v-show 是通过display:none来控制隐藏的,dom元素还在;v-if 显示隐藏是讲dom元素整个添加或删除。

     (2)  编译过程不同;

      v-if切换有一个局部编译/卸载的过程,切换过程中合适的销毁和重建内部的事件监听和子 组件;v-show 只是简单地基于css的切换。

     (3) 编译条件不同;

             v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开        始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

               v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM        元素保留。

     (4) 性能消耗;

        v-if有更高的切换消耗;v-show有更高的初始渲染消耗。

     (5)适用场景:

        v-if适合运营条件不大可能改变;v-show适合频繁切换。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch7.8.1集群安装手册

1. 部署说明 elasticsearch集群规划为三个节点&#xff0c;elasticsearch版本为7.8.1 2. 下载安装包 1&#xff09;下载 Elasticsearch7.8.1安装包 # cd /opt # wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.1-linux-x86_64.tar.gz3. Ela…

C++设计模式_14_Facade门面模式

本篇介绍的Facade门面模式属于“接口隔离”模式的一种&#xff0c;以下进行详细介绍。 文章目录 1. “接口隔离”模式1. 1 典型模式 2. 系统间耦合的复杂度3. 动机(Motivation)4. 模式定义5. Facade门面模式的代码实现6. 结构7. 要点总结8. 其他参考 1. “接口隔离”模式 在组…

笔记44:Batch_Normlization 过程详解

笔记本地地址&#xff1a;D:\work_file\DeepLearning_Learning\03_个人笔记\2.图像处理任务\BN a a a a a a a a a a a a a a a a a

抖音上怎么挂小程序?制作小程序挂载抖音视频

公司企业商家现在已经把抖音作为营销的渠道之一&#xff0c;目前抖音支持短视频挂载小程序&#xff0c;可方便做营销。以下给大家分享这一操作流程。 一、申请自主挂载能力 首先需要在抖音开放平台官网注册一个抖音小程序账号&#xff0c;然后申请短视频自主挂载能力。 二、搭…

Liunx两台服务器实现相互SSH免密登录

一、首先准备两台Linux虚拟机当作此次实验的两台服务器 服务器1&#xff1a;server IPV4&#xff1a;192.168.110.136 服务器2&#xff1a;client IPV4&#xff1a; 192.168.110.134 二、准备阶段 [rootserver ~]# systemctl disable firewalld #关…

Umijs创建一个antd+Ts项目环境

上文搭建Umijs环境并创建一个项目 介绍基本操作中 我们构建了一个Umijs环境的环境 但也只创建了一个页面 真正开发来讲 也不可能只创建几个界面这么简单 这里面的创建 还是非常完整的 这里 我创建一个文件夹 主要是做我们的项目目录 然后 我们在终端输入命令 然后 打开目录终…

C#版字节跳动SDK - SKIT.FlurlHttpClient.ByteDance

前言 在我们日常开发工作中对接第三方开放平台&#xff0c;找一款封装完善且全面的SDK能够大大的简化我们的开发难度和提高工作效率。今天给大家推荐一款C#开源、功能完善的字节跳动SDK&#xff1a;SKIT.FlurlHttpClient.ByteDance。 项目官方介绍 可能是全网唯一的 C# 版字节…

pinia中使用reactive声明变量,子页面使用时,值未改变,即不是响应式的(解决方法)

reactive赋值无效&#xff01;reactive 不要直接data赋值&#xff01;&#xff01;&#xff01;会丢失响应式的&#xff0c;只能通过obj.属性 属性值赋值 方法一. pinia中直接使用ref定义变量即可 export const useUserStoredefineStore(user,()>{let loginUserreactive({…

C语言字符转数字函数

文章目录 atofatoiatolatollstrtodstrtofstrtolstrtoldstrtollstrtoulstrtoull atof double atof (const char* str);Convert string to double Parses the C string str, interpreting its content as a floating point number and returns its value as a double. The func…

【C++进阶】set和map的基本使用(灰常详细)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

Python 中的内存泄漏问题

内存泄漏是一个常见的编程问题,很难调试和修复。 本文将通过小型和大型示例程序探讨 Python 内存泄漏。 我们将了解如何找到内存泄漏的根源以及如何修复它。 Python 中的内存泄漏 在本文中我们不会讨论 Python 内存管理系统的内部结构。 但是,如果你对Python内存系统是如何…

跳跃游戏 II

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…

基于springboot实现网上图书商城管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现网上图书商城管理系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括网上图书商城的网络应用&#xff0c;在外国网上图书商城已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步…

基于nodejs+vue全国公考岗位及报考人数分析

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

在C++中,如果枚举类型的值超出了其定义的范围

枚举超边界不报错 #include <iostream>enum Color {Red,Green,Blue };int main() {Color color static_cast<Color>(1000); // 强制类型转换为枚举类型if (color Red) {std::cout << "The color is Red." << std::endl;} else if (color…

【数据结构】数组和字符串(七):特殊矩阵的压缩存储:三元组表的转置、加法、乘法操作

文章目录 4.2.1 矩阵的数组表示4.2.2 特殊矩阵的压缩存储a. 对角矩阵的压缩存储b~c. 三角、对称矩阵的压缩存储d. 稀疏矩阵的压缩存储——三元组表4.2.3三元组表的转置、加法、乘法、操作转置加法乘法算法测试实验结果代码整合 4.2.1 矩阵的数组表示 【数据结构】数组和字符串…

竞赛 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的行人重识别算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c…

论文阅读——BART

Arxiv: https://arxiv.org/abs/1910.13461 一个去噪自编码器的预训练序列到序列的模型。是一个结合了双向和自回归transformers的模型。 预训练分为两个阶段&#xff1a;任意噪声函数破坏文本和序列模型重建原始文本 一、模型 input&#xff1a;被破坏的文本-->bidirecti…

基于Canal同步MySQL数据到Elasticsearch

基于Canal同步MySQL数据到Elasticsearch 基于 canal 同步 mysql 的数据到 elasticsearch 中。 1、canal-server 相关软件的安装请参考&#xff1a;《Canal实现数据同步》 1.1 pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmln…

1. 两数之和、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天分享一些包括但不限于计算机基础、算法等相关的知识点&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&#x1f4d6;是你想要的&#x1f497; ⛽️今…