01_基础能力
html构建骨骼,css构建皮囊,js构建功能。
前端技术栈主要分为三层,分别是HTML(内容)、CSS(样式)与JavaScript(行为)。我们通常将这些内容存放在服务器端,再通过HTTP等协议获取并渲染于浏览器当中。
Html:大量标签构成的文本文件。HTML的全称为HyperText Markup Language(超文本标记语言)
语法
- 标签和属性不区分大小写,使用原生组件推荐使用小写,使用自定义组件推荐大写。
- 空标签可以不闭合,如input、meta。
- 属性值推荐用双引号包裹。
- 某些属性值可以省略,如required、readonly。
语义化
- HTML中的元素、属性及属性值都拥有某些含义,即要表现什么样的内容就用对应的标签才能把代码格式写规范。
- 开发者应该遵循语义来编写HTML。
- 如:有序列表用ol;无序列表用ul;lang属性表示内容所使用的语言。
css:class类选择器、$、* 、 id选择器、元素类型选择器、 伪类选择器、伪元素选择器
JS: 基本数据类型:string number boolean null undefined symbol 定义变量名不能使用关键字。 Function特殊字符 使用function关键字来定义
Browser: V8引擎 source code->paresr->ast树->ignition
trending
02 CSS in HTML
Javascript in HTML
DOM=>js对象 element=》htmlelement
事件捕捉和事件捕获 冒泡阶段(时间代理) JS单线程 event loop =》宏任务(默认执行的)=》微任务 promise.then html in js mustache js定义模板
css in js div.style.width="" CSS Module全局类名冲突的问题
HTML DTD
基本语法 标签 文本 注释 DTD 处理信息
文档型 闭合型 换行型 H5新元素 语义化 多媒体 表单标签
head:title、base、meta、link、script body:
ARIA供盲人阅读
HTML 5
定义了新的特性和标签 拖拽 多线程的样式 存储 Local storage session storage cookies
HTML5 indexedDB 对象存储空间 Audio 音频