正文
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/ 互动图表 |
