前端三大件的学习
前言
之前做前端学习梳理的时候，总结了三块知识。三大件+组件化、网络基础+性能优化、工程化。目前写了后两部分的笔记。今天写第一部分的笔记。
- 网络基础和性能优化部分的笔记是：《前端技术架构与工程》之性能笔记
里面性能评估模型、从URL到页面、内存管理极限运算性能的理解能对前端的学习有指向性的作用。对代码质量的理解十分有帮助。 - 工程化部分的笔记是：《前端技术架构与工程》之工程思维与服务支撑笔记
里面工程思维和开发支撑的部分值得前端借鉴。对代码规范和组件化的理解也十分有帮助。 - 编程语言部分的笔记是：《前端技术架构与工程》之编程语言笔记
里面讲的三大件对三大件的学习有指向性的作用。
最后落实到代码的书写上。今天梳理梳理HTML+CSS+JavaScript。
文章目录
三大件
之前学习三大件的时候一直比较懵，说学会吗，应该是没学会，说没学会吧，也能建网页。但是随着慢慢地学习，好像明白之前为什么会懵了，因为学的内容和我想象中的内容不一样。有两点，一点是我想象中的网站是有后台有交互的网站，但光学三大件做不到这些，还需要学后端（数据库和服务器）；一点是我想象中的网站很好看，很新颖，但是只用三大件会很难实现，还需要学习框架。不过现在总算有了整体的认识，我觉得学习前端还需要架构和后端的知识，才能清楚定位前端。
浏览器的知识：从URL到页面显示的过程（Fetch阶段和Render阶段）。
HTML的语义化和div、CSS的选择器和预编译。
JavaScript的DOM控制和静态数据类型。
HTML5
主要讲常用标签、HTML5语义化和div、本地存储、SSR与CSR。
- 常用标签、HTML5语义化和div是基础
- 本地存储和SSR与CSR是进阶
常用标签
从前后端交互的角度可以分为静态标签（我定义的）和动态标签。静态标签是不涉及交互的，如h1>p>img>canvas<ul<table<a；动态标签是交互的内容，给后台发生信息的标签，如input type=“text”>；
div和语义化
语义化是用除div>标签的标签来显示HTML文档，这样的优点有许多，如清晰的页面结构、有利于SEO、便于开发与维护；不过通常情况下还是div一把梭，用得很爽，不用担心默认样式。
需要UI框架就是利于div标签和类选择器来设计的。使用UI框架只需要在类选择器中填写类就可以显示想要的效果，十分舒适。
本地存储
在HTML4的时候本地存储是利用cookie，并且本地不能存数据库。在HTML5中的本地存储是web Storage，并且可以用indexedDB存储数据库。
相关资料如下：（根据题目搜到，可以自行搜索类似的）
借鉴《前端技术架构与工程》之性能笔记的从URL到页面显示能更好理解。
浅谈session,cookie,token,webStorage区别
看完这篇 Session、Cookie、Token，和面试官扯皮就没问题了
除了web Storage外，HTML5 中的web worker（多线程并发）、文件API、fetchAPI、通信API（webSockets）、web组件、绘制图形canvas、多媒体相关API都是重点，但是在这就没具体展开了，可以根据这些关键词搜。我是通过《HTML5与CSS3权威指南》作为参考，懒得去官网找了。
SSR与CSR
看《前端技术架构与工程》之编程语言笔记的HTML部分。里面讲的virtual DOM、预渲染、SEO值得借鉴。可以作为基础后面的部分，补充学习，便于理解MVVM框架。
CSS3
主要讲CSS常用选择器、盒子模型、响应布局、预处理语言
- 常用选择器、盒子模型、响应布局是基础
- 预处理语言是进阶
选择器+dev
CSS的class选择器结合HTML的div标签简直六的一批。许多UI库就是自己设置盒模型和响应布局，我们去使用只需要把class填入即可。特别提高效率。如果以后熟练了，自己也设计一套自己常用的UI库。
常用的选择器有元素选择器、ID选择器、class选择器。
CSS在HTML中的使用有外部样式表、内部样式表、内联样式表；大部分UI库采用的就是外部样式表，可以统一设计网站风格；内部样式表专门设计当前HTML文档的页面，一般放在head中，在渲染的时候可以和HTML一起渲染；内联样式则是对HTML中元素的设计，专门针对一个元素。具体内容在菜鸟教程、w3cschool或MDN中找。
盒子模型
设计元素的格式。
外边距margin：bottom、left、right、top；完全透明，起清除周围元素的作用
轮廓outline：width、style、color；起突出元素的作用
边框border：width、style、color、spacing、collapse；可以指定元素边框
内边距padding：bottom、left、right、top；完全透明，起清除边框内样式的作用
响应布局
我定义的。方便记定位、浮动、flexbox、滚动条、链接；
定位opsition：static、relative、absolute、fixed、sticky；比如定位导航栏
浮动float：left、right、none；比如走马灯
弹性盒子flexbox：row、column、wrap
滚动条overflow：visible、hidden、scroll、auto、inherit
预处理语言
CSS有不少缺点。如CSS没有命名空间，选择器中的表都是全局应用的；CSS没有报错基础，只要运行后才能看到哪出错了；各浏览器对CSS规范支持程度不一，为了照顾兼容性，CSS会有大量兼容性的代码，这使得CSS文件冗余。
为了弥补这些缺点，如less的预处理语言引入了变量、混合、模块、继承等特性，同时支持易于编写和维护的嵌套语法。
不过预处理语法也有新的缺点，如大而全、难扩展；
最新的处理方法是CSS in JS，借助JavaScript，使得CSS弥补了模块体系，便于CSS的封装和解耦，有命名空间，使得CSS有局部作用域。
JavaScript
主要讲事件与输出、数据类型、DOM、静态类型、异步编程、ES
- 事件与输出、数据类型、DOM是基础
- 静态类型、异步编程、ES6是进阶
事件与输出
既然有交互，那么就会有事件和输出，通常是HTML中的动态标签输入，然后JavaScript根据事件作出响应。这些就涉及到了JavaScript中处理的对象了。总共有四种对象（我定义的）：JS对象、BOM对象、DOM对象、HTML对象；
事件有DOM中的事件和DOM中的Event事件；输出主要有操作DOM的document、element、attribute对象和CSSStyleDeclaration、console对象、操作BOM的一些对象。
下面这是我根据《JavaScript权威指南（第6版）》附录摘录的。
JS对象是JavaScript语言里的对象，主要有number、string、Boolean、underfined、symbol、num六种基础数据类型、array、object、function三种引用数据类型。在下面这个表中还有描述时间的date对象、描述数学公式的math对象、描述正则表达式的RegExp对象、描述报错的Error对象。
BOM对象是浏览器对象模型，主要有window对象、navigator对象、screen对象、history对象、location对象、存储对象。
DOM对象是文档对象模型，主要有Document、Element、Attribute三个操作HTML的对象，事件对象Event、控制台对象console、CSS样式对象CSSStyleDeclaration、以及collection对象。
HTML对象则是HTML对象中的标签对象，也是DOM中的一种，但是我单独拿出来了，方便记忆，如anchor、body、button、style等。
一、JS对象
Array对象：属性（length）方法（fill、find、pop、push）
Boolean对象：属性（constructor、prototype）方法（toString、valueOf）
Date对象：属性（construct）、方法（getDate、setDate、toJSON）
Math对象：属性（PI）、方法（asin、cos、pow、sqrt）
Number对象：属性（NaN、MAX_VALUE）方法（toString）
String对象：属性（用数组）、方法（search、tostring）
RegExp对象：pattern、modifiers、方括号、元字符、量词、方法（test、toString）
全局属性：属性（infinity、NaN、undefined）函数（decodeURI）
运算符：算数、赋值、字符串、比较、条件、逻辑、位
Error对象：属性（name、message）
二、BOM对象
Window对象：属性（closed、history、location）方法（alert、close、scrollto）
Navigator对象：属性（appname、useragent）、方法（javaenabled）
Screen对象：属性（availHeight、colorDepth、height）
History对象：属性（length）、方法（back、forward、go）
Location对象：属性（hash、host、href、port、search）方法（reload）
存储对象：属性（length）、方法（key、clear）
三、DOM对象
Document对象：属性（document.activeElement、document.cookie）
Element对象：属性（element.getAttribute）
Attributes对象：属性（attr.value）
Events对象：属性（onclick、onkeydown、onerror、onsubmit、oncopy）
Console对象：方法（clear、error、log）
CSSStyleDeclaration对象：属性（csstext、length）方法（item、removeProperty）
Collection对象：方法（item、length、nameditem）
四、HTML对象
Anchor对象：属性（href、name、type）
Body对象：属性（background、link、text）、事件（onload）
Button对象：属性（disabled、form、name、type、value）
Canvas对象：属性（fillstyle、shadowcolor、font）、方法（fill、scale、drawimage）
Form对象：属性（action、length、name）方法（reset、submit）、事件（onreset、onsubmit）
Image对象：属性（align、alt、border、src）、事件（onload、onerror）
Link对象：属性（href、type）
Script对象：属性（async、src、text、type）
Style对象：属性（aligncontent、background、bottom、color、font、margin）
数据类型
在ES6中，变量用let定义、常量用const定义；ES6之前是var定义。
JavaScript中，数据类型分为基础类型和对象类型。
基础类型有六种：数字、布尔、字符型、underfined、null、以及ES新特性符号；
对象类型分为自定义类型和内置类型，自定义类型是object、内置类型有六种：array、date、error、function、object、RegExp。
类型转换、标识符命名、运算符和表达式、控制流；这些根据关键词查就可以。在这我就不展开了。
DOM
文档对象模型，是HTML和XML文档的编程接口。虽然上面讲了部分DOM的知识，但是DOM的知识有许多，是前端开发的核心。
jQuery：降低开发者操作DOM的复杂度。以优秀的DOM操作闻名。
MVVM中的virtual DOM则是大幅度降低了DOM操作，提高性能。
静态类型
在ES6之前的JavaScript采用的是var定义的动态类型，这种类型虽然灵活，对轻量级项目有绝对积极的作用，但是设计大型项目时会有巨大影响，如和类型相关的bug一般的在测试或者生产环境中爆发，如果采用静态类型的话，就可以在编译环境中提前发现。TypeScript是JavaScript静态类型编程语言，可以帮助我们写静态类型的JavaScript。
异步编程
异步编程的好处是并发，提高响应。ajax和node.js都有类似的思路。
ES6
是新版本JavaScript语言标准，其新特性有变量与常量、类的引入、箭头函数；
更新地址：GitHub