前端基础面试题

HTML

标签

置换元素

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

空元素

什么是空元素

空元素就是没有内容的 HTML 元素,是在开始标签中就关闭的元素。
通俗点来讲空元素就是能不成对出现的标签
<area>
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

行内元素和块元素

行内元素有哪些

<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只bai取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量

块元素有哪些

<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为 
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行

区别

1. 块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3. 块级元素可以设置margin,padding属性行内元素的水平方向的padding-left和padding-right都会产生边距效果，
但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

H5新增哪些标签

1.新增语义化标签

    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>定义文档某个区域的标签
      <aside>侧边栏标签</aside>
    </section>
    <footer>尾部标签</footer>
    <form action=""> </form>
    <canvas> 标签定义图形，比如图表和其他图像。</canvas>

2.新增媒体标签

<video src=""  autoplay="autoplay" controls="controls"></video>
<audio src="" controls="controls"></audio>

CSS

选择器

选择器优先级

一、选择器的优先级排序

1. ！important

在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。

2. 行内样式，在style属性里面写的样式。

3. id选择器

4. class选择器 伪类选择器

5. 标签选择器

6. 通配符选择器*

7. 浏览器的自定义属性和继承或者 *

css3新增选择器

1.新增属性选择器

/* 第一种方法 */
        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.新增伪元素选择器

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

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

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

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.额外标签法也称为隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。 
例如<div style="clear:both" > </div> , 或者其他标签 (如<br/>等)。
  优点:通俗易懂，书写方便
  缺点:添加许多无意义的标签,结构化较差
2.父级添加overflow属性!!!
  优点:代码简洁
  缺点:无法显示溢出的部分
3.父级添加after伪元索!!!
  优点:没有增加标签,结构更简单
  缺点:照顾低版本浏览器
4.父级添加双伪元素!!!
  优点:代码更简洁
  缺点:照顾低版本浏览器

让元素居中的方法

水平居中

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 行内元素的垂直居中把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）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，
所以不能滥用闭包，否则会造成网页的性能问题，在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），就是再运行的过程中调用自己，本质上就是循环.

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

this指向问题

ES6箭头函数

箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this
因为箭头函数的特殊性 call(),apply(),bind() 三个方法都不适用

箭头函数注意事项
不能用作构造函数
不能使用arguments
不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
如果需要this操作，不能用作addEventListener里传的参数

普通函数

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