2021金山WPS秋招前端笔试题

列举几个常用的语义化标签，并说说标签语义化的好处

header 代表头部
mian 定义文档主要内容
nav 代表超链接区域
article 可以表示文章、博客等内容
aside通常表示侧边栏或嵌入内容
footer代表尾部

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页。
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

CSS中box-sizing的属性和作用

box-sizing: content-box|border-box|inherit；
1. content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型。box-sizing默认值为content-box，可以不写。
2. border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义border和padding也不会改变对象的实际宽度，表现为怪异模式下的盒模型。
3. inherit
指定 box-sizing 属性的值，应该从父元素继承

get请求和post请求的区别

• get的数据在URL中对所有人可见，post的数据不会直接显示在URL中
• get对数据长度有限制，当发送数据时get方法向URL添加数据，URL的长度最大是2048个字符，post无限制
• get可收藏为书签，post不可收藏为书签
• get后退按刷新无影响，post数据会被重新提交
• 编码类型不同
• get历史参数会保留在浏览器历史中，post参数不会保存在浏览器历史中
• get只允许ASCII字符，post没有限制，也允许二进制
• post比get安全
• get请求只会有一次TCP连接，post请求会有两次TCP连接

CORS是什么

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

localStorage和sessionStorage的区别

localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

CSS中animation和transition的区别

CSS3的transition（过渡）功能就像是一种黄油，可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多，所以才会更平滑。
CSS3的animation（动画）属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：
1）通过类似Flash动画中的帧来声明一个动画；
2）在animation属性中调用关键帧声明的动画。

transition	animation
需要借助交互	既可以自动播放，也可以借助交互
只能定义开始和结束状态	既可以定义开始和结束状态，还能通过关键帧定义中间状态
不可以控制暂停和播放	可以控制暂停和播放