前端工程师必备技能(一)

HTTP协议(7)

1、常用的HTTP方法有哪些

GET: 从服务器上获取资源
POST: 向服务器发送数据
PUT, HEAD, DELETE, OPTIONS

2、GET方法与POST方法的区别

区别一:
get重点在从服务器上获取资源,post重点在向服务器发送数据;
区别二:
get传输数据是通过URL请求,以field(字段)= value的形式,置于URL后,并用"?"连接,多个请求数据间用"&"连接,如http://127.0.0.1/Test/login.action?name=admin&password=admin,这个过程用户是可见的;
post传输数据通过Http的post机制,将字段与对应值封存在请求实体中发送给服务器,这个过程对用户是不可见的;
区别三:
Get传输的数据量小,因为受URL长度限制,但效率较高;
Post可以传输大量数据,所以上传文件时只能用Post方式;
区别四:
get是不安全的,因为URL是可见的,可能会泄露私密信息,如密码等;
post较get安全性较高;
区别五:
get方式只能支持ASCII字符,向服务器传的中文字符可能会乱码。
post支持标准字符集,可以正确传递中文字符。

3、HTTP请求报文与响应报文格式

请求报文包含三部分:
a、请求行:包含请求方法、URI、HTTP版本信息
b、请求首部字段
c、请求内容实体
响应报文包含三部分:
a、状态行:包含HTTP版本、状态码、状态码的原因短语
b、响应首部字段
c、响应内容实体

4、常见的HTTP相应状态码

返回的状态
1xx:指示信息--表示请求已接收,继续处理
2xx:成功--表示请求已被成功接收、理解、接受
3xx:重定向--要完成请求必须进行更进一步的操作
4xx:客户端错误--请求有语法错误或请求无法实现
5xx:服务器端错误--服务器未能实现合法的请求
200:请求被正常处理
204:请求被受理但没有资源可以返回
206:客户端只是请求资源的一部分,服务器只对请求的部分资源执行GET方法,相应报文中通过Content-Range指定范围的资源。
301:永久性重定向
302:临时重定向
303:与302状态码有相似功能,只是它希望客户端在请求一个URI的时候,能通过GET方法重定向到另一个URI上
304:发送附带条件的请求时,条件不满足时返回,与重定向无关
307:临时重定向,与302类似,只是强制要求使用POST方法
400:请求报文语法有误,服务器无法识别
401:请求需要认证
403:请求的对应资源禁止被访问
404:服务器无法找到对应资源
500:服务器内部错误
503:服务器正忙

5、HTTP的缺点与HTTPS

a、通信使用明文不加密,内容可能被窃听
b、不验证通信方身份,可能遭到伪装
c、无法验证报文完整性,可能被篡改
HTTPS就是HTTP加上加密处理(一般是SSL安全通信线路)+认证+完整性保护

6、HTTP优化

利用负载均衡优化和加速HTTP应用
利用HTTP Cache来优化网站

http缓存机制可参考下面文章:
http://www.oschina.net/news/41397/web-cache-knowledge

搭建一个https服务器:
http://developer.51cto.com/art/201704/536754.htm

7、TCP/IP三次握手是什么样

第一次握手:S只可以确认 自己可以接受C发送的报文段
第二次握手:C可以确认 S收到了自己发送的报文段,并且可以确认 自己可以接受S发送的报文段
第三次握手:S可以确认 C收到了自己发送的报文段

HTML(3)

1、DOM和BOM区别

Document Object Model(文档对象模型),相当于把html页面结构解析成一个对象,提供一个接口API,让你去操作所有的节点。
Browser Object Model(浏览器对象模型),基本上就是指当前窗口对象,就是window对象.

2、语义化标签

用最恰当的HTML标记的内容,提升可访问性,SEO,结构清晰,利于维护
常用的有:
title: 简短、描述性、唯一(提升搜索引擎排名)
hn: h1~h6分级标题,用于创建页面信息的层级关系
header: 页眉通常包括网站标志、主导航、全站链接以及搜索框
nav: 标记导航,仅对文档中重要的链接群使用
main: 页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能
article: 表示文档、页面、应用或一个独立的容器
section: 具有相似主题的一组内容,比如网站的主页可以分成介绍、新闻条目、联系信息等条块
aside: 指定附注栏,包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等
figure: 独立的单元,例如某个有图片与内容的新闻块
footer: 页脚,只有当父级是body时,才是整个页面的页脚
small: 指定细则,输入免责声明、注解、署名、版权
strong: 表示内容重要性
em: 标记内容着重点(大量用于提升段落文本语义)
mark: 突出显示文本(yellow),提醒读者
cite: 明引用或者参考,如图书的标题,歌曲、电影、等的名称,演唱会、音乐会、规范、报纸、或法律文件等
blockquoto: 引述文本,默认新的一行显示
address: 作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)
del: 移除的内容
ins: 添加的内容
code: 标记代码。包含示例代码或者文件名
pre: 预格式化文本。保留文本固有的换行和空格
progress: 完成进度。可通过js动态更新value

3、怎么做好SEO

1、网站内容及时更新,文字始终紧紧围绕关键字,围绕网站主题
2、SEO优化重点以文章内容页优化为主
3、适当给每个页面增加keyword(关键词)、Description(页面描述)、robots(搜索引擎抓取器)[可以设置防抓页面]等标签
4、新文章中适当增加老文章链接
5、栏目分类尽量使用目录形式
6、文章的Title最好以“文章标题-博客名称”形式出现
7、文章标题最好能出现一次关键字
8、不要选择非常热门的关键词
9、过添加TAG标签可以增强主题的相关性和被搜索的概
10、每篇文章的结尾处可加入“原创文章如转载,请注明出处”“本文首发于XXX网站”等信息,对SEO有一定帮助。
11、文章中相同的关键词不能过多,如果非要堆砌关键词,可适当使用长尾关键词
12、记得给每个博文插图加上和文章内容相关的alt信息,并在图片周围添加相关信息
13、垃圾留言一定要删除
14、使用外链工具增加外链(http://tool.lusongsong.com/seo/)

CSS(16)

1、css浮动原理和如何清除浮动

文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,会出现
包含框不会自动伸高来闭合浮动元素,导致了高度塌陷,在实际布局中,往往这并不是我们
所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度
解决办法:
1、通过在浮动元素的末尾添加一个空元素
设置clear:both,after伪元素也是通过content**在元素后面生成了内容为一个点(或” “)的块级元素**;
2、过设置父元素overflow或display:table
原理就是触发BFC(Block formatting contexts)
BFC的特性:
1、BFC会阻止外边距叠加
一般情况,两个相邻的块级框,它们之间的垂直方向的外边距会发生叠加。 如果这两个相邻的块框不属于同一个BFC就不会叠加!
2、BFC不会重叠浮动元素
一个BFC的边框不能和它里面的元素的margin重叠。
这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。
当给一个挨着浮动的BFC添加负得外边距不会起作用!
触发BFC的条件:
float除了none以外的值
overflow除了visible之外的值
display(table-cell table-caption,inline-block)
position(absolute,fixed)
解释:
通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC依然属于文档中的普通流。
设置了overflow:hidden可以清除浮动就是
因为父元素创建了新的BFC!
所以父元素和子元素是两个BFC,因为设置了float也是一个BFC
在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动
在不支持 BFC的浏览器 (IE6-7),通过触发 hasLayout 闭合浮动

2、超链接a样式顺序

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候

3、margin上下布局边界塌陷或者说边界重叠

1、给父元素加border, border:1px solid transparent
2、为父DIV添加padding,或者至少添加padding-top
3、对于上下布局的间距,可以只设置一边的margin
4、外层元素加overflow:hidden;
5、内层元素 加float:left;或display:inline-block

4、块级元素与行内元素的区别

块级元素:
他会独占一行,在默认情况下,其其宽度自动填满其父元素的宽度
块级元素可以设置width、height属性
块级元素即使设置了宽度也是独占一行,块级元素可以设置margin、padding属性
行内元素:
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到行排不下,就自动换行,其宽度随内容而变化
行内元素的width、height属性则无效
行内元素的margin、padding属性左右有用,上下无用

5、css选择器和优先级

css选择器:
标签选择器(如:body,div,p,ul,li)
类选择器(如:class="head",class="head_logo")
ID选择器(如:id="name",id="name_txt")
全局选择器(如:*号)
.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
继承选择器(如:div p,注意两选择器用空格键分开)
伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
子选择器 (如:div>p ,带大于号>)
CSS 相邻兄弟选择器器 (如:h1+p,带加号+)
css3新增:nth选择器(:first-child,:last-child,:nth-child()等)
css3否定选择器(:not)
css3伪元素(::first-letter,::first-line,::before,::after),相对伪类写法不同但用法一样
css优先级:
1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或继承

6、多个小块元素水平,上下居中显示

父级元素设置,text-align:center
子元素display:inline-block,vertical-align: middle

7、实现三栏自适应布局(两边宽度固定,中间自适应)

1、绝对定位法
左右div绝对定位,固定宽度,中间div设置margin间距
2、使用自身浮动法
左div固定宽度左浮动,右div固定宽度右浮动,中间正常div
3、圣杯布局
三个div同时左浮动,第一个加一个子元素,添加左右margin值,第二个左边距为-100%,
第三个左边距为负div的宽度
4、flex布局
父元素flex,左右子元素固定宽度,中间元素flex为值1
5、table布局
table布局,左右td固定宽度,中间td正常

8、em和rem的区别

em是相对父元素的px值进行计算
rem是相对根html的px值进行计算

9、import和 link区别

1、link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性,@import只能加载CSS
2、加载顺序的差别,当一个页面被夹在的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,
而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显
3、兼容性的差别
4、使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
5、@import多次引用会对网站服务器产生过多的HTTP请求

10、absolute和float区别

都是脱离标准流,不过float元素还会在文档流占据一个位置
absolute定位用的时候位置可以给的更精确top,left,bottom,right都可以正负值
float用的更简洁,对于左右布局,用起来就一句,很方便

11、rgba()和opacity的透明效果有什么区别

rgba()只作用于元素颜色和背景色,而opacity作用于元素及其子元素

12、css哪些属性定义,使DOM元素不显示在浏览器可视范围内

1、display: none;visibility:hidden;
2、高度为0,透明度0,z-index: -1000

13、css3有哪些属性

1、border-radius
2、border-image
3、box-shadow
4、text-shadow
5、background-size
6、box-sizing
7、word-wrap
8、transform
9、transition
10、flex

14、宽度是高度的一半怎么实现

父元素设置宽度,子元素高度设为0,宽度为100%(必须得有宽度),下内边距为50%,则子元素高度为宽度一半

15、怎么实现绝对居中

1、父元素flex布局,align-items:center,justify-content:center子元素文字即居中
2、父元素table布局,子元素设置为table-cell,加上vertical-align:middle
3、宽高固定,absolute定位,上下左右的值设置为0,margin为auto
4、宽高固定,top,left设置50%,上间距为盒子的高度,左间距为负的盒子的宽度
5、宽度固定高度不固定,absolute定位,margin为auto,top: 50%; left: 50%;transform: translate(-50%,-50%)

16、盒模型有几种

IE盒模型:
width = 盒子的宽度(box-sizing:border-box)
标准盒模型:
padding + border + width = 盒子的宽度(box-sizing: content-box)