面试总结:

对html语义化的理解

HTML语义化就是根据内容的结构化(内容语义化)，选择合适的标签,如(H1-H6)便于开发者阅读和写出更优雅代码的同时让浏览器的爬虫和机器很好的解析.

好处:

1.在没有css渲染的情况下,页面也能很好的展示内容和页面结构

2.增强用户体验:例如title，alt用于解释名词和图片信息.labe标签的活用

3.利于SEO，和搜索引擎建立良好沟通,利于网页抓取更多有效信息,

4.方便其他设备解析(如移动设备)

5，便于团队开发和维护,遵循一个标准，减少差异

写HTMl代码时应注意什么

1:少使用无语义的标签，如div和span

2:在语义不明显时,既可使用div和P的情况下,使用p,p在默认情况下有上下间距

3:每个input标签对应的说明文本都需要使用label标签,input设置id,label设置for对应

H5新增的语义化标签:article,nav,aside,section,header,footer,hgroup

行级元素和块级元素

1:行内元素:span，strong，em,br,img,input,label,select,textarea,cite

2:块级元素:div,p,form,ul, li,address,filedset,hr,menu,table,H
区别:行级元素显示在一行内,块级元素显示在一块内，行级元素设置width,height,padding-top/bottom,margin-top/bottom无效,设置左右是生效的,高度由元素的内容决定,可以设置line-height,

XML和json的异同

XML和JSON都是需要解析的,一般用于数据交互服务器返回给客户端的数据类型。

JSON是一种轻量级的数据交换格式,有JSON字符串和JSON对象,

JSON字符串var str= '{"a": "Hello", "b": "World"}';

转为对象var json= str.parse(str) 得到对象 {a: 'Hello', b: 'World'}

JSON最常用的为对象 var json = {'a':'hell0','age':18,'like':[{'ball':'football'},{'food':'aa'}]}

以{}包围,key值必须为字符串

XMl是可扩展标记语言,是规范的标签形式。JSON简易。两者都有良好的可扩展性,不过JSON在Javascript主场作战，可以存储Javascript复合对象，有着xml不可比拟的优势。XML解码难度系数大,JSON对象所用字符少,节约带宽。XML在层次结构复杂时,结构清晰易读。

浮动

什么是浮动:display:float,一种布局方法，可以让元素浮动,让它在水平上左右移动,通过margin属性调整位置
原理:使当前元素脱离文档流,相当于浮动启动一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘.
生成:css属性,float:left/right/none
影响:脱离文档流,使布局变的混乱,变为浮动后,元素变为inline-block元素,可以设置width和height.如果父级元素高度小于浮动元素,那么就会出现坍塌。宽高都为包围content,特别是宽,要重新设置。

清除浮动:
1:在浮动元素的最后闭合标签后添加一个空元素,设置clear:both,成本高,父级元素仍会坍塌

2:设置父元素 overflow:hidden 或者display：table 属性来闭合浮动,父级元素不会坍塌

3:使用伪元素,.clearfloat:after{display:block;height:0;content:"";clear:both;visibility:hidden;} ,不会坍塌

session和cookie区别

我们前端发送的HTTP协议是无状态协议,服务器需要记录用户的状态时，需要识别用户,用session来识别,如;我们购买东西,操作时,无状态协议是不能识别哪个用户的,所以服务器要为特定用户创建特定的session,用于跟踪识别用户,seeson在服务器端产生,保存在内存,数据库,文件。2:服务端如何识别哪个客户端发来的请求呢,就是每个请求携带cookie来跟踪session,cookie里面记录了sessionID,请求时会把cookie发送给服务器端,如果浏览器端禁用了cookie,session将不能识别,用URL重写技术进行会话跟踪,即每次请求后面都会加上一个诸如sid=XXXX的参数,服务端剧此识别用户.cookie还可以用来自动登录.总的来说:session是在服务端保存的一个数据结构,用来更新用户的状态cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现seesiond的一种方式,cookie是服务器端发送客户端产生的.

网页性能优化

1:减少iframe的使用(会阻挡父文档onload事件),不利于seo
2:避免使用gif实现loading效果
3:多使用css3动画代替js动画.
4:对于小图标使用base64位编码,减少网络请求,大图标不应该用，因为图标生成后会base64位会变大.小图标优势在于,一减少http请求,二避免文件跨域,三修改及时生效。base64位会有缓存
5:头部, 会阻塞页面.
6:页面中空的href和src会阻塞其它资源的加载
7:用innerHTML代替DOM操作,减少DOM操作次数。优化JS性能.
8:设置css类名操作样式,
9:少用全局变量,把查找DOM缓存起来,减少IO读取操作
10:图片预加载
11：少使用table,table要等其中的内容完全下载完后才能显示出来,显示比div+css慢

怎么做网页适配

    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
    // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
    // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
    // user-scalable    是否允许手动缩放
有三种方法可以实现 
一:固定高度,宽度自适应   
这是目前使用较多的一种方法,属于自适应布局,设置viewport width为device-width,
以较小宽度(如320px)作为视觉稿作为布局,垂直方向的高度和间距使用固定值,
水平方向混合使用定值和百分比或者利用弹性布局,达到当"手机屏幕变化时,
横向拉伸或填充空白的效果",图像元素根据容器情况,使用定值或background-size缩放。
览了下一些大厂的首页，像百度、腾讯、Facebook、Twitter 都是采用的这种方案。
要点
- 以小宽度作为参照是因为如果布局满足了小宽度的摆放，当屏幕变宽时，简单的填充空白就可以了；而如果反过来就可能造成“挤坏了”，考虑 header 区域，左测 logo 右测横向 nav 的情况。
- 需要小宽度的布局，又需要大宽度的图像，这是一个矛盾点。
- 320px 过于窄小，不利于页面的设计；只能设计横向拉伸的元素布局，存在很多局限性。
- 兼容性较好。                                                                      

二:固定宽度,viewport缩放

视觉稿,页面宽度,viewport使用统一宽度,利用浏览器自身缩放完成适应.页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。

三:使用rem布局

依照特定的宽度设置rem值(即html的font-size),页面需要任何弹性适配的元素,尺寸均换算为rem布局,当页面渲染时,根据页面有效宽度进行计算,调整rem大小

优点：
- 清晰度高，能达到物理像素的清晰度。
- 能解决 DPR 引起的“1像素”问题。
- 向后兼容较好，即便屏幕宽度增加、PPI 增加该方案依旧适用。
  缺点：
  - 适配 js 需尽可能早进入，减少（避免）viewport 变化引起的重绘。
  - 某些Android机会丢掉 rem 小数部分。
  - 需要预编译库进行单位转换。