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

56 阅读3分钟

前端语言串讲

01 前端语言的基本能力

Html:构建框架结构 骨骼

标签 元素(浏览器) 文本文件 浏览器文件完成文本到内容的 网站icu的重点

 

Css:添加网站样式,体验 皮囊 (后续专门课程)

语法很简单的语言 

选择器 

 

css语法解释

 

 

Js:灵魂 网页交互 效率和可供性 骨骼(控制)

缺一不可 同等重要

95年诞生10天写出来

1.借鉴c语言的基本语法

2.借鉴java语言的数据类型和内存管理

3.借鉴scheme语言,将函数提升到一等公民(first class)的地位

4.借鉴self语言,使用基于原型(prototype)的继承机制

 

作用:数组 变量重命名

 

 

 

Var(赋予变量) a(变量名)=(操作符 要搭配关键字)7+“2”(表达式语法)

object定义自变量的方式

“”表示东西是字符串

Function:特殊字符在特殊段落中被整体使用

关键字+function名字()return返回结果

 

 

Browser:

http-构建domi树-计算css树-排版-渲染合成(css推测)-绘制

 

js本质是文本 要用解释器解释出来

 

字符码-机器码、、、

 

02 前端语言的配合协作

生态发展

 

css生态趋势:框架库 工具链

js生态变化(21年前没有活到现在的) 工具链

 

初步结论:会在深度上越来越深,但最终会融合

 

Css in html

1.Inline css

2.Internetal css

3.External css

 

Js in html

脚本下载 默认script定义全局

dom树

 

dom的事件机制:事件捕捉 事件捕获 事件冒泡(?对于开发者找到事件代理

对于计算机找到

 

js是单线程

微任务队列(promise covive 宏任务队列(浏览器默认的都是

 

Html in js

现在都基于模版渲染做 大括号表示变量 制定名字 动态模版

Jsx 技术 变异工具进行转化

 

Css in js

修改dom 的class属性

Link 标签引入外部样式

Jss 中定义class名字 样式 在代码中通过css model 一样用

 

03 你不知道的html

html并非图灵完备,它只是一门标记语言 (最简单最基础)

 

 

03 html全部标签分类

文档型、(

闭合型、(闭合标签、空标签

换行型、 块级标签、行内标签

H5新元素 语文化标签、媒体标签、表单标签、功能标签

 

head标签

功能性 用户看不见

Title  过度耦合标签 现在不再使用 标题,全剧唯一

Base(向页面所有相对url提供前缀或者全剧唯一不建议使用

Meta (通常是约定好的建值对 例外:chartset http-equiv

Link (rel决定类型 href决定引入地址

Script(type指定mime类型 可内嵌代码外链文件

 

Body 功能标签

文本语义 文档模块 表单 分组

潜入元素:image

 

Html aria

通过给标签添加额外属性,使整个页面更容易理解

逻辑相关意义 更为被理解的工具

(用对比不用好不要比用错好)

 

Html5语义化标签

帮助开发者维护网站结构 用hu来网站

表单增强

Feel side fell control

颜色选择器 事件选择器 离线催熟能力

Html5存储

Cookie local (请求体积可能会变的很大

Storage、 session storage(只为前端服务

 

Html5 pw and amp

把关键内容进行缓存 网站关键内容曝光反应速度

 

音频能力

Audio context-音色  音频上下文-音量  振动波夫

拓扑图的声音输入