web前端最全面试题及答案含vuereact.docx

语义化的好处主要有两点：

开发者友好：

使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护

机器友好：

带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，语义类还可以支持读屏软件，根据文章可以自动生成目录

这对于简书、知乎这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，但是对于功能性的web软件重要性大打折扣，比如一个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。

6,HTML5与HTML4的不同之处

文件类型声明（

DOCTYPE>）仅有一型：

DOCTYPEHTML>。

新的解析顺序：

不再基于SGML。

新的元素：

section,video,progress,nav,meter,time,aside,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,mark,output,rp,rt,ruby,source,summary,wbr。

input元素的新类型：

date,email,url等等。

新的属性：

ping（用于a与area）,charset（用于meta）,async（用于script）。

全域属性：

id,tabindex,repeat。

新的全域属性：

contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck。

移除元素：

acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt

7有哪些常用的meta标签

meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name。

charset，用于描述HTML文档的编码形式

http-equiv，顾名思义，相当于http的文件头作用,比如下面的代码就可以设置http的缓存过期日期

viewport，移动前端最熟悉不过，Web开发人员可以控制视口的大小和比例

apple-mobile-web-app-status-bar-style,开发过PWA应用的开发者应该很熟悉，为了自定义苹果工具栏的颜色。

8,src和href的区别

src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。

href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

9知道img的srcset的作用是什么

可以设计响应式图片，我们可以使用两个新的属性srcset和sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

所以，有了这些属性，浏览器会：

查看设备宽度

检查sizes列表中哪个媒体条件是第一个为真

查看给予该媒体查询的槽大小

加载srcset列表中引用的最接近所选的槽大小的图像

10,还有哪一个标签能起到跟srcset相似作用

元素通过包含零或多个?

?

元素和一个?

元素来为不同的显示/设备场景提供图像版本。

浏览器会选择最匹配的子?

?

元素，如果没有匹配的，就选择?

?

元素的src属性中的URL。

然后，所选图像呈现在元素占据的空间中

11,script标签中defer和async的区别

defer：

浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。

async：

同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。

12,有几种前端储存的方式

cookies、localstorage、sessionstorage、WebSQL、IndexedDB

13,这些方式的区别是什么

cookies：

在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装

localStorage：

HTML5加入的以键值对（Key-Value）为标准的方式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+

sessionStorage：

与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式

WebSQL：

2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐除外）都已经有了相关的实现，websql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。

IndexedDB：

是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。

CSS篇

1,CSS选择器的优先级是怎样的

CSS选择器的优先级是：

内联>ID选择器>类选择器>标签选择器

到具体的计算层面，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：

A的值等于1的前提是存在内联样式,否则A=0;

B的值等于ID选择器出现的次数;

C的值等于类选择器和属性选择器和伪类出现的总次数;

D的值等于标签选择器和伪元素出现的总次数。

2,link和@import的区别

link属于XHTML标签，而@import是CSS提供的。

页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。

import只在IE5以上才能识别，而link是XHTML标签，无兼容问题。

link方式的样式权重高于@import的权重。

使用dom控制样式时的差别。

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

2,em\px\rem区别

px：

绝对单位，页面按精确像素展示。

em：

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：

相对单位，可理解为”rootem”,相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

3,块级元素水平居中的方法

margin:

0auto方法

flex布局，目前主流方法

table方法

4,CSS有几种定位方式

static:

正常文档流定位，此时top,right,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。

relative：

相对定位，此时的『相对』是相对于正常文档流的位置。

absolute：

相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。

fixed：

指定元素相对于屏幕视口（viewport）的位置来指定元素位置。

元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。

sticky：

粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。

5,如何理解z-index

CSS中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

6,如何理解层叠上下文

是什么

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

如何产生

触发一下条件则会产生层叠上下文：

根元素（HTML）,

z-index值不为"auto"的绝对/相对定位，

一个z-index值不为"auto"的flex项目（flexitem），即：

父元素display:

flex|inline-flex，

opacity属性值小于1的元素（参考thespecificationforopacity），

transform属性值不为"none"的元素，

mix-blend-mode属性值不为"normal"的元素，

filter值不为“none”的元素，

perspective值不为“none”的元素，

isolation属性被设置为"isolate"的元素，

position:

fixed

7,清除浮动有哪些方法

空div方法：

both;">