js知识点html+css

.zhongxin s::before{
    content:"";
    display:block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 10px;
}
过渡动画  transition
属性  时间  速度ease linear
     延时             
移动  transform
translate(x,y)   如果写百分号，就走自己宽度的百分比
translateY   translateX  
     缩放  scale（x，y）
     旋转  rorate(度) 90deg
transform-origin:top right  旋转角度
伪类选择器
     ：first-child
	 : last-child
	 :nth-child(n)
  skew(deg,deg) 斜切
--------动画=----  infinite无限次播放  alternate 轮流反向播放 paused暂停播放
	 animation:动画名字  花费时间 运动曲线 开始时间 播放次数 是否反向
	 声明动画
	 @keyframes 动画名字 {
		form{}    ---0%
		to{}       ---100%
	 }
--------伸缩布局
	 display：flex  父亲添加
	 flex：1  代表一份
	 min-width 最小宽度
	 max-width  最大宽度
	 box-shadow   盒子阴影
	-----弹性布局
	 display：flex	定义弹性
	 flex-direction  排列方向
	     row 默认主轴水平，左端方向
		 row-reverse  主轴水平，右端方向
		 column 垂直方向 上沿
		 column-reverse 垂直方向 下沿
	 flex-wrap  换行属性
		 nowrap  默认不换行   
		 wrap   换行
		 wrap-reverse   换行，第一行在下方
	 justify-content 对齐方式
		 flex-start  头部对齐 flex-end  尾部对齐    
		 center 中间对齐  space-between两端对齐  apace-around
	algin-items 交叉轴上对齐方式	 
		 flex-start 起点对齐  flex-end 终点对齐
		 center终点对齐 baseline基线对齐 stretch默认铺满
	 background：-webkit-linear-gradient()
	 渐变的起始位置，起始颜色 位置；结束颜色 位置；
---------设置图片自适应----
	 background-size:cover  图片自适应大小
	 background-attachment:fixed 背景固定视差效果
	
条件注释：写在网页任何地方，根据浏览器版本加载内容
	 <--!    -->
	 lt<   gt>   lte<=   gte>=
	 <--![if lt IE 9]>
		<script src=""></script>
	 <![endif]-->
	 
	 视差滚动效果Stellar.js插件
	 $(function () {
    /*1.引入*/
    /*2.结构   data-stellar-background-ratio="0.3"  样式 bg 需要 background-attachment: fixed;*/
    /*3.初始化插件*/
    $.stellar({
        horizontalScrolling: false,
        responsive: true
    });
});
------
	 background-attachment:fixed
	 data-stellar-background-ratio="0.3"  
	 滚动视差
-------dom扩展	
	 获取元素方式  css选择器
	 querySelector() 获取符合选择器的第一个元素
	 querySelectorAll() 获取符合选择器的所有元素
	
------h5--
	 全屏方法
	 <video src="" controls></video>  插入视频
	 object.webkitRequestFullScreen  全屏操作
------历史---
	 history.back() 退回
	 history.forward()  前进
	 history.go(数字)  相对于当前回到第几条数据
	 h5新增-----
	 history.pushState();
	 history.replaceState();
	 window.onpopstate=function(){}
	 单页面程序
	 

页面上的

body
	 <a href="baidu.com">跳转文本</a>
	 &nbsp 空格  &gt >   &<lt
	 <p>段落标签</p>
	 <br /> 换行标签
	 <h1-6>标题标签</h1-6>
	 块级标签：h标签 p标签 div白板
	 行内标签：span 白板
	 <form action="提交表单位置url" method="GET/POST">   提交表单
	 <input type="text" />  文本输入 value默认值
	 <input type="password" />  密码输入 value默认值
	 <input type="button" value="按钮" />
	 <input type="submit" value="可点击按钮" />
	 </form>
<input type="checkbox" /> value name 单选框（name相同则互斥）
<input type="checkbox" /> value name（批量获取数字）
checked="checked"  默认勾选
<input type="file" />  上传文件：
依赖form表单里面的一个属性 enctype="mulipart-----"
<input type="reset" /> 重置
<textarea>多行文本标签</textarea> name属性
<select name="显示城市" size="大小" multiple="multiple"多选>    下拉框 selected="selected"  默认选中下拉框
	 <option value="1">北京</option>
	 <option value="2">上海</option>
	 <option value="3">南京</option>
</select>
a标签  1跳转url  2锚点#id
	 <a href="跳转url/#id" target="_blank">文本</a>
	 target="_blank"  新开跳转链接，不写就当前页面跳转
	 <img src="图片" style="样式信息" title="提示文本" alt="图片文本"
	 <ul>
	     <li>无序标签</li>
	 </ul>
	 <ol>
		 <li>有序标签</li>
	 </ol>
	 <dl> 自定义列表
		 <dt></dt>
		 <dd></dd>
	 </dl>
  表格 简写
	 <table border:1边框>
		 <tr>
			 <td></td>
		 </tr>
		 <tr>
			 <td></td>
		 </tr>
	 </table
	 <table>
		 <thead>
			 <tr>
				 <th></th>
			 </tr>
		 </thead>
		 <tbody>
			 <tr>
				 <td></td>
			 </tr>
		 </tbody>
	 </table>
	 <td colspan="占几行"></td>  用作合并横向单元格
	 <td rowspan="占几列"></td>   合并纵向单元格
  lable标签  跟input一起用关联，点击用户名获取光标
	 <lable for="i1">用户名</lable>
	 <input id="i1" type="text" name="user" />
	 <field>  带字边框
		 <legend>登录</legend>
	 </field>

移动web

--------触摸点
	 touchlist 
	 touchs     触摸集合点
	 changedTouchs  改变的触摸点
	 targetTouchs   当前元素点的集合
	
	 clientX  clientY  基于浏览器窗口
	 pageX  pageY  基于页面
	 screenX  screenY  基于屏幕
--------
	 媒体查询
	 @meaia screen and （max-width：768px）{
	 
	 }
-------bootstrap---
	 normalize 和reset
<!--共同点：都是重置样式，增强浏览器的表现一致性-->
<!--不同点：-->
<!--举个例子：ul-->
<!--reset.css    list-style:none-->
<!--normalize.css 不会重置ul样式，不会重置本身在浏览器表现一致的元素-->
<!--一句话，都是增强浏览器的表现，但是normalize不会重置已经一致的浏览器-->
<!--响应时布局容器container-->
<!--container-fluid-->  流式布局
	 row 行，填充container容器的内间距左右15px
	 col列
	 col-lg  大屏设备以上生效   1170px
	 col-md   中屏设备以上生效  970px
	 col-sm   小屏设备以上生效 750px
	 col-xs   超小屏以上生效
	 第二个*代表每一行的等分，默认12行等分
	 col-xs-offset-3  列偏移多少
     col-xs-pull-3   往前拉 多少
     col-xs-push-3   往后推 多少
	 visible-lg  大屏显示  其他隐藏
    visible-md
    visible-sm
    visible-xs
    
    hidden-lg    
    hidden-md
    hidden-sm
    hidden-xs
	
<button data-toggle="collapse" data-target=".box">切换</button>
<a href=".box" data-toggle="collapse">切换</a>
            collapsed  折叠
            data-toggle="collapse" 声明折叠属性
            data-target="xx"  目标属性  --选择权

ajax

ajax
异步与同步
    // 三元简写
    var xhl = new window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
    //  状态0，请求初始化 xhl.readystate==0
    xhl.open("GET", data);
    //  状态1，打开请求 xhl.readystate==1
    xhl.send();
	   xhr.onreadystatechange=function(){

    }
	
	 // 状态0，请求初始化
     // 状态1，打开请求
     //  状态2，发送请求打开响应头
     // 状态3， 请求处理
     // 状态4，请求完成
	 
	 <P></P>
	 <P></P>
	 $.ajax({
		url:"baidu",
		type:"get"  //请求方法
		datatype:"json"  //请求类型
		data:{id:1,name:"ab"}
	}
		.done(function(){
			alert(data)
		 })
		.fail(function(){
			console.log("error")
		 })
		 
		
		
	) 

css

#
css
     标签上设置style属性
		background=color:red；height：20px
	 编写css样式
	 1.标签的style属性
	 2.写在head里面，style属性
	   #i1{background=color:red；height：20px}      id="i1"
	   .cl{background=color:red；height：20px}      class="c1"
	   div{...}            div选择器
	   #i1{...}   id="i1"  id选择器
       .c1{...}	  class="c1"  class选择器
	   优先级：标签上的style优先，然后就近原则
	 注意：css样式也可以写在单独文件中，引用
		 <link rel="stylesheet" href="commons.css" />
	 3.关联层级选择器（空格） span div{}  span下的div段
	 4.组合选择器（逗号，） span,div，.c1{}  多个选择
	 5.属性选择器 input[type="text"]{...}
注释/*  */
     6边框
		<div style="border:1px solid red;">
		asadd
		</div>
	 border 边框  solid实线 dotted虚线  颜色red
	 border-left  左边  top上边
	 5
		height          高度 百分比
		weidth          宽度，像素 百分比
		text-align:ceter 水平方向居中
		line-height：height  垂直方向根据标签高度居住
		color            字体颜色
		font-size        字体大小
		font-weight      字体加粗
	6 float
		让标签飘起了，快级标签可进行堆叠
		style="clear:both；"   父包子
 		style="display：inline;"  变成行内标签
		style="display：block；"   变成块级标签
		style="margin: 0 auto;	 一行铺满无边界
	7 display
		display：none； 让标签消失
		display：inline;
		display:block;
		display:inline-block;
					具有inline，默认自己有多少占多少
					具有block设置高度 宽度 padding margin
	  行内标签：无法设置高度 宽度 padding margin
	  块级标签：设置高度 宽度 padding margin
	8  paading margin(0,auto)
	   paading 边距
CSS补充
	 position：fixed   固定位置
	 top bottom left right
	 relative  +  absolute  相对定位

CSS补充

	 </style>
	 层级选择器  .c1 div 表示从c1下面的div
	 组合选择器   .c1,.c2,div 表示这些标签都是这种样式
	 属性选择器
	 <style>
		 input[type="text"]{表text选择器示in莆田里面的
		 }
	 </style>
	 style优先级
	 引用外部属性
	 <link rel="stylesheet" href="文件.css"
	 border:1 solid red 边框宽度1px 实体 红色
	 solid实线  dotted虚线 
	 height 高度
	 width宽度
	 line-height 根据标签高度垂直居中
	 text-align：center  水平居中	 
	 color 颜色
	 font-family字体
	 font-size 字体大小
	 font-weight 字体加粗
     ****  float浮层****
	 float：left 左漂   float：right 右漂
	 clear：both   父包子
	 display：none  隐藏
	 display：inline  变为行内标签
	 display：block   变为块级标签
	 display：inline-block  行内块级都有
	 行内标签：无法设置高度宽度 padding margin
	 块级标签：设置高度宽度 padding margin
	 *** padding margin***
	 padding 内边距   margin：0 auto 外边距
	 ***css****
	 position：fiexd 固定在页面某个位置
	 posiyion：relative+absolute   相对某个位置固定
	 opcity：0.5 透明度
	 z-index：8  背景位置
	 overflow：hidden  拖超过范围隐藏
	 overflow：auto    超过范围出现滚动
	     当鼠标移动到当前标签时，.c1属性才会生效
	 .c1：hover{属性}  鼠标点上去的改变颜色
	 background-image：url（图片路径） 默认div大 图片重复
	 background-repeat：repeat-y  竖着重复/
	                    repeat-x   横着重复
     background-position：x y   可移动背景图标
	 background-position-x：8px  水平移动
	 background-position-y：8px   垂直移动

html

html   行内标签
	 <input type="text" />    输入文本标签
	 <input type="password" />  输入密文标签
	 行内标签
input系列
	<input type="text" name="属性" value="值"  />   
	<input type="password" name="属性" value="值"  />
	<input type="submit" value="提交" />  提交按钮 表单
 	<input type="button" value="提交" />  单纯按钮
	
	<input type="radio" name="gender" value="1" />
	   圆形单选框value name  如果name相同就会互斥
	<input type="checkbox" name="x" value="zhi" />
		复选框或者多选框，批量拿值
		默认选中 checked="checked"
	<input type="file" name="名字"     />   上传文件
	上传文件依赖form表单的一个属性enctype="multipart/form-data"
	<input type="reset" value="重置" />  重置为默认
	
	<textarea name="属性">默认值</textarea>
     默认值直接放中间
	<select name="mingzi" size="大小" multiple=multiple>  多选
		<option value="1">上海</option>
		<option value="2" selected="selected">北京</option>   默认值
	</select>
a标签 行内标签
	跳转  <a href="跳转" title="跳转提示 "targe="_blank">内容</a>
	锚点  href="#某个标签的id"   标签的id不吮许重复	
	title 跳转提示
	target="_blank"  跳转到新开链接