内容前提:有些内容是看网上一些大神的,然后有些是重复,或者直接抄写的,在此一并写上去,如有侵权,立即删除。


内容并不是完全版的,只是有些个人觉得有必要或者有遗忘,重新复习而写下的

H5新特性:

新的结构标签如:<header>,<section>等。

多媒体标签:canvas,video等

web应用标签:menu命令列表

表单的新类型:tel,email,url,number等

C3新特性:

属性选择器:通过某个属性值可找到特定的想要的属性或者标签

伪类选择器:以某个元素为准,可以获取到它的父级子级兄弟级元素的位置

目标伪类选择器:

颜色:rgba

文本:text-show--->文字阴影

边框:border-radius-->弧度。boder-show-->边框阴影

盒子模型:可以通过,box-sizing来指定盒子的大小计算方式:内容宽度+内边距+边框 / 内容

box-show-->盒子阴影

背景:可以对背景图片的大小,剪切区域,可视区域,定位参照点,多背景等功能设置。

颜色渐变:线性渐变和经向渐变

线性渐变:linear-gradient,朝着一个方向渐变

经向渐变:redial-gradient 以某个点进行渐变

过渡:过渡动画 transition

2D3D转换:transform

动画:animation

伸缩布局:flex

 

rem:响应式布局-可以根据根字体的大小进行改变的单位。

1.媒体查询显示的宽度,从而改变根字体的大小

2.计算出一个比例,根字体可以设置为这个比例:对象内容可视区的宽度 / 稿子的宽度

如:手机屏幕宽度为320px,稿子宽度为640px,所以比例为:320 / 640 = 0.5

       现在有一个盒子的宽度为100px,那么,它转化为rem是  50rem

 

ajax:一种创建交互式网页应用的网页开发技术,是多种技术的合集:javasciprt+html+css+服务端

  在不刷新页面的情况下,浏览器悄悄地,异步地向服务器发送HTTP请求。

  服务器收到请求后,通过DOM将新数据呈递回来(数据格式通常是JSON)

  浏览器解析JSON,通过DOM将新数据呈递显示,页面仅局部刷新

  通过后台与服务器进行少量数据交换,Ajax可以使网页实现局部更新,这意味着可以在不重新刷新整个页面的情况下,对页面的某个部分进行更新

步骤:

1. 创建XMLHttpRequest()对象

2.ajax.open(post,url)选择发送方式,路径,验证信息

3.设置响应HTTP请求状态变化的函数-----回调函数

4.发送HTTP请求

5.获取异步调用返回的数据

6.通过javascript+DOM进行局部刷新渲染

$.ajax(){

  url:"",

  dataType:"jsonp",

  jsonpCallback:"callback",

  success:function(data){

  },

  console(data);

}

 

 

get和post的区别:

get与post相比,get更简单也更快,并且在大部分情况下都能使用

要使用post请求的情况:

1. 无法使用缓存文件,(更新服务器上的文件和数据库)

2. 向服务器发送大量数据(post没有数据量的限制)

3. 发送包含未知字符的用户输入时,post比get更稳定也更可靠

 

get请求的特点有以下:

1. get请求可被缓存

2. get请求保留在浏览器浏览历史记录中

3. get请求可被收藏为书签

4. get请求不应用在处理器敏感数据时使用

5. get请求有长度限制,最大为2083字符

6. get请求只应用于取回数据

post请求的特点有以下:

1. post请求不会被缓存

2. post请求不会被收藏为书签,不保留在浏览器历史记录中

3. post请求对数据长度没有限制

4.post请求更安全

 

jsonp是一种数据交换格式

 

 

懒加载:当页面图片过多时使用,先给img标签的src设置同一个路径,这样请求只需一次,当图片出现在浏览器可视区时,才设置真正的图片路径让图片显示出来,这就是懒加载。

如何判断某个元素进入或即将进入可视窗口区域?

  当元素相对文档顶部的距离大于或者等于文档滚动的距离加上可视区域的高度时,即可判断

 

如何获取真正的路径:设置一个自定义属性dataimg-url在元素上,将元素真正的路径设置为dataimg-url的值,需要时在取出来,赋值给src

 

页面优化:

1. 页面级优化

  减少HTTP请求数

  简化页面,合理设置HTTP缓存,资源合并与压缩

  外部脚本置底,javascript,或者引用的一些框架等

 

 

浏览器兼容问题:

各个浏览器都有自己不同的maring / padding

  解决:我有一套自己的页面初始化代码

 

 


以上内容都是面试时面试官提出的技术问题,回来后做了一些回答总结。

今天暂时写到这里。

永远感谢今天努力的自己。