HTML，CSS复习

---

前言

打算在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;