复习直接看写过的代码
标记语言，不做逻辑处理。
中间是一段填充文本，没有实际意义，用来测试排版等
前后叫做tag，
HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)
Head一般不会被渲染到网页主体上，比如一些标题栏。
body是真正渲染给用户看的，
h1是网页主题上的标题。
网页编写的标准可能由于版本不同而不同，所以解释的时候，是需要一个类型说明的。
创建一个文件夹，并创建一个文件，vscode打开。
可以输入一个！然后tab，
输入body直接tab，会帮你写上<>这些。
输入完成之后，直接用浏览器打开刚刚的文件即可。
h1到h6都可以。
Alt + shift + ↓可以复制一行，vscode。
注释标准格式。
输入lorem按tab就会帮你补全一大堆文字，用作示例。
这样会生成10个单词。
p是paragraphs。
关于段落之间的空白，我们可以右键inspector开发者模式，然后选中一行可以看到margin这个就是控制空白的，下面有他的大小16px。
a代表attribute 属性，
上边是加了属性之后的，这个就表示给后面的文本加一个超链接。
用法都是写在第一个tag里。
多写这么一句，就可以在新页面中打开这个连接了。
Tr table row， th table head， td table data。
首先这里的type不只一个，name="firstname"，这个的意思是，就是我们输入之后，可能会有一个提交，提交会和后台的服务器进行交互，那么提交的东西就被存储在这个firstname中去和后台进行交互。
比如我们可以在这里加一个action，也就是我们提交之后，他会去找action后面对应的那个文件名，用这个文件去处理一些提交之后的逻辑问题。
Line breaker，hr horizontal line
这个就是搞一个按钮。
老出现在底部，这里可以加一个CSS内容，这里把margin改成1000，意思是下一个语句和上一个语句内容之间间隔是1000，所以这里就一大片空白了。
我们点击提交之后，这里他会找不到这个form.js文件。
上边的按钮时form内部的，这里也可以单独写button。
这里就是弄一个图片，src，表示的是图片的来源，可以是网络上的，也可以是本地文件。然后alt，这个是一个文本，表示图片不能正常显示的时候应该显示什么内容。
注意这里前面加了一句style，这个是CSS内容，表示的是图片宽度永远是浏览器页面的宽度。
引用一些话，这个可以CSS弄漂亮一些。
HTML: HyperText Markup Language | MDN (mozilla.org)
=============================================================================================================================================================================================
CSS
这里后面的分号，最后一个成分可以不加，但是加上是最好的，best practice。
先准备一下基础的HTML，这里他直接就是用！来准备最开始的框架了，head里面会被填充很多的没见过的东西，暂时不用理，直接找到title，进行一个修改，然后写我们的body就好了。
前两种比较常用。
这是第二种。
第三种。
第三种对于维护CSS代码比较麻烦。
第一种最好。
这里需要先进行一个link。
然后把要处理的东西先放在一个box里面。
这里我们使用的是一个class的box。
CSS我们说过他第一个成分是一个选择器。这里有三种方式：
首先我们修改颜色，改谁的颜色得说清楚吧，这个就是由选择器来确定的。
根据上边，选择器我们可以直接写tag的名字，也可以写tag的类的名字，或者是id名。
这样这个CSS起作用的时候，就会针对所有和指定名字相同的语句进行一个处理。
同时对于id和class，我们通常都把id搞成当前HTML文件中独一无二的，class，通常同类是一个class。
CSS selectors - Learn web development | MDN (mozilla.org)
选择器还有很多的，上边网站。
这里我们不想让他顶住两头，
再在外头套一个class，这是因为，我们想让他在居中的时候，背景色也居中，让两头是白色的。
输入class的div的时候，可以直接输入.class，tab即可。
第一句是缩短，第二局居中。
里面有常用的内置颜色字符串和颜色转换相关的东西。
关于字体。
首先serif和san-serif表示的是有无边线，主要看L字母，棱角部分或者是两头，没有serif的，整个L粗度都一样，而带有serif的就略有不同。
另外第一个不同于后面三个，他除了最后一个边线相关的指定之外，还有俩，前面就是字体了，有俩代表有一个优先级，找不到第一个就用第二个。
然后有的带引号有的不带，是因为他的单词有两个，所以为了不歧义，用引号括起来表示是一个整体的。
后面俩，mono space，表示的是等宽字体，每一个字母占据的宽度相等。
更多字体。
这里我们可以对整个页面的颜色做一个修改，那就是写body，然后里面的背景颜色就会改成你指定的。然后也可以修改color，这个color代表里面所有的文字的颜色。
注意这里有一个优先级的问题，body里面指定的优先级是比较低的，就是如果在指定body之后，又对某一块字体做了额外的指定，那么就会采用额外指定的颜色。（注意这里body写的位置在下面也无妨！）
修改字体。
修改字体大小。
字体的权重加粗了。
可以放在一起简写，下面一行等于上边三行。
如果上下不一样，下面会对上边进行覆盖。
也可以这么指定，box1内部的h1。
修改下划线，大小写，字母间距，单词间距。
修改行距。
这里当两段文字相邻时，他们的中间部分的宽度如何去确定，他会取两段文字较大的margin来作为他俩border之间的距离。
而非：
右边第一个的顺序：上右下左顺序，
第二个，上=下5，左=右10。如果上下左右都是一样的，写一个就好了。
第三个， 是上 左=右 下
通过背景颜色我们可以看出，只加了content部分：
单独改width
类似的。
点击上边的那个按钮，我们可以在网页中点击，然后就会选择对应的div啥的。
从而我们可以在下面的工具观察这些box的宽度。
圆角。
想要改掉这里的圆点。
这个我们需要提供的图片必须是处理好的，图片的大小必须是很小的放在这里。
可以居中显示等。
还有一些自带的形式。
这里第一个button，就是修改一些普通的属性。
然后第二个加了一个hover，表示的是，鼠标放上去的时候的状态。
这里active就是点击的时候的状态。
如果多加一个按钮，他俩的样式是一样的，因为这里是针对button的tag来写的。
给列表这些加一个超链接。
可以看到超链接的默认样式是一个蓝色下划线。
这里可以修改取消掉下划线，加上颜色，然后他也有鼠标放上去的时候的颜色，还有一个是超链接点击过后的颜色。
为啥这里都变红了，是因为看上边，他们的超链接都链接到#，这里是原网站加一个#，没有变化，访问之后他们都指向这个，所以就都红了。
修改一个就不会是红色了。
然后我们如果想要这三个排列方式变换一下。左右排列，有大有小的。
这里加一个靠左边，也是没有用的。是因为他们是div，默认是占据整个宽度。所以第一个占据一整个宽度，下一个从最左侧开始，那就是从头开始。
修改一下他们占据的宽度即可。
这里因为加了边框，右边装不下了，所以又下去一个。是因为他的width没有计算边框，所以边框部分是在33.3%之外的。
我们可以把边框考虑在33.3%内部。
点击tab就会补全，id为上边main-blovk的 tag。
再添加两段。
每次float用完之后要做一个clear，搞一个上边的类，然后：
Clear:both
这里首先.list2 li就会针对所有的list item，然后nth-child(参数)，是对所有的list item，选择其中的一个或者一部分，具体选择谁，输入参数。
那么这里输入的是even，也就是所有的第偶数个。如果是奇数，就写odd。
默认都是static。
绝对的情况下，top，left，这些表示的是相对于视窗页面（整个网页滑到最上头的左上角为原点）的偏移。也就是这种情况他就完全变成了浮动的了。
如果是相对的话，那么他本来偏移之前是有一个位置的，那么就相对本来的位置进行一个偏移。
注意这里，他偏移之后，他本来所占据的区域还是存在的，上边绝对的情况，他完全变成了浮动的，那本来的区域也没必要保留了，所以下面的直接就挤上来了。
这里的box是relative，但是我们没有做偏移。
然后它里面的h1和h2，是absolute的，这时候进行一个偏移，他会以box的左上角作为原点进行绝对偏移。
原因就是把box改成了relative。
如果去掉box改成relative的操作，那么他们就会变成绝对的，这个绝对是以当前网页滑到最上边的左上角为原点的。
其实这个top和left这些并不是偏移，top 30px，表示对于原点，top方向的距离是30.
这个fixed是针对窗口进行固定的。
CSS内容比HTML多得多！
视频中出现的链接和推荐（看不懂英文的记得点击右上角Change language更改语言）：
CSS selectors - Learn web development | MDN
CSS选择器
<color> - CSS: Cascading Style Sheets | MDN
颜色值
HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter
HSL、RGB、HEX相互转换
Fundamental text and font styling - Learn web development | MDN
字体基础
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
各种字体在Win/Mac上的占有率统计
字体选用平台
字体排印/字体技术
字谈字畅——字体排印主题播客节目
推荐三本书——西文字体、西文字体2、西文排版
Learn to style HTML using CSS - Learn web development | MDN
CSS学习网站，有许多例子和练习题
=================================================================================================================================================================================================
JS这个边执行边编译，不像c++那样先编译好再执行。
这个在console也是可以写的。
点击
清空。
转换为了字符串。
如果是===，就不会进行类型转换，如果类型不同，必然是不等，==会进行类型转换，然后再判断。
之前说声明变量可以var和let，他俩的区别就是作用域，var声明的变量是没有作用域的，无论在哪声明，也无论在哪里访问，都可以访问的到。let就不一样了，是考虑声明的作用域的，只有在当前作用域声明了才能访问。
const来声明常量，const也是有作用域的。
这里访问对象用点可以，用这个[]也可以。
上边name算是对象内部的属性名，某一类型的变量，"Simon"算是变量对应的值。
contact也就是类似的，他也是属性名，是某一类型的变量，不同的只是他的类型是对象类型。然后后面就是这个对象的值。
注意创建变量的两种方式。
这样直接访问一个不存在的成员，结果会是新增一个成员。
中间三个直接空。
直接访问输出会输出undefined，但是没有出错。
他会忽略掉未定义的部分。
pop可以删除最后一个，shift删除第一个元素，push添加，reverse可以反转，
unshift在第一个位置添加。
这里返回值直接都是写function。这里的argument是参数。
这里是返回一个函数。
所以上边用于接受的x就是一个函数。
为初学者准备的：JavaScript 速成_哔哩哔哩_bilibili
============================================================================================================================================================================================
DOM
换到DOM结构中的样子。
这个插件可以看到网站的DOM结构。
写一个HTML之后
打开console，我们输入js代码，这里是可以获取到document的，然后通过document的函数，是可以获取到任意一个刚刚的树的节点的。
这里是直接返回所有可以找到的body，也就是一个body数组，所以这里我们[0]就可以获得我们的body。
这里是tag.类名。
其实之前说选择器的时候说过，这就是从外往里一层一层的，意思就是tag为li且class为list的。
这个通过id来进行获取的时候，返回的就不再是集合数组了，而是单个的，因为我们通常保证id是不重复的。
这里其实就是利用和CSS中类似的方式来找到HTML中特定的语句的。
带不带ALL，区别是不带的时候从第一行开始往下找，找到第一个就返回，带All就找到所有的。
这个query去获取的时候，算是其他几个接口的合并，更加的通用。而且类型不受限，上边最后一个例子，类型套了两层，更加精确。之前get就不行。
获取之后，我们可以获取他对应的属性，然后就可以修改属性。
也就是这么玩，可以修改所有的CSS的属性。
注意改的时候，命名规则有些区别。
也可以这么玩。
补充一句：
选中后，这里也可以改东西。
当我们在HTML代码中把h1的类删除。
这里是可以在代码中为他指定类的。
有添加，自然也可以删除。
所以现在有两种方式可以对文字的style进行修改，一种是直接.style()然后赋值修改。第二种就是通过修改它所在的类，然后如果CSS属性是根据类来写的，那么属性自然也就跟着修改。
toggle就是开关，如果本来是在类里面的toggle一下，就从类中移除了，再来一下就加到类中了。
想要实现点击后变红的操作，其实就是加一个事件监听器，这里第一个参数是监听什么玩意，这里就是监听的点击事件，后面就是如果点击事件发生之后，执行function。
我们还可以对HTML的文本内容进行一个修改：
也是可以直接返回这个玩意的
注意这里的textContent和innerHTML的区别。
前者只是返回文本内容，而后者返回的是真正的<h1></h1>夹着的内容，这里夹着的是带有<em>这玩意的，也带着一起返回。
所以前者只能改文本，而后者可以直接把HTML语句给赋值进去。
获取HTML的属性：
这里获取之后可以修改，比如这里对所属的类进行一个修改。
添加属性。
写完了方法，使用的时候直接把sitename当成public开放的成员即可，直接获取直接赋值。
静态方法，使用类名调用，而不能使用对象调用。
(117条消息) GAMES202作业1-万字分析代码框架&帮助更好理解框架内容_flashinggg的博客-CSDN博客_games202作业
============================================
(117条消息) js中(function(){}()),(function(){})(),$(function(){});之间的区别_stpice的博客-CSDN博客_(function(){})
HTML script defer 属性 | 菜鸟教程 (runoob.com)
webGL渲染，
WebGL 教程 (yanhuangxueyuan.com)
Canvas画布_WebGL上下文 (yanhuangxueyuan.com)
webGL是搞渲染的一套API，然后怎么使用它？
学过DX知道，绘制操作最为核心的东西是一个叫做上下文的东西，一切API的调用都从他调用起来。
所以这里GL也是一样的，当你发现HTML和CSS那些功能的绘制满足不了你的时候，你就可以动用web GL的API来实现想要的画面。
那么怎么动用呢？都说了重点是上下文，那么我们这里就获取上下文，获取上下文首先需要一个画布的对象，有了画布之后，画布的其中一个属性就是上下文。
有了上下文之后，其实渲染主要就是三部分：准备摄像机，准备场景内物体，前俩弄到渲染器里面。渲染即可。
技术美术成长之路——Games202作业篇（番外2）、WebGL基础 - 知乎
之前自己读webGL文档写的一个文章，基本上这些加起来就够了。
基本上有个大致了解，然后边做作业边搜即可。
.
202的作业