前端语言串讲
前端语言的基本能力
- HTML：Create the structure
- JS：Increase interactivity
- CSS:Stylize the website
JS
借鉴了C语言的基本语法，借鉴了Java语言的数据类型和内存管理，借鉴Scheme语言，将函数提升到“第一等公民”的地位；借鉴self语言，使用基于原型的继承机制。
JS中的基本数据类型
- String
- Number
- Boolean
- Null
- Undefined
- Symbol
- Object(Array Function)
变量和对象
var a=7+‘2’ 对象 在JS中一个数据类型被用于存储一个数据组合 在一个简单的值中
前端语言的协作配合
CSS
1 Inline CSS
2Internal CSS
<style>
.color1{
color: #808080;}
</style>
3External CSS
<link rel="stylesheet" href="./CSS/index.css">
Js in HTML
HTMl in JS
CSS In JS
CSS三大特性
1、继承性
2、层叠性
3、优先级
谁选中的范围越广谁的优先级越低
当一个标签使用了多个选择器，样式冲突时，根据优先级生效
你不知道的HTML5
HTML并非图灵完备，它只是一门标记语言 HTML：超文本标记语言
HTML 页面固定结构
每一个网页都是有固定结构的
- 图片
<img src=" " alt="">
head标签
HTMLbody功能性标签
HTML5
- 语义化
- 存储/音频
- 浏览器API
- 可视化相关
理解CSS
- 部分CSS知识模块
- 一些CSS生态相关
- 一个简明的知识脉络
css发展史&总览
基础知识
Casading规则
层叠优先级， 样式表-规定声明的集合——产生冲突
层叠的三大规则（逐渐递减） 样式表来源——选择器优先级——源码位置
选择器
选择器有
- 基础选择器，id选择器和类选择器
- 组合器 属性选择器通过约束属性值
- 伪类选择器：选中处于某个特定状态或相对于父级或兄弟元素的位置的元素
- 伪元素选择器：匹配在文档中没有直接对应HTMl元素的特定部分，或者插入内容。
- 逻辑选择器：比较新的选择器:is() :not()
选择器尽量少用id，尽量不要用!important;自己的样式加载在引用库样式的后面。
继承
大部分具有继承特性的属性跟文本有关如，color font font-size等，还有少部分列表，表格的属性。
可以使用inherent关键字显式指定一个属性值从其父元素中继承
值和单位
盒模型
布局和定位
padding border margin只有margin可以设置负值，它最终减少的是外界可感知的宽高。
- 常规流：Normal Flow常规流：默认的布局方式，有块级格局化上下文和内联格式化上下文；Float浮动流，做横向布局。position定位流。
- 弹性盒子：为了提供更加高效灵活的布局方式，在即使是宽高未知的情况下，也能排列和分割一个盒子内部的布局，而在不同布局方向的调整更加灵活。
- Grid：二维布局，基于布局 ，2017年后的浏览器普遍支持。大面积或整体布局推荐使用该布局。
- 定位 relative absolute fixed sticky
层叠上下文
对HTML元素的三维构想，将元素沿着垂直屏幕的虚拟Z轴可以排开。
形成新的层叠上下文的条件（任一即可）
层叠顺序不止指的是不同层叠上下文的顺序，元素之间也有顺序。
变形、过渡、动画
- transform变形 2D相关属性
- 3D相关
响应式设计
遵循的原则：
