文章目录
前言
打算在5月换个工作,所以勒,在这个月进行集中的复习整理前端的复习资料,本题中将主要对HTML以及CSS的基础知识进行review
一、HTML
超文本标记语言,互联网核心技术之一
比较重要的就是HTML5的新特性,比如
1.语义化标签
比如header,content之类的,增强代码可读性
2.增加了一些表单的新元素
<datalist>:数据列表,为input提供输入建议列表
<progress>:进度条,展示连接/下载进度
<meter>:刻度尺/度量衡,描述数据所处的阶段,红色(危险)=>黄色(警告)=>绿色(优秀)
<output>:输出内容,语义上表示此处的数据是经过计算而输出得到的
ps:个人感觉,没什么用
3.视频音频
这个就比较重要了,可以通过video,audio标签进行视频音频的播放,能实现的东西就很多了,比如网页的背景音乐,音效,直播,视频播放等等
4.canvas
Canvas绘图:H5原生技术,基于网页画布绘制2D位图绘图技术,善于表现细腻颜色
SVG绘图:H5借鉴技术,基于SVG绘图空间绘制2D矢量图绘图技术,缩放不会失真
WebGL绘图:尚不是H5标准技术,基于HTML5 Canvas提供硬件3D加速渲染;有一个非常强大3D扩展库:three.js,(这个比较屌了,看过一个技术大牛做过一个数学模型三维向二维动态跌落,赞!)
5.WebWorker
在上古时期,浏览器有6个太阳,啊呸,6个线程,其中只有一个线程负责渲染–UI线程,浏览器中所有的代码都通过这个线程进行执行
那么问题来了
如果我有个执行时间巨长的js文件,那么浏览器不就歇逼了吗,DOM都渲染不出来,原地去世
那么解决方案来了–WebWorker
Worker的本质:就是一个执行指定任务的独立线程;且该线程可以与UI主线程进行消息数据传递。使用方法:
HTML文件中:
var w = new Worker('js/x.js')
w.postMessage('发送给Worker线程的消息');
w.onmessage = function(e){
e.data; //来自Worker线程的消息
}
JS文件中:
onmessage = function(e){
var data = e.data; //接收UI线程的消息
//执行耗时任务....
postMessage(result); //给UI线程发送消息
}
对了,Worker中不能操作DOM,为啥?拿脚趾头想想!
6.webStorage
Session,Cookie,LocalStorage没啥好说的吧
7.webSocket
万恶之源,负责长链接,实时通讯,即时聊天,不要以为即时通讯就是udp哦,他也是基于tcp的,使用socket协议,一般用的时候都要做个保持心跳,做短线重连,坑比较多。
二、CSS
html是身体,那么css就是衣服,虽然现在写的样式比较少了,但是还是比较重要的
CSS3中引入了很多新特性,比如transform,flex,动画之类的
总结几个CSS比较小众的知识
1.flex:1代表什么
flex: 1; === flex: 1 1 auto
第一个参数表示: flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
2.margin外边距合并问题
就是margintop使用的时候会出现问题,描述起来挺麻烦的,自己百度去吧,这是写几个解决方法
1.设置父元素的overflow属性为hidden
2.设置父元素的border属性,如:border:1px solid red;