每周八股背诵0202-0208

MQliferecord
6 阅读7分钟

1. <img>标签的alt属性用来做什么的？

如果图片显示不出来用于进行文字提示；帮助seo索引。

2. 简述HTML新特性，请至少列举5个。

  • 语义化标签，方便阅读，代码清晰，以及SEO索引
  • 新增<audio>和<video>标签，原生支持音视频播放
  • 新增<canvas>标签，支持画布
  • 新增localStorage和sessionStorage两种存储方式
  • 新增更多的Form格式，比如<input>标签新增type字段，像是password/date等等
  • 提供了web workers的语法，支持浏览器多线程执行代码。

3. <meta>标签的作用是什么

提供相关浏览器编码的元数据，必填的像是charset和viewport。其他还有向页面提供SEO索引的name="description"，name="keywords"；控制浏览器加载的http-equiv="Cache-Control"，http-equiv="Refresh"等等。

4. <a>标签的target有哪些取值?

target决定超链接跳转页面在哪个窗口、标签页打开。

  • _self：打开的页面会替换当前页面，不会新开页面
  • _blank: 会新建空白标签页打开链接。同时需要添加rel="noopener noreferer"，防止新打开的页面通过window.opener篡改原页面，提升安全性。

因为当设置target="_blank"打开标签页的时候，新页面可以通过window.opener这个属性拿到原页面的window对象，所以设置noopener禁止拿到原网页的window对象，直接将原页面的属性变成null；同时不加的时候跳转到新页面的HTTP请求头会包含refer字段，包含前网页的url字段，url上有时候query会包含部分隐私信息，noreferer直接禁止新网页包含这个字段。

  • _parent: 仅在iframe框架中使用，在当前父框架里面替换掉iframe里面的页面内容
  • _top: 在浏览器的顶级窗口替换对应的链接内容。

5. 请求头常见的Header有哪些？

  • 请求地址Request URL: baidu.com/rest/api
  • 请求方式Request Method:POST/GET/DELETE/PUT
  • 状态码Status code:2XX正常接收/3XX重定向/4XX客户端请求不存在或者出问题/5XX服务器没响应或者响应错误
  • 连接方式Connection:KEEP-ALIVE长连接
  • 响应体的编码类型Content-type: application/json; application/javascript; image/png; text/html;
  • 客户端支持的请求体的类型Accept:和Content-type基本一致
  • 客户端支持的请求体的编码格式Accept-Encoding：gzip,deflate,br
  • 客户端支持的语言格式Accept-Language：zh-CN;zh
  • 客户端支持的缓存形式Cache-control:no-cache;no-store;max-age。如果是强缓存，会有expires字段。如果是协商缓存，则可能会有Etag,LastModified等字段。
  • Cookie
  • 前置页面的链接Referer: baidu.com/a11111
  • 用户使用的设备User-Agent
  • 客户端认证信息Authorization：存放Token

6. 请简述CSS定位position的几种取值及其含义

  • static 默认值
  • relative 相对于自身的位置偏移，不脱离文档流
  • absolute 相对于父组件的位置偏移，脱离文档流，经常和relative一起使用，父组件使用relative固定位置，子组件使用absolute相对变化
  • fixed 固定在屏幕某个位置不发生变化，比如面包屑、顶部滚动提示条等等
  • sticky 未触发滚动时遵循relative定位，触发后会fixed

7. display存在哪些常见取值？

  • block 块级显示，元素单独占一行，可自由设置width/height,margin/padding
  • inline 行内显示，无法设置宽高
  • inline-block 行内显示，但是可以设置宽高
  • none 隐藏该空间，没有该div在dom树上
  • flex 弹性盒子布局
  • grid 网格布局

8. CSS3中的新属性，至少列举5个。

  • border-radius 圆角
  • box-shadow 盒阴影
  • linear-gradient 线渐变 background: linear-gradient(to right,red,blue)
  • transition 过渡，为css属性变化提供过渡动画 transition: all 0.3s ease
  • transform 变换 里面包含平移translate，transform:translate(-50%,-50%); 缩放scale, transform:scale(1.2); 旋转rotate等等
  • flexbox 弹性盒子布局
  • gridbox 网格布局
  • media 媒体查询
  • CSS变量

9. 如何实现一个三角形

.div{
    width: 0px;
    height:0px;
    border-top:50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: solid transparent;
}

9. 设置元素可见的方法，至少列举三种

  • display:none 元素完全不见，占位空间也消失
  • visibility:hidden 元素不可见，但占位空间存在
  • opacity:0 元素不可见，但占位空间存在

10. 如何判断一个变量的数据类型

  • typeof 判断是否是基础的数据类型，缺点是没办法区分object的细节。typeof ipt === 'number'
  • instanceof 从原型链上判断是否继承这个构造函数的实例，缺点是只能判断出来引用类型 ipt instanceof Array
  • Object.prototype.toString.call() 精准判断 Object.prototype.toString.call(ipt) === '[object Array]'
  • constructor 判断其构造函数，但是null和undefined没有constructor属性，同时这个属性可能被篡改 ipt.constructor === Array
  • Array.isArray 判断是否是数组（最精准的判断是否是数组的方法）

11. 什么是闭包？闭包有什么作用？请举例说明。

一个函数内部封装另外的函数和变量，并且内部函数可以访问外部函数的变量，由此外部函数内部形成封闭的私有作用域，变量会被缓存和私有化，在外部函数被垃圾回收前，都不会被垃圾回收掉

avatar
文章
阅读
粉丝