分布式版本控制git |
|
|
|
pwd查询当前目录 ls ls -la |
|
git config --global user.name xxx |
|
git config --global user.email xxx |
|
git config user.name |
|
git config user.email |
|
mkdir xxx文件夹 touch xxx.html |
|
vim xxx.txt 打开文件夹 i 进入编辑模式 ESC 退出编辑模式 |
|
在插入编辑模式下编辑文件。 |
|
按下 “ESC” 键,退出编辑模式,切换到命令模式。 |
|
在命令模式下键入"ZZ"或者":wq"保存修改并且退出 vi 。 |
|
如果只想保存文件,则键入":w",回车后底行会提示写入操作结果,并保持停留在命令模式。 |
|
放弃所有文件修改:按下 "ESC" 键进入命令模式,键入 ":q!" 回车后放弃修改并退出vi。 |
|
放弃所有文件修改,但不退出 vi ,即回退到文件打开后最后一次保存操作的状态,继续进行文件操作:按下 "ESC" 键进入命令模式,键入 ":e!" ,回车后回到命令模式。 |
|
git merge dev该命令把指定分支合并到当前分支,执行该操作前经常会切换到master分支,意思是把当前的分支的提交合并到master分支上 |
|
git branch dev创建分支 |
|
git branch查看分支 |
|
git checkout dev切换分支 |
|
git branch -d dev删除分支 |
|
git checkout -b dev origin/dev抓取分支 |
|
抓取失败时 |
|
git branch --set-upstream-to=origin/dev dev |
|
git branch --set-upstream dev origin/dev |
|
git push origin dev推送分支 |
|
cd xxx |
|
git init |
|
git status如果查看时中文显示乱码,可以添加如下配置git config --global core.quotepath false |
|
git add ./xxx |
|
git commit -m'做了什么' |
|
git rm xxx git commit -m'删除了什么' |
|
git mv xx1 xx2 git commit -m'改了什么' |
|
git checkout -- xxx 撤销工作区修改 git reset HEAD xxx 撤销暂存区修改 |
|
git reset --hard xxxid |
|
git log 查看现有版本 git reflog 查看历史所有版本 |
|
git remote -v 查看当前绑定hub网址 |
|
git remote rm origin 删除绑定hub网址 |
|
git remote add origin https://github.com/luoshida/1234.git 电脑上的东西绑定到hub上 |
|
git push -u origin master 推送 可合并为 git push -u httpxxx master |
|
git clone httpxxx hub上的东西复制到电脑上 |
|
ssh-keygen -t rsa -C '791371894@qq.com' 生成公钥和密钥 |
|
cd .ssh 进入隐藏文件夹.ssh 公钥id_rsa.pub 密钥id_rsa |
|
cat id_rsa.pub 查看公钥 |
|
ssh -T git@github.com 验证密钥是否绑定成功 |
|
|
|
html |
|
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改 |
|
html4三种文档类型:Strict, Transitional, 以及Frameset. 中译为:严格版本,过渡版本,以及基于框架的版本! |
|
html5文档类型<!doctype html> DTD文档声明 |
|
html标签 |
|
|
|
<h1>指定标题</h1> h1-h6 |
|
<p>指定段落</p> |
|
<hr>画一条水平分割线 |
|
<br>内容换行 |
|
<b>加粗文字</b> = <strong>定义重要性强调的文字</strong> |
|
<u>给字体标下划线</u> = <ins>定义插入的文字</ins> |
|
<i>字体变斜</i> = <em>定义强调的文字</em> |
|
<s>字体上加删除线</s> = <del>定义被删除的文字</del> |
|
<sub>定义下标文本</sub> |
|
<sup>定义上标文本</sup> |
|
<ul><li>无序列表,用于导航栏商品列表等</li></ul> |
|
ul与li配套使用 ol li为有序列表与无序列表差不多 多用于排行榜 |
|
<dl><dt>条目</dt><dd>条目的描述</dd></dl> 给内容添加定义列表语义用于网站底部相关信息 |
|
|
|
<table>表格标签 |
|
|
|
<caption>给整个表格设置标题</caption> |
|
<tr> |
|
<td>1行1列</td> <thead><th>添加头命令(加粗居中)</th><td>正常</td></thead> |
|
<td>1行2列</td> <tfoot>添加脚命令</tfoot> |
|
</tr> |
|
<tr> |
|
<td>2行1列</td> |
|
<td>2行2列</td> |
|
</tr> |
|
</table> |
|
table bgcolor="yellow"背景色 width="200px"宽度 height="200px"高度 |
|
表内参数 align="left/center/right" valign="top/center/bottom" table中为表格朝向,在tr或td为文字朝向 |
|
border="1/2/3"边框粗细 cellspacing单元格之间的距离外边框 cellpadding文字与边框的距离内边框 |
|
rowspan/colspan="2"垂直或水平合并2单元格 被合并的单元格程序命令删除 |
|
|
|
<form>表单标签 |
|
|
|
<head> |
|
<title>123</title> |
|
<style>textarea{resize: none;}</style> |
|
<!-- 使最下面的简介输入框固定大小 --> |
|
</head> |
|
<body> |
|
<form action="https://www.baidu.com"> |
|
<fieldset> |
|
<!-- fieldset命令为在form表单加大边框 --> |
|
<legend>在大边框上加自己想要的字</legend> |
|
<p> |
|
姓名: |
|
<input type="text" name="name" value="默认在输入框内容" list="123" placeholder="请设置用户名" autocomplete="off"> |
|
placeholder属性提供可描述输入字段预期值的提示信息(hint)该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 |
|
autocomplete清除input框内输入历史下拉框 |
|
<datalist id="123"> |
|
<!-- datalist命令是在输入框内加入备选项 --> |
|
<option>ddd</option> |
|
<option>aaa</option> |
|
<option>bbb</option> |
|
<option>ccc</option> |
|
</datalist> |
|
</p> |
|
<p> |
|
<label for="Use">密码:</label> |
|
<!-- label命令是使鼠标点到内容时也能是光标定位在输入框内 --> |
|
<input type="password" name="password" id="Use"> |
|
</p> |
|
<p> |
|
性别(单选项):男<input type="radio" name="sex" value="1"> |
|
女<input type="radio" name="sex" value="2"> |
|
<!-- (value为上传到服务器的一个代号radio和checkbox同样适用 上传结果为sex=1/2) --> |
|
</p> |
|
<p> |
|
爱好(多选项):走<input type="checkbox" name="bobbit" value="1"> |
|
跑<input type="checkbox" name="bobbit" value="2"> |
|
跳<input type="checkbox" name="bobbit" value="3"> |
|
</p> |
|
<P> |
|
<input type="reset" name="重置清空表单内容" value="重置"> |
|
<!-- value是在按钮上显示的文字 --> |
|
</P> |
|
<input type="hidden" name="隐藏目录私密上传"> |
|
<input type="button" name="万能按钮自己起名" value="显示的文字"> |
|
<input type="submit" name="提交"> |
|
邮箱<input type="email" name="email" value="默认在输入框内容"> |
|
网址<input type="url" name="网址" value="默认在输入框内容"> |
|
<input type="number" name="数字输入框"> |
|
日期<input type="date" name="日期"> |
|
喜欢的颜色<input type="color" name="颜色选择框"> |
|
<p> |
|
用图片提交<input type="image" src="C:\Users\liyuphp\Desktop\图片\timg (1) - 副本.jpg"> |
|
</P> |
|
<p> |
|
住址<!-- 选择命令,只能选择不能输入 --> |
|
<select name="address" multiple 多选标签,可多选> |
|
<optgroup label="市区"> |
|
<!-- optgroup为分组命令可加可不加 --> |
|
<option value="1">郑州</option> |
|
<option value="2">周口</option> |
|
<option value="3">南阳</option> |
|
<!-- value为上传到网站的代号为住址=1 --> |
|
</optgroup> |
|
<optgroup label="省份"> |
|
<option value="4">河南</option> |
|
<option value="5">河北</option> |
|
<option value="6">安徽</option> |
|
</optgroup> |
|
</select> |
|
|
|
简介<!-- 多行编辑 --> |
|
<textarea name="intr" id="intr" cols="20" rows="5">这里是表单上默认文字</textarea> |
|
获取多行编辑框的内容用 $('#intr').val()获取 |
|
</fieldset> |
|
</form> |
|
</body> |
|
|
|
图片标签 |
|
|
|
<img src="网址或路径" alt="图片不显示时显示的东西" |
|
title="点击查看源网页" height="200px"> |
|
|
|
音频视频标签 |
|
|
|
<video src="https://www.4611.com" loop muted height="100px"></video> |
|
<!-- autoplay:是否需要自动播放视频 controls:是否需要显示控制条 |
|
poster: 视频没有播放之前显示的占位图片 |
|
loop: 一般用于做广告视频,视频播放完毕之后是否需要循环播放 |
|
preload:预加载视频,但是需要注意preload和autoplay相冲,如果设置了autoplay属性,那么preload属性就会失效 |
|
muted:静音 |
|
width/height:和img标签中的一模一样 --> |
|
<video> |
|
<source src="" type="video/mp4"></source> |
|
<source src="" type="video/ogg"></source> |
|
<source src="" type="video/webm"></source> |
|
</video> |
|
<!-- 不管是格式1还是格式2都需要浏览器支持HTML5,如果不支持,需要引入相应的框架,如:[html5media](https://html5media.info/) --> |
|
<!--Ogg=带有heora视频编码和Vorbis音频编码的Ogg文件 |
|
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件 |
|
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件--> |
|
<audio src=""></audio> |
|
|
|
HTML5 对于多媒体提供了强有力的支持,除了 audio 和 video 标签外,还支持以下标签: |
|
<embed> 标签定义嵌入的内容,比如插件。 |
|
<embed type=”video/quicktime” src=”Fishing.mov”> |
|
|
|
链接标签a标签 |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title>链接标签a标签</title> |
|
<base href="https://www.123.com"> |
|
<!-- base标签为页面上的所有链接规定默认地址或默认打开的方式 |
|
base标签必须写在head标签中 base标签没有结束标签 |
|
如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行 |
|
如果在base中指定了默认地址,a标签的地址和img标签的地址都会以base标签的地址为相对地址 --> |
|
</head> |
|
<body> |
|
<a href="https://www.baidu.com" target="_blank" title="链接">百度一下你就知道</a> |
|
<a href="#">假链接</a> |
|
<a href="javascript:">假链接2</a> |
|
<p id="123">1.我的猫飞走了<p> |
|
<a href="#">返回顶部</a> |
|
<a href="#123">返回1</a> |
|
<a href="另一个网页的名称#转到某个命令行的id" target="_blank">返回另一个页面某个命令行中的id</a> |
|
</body> |
|
|
|
结构标签 |
|
|
|
<div>无实际意义,块状结构,独占一行,配合css</div> |
|
<span>无实际语义,用于布局</span> |
|
<div class="header"> |
|
<h1 class="logo"></h1> |
|
<div class="nav"></div> |
|
</div> |
|
<div class="main"> |
|
<div class="aside"></div> |
|
<div class="article"></div> |
|
</div> |
|
<div class="footer"></div> |
|
header代表页面头部内容<header></header> |
|
nav(navigator)页面的导航部分 |
|
section代表一个区域,里面可以有其他的标签,如h标签... |
|
article页面当中的核心内容文章 |
|
aside页面文章的辅助信息,有时也代表页面的侧边栏 |
|
footer代表页面底部内容 |
|
meter特定范围的数值 max属性,定义最大值。默认值是 1。 |
|
min属性,定义最小值。默认值是 0。value属性,当前取值 |
|
<meter max="100" min="0" value="68"></meter> |
|
progress进度条标签 20% |
|
<progress value="20" max="100"></progress> |
|
time时间标签pubdate为发布时间datetime规定的时间 |
|
<time datetime="21:00" pubdate>12:00</time> |
|
|
|
字符实体 |
|
|
|
空格 |
|
©版权 |
|
<小于 http://www.w3school.com.cn/html/html_entities.asp |
|
|
|
元信息 |
|
|
|
<meta charset="utf-8"> |
|
<meta name="keyword" content="关键字"> |
|
<!-- 告诉搜索引擎当前网页的关键词,能够提高搜索命中率,让别人更容易找到你,搜索引擎会用这些关键字对文档进行分类。 --> |
|
<meta http-equiv="Content-Type" content="text/html"> |
|
<!-- 服务器发送到浏览器时首先发送text/html请求,告诉浏览器准备接受这样类型的文档,再发送请求的内容 --> |
|
<meta name="description" content="对网页的描述信息"> |
|
<meta name="author" content="罗世达" /> |
|
<meta name="renderer" content="webkit"> |
|
<!-- renderer标签,告诉浏览器用webkit内核解析 --> |
|
<meta http-equiv="Refresh" content="5;url=https://www.kuazhu.com" /> |
|
<!-- 进入该网站后5秒后自动跳转到url指定的网站 --> |
|
|
|
表单元素 |
|
HTML5 新增了很多表单元素让开发者构建更优秀的 Web 应用程序。 |
|
datalist,datetime,output,keygen ,date ,month ,week,time,color,number ,range ,email ,url, |
|
|
|
html属性 |
|
全局属性 class id style title contenteditable可编辑属性 |
|
局部属性 某个html标签自己所特有的属性 |
|
事件属性 触发动作的能力 |
|
|
|
|
|
### cookie |
|
* cookie的设置 |
|
|
|
document.cookie = 'key1=value1'; |
|
|
|
document.cookie = 'key2=value2'; |
|
|
|
> 注意,后面的不会覆盖前面的,在ff下测试 |
|
|
|
* cookie有效期的设置 |
|
|
|
```javascript |
|
var oDate = new Date(); |
|
oDate.setDate(oDate.getDate() + 14); |
|
document.cookie = "name=Tom;expires="+oDate; |
|
``` |
|
|
|
* 封装cookie相关的函数 |
|
|
|
```javascript |
|
|
|
function setCookie(key,value,iDate){ |
|
var oDate = new Date(); |
|
oDate.setDate(oDate.getDate() + iDate); |
|
document.cookie = key+"="+value+";expires="+oDate; |
|
} |
|
function getCookie(name){ |
|
var str = document.cookie; |
|
var arr1 = str.split(";"); |
|
var result = ""; |
|
for(var i=0;i<arr1.length;i++){ |
|
var arr2 = arr1[i].split("="); |
|
if(arr2[0].trim() == name.trim()){ |
|
result = arr2[1]; |
|
break; |
|
} |
|
} |
|
return result; |
|
} |
|
|
|
function removeCookie(name){ |
|
setCookie(name,false,-1); |
|
} |
|
|
|
``` |
|
|
|
* cookie的特点: |
|
|
|
> * cookie是document对象上的一个属性 |
|
> * cookie的大小限制是4k |
|
> * cookie会存在于请求头中 |
|
> * 主域名中的cookie会在子域名中存在 |
|
|
|
|
|
### Storage |
|
* localStorage 和 sessionStorage的api相同 |
|
|
|
> * setItem(key,value) 设置 |
|
> * getItem(key) 获取 |
|
> * removeItem(key) 删除 |
|
> * clear() 清除所有 |
|
> * length 内容个数 |
|
> * key(num) 获取key的值 |
|
|
|
* localStorage 和 sessionStorage的存储时效不同 |
|
|
|
> * localStorage 持久化 |
|
> * sessionStorage 网页会话结束失效 |
|
|
|
* localStorage 和 sessionStorage的存储容量不同 |
|
|
|
> * localStorage 2-5Mb左右 |
|
> * sessionStorage 2-10Mb左右,部分浏览器 没有限制 |
|
|
|
* 注意点: |
|
|
|
>* Storage仅能存储字符串 |
|
>* Storage的数据不能在不同的域*享 |
|
|
|
### 拖拽 |
|
|
|
* 被拖拽元素添加 draggable=true |
|
|
|
* 绑定拖拽事件 |
|
|
|
> 被拖拽元素相关 |
|
>> * ondragstart 当元素开始拖动时触发 |
|
>> * ondrag 被拖动元素拖动时触发 |
|
>> * ondragend 拖拽时松开鼠标时触发 |
|
|
|
> 容器相关 |
|
>> * ondrop 当放置被拖动元素时触发 |
|
>> * ondragover 被拖动元素正在到放置到容器时触发,默认无法把元素放置到其他元素中,如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 |
|
>> * ondragenter 当被拖动元素进入容器时触发 |
|
>> * ondragleave 当被拖动元素离开容器时触发 |
|
>> * ondragend 被拖动元素在容器中松开鼠标时触发 |
|
>> * ondrag 容器中的被拖动元素拖动时触发 |
|
|
|
* dataTransfer对象 |
|
|
|
> * 设置数据 dataTransfer.setData(key,val) |
|
> * 获取数据 dataTransfer.getData(key) |
|
> * 设置拖动的图标图片: dataTransfer.setDragImage(图片DOM节点,x,y) x,y为鼠标对于图片的相对位置 |
|
|
|
> 注意:dataTransfer对象存在在原生的event对象上,如果用jQuery的event对象,需要使用jQuery的event对象的originalEvent |
|
|
|
### 拖拽插件 |
|
* jquery.pep.js 官网: http://pep.briangonzalez.org/ |
|
|
|
### SVG 介绍 |
|
SVG(Scalable Vector Graphics)可缩放矢量图形,一种用来描述二维矢量图形的XML语言 |
|
|
|
### SVG视口(viewport) |
|
|
|
* SVG视口是指可见区域的大小(画布的大小) |
|
|
|
```javascript |
|
<svg width='800' height='600'></svg> |
|
``` |
|
> svg默认的宽高是300px*150px |
|
|
|
### SVG视区盒子(viewBox) |
|
|
|
viewBox = 'x y width height' |
|
|
|
//x:水平坐标 y:垂直坐标 width:宽度 height:高度 |
|
|
|
* viewBox会根据坐标点和宽高来截取视口,把截取后的内容全屏 |
|
|
|
```javascript |
|
<svg width='800' height='600' viewBox='0 0 80 60'> |
|
<rect > |
|
</svg> |
|
``` |
|
|
|
### 图形 |
|
* 直线 |
|
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> |
|
|
|
* 矩形 |
|
<rect x='100' y='100' width='400' height='300' fill="#ff0"> |
|
|
|
### canvas |
|
canvas是一个画布,用来在网页上绘制图像 |
|
|
|
### canvas基础 |
|
* 创建canvas |
|
|
|
```javascript |
|
<canvas></canvas> |
|
``` |
|
> canvas默认的宽高是300px*150px |
|
|
|
* 画布的大小 |
|
|
|
> * 在canvas标签中设置的width和height是指画布大大小,不用带单位 |
|
> * 在css中设置的width和height是指画布拉伸缩放后的大小 |
|
> * 一般建议在js中设置画布的大小 |
|
|
|
* 画直线 |
|
```javascript |
|
cxt.moveTo(0,0);//指定起始坐标 |
|
cxt.lineTo(100,100);//直线终点坐标 |
|
cxt.lineTo(100,200); |
|
cxt.strokeStyle='#f00';//指定描边的样式 |
|
cxt.lineWidth = 10;//设置线条的宽度 |
|
cxt.closePath();//封闭路径 |
|
cxt.stroke(); //描边 |
|
|
|
cxt.fillStyle = 'rgba(0,255,0,0.5)';//设置填充的颜色 |
|
cxt.fill();//闭合路径后填充 |
|
``` |
|
|
|
* cxt.beginPath();重新开始路径,绘制时不会绘制之前的路径 |
|
|
|
* 圆形 |
|
|
|
```javascript |
|
cxt.arc(圆心x,圆心y,半径,起始角度,终止角度,是否是逆时针(true为逆时针)) |
|
``` |
|
> 3点钟时0PI 6点钟是0.5PI 9点钟是1PI 12点钟是1.5PI |
|
|
|
|
|
* 矩形 |
|
cxt.strokeRect(x,y,宽,高) |
|
cxt.fillRect(x,y,宽,高) |
|
|
|
* 平移坐标原点 |
|
cxt.translate(x,y); |
|
|
|
* 旋转坐标系 |
|
cxt.rotate(弧度) 以顺时针为方向旋转 |
|
|
|
* 缩放变换 |
|
cxt.scale(x轴比例,y轴比例); |
|
|
|
> 所有的变换都是针对坐标系的 |
|
> 各种变换之间是相互叠加的 |
|
|
|
* save和restore环境 |
|
cxt.save(); 保存之前的环境 |
|
cxt.restore();恢复到上一次保存时的环境 |
|
|
|
* 线性渐变(LinearGradient) |
|
var linearGradient = cxt.createLinearGradient(起始x,起始y,终止x,终止y); |
|
linearGradient.addColorStop(百分比,颜色) |
|
|
|
* 径向渐变(RadialGradient) |
|
var radialGradient = createRadialGradient(起始圆心x,起始圆心y,起始圆半径,终止圆心x,终止圆心y,终止圆半径); |
|
|
|
|
|
* 文本 |
|
|
|
* 图像绘制 |
|
|
|
* 图形画刷 |
|
|
|
* 剪辑区 |
|
|
|
* 绘制阴影 |
|
|
|
* 绘制曲线 |
|
|
|
> * 圆弧: context.arc(圆心x,圆心y,半径,起始角度,终止角度,是否逆时针) |
|
> * 二次样条曲线: context.quadraticCurveTo(qcpx,qcpy,qx,qy) |
|
>> http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html |
|
> * 贝塞尔曲线: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) |
|
>> http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html |
|
|
|
### 推荐插件 |
|
* http://echarts.baidu.com/ 内置的包含了丰富功能的图表 |
|
* https://antv.alipay.com/zh-cn/index.html 可视化图形语法可交互的统计图表 |
|
* https://www.highcharts.com 交互图表 |
|
* https://d3js.org/ 互动图表 |