一、HTML5面试题

1、空元素定义？

答：标签内容没有任何内容的HTML标签被称之为空元素，空元素是自闭合标签。空元素有：br、hr、img、input、meta（提供有关页面的元信息，描述HTML网页的属性）、link（定义文档与外部资源的关系，一般用于连接外部样式表）

2、你用过哪些HTML5标签？

答：

video：视频标签
audio：音频标签
canvas：画布，用于在网页上绘制图形。使用 JavaScript 在网页上绘制图像
footer：语义化标签。定义文档的页脚
header：语义化标签。定义网页的头部，页眉
article：语义化标签。定义独立的内容，该标签的内容独立于文档的其余部分
nav：语义化标签。用于定义导航链接的部分，没有实际的效果，只是表示该区域是导航链接，一般用于列表
aside：语义化标签。用于表示主题的附属内容。
detail：语义化标签。用于描述文档或者文档某个部分的细节，一般与summary配合使用，可以用来开发折叠列表功能。默认属性是open。
progress：语义化标签。用来制定进度条效果。

3、页面导入样式时，使用link 和 @import 有什么区别？

答：

区别1：link是XHTML标签，除了加载css还能用于定义RSS, 定义rel连接属性等作用； @import 只会加载css
区别2：link引入时，css与页面同时加载；而@import 会在页面加载完后再加载css
区别3：link是XHTML标签，没有兼容问题；而@import 是在css2.1提出的，所以低版本浏览器不支持，比如ie5以下。
区别4：link支持js去控制改变样式；而@import 不支持。

4、label 的作用是什么？是怎么用的？

答：label标签为input标签定义标注;并且当用于点击label的内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

用法：label中的for属性的值要与input标签中的id值一致，for属性是规定label绑定到那个表单元素上;form规定 label 字段所属的一个或多个表单。

`<label for="name">Number:</label>` `<input type=“text“ name="name" id="name"/>`

5、请说出XHTML 和HTML 的区别？

答：

元素的嵌套：在HTML中，有些元素可以不正确的嵌套；而在XHTML中，元素与元素之间必须正确的嵌套。
文档内根元素的差异：在XHTML中元素必须被嵌套于根元素中。
规范性：在HTML中允许一些不规范的写法；而在XHTML中则是不可以的
标签名大小写：在HTML中，对大小写不敏感；而在XHTML中，对大小写敏感，元素名应该小写
基本概念：HTML是超文本标记语言;而XHTML是可扩展超文本标记语言，表现方式与HTML类似，但语法更为严格！
结束标签的区别：XHTML中元素包括空元素必须闭合，而HTML中没有强制性要求。

6、请写出至少5个块级标签和行内标签？

答：

块级标签：div、p、ol、dl、ul、li、form、h1-h5、hr、pre、table、tr
行内标签：a、img、span、label、input、textarea、button、select、br、b、i、strong
注意：行内元素转换为块级元素一般有三种：display：block、float、position：absolute\fixed，都会转换为块级元素，但float与position会影响布局，并且只有display：block转换的元素才会继承父元素的属性，其他转换并不会

7、很多网站不常用table, iframe 这两个元素，为什么？

答：因为浏览器页面渲染的时候是从上至下的，而table 和iframe 这两个元素会改变这样的渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验不友好。

8、 jpg 和png 格式的图片有什么区别？

答：

.png:支持透明，颜色比较广，图片质量高，比较常用，是无损压缩的图片，占内存大，网页加载速度慢；
.jpg:不支持透明，占内存小，网页加载速度快，是有损压缩的图片。

9、请用HTML 知识解决seo 优化问题？

答：网站上线应该设置TDK

1. 其中"T"代表页头中的title元素，这里可能还要利用到分词技术；当标题(Title)写好后，我们就尽可能不要再去修改了，尽量简洁；没意义的词尽量不要加入到标题中，避免干扰到搜索引擎识别网站主题（标题在三十个字以内）。
1. 其中"D"代表页头中的description元素，要知道描述是对网页的一个概述；也是对title的补充，因为title中只能书写有限的字数，所以在description中就要稍微详细的补充起来；一般用一句两句话概括文章的内容，内容要精简,但是次数不要超过4 次，3次最佳，一定要自然。
1. 其中"K"代表页头中的keywords元素，提取页面中的主要关键词；数量控制在三到六个内。想方设法让主关键字都出现。标题、描述、关键词在seo界也被称为三个标签。
然后就是html语义化标签，要简洁，合理，这样可以在css和js加载不全的时候，使我们的html文档尽量清晰的展示出来，而不会特别乱；

10、 a标签在新窗口打开链接怎么加属性？

答：<a target="_blank">链接</a>

11、两个span 标签之间有空格？

答：是因为我们书写习惯导致的，我们习惯将span换行：

解决：

不给span换行，当团队开发时，不适用
给父标签设置font-size：0；在额外给span设置其他字体大小；会有兼容问题
给span设置浮动float：left；推荐使用

12、 form 标签上定义“请求类型”是哪个属性？定义“请求地址”是哪个属性？

答：

请求类型：method
请求地址：action

13、简述一下你对HTML 语义化的理解？

答：
1. 去掉或丢失样式时，能够让页面呈现出清晰的结构；
2. 有利于SEO 和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
3. 方便其他设备解析
4. 便于团队开发和维护，语义化更具可读性。

14、cookies, sessionStorage 和 localStorage 的区别？

答：存储大小限制；数据有效期不同；作用域不同。
1. cookies 是为了标识用户身份而存储在用户本地终端上的数据；
  始终在同源http 请求中携带，即cookies 在浏览器和服务器间来回传递；
  而sessionStorage 和localStorage 不会自动把数据发给服务器，仅在本地保存。
2. cookie 保存数据很小，不能超过4k;
  sessionStorage 和localStorage 保存数据大，可达到5M。
3. cookie 在设置的cookie 过期时间之前一直有效，即使窗口或者浏览器关闭；
  sessionStorage 仅在浏览器窗口关闭之前有效；
  localStorage 始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4. cookie 在所有的同源窗口都是共享；
  sessionStorage 不在不同的浏览器共享，即使统一页面；
  localStorage 在所有同源窗口共享。

15、iframe框架有哪些优缺点？

答：
优点：
1. iframe 能够原封不动的把嵌入的网页展现出来；
2. 如果有多个网页引用iframe,那么你只需要修改iframe 的内容，就可以实现调用的每一个页面内容的更改;
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe 来嵌套，可以怎加代码的可重用；
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe 来解决。

缺点：
1. 搜索引擎的爬虫程序无法解读这种页面；
2. 框架结构中出现各种滚动条；
3. 使用框架结构时，保证设置正确的导航链接。
4. iframe 页面会增加服务器的http 请求。

16、如何关闭input 的自动填入功能？

答：将input中的autocomplete的值设置为off即可

17、如何实现浏览器内多个标签页之间的通信？

答：

1、调用localStorage:在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听storage事件。即可得到localstorge存储的值，实现不同标签页之间的通信。
2、调用cookie+setInterval()：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
3、使用WebSocket协议
4、html5浏览器的新特性SharedWorker

18、页面可见性（Page Visibility）API可以有哪些用途？

答：

用途：1、通过visibility state 的值得检测页面当前是否可见，以及打开网页的时间；2、在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。
页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是.........，(把浏览器最小化，所有的页面就都不可见了)。

API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。不同页面之间来回切换，触发visibilitychange事件。还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。
```
document.addEventListener("visibilitychange", function(){
    if(document.hidden){
        document.title ="hidden";
    }else {
        document.title = "visibile";
    }
})
```
我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示visiable ,当我们看另一个页面时，标题显示hidden;

动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。

19、网页验证码是干嘛的？是为了解决什么安全问题？

答：

1. 区分用户是计算机还是人的程序；
1. 可以防止恶意破解密码，刷票，论坛灌水；

20、如何进行网站性能优化？

答：
·content 方面
1. 减少HTTP 请求：合并文件，CSS精灵图，小图base64；
2. 减少DNS 查询：DNS 查询完成之前浏览器不能从这个主机下载任何文件。
  方法：DNS缓存，将资源分布到恰当数量的主机名，平衡并行下载和DNS 查询；
3. 避免重定向：多余的中间访问；
4. 使Ajax 可缓存；
5. 非必须组件延迟加载；
6. 未来所需组件预加载；
7. 减少DOM 元素数量；
8. 将资源放到不同的域下：浏览器同事从一个域下载资源的数目有限，增加域可以提高并行下载量；
9. 减少iframe 数量；
10. 不要404

·Server 方面
1. 使用CDN
2. 添加Expires 或者Cache-Control 响应头
3. 对组件使用Gzip 压缩
4. 配置ETag 
5. Flush Buffer Early
6. Ajax 使用GET 进行请求
7. 避免空src 的img 标签

·Cookie 方面
1. 减小cookie 大小
2. 引入资源的域名不要包含cookie

·CSS 方面
1. 将样式表放到页面顶部
2. 不使用CSS 表达式
3. 使用@import
4. 不使用IE 的Filter

·JavaScript 方面
1. 将脚本放到页面底部
2. 将JavaScript 和 CSS 从外部引入
3. 压缩JavaScript 和CSS
4. 删除不需要的叫脚本
5. 减少 DOM 访问
6. 合理设计事件监听器

·图片方面
1. 优化图片：根据事件颜色需要选择色深，压缩
2. 优化CSS 精灵
3. 不要再HTML 中拉伸图片
4. 保证favicon.ico 小并且可缓存

·移动方面
1. 保证组件小于25k
2. Pack Components into a Multipart Document

21、CSS3有哪些新特性？

答：
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

```转换```
旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale（。5）；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

22、px、em、rem的区别?

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。

em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。而rem只是相对于根元素<html>，计算起来更清晰。

二、css3面试题？

1、盒模型？

答：
·标准盒模型  margin, border, padding, content

·IE盒模型 border, padding, content

·通过 box-sizing属性改变元素的盒模型

2、CSS选择符？

答：
·id选择器（#myId）
·类选择器（.myClassName）
·标签选择器（p, h1, p）
·后代选择器（h1 p）
·相邻后代选择器（子）选择器（ul > li）
·兄弟选择器（li~a）
·相邻兄弟选择器（li+a）
·属性选择器（a[rel="external"]）
·伪类选择器（a:hover, li:nth-child）
·伪元素选择器（::before, ::after）
·通配符选择器（*）

3、::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

答：
    ·在 CSS3 中 : 表示伪类， :: 表示伪元素
    ·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

4、CSS中哪些属性可以继承？

答：
·每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，
    会使用父元素的同属性的值来作为自己的值。

·一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。

·文本相关的属性，color和text-align等。

·表格的一些布局属性、列表属性如list-style等。

·还有光标属性cursor、元素可见性visibility。

·当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的
属性值来继承。

5、.如何居中p？

答：

1、水平居中1：给 p 设置一个宽度，然后添加 margin:0 auto; 属性 p{

width: 200px;

margin: 0 auto; }

2、水平居中2：利用 text-align:center 实现： .container{

background: rgba(0, 0, 0, .5);

text-align: center:

font-size: 0;}.box{

display: inline-block;

width: 500px;

height: 400px;

background-color: pink;}

3、让绝对定位的p居中： p{

positionn: absolute;

width: 300px;

height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: pink; /* 方便看效果 */}

4、水平垂直居中1： /* 确定容器的宽高，宽500高300 */p{

position: absolute;

width:500px;

height: 300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;

background-color: pink;}

5、水平垂直居中2： /* 未知容器宽高，利用 transform 属性 */p{

position: absolute;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: pink;}

6、水平垂直居中3： /* 利用 flex 布局实际使用时应考虑兼容性 */.container{

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */}.container p{

width: 100px;

height: 100px;

background-color: pink;}

6、CSS3有哪些新特性？

答：
  ·新增各种CSS选择器（:not(.input) 所有class不是“input”的节点）
  ·圆角（border-radius: 8px;）
  ·多列布局（multi-columnlayout）
  ·阴影和反射（Shadow/Reflect）
  ·文字特效(text-shadow)
  ·文字渲染(Text-decoration)
  ·线性渐变(gradient)
  ·旋转(transform)
  ·缩放，定位，倾斜，动画，多背景

7、解释一下 Flexbox (弹性盒布局模型)？及适用场景？

答：
·任何一个容器都可以指定为 flex 布局。行内元素也可使用 flex 布局。

·一下6个属性设置在容器上

  flex-direction  定义主轴的方向

  flex-wrap  定义“如果一条轴线排不下，如何换行”

  flex-flow  上述2个属性的简写

  justify-content  定义项目在主轴上对齐方式

  align-items  定义项目在交叉轴上如何对齐

  align-content  定义多根轴线的对齐方式



·flex 布局是CSS3新增的一种布局方式，

我们可以通过将一个元素的display属性设置为flex 从而使他成为一个flex容器，

他里面所有子元素都会称谓他的项目。

·一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。

我们可以使用flex-direction来指定主轴的方向。

我们可以使用justify-content来指定元素在主轴上的排列方式，

使用align-items来指定元素在交叉轴上的排列方式。

还可以使用flex-wrap来规定当一行排列不下时的换行方式。

8、用纯 CSS 创建一个三角形？

/*

采用的是相邻边框链接处的均分原理  将元素的宽高设为0，只设置 border ,  将任意三条边隐藏掉
（颜色设为 transparent ）,剩下的就是一个三角形 */
#demo{

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;}

9、CSS优化，提高性能的方法有哪些？

答：
·加载性能：

  ① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。

  ② CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;

  但margin-top: top;margin-bottom: bottom;执行的效率更高。

·选择器性能：

  ① 关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。

10、css选择器有哪些？

答：

id选择器
class选择器
标签选择器
通配符：*选择器
属性选择器：[title=...]{display:flex...}
子代选择器：div > p{...}
后代选择器：div p {...}
并集/兄弟选择器：div,p{...}
伪类和伪元素选择器：div:hover{}, div:before/after{}

权重：！important > 行内样式 > id > class、伪类 > 标签 > 通配符...

11、伪类选择器和伪元素选择器的区别？

答：

伪类选择器：不修改dom内容，通过一些特定的选择器，根据特定的状态、特定条件来修改元素的样式。

比如：
- a标签中的：依次顺序有：:link :visited :hover :active
伪元素选择器：css3规定伪元素由两个冒号开头作为标示::,可能会改变dom结构，创建虚拟dom。

比如： ::before ::after

12、清除浮动的几种方式？

答：

在父元素上添加overflow：hidden：注意超出的文本也会隐藏
在浮动元素的末尾插入一个空标签，样式设置为clear：both；
在需要清除浮动的元素上设置clear属性
利用伪元素选择器after来清除浮动，选择器名可以应用在需要清除浮动的元素上

三、网页布局？

1、网页的布局有哪几种？

答：

表格布局：
flex布局：
浮动float布局：
响应式布局：

1、加上meta标签：<meta name="viewport" content="width=device-width, initial-scale=1">

2、使用rem单位：rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

3、使用media query定制样式：@media screen and (max-width: 360px) { html { font-size: 12px; } }
定位布局

四、JavaScript？

1、JavaScript数据类型有哪些？

答：数据类型分为俩种：基本类型和引用类型

基本类型：string、number、null、undefined、boolean
引用类型：object、array、function

2、typeof返回的数据类型有哪些？

答： typeof返回的数据类型有六种：

object
undefined
string
number
boolean
function
注意：array和null使用typeof返回的数据类型都是object

3、请简述的描述一下ES6规范？

答：是ECMAScript的第六次发布规范。

优点：方便，能用更少的代码去做更多的事情，为了提高工程性
声明变量是用let，相对于var来说，具备块级作用域
声明常量是用const，
解构赋值：解构赋值就是把数据结构分解，然后给变量进行赋值。如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined。数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开。利用解构赋值能够让我们方便的去取对象中的属性跟方法。
使用箭头函数解决匿名函数中this的指向问题
剩余参数：剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。剩余参数一般和解构赋值配合使用

let、const、var 的区别？

答：

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

4、null和undefined的区别？

答：

区别：

null表示 “没有对象”，即此处不应该有值：比如，作为函数的参数，表示该函数的参数不是对象。
undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义：比如变量被声明但没有赋值
使用number函数转换时，null转为0，undefined转为NaN

相同

if判断时，俩者都转换为false
注意：null和undefined相等但类型不相等，一个值null类型，一个是undefined类型

6、什么是http协议？

答：

http：是超文本传输协议，是互联网上应用最为广泛的一种网络协议。Http协议是请求与响应模式，也就是说一般情况下，是客户端主动发起请求而服务器响应客户端发送的请求，如果服务器主动给客户端发送消息需要利用长连接，比如直播、即时通讯等等。
HTTPS：是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性
http的请求方式：get、 head、post等

7、http协议的请求方式是什么？

答：HTTP是一个基于TCP/IP通信协议来传递数据，包括html文件、图像、结果等，即是一个客户端和服务器端请求和应答的标准。基本上用到的就是GET和POST，充其量再遇到个option请求。

8、http和https有什么区别？

答：（1）https有ca证书，http一般没有；（2）http是超文本传输协议，信息是明文传输。https则是具有安全性的ssl加密传输协议；（3）http默认80端口，https默认443端口。

9、HTTP协议有什么特点？

答：（1）http无连接：限制每次连接只处理一个请求，服务端完成客户端的请求后，即断开连接。（传输速度快，减少不必要的连接，但也意味着每一次访问都要建立一次连接，效率降低）；（2）http无状态：对于事务处理没有记忆能力。每一次请求都是独立的，不记录客户端任何行为；（3）客户端/服务端模型：客户端支持web浏览器或其他任何客户端；（4）简单快速；（5）灵活：可以传输任何类型的数据。

10、cookies机制和session机制的区别是什么？

答：（1）cookies数据保存在客户端，session数据保存在服务端；（2）cookies可以减轻服务器压力，但是不安全，容易进行cookies欺骗；（3）session安全一点，但是占用服务器资源。

11、GET和POST的区别？

答：简单来说：GET产生一个TCP数据包，POST产生两个TCP数据包。严格的说：对于GET方式的请求，游览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST请求。游览器先发送header，服务器响应100continue，游览器再发送data，服务器响应200 ok（返回数据）。

12、什么是Http协议无状态协议？怎么解决Http协议无状态协议？

答：无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息。状态协议解决办法：通过1、Cookie 2、通过Session会话保存。

13、说一下Http协议中302状态？

答：http协议中，返回状态码302表示重定向。这种情况下，服务器返回的头部信息中会包含一个Location字段，内容是重定向到的url。

14、Http协议有什么组成？

答：请求报文包含三部分：请求行：包含请求方法、URI、HTTP版本信息；请求首部字段；请求内容实体。

响应报文包含三部分：状态行：包含HTTP版本、状态码、状态码的原因短语；响应首部字段；响应内容实体。

15、Http协议中有那些请求方式？

答：GET：用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器。

POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。

PUT：传输文件，报文主体中包含文件内容，保存到对应URI位置。

HEAD：获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。

DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。

OPTIONS：查询相应URI支持的HTTP方法。

16、TCP和UDP的区别？

答：TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来。

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去，UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

五、vue？

1、v-show和v-if是用来做什么的？有什么区别？

答：

相同：俩者都是让元素不可见就是显示和隐藏元素

区别：

v-if切换时，会对元素进行创建和销毁，而v-show只是初始化时加载一次，因此v-if的开销要比v-show的大
v-show控制的是元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if只有在条件为真的时候才会渲染。
使用场景：当需要频繁的显示元素时，使用v-show，反之，使用v-if

2、computed和watch函数的区别？

答：

computed是计算属性，也就是依赖其它的属性计算所得出最后的值：【用于定义基于数据之上的数据】
watch是去监听一个值的变化，然后执行相对应的函数：【某个数据变化时做一些事情】

总结：

如果一个数据依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

3、请简述对vueX的理解？

答：

vuex是什么？：vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）

vuex的核心概念？：

vuex五大核心属性：state，getter，mutation，action，module

state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；
    对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，
    组件也会对应的更新。
getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的
    依赖值发生了改变才会被重新计算。
mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
action：包含任意异步操作，通过提交 mutation 间接更变状态。
module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是
    嵌套子模块

vuex的数据传递流程：

微信截图_20210315110402.png

  当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法
  中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。
  mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，
  当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

为什么要用vuex？：由于传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致代码无法维护。所以我们需要把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

操作题？

1、请写出超链接的顺序或者你在初始样式中的链接方法。（要求默认无下线，鼠标经过有下划线）？

答：

2、当float和margin同时使用时， IE6的双倍边距BUG如何解决？

答：就是在样式里面再加上display:inline

3、为什么无法定义1px左右高度的容器？

答：IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

4、 Firefox中标签的居中问题的解决方法？

答：给标签设置margin：0 auto；即可

5、请写出XHTML和CSS如何注释？

答：

XHTML中如何注释：
css中如何注释：/**/

6、请以缩写方法写出１px　直线（实线）　灰色（任意灰色代码值），上面无边框的矩形边框样式。

答：

7、

ps：更新中

2021年面试题刷题01

一、HTML5面试题

1、空元素定义？

2、你用过哪些HTML5标签？

3、页面导入样式时，使用link 和 @import 有什么区别？

4、label 的作用是什么？是怎么用的？

<label for="name">Number:</label> <input type=“text“ name="name" id="name"/>

5、请说出XHTML 和HTML 的区别？

6、请写出至少5个块级标签和行内标签？

7、 很多网站不常用table, iframe 这两个元素，为什么？

8、 jpg 和png 格式的图片有什么区别？

9、 请用HTML 知识解决seo 优化问题？

10、 a标签在新窗口打开链接怎么加属性？

11、两个span 标签之间有空格？

12、 form 标签上定义“请求类型”是哪个属性？定义“请求地址”是哪个属性？

13、 简述一下你对HTML 语义化的理解？

14、cookies, sessionStorage 和 localStorage 的区别？

15、iframe框架有哪些优缺点？

16、如何关闭input 的自动填入功能？

17、如何实现浏览器内多个标签页之间的通信？

18、页面可见性（Page Visibility）API可以有哪些用途？

19、网页验证码是干嘛的？是为了解决什么安全问题？

20、如何进行网站性能优化？

21、CSS3有哪些新特性？

22、px、em、rem的区别?

二、css3面试题？

1、盒模型？

2、CSS选择符？

3、::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

4、CSS中哪些属性可以继承？

5、.如何居中p？

6、CSS3有哪些新特性？

7、解释一下 Flexbox (弹性盒布局模型)？及适用场景？

8、用纯 CSS 创建一个三角形？

9、CSS优化，提高性能的方法有哪些？

10、css选择器有哪些？

11、伪类选择器和伪元素选择器的区别？

12、清除浮动的几种方式？

三、网页布局？

1、网页的布局有哪几种？

四、JavaScript？

1、JavaScript数据类型有哪些？

2、typeof返回的数据类型有哪些？

3、请简述的描述一下ES6规范？

4、null和undefined的区别？

6、什么是http协议？

7、http协议的请求方式是什么？

8、http和https有什么区别？

9、HTTP协议有什么特点？

10、cookies机制和session机制的区别是什么？

11、GET和POST的区别？

12、什么是Http协议无状态协议？怎么解决Http协议无状态协议？

13、说一下Http协议中302状态？

14、Http协议有什么组成？

15、Http协议中有那些请求方式？

16、TCP和UDP的区别？

五、vue？

1、v-show和v-if是用来做什么的？有什么区别？

2、computed和watch函数的区别？

3、请简述对vueX的理解？

操作题？

1、 请写出超链接的顺序或者你在初始样式中的链接方法。（要求默认无下线，鼠标经过有下划线）？

2、当float和margin同时使用时， IE6的双倍边距BUG如何解决？

3、为什么无法定义1px左右高度的容器？

4、 Firefox中标签的居中问题的解决方法？

5、 请写出XHTML和CSS如何注释？

6、请以缩写方法写出１px 直线（实线） 灰色（任意灰色代码值），上面无边框的矩形边框样式。

7、

`<label for="name">Number:</label>` `<input type=“text“ name="name" id="name"/>`

7、很多网站不常用table, iframe 这两个元素，为什么？

9、请用HTML 知识解决seo 优化问题？

13、简述一下你对HTML 语义化的理解？

1、请写出超链接的顺序或者你在初始样式中的链接方法。（要求默认无下线，鼠标经过有下划线）？

5、请写出XHTML和CSS如何注释？

6、请以缩写方法写出１px　直线（实线）　灰色（任意灰色代码值），上面无边框的矩形边框样式。