前端基础面试题

口试题总结

• HTML
  
• 
  
  
  
  • 标签
    
  • 
    
    
    
    • 置换元素
      
    • 空元素
      
    • 行内元素和块元素
      
    • H5新增那些标签
      
      
    
    
  
• CSS
  
• 
  
  
  
  • 选择器
    
  • 
    
    
    
    • 选择器优先级
      
    • css3新增选择器
      
       
    
  • 场景分析
    
  • 
    
    
    
    • 清除浮动
      
    • 让元素居中的方法
      
      
    
    
  
• Javascript
  
• 
  
  
  
  • 根本
    
  • 
    
    
    
    • 闭包
      
    • 递归
      
    • this指向问题
      
      
    
  
  

HTML

标签

置换元素

1. 1. 一个内容 不受CSS视觉格式化模子控制，CSS渲染模子并不思量对此内容的渲染，且元素自己一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 2. 置换元素就是欣赏器根据元素的标签和属性，来决定元素的详细显示内容。 3. 例如欣赏器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查察(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，照旧单选按钮等。常见的有 <img>、、、、等

复制代码

空元素

什么是空元素

1. 空元素就是没有内容的 HTML 元素,是在开始标签中就关闭的元素。通俗点来讲空元素就是能不成对出现的标签
2. <img>

复制代码

行内元素和块元素

行内元素有哪些

1. 标签可界说锚表示一个缩写形式界说只bai取首字母缩写<b>字体加粗可覆盖默认的文本方向大号字体加粗
2. 换行引用举行界说界说盘算机代码文本界说一个界说项目<em>界说为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像输入框界说键盘文本标签为 元素界说标注（标志）界说短的引用界说样本文本创建单选或多选菜单出现小号字体效果组合文档中的行内元素<strong>语气更强的强调的内容界说下标文本界说上标文本多行的文本输入控件打字机大概等宽的文本效果界说变量

复制代码

块元素有哪些

1. 界说所在界说表格标题界说列表中界说条目界说文档中的分区或节界说列表界说列表中的项目界说一个框架集创建 HTML 表单[size=6]界说最大的标题[size=5]界说副标题[size=4]界说标题[size=3]界说标题[size=2]界说标题[size=1]界说最小的标题创建一条水平线元素为 元素界说标题标签界说列表项目为那些不支持框架的欣赏器显示文本，于 frameset 元素内部界说在脚本未被执行时的替代内容<ol>界说有序列表<ul>界说无序列表
2. 标签界说段落界说预格式化的文本[table]标签界说 HTML 表格标签表格主体（正文）[td]表格中的尺度单位格界说表格的页脚（脚注或表注）界说表头单位格标签界说表格的表头[tr]界说表格中的行

复制代码

区别

1. 1. 块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会分列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变革而变革，2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效（注意，块级元素设置了width宽度属性后仍然是独占一行的）3. 块级元素可以设置margin,padding属性行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

复制代码

H5新增那些标签

1.新增语义化标签

1.     头部标签    导航栏标签    界说文档某个区域的标签      侧边栏标签        尾部标签     

复制代码

2.新增媒体标签

1. [/code] [size=6]CSS[/size]
3. [size=5]选择器[/size]
5. [size=4]选择器优先级[/size]
7. 一、选择器的优先级排序
8. 1. ！important
9. 在属性背面写上这条样式，会覆盖掉页面上任何位置界说的元素的样式。
10. 2. 行内样式，在style属性里面写的样式。
11. 3. id选择器
12. 4. class选择器 伪类选择器
13. 5. 标签选择器
14. 6. 通配符选择器*
15. 7. 欣赏器的自界说属性和继承大概 *
16. [size=4]css3新增选择器[/size]
18. 1.新增属性选择器
19. [code]/* 第一种方法 */        input[value] {            color: rgb(252, 230, 230);        }        /* 第二种方法 重点掌握 */        input[name=id] {            color: rgb(27, 246, 253);        }        /* 第三种方法 */        div[class^=icon] {            color: rgb(76, 247, 71);        }        /* 第四种方法 */        section[class$=data]{            color: coral;        }        /* 第五种方法 */        div[class*=class]{            color: darkorchid;        }

复制代码

2.新增伪元素选择器

1. ::before   在元素内部的前面插入内容::after    在元素内部的背面插入内容  注意:●before和after创建一个元素 ,但是属于行内元素 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素●语法: element::before {}●before和after必须有content属性●before在父元素内容的前面创建元素, after 在父元素内容的背面插入元素●伪元素选择器和标签选择器一样,权重为1

复制代码

3.新增结构伪类选择器
区别：

• nth-child 对父元素里面所有孩子排序选择(序号是固定的）先找到第n个孩子,然后看看是否和E匹配
  
• nth-of-type 对父元素里面指定子元索举行排序选择。先去匹配E ,然后再根据E找第n个孩子
  

1. nth-child (n)选择某个父元素的一一个或多个特定的子元素 ●n 可以是数字。关键字和公式           常用公式：                   2n      偶数                   2n+1    奇数                   5n      5 10 15...                   n+5     从第5个开始(包罗第五个)到最后                   -n+5    前5个(包罗第5个) ...         ●n 如果是数字,就是选择第n个子元素，里面数字从1开始..         ●n可以是关键字: even偶数, odd奇数/* nth-of-type 会把指定元素的盒子分列序号*//*执行的时候首先看 div指定的元素 之后归去看:nth-of-type(1) 第几个孩子*/ section div:nth-of-type(1) {            background-color: blue;   }

复制代码

场景分析

清除浮动

1. 1.额外标签法也称为隔墙法,是W3C推荐的做法。额外标签法会在浮动元素末了添加一个空的标签。 例如
2. , 大概其他标签 (如
3. 等)。  优点:通俗易懂，书写方便  缺点:添加许多无意义的标签,结构化较差2.父级添加overflow属性!!!  优点:代码简便  缺点:无法显示溢出的部门3.父级添加after伪元索!!!  优点:没有增加标签,结构更简朴  缺点:照顾低版本欣赏器4.父级添加双伪元素!!!  优点:代码更简便  缺点:照顾低版本欣赏器

复制代码

让元素居中的方法

水平居中

1. 1 margin:0 auto;2 绝对定位和margin-left: -(宽度值/2)实现水平居中3 对于行内元素：text-align:center;4 position: absolute; left: 50%; transform: translateX(-50%); /* 移动元素自己50% */5 CSS3的flex实现水平居中 父元素 display: flex;lex-direction: column;子元素 align-self:center;

复制代码

垂直居中

1. 1 行内元素的垂直居中把height和line-height的值设置成一样的即可2 绝对定位 top: calc(100% - 自身高度的一半px) 3 绝对定位 top: 50%; transform: translate( -50%); 4 绝对定位和负边距 top:50%; margin-top:-自身高度的一半px;5 display: table-cell;  vertical-align: middle;6 父元素 display: flex; 子元素m argin: auto;

复制代码

Javascript

根本

闭包

当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
闭包的主要作用:延伸了变量的作用范围，另一个就是让这些变量的值始终保持在内存中

1. 闭包的优点：希望一个变量恒久存储在内存中。制止全局变量的污染。私有成员的存在。闭包的缺点：常驻内存，增加内存使用量。使用不妥会很容易造成内存泄露。（1）由于闭包会使得函数中的变量都被生存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。办理方法是，在退出函数之前，将不使用的局部变量全部删除。（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。function a() {            var num = 10;            function b() {                console.log(num);            }            return b();        }        // fn();var c = a();c();

复制代码

递归

步伐调用自身的编程本领就称之为递归（recursion），就是再运行的过程中调用自己，本质上就是循环.

1. 求n的阶乘function fn(n) {    if (n == 1) {       return 1;    }    return n *fn(n - 1);}console.log(fn(4));

复制代码

this指向问题

ES6箭头函数

1. 箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this因为箭头函数的特殊性 call(),apply(),bind() 三个方法都不适用箭头函数注意事项不能用作构造函数不能使用arguments不能作为对象的方法调用，因为照旧指向上下文，而不是调用的对象如果需要this操纵，不能用作addEventListener里传的参数

复制代码

平凡函数

1. 通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window改变函数内this指向 js提供了三种方法 call()apply() bind()1 call的主要作用可以实现继承2 apply 但是他的参数必须是数组(伪数组) var o = {            name: &#39;andy&#39;        };        function fn(arr) {            console.log(this);            console.log(arr);        };        fn.apply(o, [&#39;pink&#39;]);3 bind 不会调用原来的函数 可以改变原来函数内部的this指向       返回的是原函数改变this之后产生的新函数       如果有的函数我们不需要立即调用J但是又想改变这个函数内部的this指向此时用bind       我们有一个按钮,当我们点击了之后，就禁用这个按钮,3秒钟之后开启这个按钮var btn = document.querySelector(&#39;button&#39;);        btn.onclick = function () {            this.disabled = true;//这个this指向的是btn这个按钮            setTimeout(function () {                 this.disabled = false; //定时器函数里面的this指向的是window 添加bind事后this会指向btn            }.bind(this), 3000);//这个this 指向的是btn这个对象        }

复制代码

来源：https://blog.csdn.net/qq_43399210/article/details/111991123
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！