前端语言| 青训营笔记

104 阅读2分钟

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 音频