HTML:Hyper Test Markup Language 超文本标记语言
HTML 1~4 SGML
XHTML XML 严谨/兼容/frameset
HTML5 5.2
定义文档的结构和内容
自由人（明确的语义）
div 块
span 内联
CSS:Cascading Style Sheets 层叠样式表
选择器定义文档颜色、大小、位置
样式可以做多次定义（不同的位置）叠加（就近原则）
JavaScript
定义文档的行为
用户交互（操作的反馈） 数据通信
<!DOCTYPE html>
html
文档头
<head>
title、link、style、script、meta(元数据)
文档尾
<body>
ol ul li dl dd dt a
h1 hr br p pre
block 块级元素
p
li
div
inline 内联
----------------------------------------------------------------
像素可以算出图片大小
图片格式 webp、webm（视频）、svg
CSS文字样式常用属性:
font-family；
font-size;
font-style;//斜体
font-weight;//文字粗细
color;
font;//组合设置
相对长度单位：px|%|em
text-decoration;//修饰文字
text-transform;字母大小写,capitalize首字母大写
letter-spacing;
text-indent;
text-shadow;
块级元素和行级元素的特点：
块级：
1、总是在新行上
2、高度、行高以及外边距和内边距都可以设置的
3、宽度缺省值是它父元素的100%，也就是父元素多宽，它多宽
4、它可以容纳内联元素和其它块元素
行级：
1、和其他行级元素在同一行
2、高度、外边距和内边距不可变，行高可以设置
3、宽度就是它的内容的宽度，不可改变
4、只可以容纳其它行级元素或文本
-------------------------------------------------------------
border-style的属性
none 无边框
dotted 点线
dashed 虚线
solid 实线
double 双直线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
透明色transparent
图形和图像
JPG一般是照片，采集到的影像，有损压缩，比较小，色彩丰富
PNG一般是自己画的东西
GIF 多帧，色彩易失真
背景图片的属性、
CSS3 渐变
线性渐变Linear Gradients
径向渐变Radial Gradients
-----------------------------------------------------
12.28
表单
form 定义用户输入的表单
input 定义输入域
textarea 定义文本域
label 静态文本，说明文本
fieldset 定义一组相关的表单元素，
-------------------------------------------
盒子模型的注意事项：
当一个div有margin-bottom:20px，另一个div有margin-top：10px时，垂直角度会合并为margin-bottom:20px。
当元素为块级元素，垂直角度会合并为最大值，左右则叠加。
float四个属性：left|right|none|inherit
clear五个属性，比上面多个both
-------------------------
任务：仿照简书的首页
--------------------------------------------------------------------------------------
JavaScript本质
·它是动态的：许多东西可以被改变
·它是动态类型：变量和属性值可以保存任意类型
·它是函数式和面向对象的：支持两种范式，函数式编程和面向对象编程
对象：
对象中包括一系列属性，这些属性是无序的
每个属性都有一个键（Key）和值（value）
属性的键始终是文本字符串
属性的值可以是任何JavaScript值
属性的值是函数时，该函数一般被称为方法
任意值转化为对象
（无参数调用）{}
undefined {}
null {}
布尔 new Boolean(bool)
数字 new Number(num)
字符串 new String(srt)
对象
函数的三种形式：
-普通函数
-构造器
-方法
电梯的工作原理，采用队列实现
定义函数
1、函数声明
foo（）；//可放函数前面
function foo(){}
2、表达式语句
var foo = function(){}
foo（）；//只能放函数后面
3、函数的构造方法
var foo = new Function("","","");
函数提升有区别
函数可以作为一个变量赋值给另外一个变量
形式参数
functionc foo(a,b,c){}
实际参数
foo(1,2,3);
Boolean(undefined)==false;
Number(undefined)==NaN;
构造函数：
Instanceof：检查一个对象是否是指定构造函数的实例
------------------
用JS写一个计算器
面向对象方法
Calc{
//
Construcyor(){
this.data = new Array();
}
//方法
addNumber（n）{
return this.data;
}
}
let digit;
let op;
----------------------------------------------------------
使用Electron构建的应用
-------------------------
JS
HTML 属性 样式 DOM
DOM 文档对象模型
<div><span id="" class="">text</span></div>
元素节点、属性节点、文本节点
document.getElements HtmlCollection
e.querySelector Element
e.querySelectorAll NodeList
---------------------------------------------------------------
基本类型：
number\string\boolean\null\undefined
引用类型：object、数组、函数、类
类型继承的写法：
1、可以使用class\extends 定义继承关系
class A{}
class B extends A{}
2、可以使用函数的构造类型定义
function Foo(){}
function Bar(){}
Bar.prototype = new Foo();
选择器以及使用场景：
HTML 标签或元素 a{} p{}
类选择器 .goods{}
ID选择器 #header{}
伪类选择器 ：or :: 状态/类型/属性
---------------------------------------
2018.2月
设计：产出物：原型、定义 界面（UI）和交互（行为）
前端：实现原型的实现（可运行的程序）
用户接口（html+css）
交互（js）：
用户操作交互
后端数据交互（数据传输
浏览器（PC、移动端）
APP（原生、混合式）
后端（Java/PHP/Python/Rudy/node.js）：
API接口
业务逻辑
数据存储
安全、负载等基础设施
什么是前端开发？它与设计、后端的关系？
答：前端开发是界面和交互的实现，把设计变为可运行的程序，与后端实现数据交互。
什么是JQuery？
答：JQuery是一个轻量级框架，标语是用更少的代码，做更多的事。它是一个快速，小巧，功能丰富的JavaScript库。
一个js库，对原生的JS函数做了封装，提供一套简化、统一的API。
什么是CDN?
答：CDN的全称是Content Delivery Network，即内容分发网络。
主要用于：
节点查找、操作
事件处理
ajax（数据通信 服务端）
动画
CSS操作
寻找元素：各种方法
$('.a.b')=$('.a').filter('.b') class=""
$('.a .b')=$('.a').find('.b')
$('.a,.b')=$('.a').add('.b')
$('.a >.b')=$('.a').children('.b')
更改
.text取得元素内文字内容
.text（string）将元素内文字内容改为传入的字符串
.html取得元素内HTML内容
.html（string）将元素内HTML内容改为传入的字符串
.val()取得输入框的内容
.val('')修改输入框的内容
css('color')读取color
css('color','red')设置color的值
.css（属性名）
.css（属性名，属性值）
.addClass(className)增加该元素Class
.removeClass()删除该元素Class
.toggleClass()增加或删除该元素Class
.hasClass（）回传该元素是否具体某Class
第一个li $('li').eq(0)/first()/$('li:first');
第二个li $('li').first().next()
最后一个li $('li').last()
倒数第二个li $('li').last().prev();
操作：
创建一个a
$('<a href="n.html">link</a>')
$('<a>').text(link).attr('href','n.html');
追加/添加到文档中
第一个子元素 prepend()
最后一个子元素 append()
后一个兄弟元素 after()
前一个兄弟元素 before()
e.remove()
$('a').attr('href')
事件处理
addEventListener('事件名'，‘执行的函数/handler’)
//注册/绑定事件
$(‘button’).on(‘blur’,fn);
//注销
$(‘button’).off(‘blur’,fn);
数据通信：
Ajax 异步的javascript 和 XML(JSON)
使用JS 异步通信
异步：
同步：
XMLHttpRequest
var XHR = new XMLHttpRequest();//
总结：e.load()
$.ajax({method:'GET'}).done().fail();
$.get('url', {}, f);
$.post('url', {}, f);
-----------------------------------------------------------------
BootStrap前端的组件库，用来开发响应式布局、移动设备优先的WEB项目。
components组件
Sass{less}预处理脚本
Less是一门CSS预处理语言，它扩展了...
Sass
定义变量
变量运算
选择器可以继承、嵌套
mixin
BootStrap和JQuery的区别？
-----------------------------------
JS的高级部分
Type Script
Node.js是什么？
答：基于Chrome V8引擎的一个JavaScript运行环境（平台）
使用了事件驱动、非阻塞式的I/O模型，轻量且高效
Node.js的包管理器npm是全球最大的开源库生态系统
Node.js允许通过JavaScript和一系列模板来编写服务端
for(let i in m){
console.log(i);
}//得到是索引
console.log('-------------');
for(let i of m){
console.log(i);
HTML 1~4 SGML
XHTML XML 严谨/兼容/frameset
HTML5 5.2
定义文档的结构和内容
自由人（明确的语义）
div 块
span 内联
CSS:Cascading Style Sheets 层叠样式表
选择器定义文档颜色、大小、位置
样式可以做多次定义（不同的位置）叠加（就近原则）
JavaScript
定义文档的行为
用户交互（操作的反馈） 数据通信
<!DOCTYPE html>
html
文档头
<head>
title、link、style、script、meta(元数据)
文档尾
<body>
ol ul li dl dd dt a
h1 hr br p pre
block 块级元素
p
li
div
inline 内联
----------------------------------------------------------------
像素可以算出图片大小
图片格式 webp、webm（视频）、svg
CSS文字样式常用属性:
font-family；
font-size;
font-style;//斜体
font-weight;//文字粗细
color;
font;//组合设置
相对长度单位：px|%|em
text-decoration;//修饰文字
text-transform;字母大小写,capitalize首字母大写
letter-spacing;
text-indent;
text-shadow;
块级元素和行级元素的特点：
块级：
1、总是在新行上
2、高度、行高以及外边距和内边距都可以设置的
3、宽度缺省值是它父元素的100%，也就是父元素多宽，它多宽
4、它可以容纳内联元素和其它块元素
行级：
1、和其他行级元素在同一行
2、高度、外边距和内边距不可变，行高可以设置
3、宽度就是它的内容的宽度，不可改变
4、只可以容纳其它行级元素或文本
-------------------------------------------------------------
border-style的属性
none 无边框
dotted 点线
dashed 虚线
solid 实线
double 双直线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
透明色transparent
图形和图像
JPG一般是照片，采集到的影像，有损压缩，比较小，色彩丰富
PNG一般是自己画的东西
GIF 多帧，色彩易失真
背景图片的属性、
CSS3 渐变
线性渐变Linear Gradients
径向渐变Radial Gradients
-----------------------------------------------------
12.28
表单
form 定义用户输入的表单
input 定义输入域
textarea 定义文本域
label 静态文本，说明文本
fieldset 定义一组相关的表单元素，
-------------------------------------------
盒子模型的注意事项：
当一个div有margin-bottom:20px，另一个div有margin-top：10px时，垂直角度会合并为margin-bottom:20px。
当元素为块级元素，垂直角度会合并为最大值，左右则叠加。
float四个属性：left|right|none|inherit
clear五个属性，比上面多个both
-------------------------
任务：仿照简书的首页
--------------------------------------------------------------------------------------
JavaScript本质
·它是动态的：许多东西可以被改变
·它是动态类型：变量和属性值可以保存任意类型
·它是函数式和面向对象的：支持两种范式，函数式编程和面向对象编程
对象：
对象中包括一系列属性，这些属性是无序的
每个属性都有一个键（Key）和值（value）
属性的键始终是文本字符串
属性的值可以是任何JavaScript值
属性的值是函数时，该函数一般被称为方法
任意值转化为对象
（无参数调用）{}
undefined {}
null {}
布尔 new Boolean(bool)
数字 new Number(num)
字符串 new String(srt)
对象
函数的三种形式：
-普通函数
-构造器
-方法
电梯的工作原理，采用队列实现
定义函数
1、函数声明
foo（）；//可放函数前面
function foo(){}
2、表达式语句
var foo = function(){}
foo（）；//只能放函数后面
3、函数的构造方法
var foo = new Function("","","");
函数提升有区别
函数可以作为一个变量赋值给另外一个变量
形式参数
functionc foo(a,b,c){}
实际参数
foo(1,2,3);
Boolean(undefined)==false;
Number(undefined)==NaN;
构造函数：
Instanceof：检查一个对象是否是指定构造函数的实例
------------------
用JS写一个计算器
面向对象方法
Calc{
//
Construcyor(){
this.data = new Array();
}
//方法
addNumber（n）{
return this.data;
}
}
let digit;
let op;
----------------------------------------------------------
使用Electron构建的应用
-------------------------
JS
HTML 属性 样式 DOM
DOM 文档对象模型
<div><span id="" class="">text</span></div>
元素节点、属性节点、文本节点
document.getElements HtmlCollection
e.querySelector Element
e.querySelectorAll NodeList
---------------------------------------------------------------
基本类型：
number\string\boolean\null\undefined
引用类型：object、数组、函数、类
类型继承的写法：
1、可以使用class\extends 定义继承关系
class A{}
class B extends A{}
2、可以使用函数的构造类型定义
function Foo(){}
function Bar(){}
Bar.prototype = new Foo();
选择器以及使用场景：
HTML 标签或元素 a{} p{}
类选择器 .goods{}
ID选择器 #header{}
伪类选择器 ：or :: 状态/类型/属性
---------------------------------------
2018.2月
设计：产出物：原型、定义 界面（UI）和交互（行为）
前端：实现原型的实现（可运行的程序）
用户接口（html+css）
交互（js）：
用户操作交互
后端数据交互（数据传输
浏览器（PC、移动端）
APP（原生、混合式）
后端（Java/PHP/Python/Rudy/node.js）：
API接口
业务逻辑
数据存储
安全、负载等基础设施
什么是前端开发？它与设计、后端的关系？
答：前端开发是界面和交互的实现，把设计变为可运行的程序，与后端实现数据交互。
什么是JQuery？
答：JQuery是一个轻量级框架，标语是用更少的代码，做更多的事。它是一个快速，小巧，功能丰富的JavaScript库。
一个js库，对原生的JS函数做了封装，提供一套简化、统一的API。
什么是CDN?
答：CDN的全称是Content Delivery Network，即内容分发网络。
主要用于：
节点查找、操作
事件处理
ajax（数据通信 服务端）
动画
CSS操作
寻找元素：各种方法
$('.a.b')=$('.a').filter('.b') class=""
$('.a .b')=$('.a').find('.b')
$('.a,.b')=$('.a').add('.b')
$('.a >.b')=$('.a').children('.b')
更改
.text取得元素内文字内容
.text（string）将元素内文字内容改为传入的字符串
.html取得元素内HTML内容
.html（string）将元素内HTML内容改为传入的字符串
.val()取得输入框的内容
.val('')修改输入框的内容
css('color')读取color
css('color','red')设置color的值
.css（属性名）
.css（属性名，属性值）
.addClass(className)增加该元素Class
.removeClass()删除该元素Class
.toggleClass()增加或删除该元素Class
.hasClass（）回传该元素是否具体某Class
第一个li $('li').eq(0)/first()/$('li:first');
第二个li $('li').first().next()
最后一个li $('li').last()
倒数第二个li $('li').last().prev();
操作：
创建一个a
$('<a href="n.html">link</a>')
$('<a>').text(link).attr('href','n.html');
追加/添加到文档中
第一个子元素 prepend()
最后一个子元素 append()
后一个兄弟元素 after()
前一个兄弟元素 before()
e.remove()
$('a').attr('href')
事件处理
addEventListener('事件名'，‘执行的函数/handler’)
//注册/绑定事件
$(‘button’).on(‘blur’,fn);
//注销
$(‘button’).off(‘blur’,fn);
数据通信：
Ajax 异步的javascript 和 XML(JSON)
使用JS 异步通信
异步：
同步：
XMLHttpRequest
var XHR = new XMLHttpRequest();//
总结：e.load()
$.ajax({method:'GET'}).done().fail();
$.get('url', {}, f);
$.post('url', {}, f);
-----------------------------------------------------------------
BootStrap前端的组件库，用来开发响应式布局、移动设备优先的WEB项目。
components组件
Sass{less}预处理脚本
Less是一门CSS预处理语言，它扩展了...
Sass
定义变量
变量运算
选择器可以继承、嵌套
mixin
BootStrap和JQuery的区别？
-----------------------------------
JS的高级部分
Type Script
Node.js是什么？
答：基于Chrome V8引擎的一个JavaScript运行环境（平台）
使用了事件驱动、非阻塞式的I/O模型，轻量且高效
Node.js的包管理器npm是全球最大的开源库生态系统
Node.js允许通过JavaScript和一系列模板来编写服务端
for(let i in m){
console.log(i);
}//得到是索引
console.log('-------------');
for(let i of m){
console.log(i);
}//得到是内容
======================================
边框的形状：非矩形
内容是会撑开容器宽高，背景不会占用容器宽高
background-repeat背景图是否重复：no-repeat/repeat-x/repeat-y
line-height 行高，文字在一行里面所占的位置
当行高的值与容器高度一致时，文字会垂直居中显示
多行文字测量行高的方法：
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2，得出来的值就是每行文字的上下的的空隙大小
3.1、当行高为奇数时，那么文字的上方要比下方少一个像素
3.2、当行高为偶数时，那么文字上下空隙值一致
4、通过辅助项测量多行文字的行高
letter-spacing 字母间距
word-spacing(以空格为解析单位)
white-space：nowrap不换行
一个空格有多大？答：宋体字体下文字大小的一半
padding内填充，注意：设置padding后会撑大容器的大小
padding（margin）复合写法：一个属性值：四个方向；
两个属性值：上下，左右；
三个属性值：上，左右，下；
四个属性值：上，右，下，左；
margin外边距
问题：1、上下外边距会叠压（会取最大值）
2、父子级包含的时候子级的margin-top会传递给父级
盒模型
盒子大小=border+padding+width/height
盒子宽度=左border+左padding+width+右padding+右border
盒子高度：上border+上padding+height+下padding+下border
a链接 伪类
：link未访问过的链接初始颜色
：visited访问过后的链接颜色
：hover鼠标移入（悬停）
：active鼠标按下时链接的颜色
顺序：L V H A
dl-自定义列表、dt-自定义列表标题、dd-自定义列表的列表项（信息）
mark标记
优先级
行间样式>id选择器>类选择器>标签选择器
块的特征：
1、默认独占一行
2、没有宽度时，默认撑满一行
3、支持所有CSS命令
内嵌（内联、行内）的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析