前端语言串讲
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-音色 音频上下文-音量 振动波夫
拓扑图的声音输入