2021-09-23-CSDN博客

本文链接：https://blog.csdn.net/lyclyc_/article/details/120432033

html4和html5的区别：
1，文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发

这是html4的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//或
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 这是html5的
 <!DOCTYPE html>

2、结构语义区别
html：没有体现结构语义化的标签，如：《div id=“nav”>
html5：添加了许多具有语义化的标签，如：header footer nav aside section
相对于HTML，HTML5中新增和修改了一些元素。
3、绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。
4、音频和视频的支持
HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用和标签来支持音频和视频控制。
5、语法的处理
HTML无法处理不准确的语法；HTML5能够处理不准确的语法。

w3c是什么？
是万维网联盟，是一系列的标准，主要分为三个部分，结构、表现和行为。结构化标准语言包括XHTML和XML。表现标准语言主要包括CSS（层叠样式表）。行为标准语言主要包括对象模型（比如DOM和ECMAScript）。标准其实就是规范，比如在HTML规定了大部分的标签是需要有头有尾的（

），但有一部分不需要的（）。在JS中是严格区分大小写的，或许会因为大小写的问题，导致有些代码无法执行。

前端中浏览器兼容的例子：
有兼容问题的原因是，浏览器种类众多，不同浏览器内核不相同，故各个浏览器对网页的解析有一定出入。
1，不同浏览器的标签默认的外补丁和内补丁不同，随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：css里 *{margin:0;padding:0;}
2，块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。常见症状是ie6中后面的一块被顶到下一行。解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
3，设置较小高度标签（一般小于10px），在ie6，ie7，中高度超出自己设置高度，解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。这一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
4，图片默认有间距：
几个img标签放在一起的时候，有些浏览器会默认的间距，解决办法，为img使用float属性。因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正确的。

alpha通道与opacity属性的区别
aplha是rgba中的a
opacity属性时css中专门用来指定透明度的一个属性，取值范围也在0-1之间，0表示完全透明，1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。
RGBA颜色，是指利用红色值®，绿色值(G)，蓝色值(B)，alpha通道值(A)来定义的颜色。其中，alpha通道值的范围为0-1.0，0表示完全透明，1表示不透明.
如果将颜色值指定为transparent，则会将背景，文字或边框等的颜色设定为完全透明，相当于使用了值为0的alpha通道。也就是说，在css3中，可以在一切指定颜色值的属性中指定transparent值。
前端适配问题：-------https://www.cnblogs.com/ray123/p/10890745.html
1，根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局
媒体查询
据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
2，rem布局（弹性布局）移动端
rem是指相对于根元素 (html)的字体大小的单位。
—flexble.js和rem布局
媒体查询结合rem布局
rem+VW布局
3，百分比布局 (流式布局)
以百分比作为页面的基本单位，可以适应一定范围内所有的尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果
4，混合布局
同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位
5，响应式布局
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
数组和对象方法相似之处—https://blog.csdn.net/qq_29509389/article/details/103350561
在这里插入图片描述
git备份，记录，回滚，共享，团协
有工作区，暂存区，版本区
git diff：比较工作区与暂存区的差异，----比如在工作区加一句我更新了，暂存区没有这个，使用这句就会看到提示暂存区没有这句，使用git add 添加到暂存区后，，就会提示无差异
git diff --cached:比较暂存区与版本区的差异----比如加一句话存到暂存区，和版本区比较就会不同
git diff master:比较工作区域版本区的差异

git add index.html 添加到暂存区
git status 查看是否在工作区还是暂存区，颜色为红色在工作区，绿色在暂存区

git reset HEAD 文件名--------git reset HEAD index.html 暂存区与版本区保持一致
git checkout 文件名：暂存区覆盖工作区的内容，如果暂存区没有内容就用版本区的内容覆盖工作区，个人理解也就是把工作区的内容恢复一下，
git rm 文件名 --cached:删除暂存区文件
git commit -a -m <msg》 :git add. git commit -m
git reset --hard 《version》:恢复版本区指定版本的内容到工作区--------需要git log查看版本号，然后复制版本号的前7位，比如git reset --hard 8dd1b4b
git reflog：查看引用版本号
git log查看提交历史记录
git commit -a -m ‘update my project’

webpack
可以做的事情，代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布
现在已经webpack 5.0 但是用4.0的还是比较多，
安装webpack npm i webpack-cli -D
执行语句 npx webpack index.js 也就是npx webpack 包名
webpack配置文件，，webpack.config.js

module.exports----- mode: “production”,//环境—配置生产环境或者开发环境
npx是npm5.2之后提供，
npx 检测node_modules 有没有webpack 如果没有，会下载