目录
1. margin和padding的区别
margin是相对于别的对象的
padding是相对于自身的
2. vw和百分比的区别
百分比又继承关系，相对于其父元素或者继承高度的元素
vw只跟设备的宽度有关系
3. 如何居中一个div
body {
display: flex;
}
.con1 {
width: 200px;
height: 200px;
margin: auto;
background-color: green;
}4. 行内元素和块元素的区别
块元素宽度继承父级元素
行内元素宽度由内容决定
5.前端需要注意哪些SEO
1）.权重：title>description>keywords
2）.语义化html代码
3）.重点html代码放在前面
4）.重要内容不用js输出:爬虫不会执行js获取内容
5）.少用iframe
6）.非装饰性图片加alt
7）.提高网站速度
6.img的title和alt有什么区别
title是鼠标滑到图片的时候会显示，alt是img的特有属性，当图片无法加载时显示，必须设置有意义的值
7.HTTP的几种请求的方法途径
1）GET：获取服务器上的资源
2）POST:向URL指定的资源提交数据
3）PUT:跟POST方法很像，区别：PUT指定了资源在服务器上的位置，POST没有
4）DELETE:删除服务器上的某些资源
5）HEAD:请求网页的头部
6）OPTIONS:获取当前url支持的方法。如果成功，会有一个allow的头包含“get，post”这样的信息
7）TRACE:激发一个远程的，应用层的请求消息回路
8）CONNECT:把请求连接转换到透明的TCP/IP通道
8.从浏览器输入url到页面显示的步骤
基础版
1）浏览器根据输入地址交给DNS进行域名解析，转为IP地址，向服务器发送请求
2）服务器交给后台处理完将数据返回给浏览器，浏览器接收文件
3）浏览器对加载的资源进行语法解析，建立内部数据结构
4）载入解析到的资源文件，渲染页面
9.如何进行网站性能优化
content：减少http请求，减少DNS，减少DOM元素数量
server：配置CDN,配置Etag,对组件使用Gzip压缩
Cookie：较少Cookie大小
css：将样式表放到页面顶部，不使用css表达式，使用<link>不使用@import
javascript:将脚本放到页面底部（原因一、js用户看不到，先加载dom，用户可以看到的东西，可以提高用户体验，原因二、js可有dom操作，要等dom渲染完才能操作，否则会报错），将javascript和css从外部引入，压缩javascript和css，删除不需要的脚本，减少dom访问
图片方面：优化图片，根据实际颜色需要选择色深、压缩，优化css精灵，不要再html中拉伸图片
10.HTTP状态码及其含义
1XX：信息状态码
100continue继续，一般在发送post请求时，已发送了htpp header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
200 正常返回信息
201 created 请求成功且服务器创建新的资源
202 accepted 服务器已接受请求，但尚未处理
3XX:重定向
301 永久重定向
302 临时性重定向
303 临时性重定向，且用get请求新的url
304 自上次请求后，请求的网页未修改过
4XX
400 服务器无法理解请求的格式，客户端不应尝试再次使用相同的内容发送请求
401 请求未授权
403 禁止访问
404 找不到与uri相匹配的资源
5XX
500 最常见的服务端错误
503 服务端暂时无法处理请求
11.语义化的理解
·HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析
·便于阅读维护理解
·有利于SEO
12.对浏览器内核的理解
主要分为两部分：渲染引擎和js引擎
渲染引擎：负责取得网页的内容（xml，html，图像）、整理讯息（加入css），以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核不同对网页的语法解释也有所不同，所以渲染的效果也不相同。
js引擎：解析和执行js来实现网页的动态效果
倾向于渲染引擎
13. html5的离线存储是怎么使用的
原理：html5的离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件的解析清单离线存储资源，这些资源像cookie一样被存储下来，之后当网络处于离线状态，浏览器通过被离线存储的数据进行页面展示
如何使用？
在页面头部下面加入一个manifest的属性
在cache.manifest编写离线资源
在离线状态时，操作window.applicationCache进行需求实现
14.浏览器怎么对h5的离线资源进行管理和加载？
在线情况下，浏览器发现html头部有manifest，当第一次访问app，下载离线资源，进行存储，当不是第一次访问app，直接访问离线资源，然后对比新的manifest文件，如果有改动就重新下载离线资源
离线情况下，直接使用离线资源
15.cookie，sessionstorage，localstorage的区别
cookie是为了标识用户身份而保存在本地的数据
cookie始终在同源的http请求中携带，sessionstorage，localstorage不会自动将数据发送给浏览器
存储大小：
cookie不超过4k，sessionstorage，localstorage可达到5M或更大
有效期：
cookie在设置的有效期之前有效
sessionstorage在窗口关闭前有效
localstorage长期有效
16. iframe有哪些缺点
·iframe会阻塞主页面的onload事件
·搜索引擎的检索程序无法解读这种页面，不利于SEO
解决：可以通过js动态给iframe添加src属性值，可以绕开以上两个问题
17.WEB以及W3C标准是什么
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离
18.xhtml和html有什么区别
xhtml可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确的编译网页
书写习惯的区别
xhtml元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素
19.css可继承样式和不可继承样式
无继承性的属性
1）display
2）文本属性
vertical-align
text-decoration
text-shadow
white-space
unicode-bidi
3）盒子模型的属性
width height margin border padding
4）背景属性
background background-color background-image background-repeat background-position background-attachment
5）定位属性
float clear position top right bottom left min-width min-height max-width max-height overflow clip z-index
6）生成内容属性
content content-reset counter-increment
7）轮廓样式属性
outline-style outline-width outline-color outline
8）页面样式属性
size page-break-before page-break-after
9）声音样式属性
pause-before pause-after pause cue-before cue-after cue play-during
20全局对象属性
1）global
所有在全局作用域内定义的属性和方法，都是global对象的属性
浏览器把global对象作为window对象的一部分实现了，因此所有全局属性和函数都是window对象的属性和方法
2）window
window对象的属性：status location name self opener
window对象的方法： open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy resizeBy scrollBy
global是js核心的东西，window只是浏览器引擎上实现对global的封装，js不仅局限于浏览器还有其他的地方，window对象是宿主对象存在时（即浏览器）才会存在，global是任何地方都会有
21 http协议
last-modified/if-modified-since、etag/if-match、cache-control/expires
浏览器缓存位置优先级：service worker、memory cache、disk cache、push cache
浏览器缓存策略分为强缓存和协商缓存
强制缓存
用户发送请求，直接在客户端中缓存获取，不发送请求到服务器，不与服务器发生交互行为
协商缓存
用户发送的请求，发送到服务器，由服务器判定是否从缓存中获取资源
expires:服务器端在响应请求时用来规定资源的失效时间
cache-control：服务器端在响应请求时规定资源是否需要被浏览器缓存以及缓存的有效时间
响应头中的no-cache,表示不使用强制缓存，使用协商缓存
请求头中的no-cache,表示要重新获取请求
cache-control的优先级高于expires
若命中缓存，即存在缓存资源，且缓存资源未过期浏览器响应HTTP200，并直接使用缓存资源作为返回结果，不需要发送http请求，为强制缓存
如果缓存资源过期，为协商缓存
与协商缓存相关的字段last-modified/Etag
last-modified是服务器返回给浏览器的资源的最新修改的时间，与之对应的是if-modified-since,这个是当浏览器发送http请求时，请求头中携带的，值是last-modified
当服务器收到if-modified-since字段的http请求头，会判断它的值和请求资源的最后修改时间是否一样，如果一样的话，就返回http304，不一样的话，就返回http200和请求的资源
Etag是请求资源在服务器的唯一标识，与之对应的是if-none-match,当浏览器发送http请求时，请求头会携带if-none-match，值时Etag属性的值
当服务器收到if-none-match,会判断其值和Etag是否相等，如果相等的话，就会返回http304，如果不相等的话，就返回http200和请求的资源
Etag优先级高于last-modified
22 XSS
xss是因为用户输入的内容被当作了前端代码进行运行
危害：
1）盗取账号
2）控制企业数据，包括读取，纂改，添加，删除企业敏感数据的能力
3）盗窃企业重要的具有商业价值的资料
4）非法转账
5）强制发送电子邮件*（钓鱼）
6）网站挂马
7）控制受害者机器向其他网站发起攻击
xss分类
1）反射性xss：不会永久保存用户的数据，仅发生在用户的一次访问之后
2）存储型xss：攻击代码永久保存在服务器上
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
