html简单的知识

分布式版本控制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/ 互动图表

巴特西

html简单的知识

最新文章

热门文章