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>
  
 字符实体
  
 &nbsp;空格
 &copy;版权
 &lt;小于 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/ 互动图表

转载于:https://www.cnblogs.com/luoshida/p/10550213.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值