视频知识点总结

前端语言知识串讲

一、三大基石的能力

HTML是标签语言，通过标签元素划分区域，放置内容，浏览器解析标签读取并展示在页面上，是网页的关键组成部分；

CSS介绍了元素选择器，伪类和伪元素选择器，前者单冒号后者双冒号属性选择器，还介绍了匹配选择器，可以通过逻辑判断进行选择。查阅CSS选择器表，可以看到的属性属性值，属性值可用的不同度量单位。

JavaScript的起源和发展，从1995年诞生，到2009年的es5 2015年的es6让JS有了更大的进步，（这里没听清？？的兴起），JS借鉴了C语言的语法，Java语言的数据类型和内存管理方案，函数提升到一等公民。基于原型prototype（一等公民是英文first class citizen直译，难以理解，其实是指函数可以在很多地方可以使用，作为函数可以赋值给变量，也可以作为数值、字符串一样，当做函数的参数，还可以作为函数返回值）（每个函数都有一个属性叫做prototype, 这个prototype是指针，也是一个对象，prototype有个叫做constructor的属性，指向这个函数本身。 Prototype把一个函数创建的对象都增添了统一的属性。）

现代JS完善了很多功能，如let 和 const 是用来定义变量是可变或不变；字符串模板，模板字面量使用反引号 (``) 来定义一个字符串，在文本中用美元和大括号，在字符串内部调用变量，函数。

三者关系工作过程：HTML搭建最基本的框架，填充基础内容，再通过CSS使内容更加丰富多彩，再搭配JS的动作逻辑，网页就变得更加鲜活有互动性。

学习JS的基本语法

1数据类型有6+1种，字符串、数字、布尔、null表示缺少对象、undefined是全局属性、Symbol每次被调用都会生成一个新的Symbol，还有对象Object。

（null是Object的一个特殊值，如果一个Object为null，表示这个对象不是有效对象，null是一个不存在的对象的占位符。）

2 var a ＝ 7 + “2”

var,let,const都可以定义变量，JS在运算时会把数据类型统一化。

3 var user={ /属性名1 = 字符串/数值等数据类型，也可以属性名2 = 函数/ }

4 function someName (param1，param 2)

{/定义函数体/}

浏览器工作过程

渲染引擎根据HTML生成dom树结构，计算CSS，排版，判断对应关系，渲染到不同图层上。

JS通过解释器运行，解释和执行源代码，也可以解释为机器码。

二、三大语言的协助配合

CSS在HTML的运用

1在标签内使用 style=

2在head里使用< style > < /style >

3在head部分用<link rel=” xxx.css”>引用外部CSS文件

JS在HTML的运用

加载JS文件会阻断HTML和CSS的加载线，等JS文件加载完并且执行完之后，HTML和CSS再继续下载，async 异步加载，加载完就执行，async只能加载外部脚本，不能把JS写在script标签里。

JS在HTML里的重要功能是构建DOM树，把HTML分析出一个框架结构，大属性包括小属性。事件响应机制。JS是单线程，先执行微任务，再执行宏观任务。

HTML在JS的运用

未完待续

总结青训营直播课程学习到的知识点

今天学习了HTML的基础知识

HTML基础标签有：`

头head，主体body，，

主体内常用标签：

段落<p> </p>，标题<h1> </h1>；

链接<a href="地址 "> 显示内容 </a>，

图片<img src=" 地址" height=" " />；

br表示换行，结束标签补充在括号内<br />，水平线hr ；

注释：head里/* xxx */ ，body里< /! xxx/> 表格table。

标签内可以定义属性，属性值应该被包括在引号内，如< p align="center">xxxx</ p >

常用的属性有对齐方式align 字体颜色color背景颜色background-color。

这里我只想用文本形式，为什么文章编辑器它会自动运行代码？这里我加了反引号以代码形式展示

CSS是在HTML基础上，通过多种选择器及声明规定特定元素如何显示 HTML 元素。标签style，可以在head处可以在body内，还可以在外部.CSS文件内定义。

与标签类似，CSS用选择器选择后，在大括号里定义方法，选择器包括

简单选择器，组合器选择器，伪类选择器，伪元素选择器，属性选择器。

常用的选择器有：

元素选择器如选择所有段落p ；

类型选择器class，如在style里用 .center 对应主体里开始标签内的class="center" ；

指定元素的类如p.center ，只对p标签有效，一个标签可以有多个class值；

id选择器#xxx，对应主体标签内id="xxx" ；

通用选择器* ，选择所有元素；

分组选择器，选择用同种样式的多标签，逗号隔开；

伪类选择器，用于元素的特殊状态：悬停、已访问和未访问、获得焦点；

未访问的链接 :link

已访问的链接 :visited

鼠标悬停链接 :hover

已选择的链接 :active

伪元素选择器，伪元素用于设置元素指定部分的样式，在 CSS3 中，双冒号取代了伪元素的单冒号表示法。常用的有：

伪元素将特殊效果添加到文本的第一行::first-line

文本的首字母添加特殊样式。::first-letter

元素的内容之前插入内容::before

在元素内容之后插入一些内容::after

匹配选择的元素部分 ::selection ；

突出显示当前选择的部分内容 :target （搭配链接标签）其中还可以进行逻辑判断，= 、 <=

给出自己的理解和对其他入门同学的学习建议

大家还是先自学三门基础语言把。

/未完待续，写的不好请见谅。跟着视频手敲笔记真的很费劲，不知道大佬都是怎么做笔记的，要是有视频声音转文字就好了，之后我自学相关知识写实践类笔记把，跟着视频做笔记像是把视频转述一样，感觉太浪费时间了/

青训营小白的前端学习笔记（第一篇）