杂谈
2020真的是迷幻的一年，过年就到处是新冠感染者。每天大家都是缩在家里看统计数据，无聊又不敢往外走，虽然说确实很影响经济，却也给了打工人一个漫长的探亲假，估计这种长假以后是不会再有了。你说长假？难道你不远程办公的？办，早上起床，裤子都不换，披件衣服开个晨会，开完回去继续睡。用2~3个小时干完手头上的活，又到了愉快的下班时间，就是可惜工资被砍了一半。闲下来这么一想，感觉这家技术不太行，给的钱不多也就算了还要再减500，500块钱你都抠，我反正不想为这种公司卖命。趁着这波疫情赶紧学，学完三月底裸辞了....没错，又是狗血的裸辞。往年都说金三银四，今年就被延迟，并且招聘周期还缩短了。我观察过，直到4月底阿里大肆发布招聘信息，招聘潮才算是开启。然而我正好也是4月底找完的，工资直接乘以two。感觉公司人文关怀做的很到位，有事没事吃吃喝喝，挺好。所以说，疫不疫情不要紧，关键还是肚子里要有货。你有本事到哪里都吃得开
HTML
其实这部分唯一可以说道的部分就是H5了，但我现在就知道他是语义标签具体怎么用还不清楚，所以H5部分先留着日后再补充
其他的html标签其实也没什么好说，你打开W3C试一下就好。我提一嘴没怎么见过的<video>，<audio>，<iframe>这三个标签
video标签是视频播放标签，就像img图片标签一样，src选择一个视频的地址就好，可以加controls控制条，autoplay自动播放等等
audio标签则是音频播放标签，也是src选择一个音频地址就好
为什么我会选择这两个来说呢？不知道你发现没有，很多那些私下播放的音频视频播放器好像长得都一个样，原来都是直接打个标签展示到前端来的，怪不得一样的简陋，一样的卡顿
还有iframe内联框架，以前看到他的反应就只有这个项目很老了，现在来看用这个东西和老不老其实没什么太大的关联，他可以做到把一个网页内嵌到你的应用里去，你要设置他的宽高，不然看着就特别丑
CSS
这个部分可以说是前端最难的部分了，要看到效果很简单，想调出你想要的效果就不一定简单了，对于基本的属性，你可以考虑看下W3C和这篇文章 CSS样式规范，那么我们进入正题
导入Css
我认为css还是要从导入说起会比较好，导入css分内部的和外部的两种
首先是内部，行内样式，优先级最高，有他在的话相同属性就要靠边站，可以使用！important替换掉行内样式。再就是内部样式，直接写在head头部里，这类样式如果重复了，谁写在下面谁就优先，你可以把它理解为下面的样式把上面的样式给覆盖了
之后是外部，现在的项目里的大部分都是用的外部样式，这样可以让你的代码更具可读性，外部样式分为导入式和链接式，现在都是用的链接式（<link ref="" href>），导入式(@import url)基本上已经没人在用了，他们两个本质上是相同的，但是导入式有一个弊端，当你的样式还没有加载完的时候他会先展示整个html结构，给人的体验就十分不好
选择器
CSS的重中之重就是选择器了，比起学会怎么用，我认为你更应该知道他是拿来做什么的，其实很简单，他拿来做定位的，有了选择器你就可以定位到页面上的任意一个标签上，修改他的CSS属性，具体的种类分为，基本选择器，层次选择器，结构伪类选择器和属性选择器
基本选择器
基本选择器分三种，id选择器，class选择器，标签选择器
他们的优先级是 id选择器 > class选择器 > 标签选择器
id选择器 #id名 {}
id选择器作为优先级最高的基本选择器，很容易被初学者用错，搞到一个页面上全是id，然后页面作废回炉再造（没错，这个人就是我....），id选择器重点是id，id就是身份证，独一无二，也就是说id选择器是不可复用的，一个html标签只能拥有一个id，它的用处一般是给最外层的div加一个，方便他取DOM元素，关于怎么取DOM元素之后再讲
class选择器 .类名{}
class选择器是用的最多的基本选择器，因为可以复用，写前端和java其实是也是一样的，都是同一种思想，这个就属于封装好之后拿去给别人用
标签选择器 标签名{}
标签选择器虽然是优先级最低的选择器，但也是经常用到的，有了它的配合你就不需要在像span，p这类标签上加class了，这样代码就能变得好看不少
层次选择器
层次选择器这个东西就非常有用了，我感觉学了之后经常能用到，可以说是简化css代码一大利器
层次选择器分为后代选择器，子代选择器，相邻选择器，通用选择器
后代选择器 .类名 元素{} （eg. body p{}）
后代选择器其实就是一个空格....我很早就看到过但是一直不信他写法就这么简单，但是确实就是这么简单，就是一个类名后跟空格再加上元素（可以是标签名，类名，id名应该也可），就可以做到控制这个类下的所有的选中元素的样式
子代选择器 .类名>元素{} （eg. body>p{}）
子代选择器是一个大于号，他和后代选择器的区别就是后代选择器能控制这个类下所有元素的样式，比如这个类下有10个h1标签，而这10个h1标签下又有10个h1标签，使用后代选择器能一次性修改这个100个h1标签的样式，而子代选择器他只能控制这个类下的第一个h1标签，其他的h1标签不归他管
相邻选择器 .类名+元素{} （eg. .test+p{}）
相邻选择器是一个加号，虽然叫相邻但是他只能控制在他下方的第一个元素的样式，就是说你代码是一行一行往下写的，把当前选中元素当做是一个分水岭，相邻选择器只能控制分水岭下方的第一个元素的样式，例子上是选中的元素是p，你控制的元素不一定是就是p，你写的是span就是span，你写的div就是div，这个要看你代码怎么写了
通用选择器 .类名~元素{} （eg. .test~p{}）
通用选择器是一个这个~，这个符号叫什么我不懂，不过我更想吐槽他的取名，简直人间迷惑行为大赏，他叫通用选择器实际上也不通用啊，就是相邻选择器的升级版。相邻选择器控制分水岭的下的第一个元素，他控制全部的元素咯
伪类选择器
伪类选择器功能很强大，而且种类繁多，我就讲几个我觉得比较常用的好了
既然说到伪类选择器，那正好可以说一下基础伪类“爱恨交加”吧，love hate=====>link visited hover active这四个a标签伪类，link是还没点击标签时的样式，visited是点击过后的样式，hover是鼠标悬浮到标签上方的样式，active是点击标签没放开时的样式
把他称作爱恨交加的原因是顺序。如果你有使用到这其中的多个伪类，你必须按link visited hover active固定顺序摆放，不然会出现不生效的状况
接下来稍微讲点我总用的东西
元素:first-child（eg. ul li:first-child）
这个伪类选择的是类下的第一个元素。这简直不要太方便，那些div下的第一个h1，p标签就不需要你挨个给他们起名了加样式了
元素:last-child（eg. ul li:last-child）
这个伪类选择的是类下的最后一个元素。虽然我还没用过，不过一看就好用啊
元素:nth-child （eg. p:nth-child（数字））
这个伪类选择的是选中的元素的父类下的第一个元素。他有一点是需要注意的地方，就拿例子来说吧，如果父类下的第一个元素不是p，第二个才是p，使用p:nth-child(1)控制不到任何样式，要使用p:nth-child(2)才能控制。也就是说你要用这个伪类选择器且你选中元素要处在对应的位置才能生效
元素:nth-of-type （eg. nth-of-type（数字））
这个就比上面那个要好用，他是根据选中的元素的父类下的第一个类型相同的元素来做定位，他不需要在固定位置上出现固定元素也能控制样式
伪类还有不少，像什么empty，after的蛮多的，有兴趣可以再去了解一下
属性选择器
这个我基本没用过，我认为他是拿来应对特殊标签才会用到，鉴于我们那个使用jquery的老项目，全都是这个东西，我认为还是需要了解一下
比如说在一大排a标签中有一条a标签长这样，<a href="https://www.baidu.com/"></a>，我要选中他
我使用a[href^=https]就可以选中它，[]是属性选择器，^=是以xx开头，所以这句代码的意思就是选中href以https开头的a标签的代码，除了^=还有 =绝对等于 *=包含这个元素 $=以这个结尾
选择器说了这么多，其实他就是拿来做定位，有了选择器你能够定位到页面上指定的任意一个元素，这样就可以修改到他的样式了。其实真正写的时候，你就会发现没有什么是基本选择器办不到的，不过要办到同样的事，就要多写很多行代码，我认为代码还是追求精简的好。我在上海我要去北京，走路也去，坐飞机也能去，为什么你非要走路去啊？你说是不是这么个道理
Display
这个还挺重要的，为none就是不显示，且不占用空间。也就是说他不是视觉上的消失而是真正的消失了，如果有三个并排的按钮，你设置了第一个和第二个按钮display:none，第三个按钮就会移到第一个按钮的位置
display的默认值要看标签而定，像h1~h6，div，p啊这些默认值是block，有宽高独占一行；span，a这些默认就是inline不独占一行，不能调宽高。
这里需要注意一下，img，input也是inline元素，但是他们也可以调宽高！一开始我都没注意到，这里其实涉及到一个概念：可替换元素，他们的内容都不是通过在标签内添加文本，而是通过某个属性（比如src、data、label或js控制）来显示内容的，而可替换元素就拥有内置宽高，他们可以设置width和height
想调整inline的宽高可以把他改成inline-block。block，inline，inline-block是最常用的属性，还有不常用的我专门搜了一下作为拓展：
· list-item 列表元素
· table 把元素作为块级表格来显示，表格前后带有换行符，调垂直居中能用到
· inline-table 把元素作为内联表格来显示，表格前后没有换行符
· flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。这个我以前写安卓的时候有用到，有弹簧来挤压布局。据说可以用来调div高度不确定时的垂直居中，display:flex;align-items:center;
浮动
常用的就left和right两个属性，一个左浮动一个右浮动，说的很简单其实还蛮难的...谈到浮动肯定要说文档流，文档流其实就是个从上到下，从左到右的布局。有了布局（容器）你才能往里面塞元素。
我的理解是浮动嘛，脱离文档流，浮起来。如果你有等长等宽的三个div，第一个div设置左浮动，你就会有一种第一个div遮盖了第二个div的感觉。这里需要纠正一下，这里并不能算遮盖，只是一种视觉效果！因为遮盖就说明了你产生了层级关系，那么具备层级关系就可以使用z-index调整层级，你用了z-index后你就会发现没有效果，这是因为浮动只是悬浮起来，属于半脱离文档流状态，没有真正的完全脱离。那么谁真正的完全脱离文档流呢？绝对定位
关于浮动是否占据空间，网上基本都说不占据空间。我认为他只是脱离文档流，占不占空间要看情况，文字和图片是占据空间的，div就不占据空间
浮动好用，但也会影响到他同级的下一个元素，可以考虑加浮动完之后清浮动，就是在他下一个元素使用前加清浮动div，加个clear:both的属性
定位
定位分相对定位，绝对定位，固定定位
相对定位
相对于原来的位置，进行指定的偏移，仍存在文档流中
绝对定位
没有父级元素定位就相对于浏览器定位，假设父级元素存在定位，则相对于父级元素进行偏移，并且它只会在父级范围内移动，不存在于文档流中。绝对定位一般都是配合相对定位进行使用，父级使用相对定位，父级里的元素使用绝对定位。绝对定位对于屏幕变窄保持样式不变有奇效，当然配合响应式布局效果更佳
另外使用了绝对定位，浮动就不会生效了，但是相对定位和浮动可以一起使用
JS
我打算从数据类型讲起，但是我只说一些比较特殊的，特别基础建议去W3C看看，W3C牛逼！
数据类型
NaN 非数字，通常是把不是数字的值转换为数字得出来的值，NaN 与所有数值不相等，包括NaN。只能通过isNaN来进行判断
Infinity 无限大，无限不循环小数就能有，几乎不出现
undefined 没有定义这个变量就输出，最常见的值
null 定义了变量没有值，null不等同于‘’
变量类型
总共就三种var，let，const，虽然习惯上还是喜欢写var，还是要改正过来，变量写let，常量写const。var是很坑的，你声明两个一模一样的var变量，他是不会报错的，谁后写谁生效。for里你用var做变量进行循环，咋看之下好像没什么问题呢，如果加入setTimeout延时操作，得到的结果总是出人意料
proto
Js中的proto叫原型，每个js对象中都有他的原型链，原型链是无限循环的。他就像一个父类，让对象指向它，就可以继承他，拿到他的方法
操作DOM对象
想要操作DOM对象，就得知道DOM树。随意找个页面打开F12，查看Elements你就会发现html确实是树形结构的。除了根节点之外，其他的节点都是DOM对象，只不过收到html的规则限制，你只能动部分节点。而这些节点就是所谓的DOM对象。什么是操作DOM对象呢？其实就是对DOM对象的增删改查。下面我就简单的介绍一下
获取DOM节点
document.getElementByTagName() 根据标签获取节点
document.getElementById() 根据Id获取节点
document.getElementByClassName() 根据类名获取节点
var xxx = document.getElementById(xxx)
xxx.children 获取父节点下的所有子节点
这东西就和CSS的选择器类似，就是拿来定位DOM节点的
更新DOM节点
首先你要获取DOM节点再把他赋给一个变量比如说是test
test.innerText 可以修改文本的值，文本会覆盖
test.innerHTML 可以解析HTML文本标签，你就可以直接把标签赋给他，标签会覆盖
test.style.fontSize 可以给DOM节点加样式，他只能修改已有的属性
删除DOM节点
由于DOM是树形结构，他的删除就可以分为两种，一种是删除自身节点，另一种是删除子节点
删除自身节点
var test=document.getElementById("test")
test.remove()
删除子节点
var test=document.getElementById("test")
test.parentNode.removeChild(test)
新增DOM节点
插入DOM节点
var test=document.getElementById("test")
var list=document.getElementById("list")
list.appendChild(test)
创建DOM节点
var newP = document.createElement("p")
newP.id = 'newP'
newP.innerText= 'xxx'
这样就成功的创建了一个id为newP，内容为xxx的标签
尾记
有太多像盒子模型这类的基础知识我没有谈到，主要花费的篇幅太大，效果也不好。而且这东西非常的简单，抱着前端圣经W3C，看一看，写一写，上手的很快。当然也有一些像屏幕适配的，也没有讲，主要是因为这年头有太多好用的自适应框架了，不需要你一点一点从头做起了。
基础就像是技能树，不点完前置技能，哪怕你等级到了也解锁不了。其实这个和玩游戏也差不多，基础多点点然后深入点一些大技能，发现技能点不够了，去洗个点然后再来点一遍基础。由于你的等级够了，点多少你自然会有分寸。那这次就先说到这里了
转载请注明出处！不要忽视他人的劳动成果！
