HTML超文本标记语言，
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，
标签
常用快标签
<h1>... <div> <p>
内联标签
<a href=''> <img src=''> <span>
其他
<br>
<!--**-->
<
>
相对地址与绝对地址与网络地址路径
相对地址:
相对于引用文件本身去定位被引用的文件地址
绝对地址:
相对于磁盘的位置去定位文件的地址
比如：<img src="C:\course5\03day\images\001.jpg" alt="图片" />
根目录：file:///D|/路径
列表
<ul>
<li><a href="#">列表标题一</a></li>
</ul>
表格
<table>
<tr> 行
<th>表头单元格</th>
</tr>
<tr>
<td>普通单元格</td>
</tr>
</table>
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
cellspacing
cellpadding
border-collapse 设置表格的边线合并， 如：border-collapse:collapse;
表单
<form action="http://www..." method="get">
<label>姓名：</label>
<input type="text" name="username" value="***" placeholder="默认文字"/>
type="text" "password" "radio" "checkbox"
type="file" "submit" "reset" "button"
<textarea name="about"></textarea> // resize=None;
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
</select>
</form>
页面嵌套
<iframe src="001.html" frameborder="0"></iframe>
src: 另一个网页的地址
frameborder: 这个局部窗口的边框的粗细
<a href="http://www.baidu.com" target="myiframe">百度</a>
<br>
<iframe src="06-固定定位.html" class="myframe" name="myiframe"></iframe>
<frameset rows="150px, *" noresize="noresize">
<frame src="top.html">
<frameset cols="250px, *">
<frame src="left.html">
<frame src="right01.html" name="right" scrolling="no">
</frameset> 外边没有<body>
css
引入页面的方式有三种：
内联式 <div style="width:100px; >...</div>
嵌入式 <style type="text/css"> ..div{ width:100px}... </style>
外链式 <link rel="stylesheet" type="text/css" href="css/main.css">
css选择器
标签选择器 div{color:red}
类选择器 .blue{color:blue}
层级选择器 .con .pink{color:pink}
id选择器 #box{color:red}
伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态
.box1:hover{width:300px;}
布局常用样式属性
width
height
background
border 如：border:1px solid black;
border-top 如：border-top:10px solid red;
border-left
border-right
border-bottom
opacity:0.3; 设置元素透明度,将元素透明度设置为0.3
filter:alpha(opacity=30); /* 兼容IE */
设置元素透明度
文本常用样式属性一：
color
font-size
font-family 如：font-family:'Microsoft Yahei';
font-weight 如：font-weight:bold; # /normal
line-height
text-decoration 如：text-decoration:none; 将文字下划线去掉
文本常用样式属性二：
text-align 如text-align:center 设置文字水平居中
text-indent text-indent:24px; 设置文字首行缩进24px
display属性
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
css元素溢出
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
css盒子模型
padding
盒子内的内容和边框之间的间距
margin
盒子与盒子之间的间距
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
定位
position属性来设置元素的定位类型
relative 相对定位
absolute 绝对定位,漂浮在文档流的上方
fixed 固定定位,相对于浏览器窗口进行定位。
一般是将父级设置相对定位，子级设置绝对定位，
子级就以父级作为参照来定位，否则子级相对定位相对于body来定位。
定位元素的偏移
left、right、top或者bottom
定位元素层级
z-index属性
float:left/right(一般默认左浮动)
JavaScrip
引入方式
行间事件 <input type="button" name="" onclick="alert('ok！');">
页面script标签嵌入 <script type="text/javascript"> .. alert('ok！');...</script>
外部引入 <script type="text/javascript" src="js/index.js"></script>
变量类型
number
string
boolean
undefined
null
变量、函数、属性、函数参数命名规范
区分大小写
第一个字符必须是字母、下划线（_）或者美元符号（$）
其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
函数
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段
在编译阶段会将function定义的函数提前，
并且将var定义的变量声明提前，将它赋值为undefined
条件语句
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else if else
获取元素方法
元素：
var 元素 = document.getElementById('input1');
元素.style.left = num + "px"
页面上从上往下加载执行, javascript去页面上获取元素div1的时候, 元素div1还没有加载
第一种方法：将javascript放到页面最下边
第二种方法：放到window.onload触发的函数里面
*元素属性:
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
操控html: 元素.innerHTML 可以赋值给变量， 也可以写入
操控css: 元素.style
事件属性：
onclick
onmouseover
onmouseout
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
匿名函数： oBtn.onclick = function (){
alert('ok!');
}
数组及操作方法：
var list = [1, 2, 3, 'abc'] 可以是不同类型
list.length
list[0]
list.join('-'); // 弹出 '1-2-3-4',
python语法中 split和join都是str的方法
my_str = 'a b c'
print(my_str.split()) 以空格分隔
my_list = ['a', 'b', 'c'] 列表里的都是字符串
print('-'.join(my_list))
list.push(**), list.pop()
list.reverse()
list.indexOf(), 元素第一次出现的索引值， 利用其对数组去重
list.splice(n, m, ...) 第n个元素开始删除m个，插入...
循环
for(var i=0;i<len;i++)
{
......
}
while (i < arr.length){语句；i++}
字符串处理方法
合并'+' , 数字和字符串可以+ 得到字符串
parseInt(str) 转换为 整数类型
parseFloat(str)
.split() 分隔成字符串组成的数组
.indexOf('*') 找字符串是否含有某字符
.substring(start,end) 截取字符串
定时器
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
例子：
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
变量作用域
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问,不用globle
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
封闭函数
一开始就执行而不用命名的函数
在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，
(function(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}();
JQuery
文档加载完再执行：
$(document).ready(function(){
......
});
$(function(){
......
});
选择器
规则
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
判断是否选择到了元素
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
事件：
$('#btn1').click(function(){
// 使用jquery对象用 $(this)
})
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
获取元素的索引值 此时可以用index()方法获取
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
动画
$('#div1').animate({ 四个参数
width:300, 要改变的样式属性值，写成字典的形式
height:300
},1000,'swing',function(){ 动画持续的时间
alert('done!'); 动画曲线 ‘swing’，缓冲运动，‘linear’，匀速运动
}); 动画回调函数，
fadeIn() fadeOut() fadeToggle() 三个参数
hide() show() toggle()
slideDown() slideUp() slideToggle()
链式调用
$('#div1')
.children('ul')
...
属性操作
html:
var $htm = $('#div1').html(); // 取出html内容
$('#div1').html('<span>添加文字</span>'); // 设置html内容
属性
var $src = $('#img1').prop('src')
$('#img1').prop({src: "test.jpg", alt: "Test Image" }); /attr
css:
样式操作
$("div").css("width"); // 获取div的样式
$("div").css("width","30px"); //设置div的样式
$("div").css({fontSize:"30px",color:"red"});
选择器获取的多个元素，获取信息获取的是第一个
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
循环
$(function(){
$('.list li').each(function(){
$(this).html( $(this).index() );
})
})
事件冒泡
在一个对象上触发某类事件，
如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序
如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理。
作用:
事件冒泡允许多个操作被集中处理,它还可以让你在对象层的不同级别捕获事件
阻止事件冒泡：
$('#form1').submit(function(event){
event.preventDefault();
})
event.stopPropagation(); // 阻止冒泡
event.preventDefault(); // 阻止默认行为
return false; // 合并写法：
事件委托
利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，
事件委托首先可以极大减少事件绑定次数，提高性能；
其次可以让新加入的子元素也可以拥有相同的操作。
$list = $('#list'); //#list为ul标签的id
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
Dom操作
元素节点操作指的是改变html的标签结构，
移动 或者 创建
现存元素内部：
append()和appendTo()
prepend()和prependTo()
现存元素的外部
after()和insertAfter()
before()和insertBefore()
删除标签
$('#div1').remove();
javascript中的对象
一种是通过顶级Object类来实例化一个对象
一种是通过对象直接量的方式创建对象
ajax
ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信
jax通信的过程不会影响后续javascript的执行，从而实现异步。
ajax可以实现局部刷新，也叫做无刷新,jax获取到后台数据，更新页面显示数据的部分.
$ajax({
url: '',
type:'',
dataType:'',
data:{},
})
.done(function(data){
alert(data.name)
})
.fail(function(){
alert('失败')
})
$.get('/url_info', {'': ''}, function(data){
alert(data.name);
} );
$.post('/url_info', {'': ''}, function(data){
alert(data.name)
});
jsonp
ajax只能请求同一个域下的数据或资源，
有时候需要跨域请求数据，就需要用到jsonp技术
jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。
dataType:'jsonp' //这里不同
vue.js
Vue.js类似于后台的模板语言
Vue.js的模板语法
<span>Message: {{ msg }}</span> //双大括号
{{ number + 1 }} //可以计算
{{ ok ? 'YES' : 'NO' }} //三元表达式
{{ message.split('').reverse().join('') }} //使用字符串和数组的内置方法
指令
v-bind： 或者 ： //监听属性
v-on： 或者 @ //监听事件
<button v-on:click="fnChangeMsg">按钮</button>
v-if
v-show
用法和v-if大致一样，但是它不支持v-else,
它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：
Class 与 Style 绑定
使用v-bind指令
表达式结果除了是字符串之外，还可以是对象或者数组
条件渲染
v-if
v-else-if ..
v-else
列表渲染
v-for
<li v-for="item in items"> //数组
{{ item}}
</li>
<li v-for="(item, index) in items"> //数组
{{ index }} - {{ item.message }}
</li>
<li v-for="value in object"> //对象
{{ value }}
</li>
<li v-for="(value,key) in object"> //对象
{{ key }}-{{ value }}
</li>
事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
stop阻止冒泡, 和 prevent阻止表单提交可以连着写
表单
v-model， value值传入
一个单选:
v-model后的变量是boolean类型， 传给data里面的变量
select：
v-model控制select, option里面的value值传给data里面的变量值
复选框：
一个复选框： 使用的是变量， 传到data里面的变量=boolean类型
多个复选框：复选框传的是value的值, 传到data里面的数组
多个单选框：
只能选一个,传的也是value值, 传到data的字符串类型的变量
计算属性 computed:{
reversedMessage: function ()
{
return **
}
}
侦听属性 watch:{
iNum:function(newval,oldval){}
}
这个函数有两个形参，第一个是当前值，第二个是变化后的值
过滤器
<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>
标签内的过滤器
filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '¥ '+value;
}
}
全局过滤器 >>>> 在创建对象之前定义
Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
自定义指令
全局的 >>>> 在创建对象之前定义
Vue.directive('focus',{
inserted:function(el,binding){
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
})
局部的
directives: {
focus: {
inserted: function (el,binding) {
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
}
}
实例生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
vue里面使用axios请求数据
写在mountd的挂载之后
var container = new Vue({
el:'',
data:{},
mounted:function(){
axios({
url:'',
method:'',
data: {
stock_list = []
}
})
.then(function(dat){
//根据理想找到变量不用this了
container.stock_list = dat.data
})
.catch(function(){
alert('失败')
})
}
})
ES6
let,const，它们声明的变量没有预解析
let声明的是一般变量，
const申明的常量，不可修改。
箭头函数
// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
var rs = a + b;
alert(rs);
}
// fnRs(1,2);
组件
。。。