html
img标签中alt属性：当图片加载不出来的时候现实的提示文本
imput标签中：
placeholder：提示输入信息
tyrp=“range”：输入范围
type=”number” min=”1“ max = ”10“ 数量选择
type=”date“ min=”2018-02-10“ 日期选择
textarea标签表示输入范围
前端语义化
html中的元素，属性，属性值都拥有某些含义
开发者应该遵循语义来编写html
有序列表用ol，无序列表用ul
lang属性表示内容所使用的语言
无障碍性：
比如：图片加载不出来，加载文本提示信息
移动端适配之类的
页面对比度是否适合阅读
css
用来定义页面元素样式
设置字体大小颜色
设置位置和大小
添加动画效果
由选择器Selector，选择器Property，属性值value，声明Declaraction，大括号，组成
使用css三种方法：外链，嵌入，内联
选中相应的属性标签：
[匹配的属性]{}
标签[选择器Property=”属性（支持正则）“]{}
伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background:red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:green;
}
/*选中p1 : 定位到父元素，选择当前第一个元素
选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效也就是是p才生效，顺
序选择，如果顺序标签不是p则不会生效
*/
p:nth-child(1){
background:green;
}
/*选中父元素下的p元素的第二个，类型选择，如果第二个标签不是p则会顺序的向下找*/
p:nth-of-type(2){
background:yellow;
}标签选择器.属性选择器{}，即是这个标签的又是这个属性选择器的才起作用
组合Combinators
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A又满足B | input:focus |
| 后代组合 | A B | 选中B如果他是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果他是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果他在A后且与A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果他紧跟在A后面 | h2+p |
RGB函数取值0-255，三原色：红、绿、蓝
颜色HSL：
Hue：色彩基本属性0-360
Saturation：饱和度0-100%
Lightness：亮度0-100%
alpha:透明度，0完全透明，1完全不透明
rgba(0,0,0,透明度)
font-family:字体1，字体2，、、、、。依次选择字体，哪个有用那个
建议：字体列表最后写上通用字体族
英文字体放在中文字体前面
还可以使用网络字体
@font-face{
font-family:f1;
src:url("xxxx") format("woff2");
}font-size:设置字体大小
关键字
small，medium，large
长度
px，em
百分数
相对于父级元素字体大小
section{
font-size:20px;
}
section h1{
font-size:2em;
}
/*section下h1字体大小为2*20px=40px*/font-weight：设置字体粗细100-900
关键字normal：对应400自重，bold对应700自重
如果line-height:设置为一个数字，那么具体的值为 数字*font-size的值的px大小
text-align：设置文字对齐，值有，left，center，right，justify（两端对齐）
spacing：间距
letter-spacing：字母之间的间距
word-spacing：单词之间的间距
text-indent：缩进
text-decoration：文字装饰，上中下划线之类的
white-space：
normal：正常情况
nowrap：不换行，并且多个连续的空格只保留一个
pre：保留所有的，包括多个空格和换行
pre-wrap：一行内显示不下会换行，显示的下不会换行
pre-line：保留换行，空格合并
CSS深入理解
#nav .list li a:link
,hd ul.links a| # | . | E | |
|---|---|---|---|
| id | （伪）类 | 标签 | |
| ,hd ul.links a | 1 | 2 | 2 |
| #nav .list li a:link | 0 | 2 | 2 |
122>022所以下面的标签会被上面的标签覆盖
继承
某些属性会自动继承其父亲元素的计算值，除非现实的指定一个值
一般和文字相关是可继承的，尺寸大小一般是不可继承的
box-sizing:inherit 将box-sizing变为继承属性
background-color:initial 强制将background-color设置为初始值
浏览器渲染过程：
| DOM树 | 样式规则 | |
|---|---|---|
| filtering：对应该页面的规则并且用一下规则进行筛选：选择器匹配，属性有效，符合当前media等 | ||
| 声明值：Declared Values，一个元素的某属性只能由0到多个声明值。比如：p{font-size:16px} p.text{font-size:1.2em} | ||
| cascading:按照来源，选择器的特异性，书写顺序等选择出优先级最高的一个属性值 | ||
| 层叠值：Cascading Value，在层叠过程中，赢得优先级比赛的那个值，比如1.2em | ||
| defaulting:当层叠值为空的时候，使用继承或者初始值 | ||
| 指定值：Specified Value，经过cascading和defaulting之后，保障指定值一定不为空 | ||
| resolving:将一些相对值或者关键字转化为绝对值，比如em转化为px，相对路径转化为绝对路径 | ||
| 计算值：Computed Value，一般来说是，浏览器会在不进行实际布局的情况下，所能够得到的最具体的值，比如：60% | ||
| formatting：将计算值进一步转换，比如关键字，百分比等都转换为绝对值 | ||
| 使用值：Used Value，进行实际布局时使用的值，不会再有相对值和关键字。比如：400.2px | ||
| constraining：将小数像素值转化为整数 | ||
| 实际值：渲染时实际生效的值，比如400px | ||
块级元素：body，artical，div，main，section，h1-6，p，ul，li等
display:block
行级元素：span，em，strong，cite，code等
display:inline
只包含行级元素盒子的容器会创建一个IFC
行级排版
IFC：排版规则
- 盒子在一行内水平摆放，一行放不下时换行显示，
- text-align决定一行内盒子的水平对齐，
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
块级排版
BFC:某些元素会创建一个BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
排版规则：
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面合并
BFC不会和浮动元素重叠
display：flex；
Flex Box是什么
一种新的排版上下文
它可以控制子级盒子的：
摆放的流向（上下左右）
摆放的顺序
盒子的宽度和高度
水平和垂直方向的对齐
是否允许折行
justify-content控制flex里边块主轴的摆放：
flex-start左对齐，flex-end右对齐 ，
enter中间对齐
space-between两边无空白，中间有空白
space-around中间空白大一些，两边空白小一些
space-evenly中间空白和两边空白一样大
algin-items控制侧轴的摆放：
flex-start上对齐，flex-end下对齐 ，center中间对齐，stretch竖着摆满
baseline主轴为底对齐
algin-self：给某个属性自己设置一个对齐方式
order：排序
Flexibility
设置子项的弹性：当容器有空间的时候，会伸展，当容器无空间的时候会 收缩
flex-grow:有剩余空间时的伸展能力
flex-shrink容器空间不足时的收缩能力
flex-basis没有伸展或收缩时的基础长度
dispaly:grid
Grid:
二维排版，grid-template可以将grid容器划分为二维网格，然后设置每个
子元素占据的格子
建议：做图文环绕用float
position：
static：默认值，非定位元素
relative：相对自身原本位置发生偏移，不脱离文档流
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位
javascript
黑白模式：js直接去操控css样式
进阶版：js不要直接去操控css样式，而是去改变css选择器比较好，切换状
态，而不是直接修改样式，
进进阶版本：label去操控checkbox改变黑白天，checkbox直接切换css样
式，不用js操控
注意：
HTML/CSS/JS各司其职
应当避免不必要的由js直接操作样式
可以使用class来表示状态
纯展示类交互寻求零js方案
组件：是指web页面上抽出来一个个包含模板（HTML）、功能（js）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
轮播图设计：
结构HTML
轮播图是一个典型的列表结构可以使用无序列表
- 元素来实现
CSS
使用css绝对定位将图片重叠在同一位置
轮播图切换的状态使用修饰符（modifier）
轮播图的切换动画使用CSS transition
行为js
API设计应该保证原子操作，职责单一，满足灵活性
使用自定义事件进行解耦：让轮播图下面的小圆点和图片绑的不要那么死
总结：
结构设计
展现效果
行为设计
API（功能）
Event（控制流）
解耦：
将控制元素抽取成插件
插件于组件之间通过依赖注入的方式建立联系
将html模板化，更易于扩展
抽象：
将通用的组件模型抽象出来
最终总结：
组件设计原则：封装性，正确性，扩展性，复用性，
实现组件的步骤：结构设计、展现效果，行为设计
三次重构：
插件化
模板化
抽象化（组件框架）
编程范式：
命令式
声明式
总结：
过程抽象/HOF/装饰器
命令式/声明式
