前端语言串讲笔记 | 青训营

52 阅读2分钟

HTML:层次结构,做好网站SEO的关键点

CSS:添加样式

JS:使网站具备响应式特点

基本语法:

6个类型:String,Number,Boolean,Null,Undefined,Symbol其余Object

这三门语言如何在浏览器中运行?

浏览器包含两种引擎,包括JavaScript引擎,渲染引擎。其中渲染引擎负责加载页面,读取HTML生成DOM树结构,获取css资源并构建cssom树(css对象模型)。DOM的结构和cssom的样式会决定最后的排版,并推断那些可以作为一个整体作为一个图层,这样渲染的效率会更高,最后把页面绘制出来。

事件捕捉:从Document到HTML body,div、button上会执行一个事件捕获的阶段,反过来从button,div到document进行一个事件冒泡的阶段。捕获的阶段方便计算机精准的找到触发元素。

JSX:比较完美的将HTML和JavaScript结合,通过编译工具进行转化,渲染效率更高。

CSS Module:目前使用比较普遍的CSS技术。

JSS:不用写单独的JS文件,直接定义一些。

HTML(5)

-2046651062__1e077f5bfbba7b6477f257659a926672-471187285_Screenshot_20230726_194741_0_wifi_0.jpg

_-769514878__63c8f7cfa33899c5266777306b2e7463_212939109_Screenshot_20230726_195131_0_wifi_0.jpg

ARIA:给标签提供一些属性,使理解起来更加容易。

H5不再是文本语言,增加定义了一些特性,新的标签。w3c也扩展了一些新的规范。

语义化标签,用不用好,不用比用错好。

,...

表单增强,并提供了一定的离线存储能力:cookies、localstorage,session storage!

1972867177__ff15619e2f05f014bedb9a3ae8cbe7db-2133993523_Screenshot_20230726_195843_0_wifi_0.jpg

indexedDB适用于复杂场景,异步方式获取。

AMP主要对于搜索来用,提高网站关键内容的曝光的访问速度!

-433157262__1f1206254af2e753fde64cda380eb913-103414143_Screenshot_20230726_200242_0_wifi_0.jpg

-242269315__855b44f3954794ad2107522903c4cb9d-1786664051_Screenshot_20230726_200529_0_wifi_0.jpg HTML5还提供以一些其他的API:比如获取当前的位置GeoLocation,拖拽Drag&Drop。

HTML5 web worker也使用了多线程的方式:

_1323844818__764b5b5beb666580cb432eedd5a1cd21_747058884_Screenshot_20230726_204029_0_wifi_0.jpg

Shadow DOM:一种特殊的节点,在document下可以挂载很多DOM节点,如果选择一个DOM作为一个shadow Host,其内部还可以构建更加复杂的shadowTree,里面还可以构造shadowRoot,shadow Root可以无限延伸。

-973131242__59328c7da5269ada4c02caf48dc81e37-1580479807_Screenshot_20230726_204741_0_wifi_0.jpg

个人感想:课程信息量真的很大,讲的很快,基础不太好很多地方听起来都不太懂。之前学完了三件套和vue了之后就一直在做一些项目,现在发现其实还有很多基础的细节没有学到,课下打算把课上每一个不懂的细节认真整理一下!!!