美文网首页
2020前端面试题(HTML、CSS、JS)

2020前端面试题(HTML、CSS、JS)

作者: 柳岸花茗 | 来源:发表于2020-07-21 10:57 被阅读0次

一. HTML

1. 你是如何理解HTML语义化的?
根据内容的结构化, 选择合适的标签。
例如:文章就用article标签,标题就用h1标签,代码就用code标签等。
便于开发者阅读和写出更优雅的代码。
好处:(1)有利于SEO(搜索引擎优化)
(2)呈现较好的内容结构和代码结构。
(3)便于开发和维护。
(4)方便其它设备解析。
2. meta-viewport 是做什么的?怎么写?
meta标签主要用于描述页面中的一些信息。
写法:
<meta name="viewport" 
           content="width=device-width, 
           initial-scale=1, 
           maximum-scale=1">
name = "viewport" 表示可供移动设备使用
content = "width=device-width" 表示移动设备下显示的宽度为设备宽度
initial-scale = 1 表示设备与视口的缩放比率
maximum 和 minimum 表示缩放的最大和最小值,等于1.0则不可缩放。

3. 你用过哪些HTML5标签?
<hader></header>
<content></content>
<footer></footer>
<main></main>
<section></section>
<h1> - <h5>
<pre></pre>
<article></article>
4. H5是什么?
HTML5并不是一项技术,而是一个标准,所以严格意义上说,H5不是用来“做的”,
H5只是一个标准,通俗的说就是一种准则,不是一项技术。H5是指HTML第五次
重大修改版本,也指用H5语言制作的一切数字产品

二. CSS

1. 两种盒模型说一下。
border-box: width = border + padding + 内容的宽度

content-box: width = 内容的宽度

border-box更好的原因: content-box改变padding 和 border之后需要重新计算宽度,
而border-box不需要,但是boder-box的内容区域会被挤压。
2. 如何垂直居中?
1. .content{
          display: flex;
          aligin-item: center;
          justicfy-content: center;
    }
2. .content{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
    }
3. .coontent{
          width: 50px;
          height: 50px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -25px;
          margin-left: -25px;
    } <!-- 子元素宽高固定 -->
4. .content{
          width: 50px;
          height: 50px;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto
     }  <!-- 子元素宽高固定 -->
3. flex怎么用?常用属性有哪些?

4. BFC是什么?
  BFC的全称是块级格式化上下文

  BFC的概念比较抽象,浮动元素、display:inline- 
  block、绝对定位元素和overflow: hidden等都形成BFC

  BFC的作用:使内部浮动元素不会乱跑,并可以和
  浮动元素产生边界margin。
5. CSS选择器的优先级?
1. 越具体优先级越高
2. 写在后面的覆盖写在前面的。
3. important! 优先级最高
6. 如何清除浮动?
  .clearfix{
       content: '',
       display: block;
       clear: both;
   }

三. 原生JS

1. ES6语法知道哪些?分别怎么用?
2. promise、promise.all、promise.race 分别怎么用?
  Promise是异步编程的一种解决方案,可以将异步操作以同步操作的流程
表达出来。Promise必须为以下三种状态:
Pending(等待),FullFilled(执行态),和Reject(拒绝)
状态的改变只能是单向的,且变化后不可变。
一个Promise必须调用一个then方法已返回其当前值、终值和拒因。
Promise.then回调函数只能执行一次,且返回Promise对象。

(1)Promise.all()方法将多个Promise实例,包装成
一个新的Promise实例。
Promise.all([promise1,promise2]).then(success, fali)
当Promise1和promise2都成功才会调用success。

(2)Promise.race()同样将多个Promise实例,包装
成一个新的Promise实例。
Promise.race([promise1,promise2]).then(success, fali)
promise1和promise2只要有一个成功就会调用success
3. 手写函数防抖和函数节流。
4. 手写Ajax
5. 这段代码里面的this是什么?
6. 闭包、立即执行函数是什么?
7. 什么是JSONP?什么是CORS?什么是跨域?
8. async/await 怎么用?如何捕获异常?
9. 如何实现深拷贝?
10. 如何用正则实现trim()?
11. 不用class如何实现继承?
12. 如何实现数组去重?
13. 手写一个Promise

相关文章

  • MDN

    前端HTML/CSS/JS

  • 前端学习资料

    前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

  • 搜索框模糊查询

    前端html代码 前端js代码 前端css代码 后端php返回json

  • HTML

    html+css+javascript 称作前端三剑客,html主要做前端的骨架,css做前端的效果,js做前端的...

  • 兼容ie8的轮播图

    效果图: 前端html代码: 前端css代码: 轮播图js代码:

  • 2018-2020前端面试题合集

    2018-2020年web前端面试题整理成PDF文档,共83页,内容主要包括有html、css、JavaScrip...

  • 《前端面试题》- 目录

    HTML CSS 《前端面试题》- CSS - 打印分页[https://www.jianshu.com/p/91...

  • 初入小程序

    1,需求知识(HTML,css,js) 小程序中的wxml,wxss与前端中的HTML,css基本相同,js完...

  • 跳槽,不刷点面试题怎么能行?

    前端开发面试题 1、前端页面有哪三层构成,分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js...

  • HTML内容整理

    最近自学了前端的一些内容:HTML、CSS、JS HTML负责页面内容,CSS负责页面格式,JS负责动作。 整理下...

网友评论

      本文标题:2020前端面试题(HTML、CSS、JS)

      本文链接:https://www.haomeiwen.com/subject/lzqukktx.html