VICTORIA_DANSON

HTML5十个新特性

（一）语义标签

（二）增强型表单

（三）视频和音频

（四）Canvas绘图

（五）SVG绘图

（六）地理定位

（七）拖放API

（八） WebWorker

（九） WebStorage

（十）WebSocket

（一）语义标签

（二）增强型表单/表单2.0

1)新的input type

2)新的表单元素

<select><option>....</p> <p style="margin-left:0cm;"> <datalist>：数据列表，为input提供输入建议列表</p> <p style="margin-left:0cm;"> <progress>：进度条，展示连接/下载进度</p> <p style="margin-left:0cm;"> <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)</p> <p style="margin-left:0cm;"> <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的</p> <p style="margin-left:0cm;"> 3)表单元素的新属性</p> <p style="margin-left:0cm;"> 通用属性：</p> <p style="margin-left:0cm;"> placeholder：占位提示文字</p> <p style="margin-left:0cm;"> mutiple：是否允许多个输入</p> <p style="margin-left:0cm;"> autofocus：自动获得输入焦点</p> <p style="margin-left:0cm;"> form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果</p> <p style="margin-left:0cm;"> 验证属性(了解即可)：</p> <p style="margin-left:0cm;"> required：输入框内容不能为空</p> <p style="margin-left:0cm;"> min：允许输入的数字最小值</p> <p style="margin-left:0cm;"> max：允许输入的数字最大值</p> <p style="margin-left:0cm;"> minlength：允许输入的字符串最小长度</p> <p style="margin-left:0cm;"> maxlength：允许输入的字符串最大长度</p> <p style="margin-left:0cm;"> pattern：输入框内容必须符合的正则表达式</p> <p style="margin-left:0cm;"><strong>（三）视频和音频 </strong></p> <p style="margin-left:0cm;"> 视频播放：<video src=""><video></p> <p style="margin-left:0cm;"> 查看视频的所有属性、方法、事件：console.log(videoBirds);</p> <p style="margin-left:0cm;"> 音频播放：<audio src=""></audio></p> <p style="margin-left:0cm;"> 查看视频的所有属性、方法、事件：console.log(bgMusic);</p> <table border="1"> <tbody> <tr> <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">WEB中可用的绘图技术：</p> <p style="margin-left:0cm;"><strong>(1)Canvas</strong><strong>绘图：</strong>H5原生技术，基于网页画布绘制2D位图绘图技术，善于表现细腻颜色</p> <p style="margin-left:0cm;"><strong>(2)SVG</strong><strong>绘图：</strong>H5借鉴技术，基于SVG绘图空间绘制2D矢量图绘图技术，缩放不会失真</p> <p style="margin-left:0cm;"><strong>(3)WebGL</strong><strong>绘图</strong>：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js</p> </td> </tr> </tbody> </table> <p style="margin-left:0cm;"><strong>（四）Canvas绘图 </strong></p> <p style="margin-left:0cm;"> H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。</p> <p style="margin-left:0cm;"> 使用Canvas的步骤：</p> <p style="margin-left:0cm;"> <canvas id="c2" width="400" height="300"></canvas></p> <p style="margin-left:0cm;"> Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！</p> <p style="margin-left:0cm;"> 使用H5 Canvas API进行绘图：</p> <p style="margin-left:0cm;"> var ctx = c2.getContext('2d'); </p> <p style="margin-left:0cm;"> <strong>//绘制矩形</strong></p> <p style="margin-left:0cm;"> ctx.fillStyle = '#000' 填充颜色/渐变色对象</p> <p style="margin-left:0cm;"> ctx.strokeStyle = '#000' 描边颜色/渐变色对象</p> <p style="margin-left:0cm;"> ctx.lineWidth = 1 描边线宽度</p> <p style="margin-left:0cm;"> ctx.fillRect(x, y, w, h)：填充矩形</p> <p style="margin-left:0cm;"> ctx.strokeRect(x, y, w, h)：描边矩形</p> <p style="margin-left:0cm;"> ctx.clearRect(x, y, w, h)：描边矩形</p> <p style="margin-left:0cm;"> <strong>//绘制文本</strong></p> <p style="margin-left:0cm;"> ctx.font = '10px sans-serif' </p> <p style="margin-left:0cm;"> ctx.textBaseline = 'alphabetic/top/bottom'</p> <p style="margin-left:0cm;"> ctx.fillStyle = '#000' </p> <p style="margin-left:0cm;"> ctx.strokeStyle = '#000'</p> <p style="margin-left:0cm;"> ctx.fillText(txt, x, y) 填充文本</p> <p style="margin-left:0cm;"> ctx.strokeText(txt, x, y) 描边文本</p> <p style="margin-left:0cm;"> ctx.measureText(txt).width 测量文本基于当前字体设置的宽度</p> <p style="margin-left:0cm;"> <strong>//绘制路径——概念上类似于PS中的钢笔工具</strong></p> <p style="margin-left:0cm;"> ctx.beginPath()</p> <p style="margin-left:0cm;"> ctx.moveTo()</p> <p style="margin-left:0cm;"> ctx.lineTo()</p> <p style="margin-left:0cm;"> ctx.arc()</p> <p style="margin-left:0cm;"> ctx.rect()</p> <p style="margin-left:0cm;"> ctx.ellipse()</p> <p style="margin-left:0cm;"> ctx.closePath()</p> <p style="margin-left:0cm;"> -----------------------------</p> <p style="margin-left:0cm;"> ctx.stroke() 基于现有路径进行描边</p> <p style="margin-left:0cm;"> ctx.fill() 基于现有路径进行填充</p> <p style="margin-left:0cm;"> ctx.clip() 基于现有路径进行裁切</p> <p style="margin-left:0cm;"> <strong>//绘制图像</strong></p> <p style="margin-left:0cm;"> ctx.drawImage(img, x, y) 绘制图像(原始尺寸)</p> <p style="margin-left:0cm;"> ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)</p> <p style="margin-left:0cm;"> <strong>//绘图上下文变形和状态保持</strong></p> <p style="margin-left:0cm;"> ctx.rotate() 图像旋转</p> <p style="margin-left:0cm;"> ctx.translate() 图像平移</p> <p style="margin-left:0cm;"> ctx.scale() 图像缩放</p> <p style="margin-left:0cm;"> ------------------</p> <p style="margin-left:0cm;"> ctx.save() 绘图上下文的保存</p> <p style="margin-left:0cm;"> ctx.restore() 绘图上下文的恢复</p> <p style="margin-left:0cm;"> 2.Chart.js —— 了解</p> <p style="margin-left:0cm;"> 简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....</p> <p style="margin-left:0cm;"> 官网：http://www.chartjs.org/</p> <p style="margin-left:0cm;"> 基本使用方法：</p> <p style="margin-left:0cm;"> <canvas id="c3"></canvas></p> <p style="margin-left:0cm;"> <script src="js/Chart.js"></script></p> <p style="margin-left:0cm;"> <script></p> <p style="margin-left:0cm;"> new Chart(c13, {</p> <p style="margin-left:0cm;"> type: 'bar/line/pie',</p> <p style="margin-left:0cm;"> data: {</p> <p style="margin-left:0cm;"> labels: ['','','',''],</p> <p style="margin-left:0cm;"> datasets: [{</p> <p style="margin-left:0cm;"> label: '',</p> <p style="margin-left:0cm;"> data: [...]</p> <p style="margin-left:0cm;"> } ]</p> <p style="margin-left:0cm;"> }</p> <p style="margin-left:0cm;"> });</p> <p style="margin-left:0cm;"> </script></p> <p style="margin-left:0cm;"><strong>（五）SVG绘图 </strong></p> <p style="margin-left:0cm;"> Scalable Vector Graphic，可缩放向量图</p> <p style="margin-left:0cm;"> <strong>在H5标准之前的使用方法</strong>：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；</p> <p style="margin-left:0cm;"> 网页中使用<img src="x.svg">进行嵌入</p> <p style="margin-left:0cm;"> <strong>纳入H5标准后的使用方法</strong>：SVG标签可以直接书写在网页中。</p> <table border="1"> <tbody> <tr> <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">Canvas与SVG的不同：</p> <p style="margin-left:0cm;">(1)Canvas是位图；SVG是矢量图</p> <p style="margin-left:0cm;">(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)</p> <p style="margin-left:0cm;">(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；</p> <p style="margin-left:0cm;">(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定</p> </td> </tr> </tbody> </table> <p style="margin-left:0cm;"> 常用的SVG图形：</p> <p style="margin-left:0cm;"> <strong>(1)矩形</strong></p> <p style="margin-left:0cm;"> <rect width="100" height="50" x="400" y="350" fill="#f0f" fill-opacity="0.3" stroke="#00f" stroke-width="6" stroke-opacity=".3"></rect></p> <p style="margin-left:0cm;"> <strong>(2)圆形</strong></p> <p style="margin-left:0cm;"> <circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle></p> <p style="margin-left:0cm;"> <strong>(3)椭圆</strong></p> <p style="margin-left:0cm;"> <ellipse rx="100" ry="50" cx="400" cy="350" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></ellipse> </p> <p style="margin-left:0cm;"> <strong>(4)直线（没有fill只有stroke）</strong></p> <p style="margin-left:0cm;"> <line x1="45" y1="350" x2="450" y2="350" stroke="#f00" stroke-width="4px" stroke-opacity=".4"></line></p> <p style="margin-left:0cm;"> <strong>(5)折线（fill必须设置透明/stroke必须手工指定）</strong></p> <p style="margin-left:0cm;"> <polyline points="150,200 250,100 350,300 450,50" stroke="#00f" stroke-width="6" stroke-opacity=".4" fill="transparent"></polyline></p> <p style="margin-left:0cm;"> <strong>(6)多边形</strong></p> <p style="margin-left:0cm;"> <polygon points="100,150 100,300 400,300 400,150 250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon></p> <p style="margin-left:0cm;"> <strong>(7)文本</strong></p> <p style="margin-left:0cm;"> <text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">达内科技2018ajgy</text></p> <p style="margin-left:0cm;"> <strong>(8)图像</strong></p> <p style="margin-left:0cm;"> <image xlink:href="img/p3.png" x="400" y="200" width="100" height="200"></image></p> <p style="margin-left:0cm;"> 扩展小知识：</p> <p style="margin-left:0cm;"> (1)使用滤镜（高斯模糊）</p> <p style="margin-left:0cm;"> 参考MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter</p> <p style="margin-left:0cm;"><strong> </strong> <strong>声明滤镜：</strong></p> <p style="margin-left:0cm;"> <filter id="f2"></p> <p style="margin-left:0cm;"> <feGaussianBlur stdDeviation="3"></feGaussianBlur></p> <p style="margin-left:0cm;"> </filter></p> <p style="margin-left:0cm;"><strong> </strong> <strong>使用滤镜：</strong></p> <p style="margin-left:0cm;"><strong> </strong> <image/text/rect filter="url(#f2)"></p> <p style="margin-left:0cm;"> (2)使用颜色渐变对象</p> <p style="margin-left:0cm;"><strong> </strong> <strong>声明渐变对象：</strong></p> <p style="margin-left:0cm;"><strong> </strong> <linearGradient id="g2" x1="0" y1="0" x2="100%" y2="0"></p> <p style="margin-left:0cm;"><strong> </strong> <stop offset="0" stop-color="red"></stop></p> <p style="margin-left:0cm;"><strong> </strong> <stop offset="0.5" stop-color="yellow"></stop></p> <p style="margin-left:0cm;"><strong> </strong> <stop offset="1" stop-color="green"></stop></p> <p style="margin-left:0cm;"><strong> </strong> </linearGradient></p> <p style="margin-left:0cm;"><strong> </strong> <strong>使用渐变对象：</strong></p> <p style="margin-left:0cm;"> <strong> </strong> <text/rect fill="url(#g2)" stroke="url(#g2)"></p> <p style="margin-left:0cm;"><strong>（六）地理定位</strong> —— 了解</p> <p style="margin-left:0cm;"> 通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。</p> <p style="margin-left:0cm;"> 情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据</p> <p style="margin-left:0cm;"> 情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)</p> <p style="margin-left:0cm;"> window.navigator.geolocation : {</p> <p style="margin-left:0cm;"> watchPosition(){},</p> <p style="margin-left:0cm;"> clearWatch(){},</p> <p style="margin-left:0cm;"> getCurrentPosition(function(pos){</p> <p style="margin-left:0cm;"> '定位成功'</p> <p style="margin-left:0cm;"> 定位时间：pos.timestamp</p> <p style="margin-left:0cm;"> 维度：pos.coords.latitude</p> <p style="margin-left:0cm;"> 经度：pos.coords.longitude</p> <p style="margin-left:0cm;"> 海拔：pos.coords.altitude</p> <p style="margin-left:0cm;"> 速度：pos.coods.speed</p> <p style="margin-left:0cm;"> }, function(err){</p> <p style="margin-left:0cm;"> '定位失败'</p> <p style="margin-left:0cm;"> }){},</p> <p style="margin-left:0cm;"> }</p> <p style="margin-left:0cm;"><strong>（七）拖放API </strong> </p> <p style="margin-left:0cm;"> H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。</p> <p style="margin-left:0cm;"> H5之后专门提供了七个鼠标拖动相关事件句柄：</p> <p style="margin-left:0cm;"> <strong>拖动的源对象(source)可能触发的事件：</strong></p> <p style="margin-left:0cm;"> dragstart：拖动开始</p> <p style="margin-left:0cm;"> drag：拖动中</p> <p style="margin-left:0cm;"> dragend：拖动结束</p> <p style="margin-left:0cm;"><strong> </strong> <strong> 拖动的目标对象(target)可能触发的事件：</strong></p> <p style="margin-left:0cm;"> dragenter：拖动进入</p> <p style="margin-left:0cm;"> dragover：拖动悬停</p> <p style="margin-left:0cm;"> drop：松手释放</p> <p style="margin-left:0cm;"> dragleave：拖动离开</p> <p style="margin-left:0cm;"> 注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。</p> <p style="margin-left:0cm;"> 源对象：event.dataTransfer.setData(key, value)</p> <p style="margin-left:0cm;"> 目标对象：var value = event.dataTransfer.getData(key)</p> <p style="margin-left:0cm;"><strong>（八） WebWorker </strong></p> <p style="margin-left:0cm;"> 背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。</p> <p style="margin-left:0cm;"> 问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。</p> <p style="margin-left:0cm;"> 解决方案：H5新特性——Web Worker</p> <p style="margin-left:0cm;"> Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。使用方法：</p> <p style="margin-left:0cm;"> <strong>HTML文件中：</strong></p> <p style="margin-left:0cm;"> var w = new Worker('js/x.js')</p> <p style="margin-left:0cm;"> w.postMessage('发送给Worker线程的消息');</p> <p style="margin-left:0cm;"> w.onmessage = function(e){</p> <p style="margin-left:0cm;"> e.data; //来自Worker线程的消息</p> <p style="margin-left:0cm;"> }</p> <p style="margin-left:0cm;"> <strong>JS文件中：</strong></p> <p style="margin-left:0cm;"> onmessage = function(e){</p> <p style="margin-left:0cm;"> var data = e.data; //接收UI线程的消息</p> <p style="margin-left:0cm;"> //执行耗时任务....</p> <p style="margin-left:0cm;"> postMessage(result); //给UI线程发送消息</p> <p style="margin-left:0cm;"> }</p> <p style="margin-left:0cm;"> 注意：Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。</p> <p style="margin-left:0cm;"><strong>（九） WebStorage</strong> </p> <p style="margin-left:0cm;"> Web项目存储数据常用的方案：</p> <p style="margin-left:0cm;"><strong> </strong> <strong>(1)服务器端存储</strong></p> <p style="margin-left:0cm;"> 1)数据库存储，如商品、用户等核心数据</p> <p style="margin-left:0cm;"> 2)Session/内存存储，如用户的登录信息</p> <p style="margin-left:0cm;"><strong> </strong> <strong> (2)客户端存储</strong></p> <p style="margin-left:0cm;"> 3)Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制</p> <p style="margin-left:0cm;"> 4)H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大</p> <p style="margin-left:0cm;"> H5WebStorage存储具体涉及到两个对象：</p> <p style="margin-left:0cm;"> (1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储</p> <p style="margin-left:0cm;"> 添加数据：sessionStorage['key'] = 'value'</p> <p style="margin-left:0cm;"> 修改数据：sessionStorage['key'] = 'newValue'</p> <p style="margin-left:0cm;"> 删除数据：delete sessionStorage['key']</p> <p style="margin-left:0cm;"> 获得数据：var v = sessionStorage['key']</p> <p style="margin-left:0cm;"> (2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储</p> <p style="margin-left:0cm;"> 添加数据：localStorage['key'] = 'value'</p> <p style="margin-left:0cm;"> 修改数据：localStorage['key'] = 'newValue'</p> <p style="margin-left:0cm;"> 删除数据：delete localStorage['key']</p> <p style="margin-left:0cm;"> 获得数据：var v = localStorage['key']</p> <p style="margin-left:0cm;">（十）WebSocket</p> <p style="margin-left:0cm;"> </p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1275641348208214016"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端学习笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1756032433184063488.htm" title="人力资源智能化管理项目（day04:组织架构）" target="_blank">人力资源智能化管理项目（day04:组织架构）</a> <span class="text-muted">我是如此相信ᯤ⁶⁶ᴳ</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈树组件应用depts:[{name:'传智教育',children:[{name:'总裁办'},{name:'行政部'},{name:'人事部',children:[{name:'财务核算部'},{name:</div> </li> <li><a href="/article/1756032179529334784.htm" title="人力资源智能化管理项目（day03:主页模块）" target="_blank">人力资源智能化管理项目（day03:主页模块）</a> <span class="text-muted">我是如此相信ᯤ⁶⁶ᴳ</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈主页权限验证(permission.js)importrouterfrom'@/router'importnprogressfrom'nprogress'//进度条import'nprogress/nprog</div> </li> <li><a href="/article/1755621366918299648.htm" title="Web前端学习笔记" target="_blank">Web前端学习笔记</a> <span class="text-muted">jusw123456</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div> </li> <li><a href="/article/1754699924143882240.htm" title="前端学习笔记day02--CSS" target="_blank">前端学习笔记day02--CSS</a> <span class="text-muted">m0_38077048</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%87%AA%E7%94%A8/1.htm">学习自用</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>前端学习笔记day02–CSS一、CSS知识CSS（cascadingstylesheet）：层叠样式表（级联样式表）作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。二、CSS和html结合写法：选择器{声明；（属性名：属性值；）}1.行内样式行内样式作用域小，只作用</div> </li> <li><a href="/article/1753962196007665664.htm" title="[前端学习笔记1] 前端学习路线" target="_blank">[前端学习笔记1] 前端学习路线</a> <span class="text-muted">Lumos_zbj</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>按顺序学习一、做网页HTML：定义网页结构CSS（Cascadingstylesheets层叠样式表）：对网页进行装饰JS（JavaScript）：网页与用户的交互效果，【重要】WebAPI：将HTML,CSS,JS结合在一起，通过JS可以改变HTML,CSS.JQuery：老牌框架，了解即可。Bootstrap：响应式页面，了解即可移动端开发：【重要】二、数据库和服务器数据库：mongoDB（J</div> </li> <li><a href="/article/1753961295721283584.htm" title="爬虫配套学习-前端学习笔记03" target="_blank">爬虫配套学习-前端学习笔记03</a> <span class="text-muted">丰。。</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">爬虫学习笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>插入图片水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这就是月饼的来历，大家会在这一天，和嘉园也，吃月饼，赏月。®效果图像的超链接水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这</div> </li> <li><a href="/article/1753680734431756288.htm" title="前端学习笔记 | CSS动画+移动web" target="_blank">前端学习笔记 | CSS动画+移动web</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d</div> </li> <li><a href="/article/1753680735337725952.htm" title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div> </li> <li><a href="/article/1753680733899079680.htm" title="前端学习笔记 | CSS高级技巧" target="_blank">前端学习笔记 | CSS高级技巧</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（</div> </li> <li><a href="/article/1753680347956002816.htm" title="前端学习笔记 | 响应式网页+Boostrap" target="_blank">前端学习笔记 | 响应式网页+Boostrap</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi</div> </li> <li><a href="/article/1752411665669832704.htm" title="自学前端学习笔记html5(简称H5)" target="_blank">自学前端学习笔记html5(简称H5)</a> <span class="text-muted">Informal杨</span> <div>image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖</div> </li> <li><a href="/article/1752186248874704896.htm" title="前端自己整理的学习面试笔记" target="_blank">前端自己整理的学习面试笔记</a> <span class="text-muted">小江的博客</span> <a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt引用类型：对象2判断一个对象属性是否存在本身属性判断：obj.hasOwnProperty(key)包括了上级属性判断：keyinobjReflect.get(obj,‘key</div> </li> <li><a href="/article/1750673224204566528.htm" title="前端学习笔记一一HTML常用标签之列表标签" target="_blank">前端学习笔记一一HTML常用标签之列表标签</a> <span class="text-muted">前前前端小飞</span> <div>HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定</div> </li> <li><a href="/article/1750239918862385152.htm" title="字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载" target="_blank">字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载</a> <span class="text-muted">书苏</span> <div>一、入门前端三剑客1、HTMLhtml学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下</div> </li> <li><a href="/article/1750013266047811584.htm" title="前端学习笔记-HTML、CSS、Javascript基础知识" target="_blank">前端学习笔记-HTML、CSS、Javascript基础知识</a> <span class="text-muted">m0_53527658</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>认识web网站的开发模式采用前后端分离技术开发Web前端三个组成部分HTML：负责网页结构（页面元素的内容）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）JavaScript：负责网页的行为（交互效果）HTML和CSSHTML：超文本标记语言：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；HTML标签都是预定义好的。例如：使用展示超</div> </li> <li><a href="/article/1748709809311465472.htm" title="ES6前端学习笔记" target="_blank">ES6前端学习笔记</a> <span class="text-muted">已注销</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>修正ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript2015是在2015年6月发布ES6的第一个版本。以此类推，</div> </li> <li><a href="/article/1748701032117977088.htm" title="【前端学习笔记1】css基础" target="_blank">【前端学习笔记1】css基础</a> <span class="text-muted">__dh</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>css可以使页面更漂亮，即美化网页css：层叠样式表标签选择器：类选择器：id只能单次调用，类似人的身份证css里只要是word里面有的功能，他们都有对应的，不会的时候查一下就行实现垂直居中:height等于line-height就行font-family：可以修改字体font顺序：是否倾斜字号行高字体必须严格按照这个顺序来与文本相关text-indent：文本缩进text-align：cente</div> </li> <li><a href="/article/1748700142363492352.htm" title="【前端学习笔记2】javaScript基础" target="_blank">【前端学习笔记2】javaScript基础</a> <span class="text-muted">__dh</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>是什么：是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面alert（“hello，world”）我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能</div> </li> <li><a href="/article/1747616622635401216.htm" title="自学前端学习笔记-02CSS基础样式语法" target="_blank">自学前端学习笔记-02CSS基础样式语法</a> <span class="text-muted">Informal杨</span> <div>◆CSS三大特性1.继承性2.层叠性3.优先级继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important继承<*{css}<div{css}<.(class命名){css}<#(class命名){}<style=""<!important{权限最高,不推荐使用}image.png不需要理解,后期使用less或者sass就可以了!◆PxCook的基本使用官方网站https:</div> </li> <li><a href="/article/1746907254134685696.htm" title="【wow-ts】前端学习笔记Typescript基础语法（一）" target="_blank">【wow-ts】前端学习笔记Typescript基础语法（一）</a> <span class="text-muted">miskirito</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>项目地址是https://github.com/datawhalechina/wow-ts。我选择的是ts前端课程Typescript笔记TypeScript入门介绍基础数据类型TypeScript基础数据结构TypeScript变量声明变量作用域TypeScript入门介绍第一次接触ts，先去了解了下ts的内容，复制内容如下TypeScript是JavaScript的一个超集，支持ECMAScr</div> </li> <li><a href="/article/1745473629660921856.htm" title="前端学习笔记 5：大事件" target="_blank">前端学习笔记 5：大事件</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记5：大事件本文将学习一个示例项目（大事件）的前端搭建过程。1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。1.2.安装插件安装ElementPlus：npminstallelement-plus--save安装好后还需要在main.js中导入相关模块和样式：import'./assets/main.scss'import{createA</div> </li> <li><a href="/article/1745473499478114304.htm" title="前端学习笔记 6：Pinia" target="_blank">前端学习笔记 6：Pinia</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记6：PiniaPinia是Vue的一个官方库，用于状态管理。1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'impo</div> </li> <li><a href="/article/1745377282232434688.htm" title="【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】" target="_blank">【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】</a> <span class="text-muted">weixin_47227105</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端学习笔记三，覆盖button选不中，可能是被别的元件覆盖了，用开发者工具选择元件，可以在样式里添加z-index或者用position把相对定位变为绝对定位。.back{z-index:99999999;position:absolute;right:40px;top:95px;}el-option筛选框里不显示label，显示value，而且有的列筛选框有label有value全局变量写法，</div> </li> <li><a href="/article/1745191168452345856.htm" title="暑期字节青训营前端学习笔记——简略" target="_blank">暑期字节青训营前端学习笔记——简略</a> <span class="text-muted">放荡不羁的小雨鸽</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录前端与HTML什么是前端？前端应该关注那些方面？注意HTML标签的语义化web开发的基本情况关于前端的开发：起源、架构、变迁前端应用的领域前端应用领域---浏览器前端应用领域---服务器前端应用领域---终端和跨端语言、框架、工具浏览器、网络、服务器Web标准标准组织：HTTP协议初识HTTP协议什么是HTTP协议协议分析报文methodWeb安全攻击防御对于XSS攻击：CSRF的防御Ty</div> </li> <li><a href="/article/1743025266642403328.htm" title="【前端学习笔记】HTML5中的video和audio" target="_blank">【前端学习笔记】HTML5中的video和audio</a> <span class="text-muted">花上</span> <div>标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video和audio的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video和audio的缺点：1）暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video和audio属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器就可以。2）播放媒</div> </li> <li><a href="/article/1742449223162413056.htm" title="前端学习笔记 3：Vue 工程" target="_blank">前端学习笔记 3：Vue 工程</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记3：Vue工程上一篇文章介绍了如何在单一Html页面中使用Vue，本文介绍如何从头开始用Vue构建一个前端工程项目。环境准备Vue框架代码的创建依赖于Node.js，因此需要先安装Node.js。创建和启动创建通过以下命令可以创建Vue的框架代码：npmcreatevue@latest该命令执行后会先检查是否安装create-vue工具，如果没有，就安装。然后再使用create-vue</div> </li> <li><a href="/article/1742449095500382208.htm" title="前端学习笔记 2：Vue" target="_blank">前端学习笔记 2：Vue</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习笔记2：VueVue是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。1.快速入门Vue的官网提供一个快速上手指南，有多种方式可以安装和使用Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心JS文件进行使用。这里展示的内容相当于官方快速上手指南中的使用ES模块构建版本。需要先像在之前文章中介绍的那样，在JS模块中导入Vue的createApp函数：import{</div> </li> <li><a href="/article/1742448967309869056.htm" title="前端学习笔记 1：js 导入导出" target="_blank">前端学习笔记 1：js 导入导出</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记1：js导入导出1.传统引用一般性的，用以下方式引入JS中定义的函数或对象到Html中使用：functionshowMessage(){console.log("hello");}functionshowChineseMessage(){console.log("你好");}hello按我有惊喜document.getElementById("btn").onclick=functio</div> </li> <li><a href="/article/1742448711952252928.htm" title="前端学习笔记 4：Element Plus" target="_blank">前端学习笔记 4：Element Plus</a> <span class="text-muted">魔芋红茶</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记4：ElementPlus1.准备工作在使用ElementPlus之前，需要先创建一个Vue工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装Element依赖：npminstallelement-plus--save注意，Element和ElementPlus是两个不同的项目，前者适用于Vue2.X，后者适用于Vue3.X。这里使用的是后者。2.快速开</div> </li> <li><a href="/article/1740617393400463360.htm" title="2021-08-25_vue环境搭建前端学习笔记" target="_blank">2021-08-25_vue环境搭建前端学习笔记</a> <span class="text-muted">kikop</span> <div>20210825_vue环境搭建前端学习笔记1概述1.1目录结构image-20211001195604044.png1.2项目配置细节1.2.1配置拦截器//E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js//接口请求拦截器importVuefro</div> </li> <li><a href="/article/54.htm" title="JAVA中的Enum" target="_blank">JAVA中的Enum</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Enum是计算机编程语言中的一种数据类型---枚举类型。在实际问题中，有些变量的取值被限定在一个有限的范围内。例如，一个星期内只有七天我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday</div> </li> <li><a href="/article/181.htm" title="赶集网mysql开发36条军规" target="_blank">赶集网mysql开发36条军规</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%9A%E5%8A%A1%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">业务架构设计</a><a class="tag" taget="_blank" href="/search/mysql%E8%B0%83%E4%BC%98/1.htm">mysql调优</a><a class="tag" taget="_blank" href="/search/mysql%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">mysql性能优化</a> <div>(一)核心军规 (1)不在数据库做运算 cpu计算务必移至业务层； (2)控制单表数据量 int型不超过1000w，含char则不超过500w；合理分表；限制单库表数量在300以内； (3)控制列数量字段少而精，字段数建议在20以内</div> </li> <li><a href="/article/308.htm" title="Shell test命令" target="_blank">Shell test命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/test/1.htm">test</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97/1.htm">数字</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E6%AF%94%E8%BE%83/1.htm">文件比较</a> <div>Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。数值测试参数说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真实例演示： num1=100 num2=100if test $[num1]</div> </li> <li><a href="/article/435.htm" title="XFire框架实现WebService(二)" target="_blank">XFire框架实现WebService(二)</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div> 有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)：两个java bean类： Course.java package cn.com.bean; public class Course { private </div> </li> <li><a href="/article/562.htm" title="重绘之画图板" target="_blank">重绘之画图板</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div> 上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就</div> </li> <li><a href="/article/689.htm" title="Java的IO流" target="_blank">Java的IO流</a> <span class="text-muted">西蜀石兰</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件</div> </li> <li><a href="/article/816.htm" title="No matching PlatformTransactionManager bean found for qualifier 'add' - neither" target="_blank">No matching PlatformTransactionManager bean found for qualifier 'add' - neither</a> <span class="text-muted">林鹤霄</span> <div>java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match! 网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是</div> </li> <li><a href="/article/943.htm" title="Row size too large (> 8126). Changing some columns to TEXT or BLOB" target="_blank">Row size too large (> 8126). Changing some columns to TEXT or BLOB</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/column/1.htm">column</a> <div>原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large 异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM</div> </li> <li><a href="/article/1070.htm" title="JS 格式化时间" target="_blank">JS 格式化时间</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>/** * 格式化时间 2013/6/13 by 半仙 alxw4616@msn.com * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm</div> </li> <li><a href="/article/1197.htm" title="队列中数据的移除问题" target="_blank">队列中数据的移除问题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97%E7%A7%BB%E9%99%A4/1.htm">队列移除</a> <div> 队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除, 代码如下; // package com.Thread0715.com; import java.util.ArrayList; public class Threa</div> </li> <li><a href="/article/1324.htm" title="Runnable接口使用实例" target="_blank">Runnable接口使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>Runnable接口 a. 该接口只有一个方法：public void run(); b. 实现该接口的类必须覆盖该run方法 c. 实现了Runnable接口的类并不具有任何天</div> </li> <li><a href="/article/1451.htm" title="oracle里的extend详解" target="_blank">oracle里的extend详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/extend/1.htm">extend</a> <div>扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); -- </div> </li> <li><a href="/article/1578.htm" title="【httpclient】httpclient发送表单POST请求" target="_blank">【httpclient】httpclient发送表单POST请求</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div>浏览器Form Post请求浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form </div> </li> <li><a href="/article/1705.htm" title="【Hive十三】Hive读写Avro格式的数据" target="_blank">【Hive十三】Hive读写Avro格式的数据</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div> 1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype 2. 创建avro格式的数据表 hive> CREATE TABLE avro_table(age INT, name STRING)STORE</div> </li> <li><a href="/article/1832.htm" title="nginx+lua+redis自动识别封解禁频繁访问IP" target="_blank">nginx+lua+redis自动识别封解禁频繁访问IP</a> <span class="text-muted">ronin47</span> <div>在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在指定的封禁时间后实行自动解封的目的。一、安装环境： CentOS x64 release 6.4(Fin</div> </li> <li><a href="/article/1959.htm" title="java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历" target="_blank">java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,</div> </li> <li><a href="/article/2086.htm" title="Spring源码学习-XML 配置方式的IoC容器启动过程分析" target="_blank">Spring源码学习-XML 配置方式的IoC容器启动过程分析</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a> <div>以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q</div> </li> <li><a href="/article/2213.htm" title="[科研与项目]民营企业请慎重参与军事科技工程" target="_blank">[科研与项目]民营企业请慎重参与军事科技工程</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A/1.htm">企业</a> <div> 军事科研工程和项目并非要用最先进，最时髦的技术，而是要做到“万无一失” 而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对</div> </li> <li><a href="/article/2340.htm" title="spring 定时器-两种方式" target="_blank">spring 定时器-两种方式</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>方式一：间隔一定时间运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule</div> </li> <li><a href="/article/2467.htm" title="简述一下关于BroadView站点的相关设计" target="_blank">简述一下关于BroadView站点的相关设计</a> <span class="text-muted">damoqiongqiu</span> <a class="tag" taget="_blank" href="/search/view/1.htm">view</a> <div>终于弄上线了，累趴，戳这里http://www.broadview.com.cn 简述一下相关的技术点前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。后端：U</div> </li> <li><a href="/article/2594.htm" title="运维 PHP问题汇总" target="_blank">运维 PHP问题汇总</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/windows2003/1.htm">windows2003</a> <div>1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页解决方法：后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。 2、解决PHP168超级管理员上传图片提示你的空间不足网站是用PHP168做的，反映使用管理员在后台无法</div> </li> <li><a href="/article/2721.htm" title="mac 下安装php扩展 - mcrypt" target="_blank">mac 下安装php扩展 - mcrypt</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下：下载并解压libmcrypt-2.5.8.tar.gz。在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --</div> </li> <li><a href="/article/2848.htm" title="MongoDB更新文档 [四]" target="_blank">MongoDB更新文档 [四]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/Mongodb%E6%9B%B4%E6%96%B0%E6%96%87%E6%A1%A3/1.htm">Mongodb更新文档</a> <div>MongoDB更新文档转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义参数 </div> </li> <li><a href="/article/2975.htm" title="Linux下的解压，移除，复制，查看tomcat命令" target="_blank">Linux下的解压，移除，复制，查看tomcat命令</a> <span class="text-muted">y806839048</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。有问题不明的先注掉 cp /opt/tomcat-6.0.44/webapps/g</div> </li> <li><a href="/article/3102.htm" title="Spring之使用事务缘由(3-XML实现)" target="_blank">Spring之使用事务缘由(3-XML实现)</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> 用事务通知声明式地管理事务事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:</div> </li> <li><a href="/article/3229.htm" title="GCD使用经验与技巧浅谈" target="_blank">GCD使用经验与技巧浅谈</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1 </div> </li> <li><a href="/article/3356.htm" title="linux（Ubuntu）下常用命令备忘录1" target="_blank">linux（Ubuntu）下常用命令备忘录1</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息： ls / 显示/.下的所有文件和目录 ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文</div> </li> <li><a href="/article/3483.htm" title="nodejs同步操作mysql" target="_blank">nodejs同步操作mysql</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>// db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 }); </div> </li> <li><a href="/article/3610.htm" title="一起学Hive系列文章" target="_blank">一起学Hive系列文章</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/Hive%E5%85%A5%E9%97%A8/1.htm">Hive入门</a> <div> [一起学Hive]系列文章目录贴，入门Hive，持续更新中。 [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive</div> </li> <li><a href="/article/3737.htm" title="Spring开发利器：Spring Tool Suite 3.7.0 发布" target="_blank">Spring开发利器：Spring Tool Suite 3.7.0 发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。在3.7.0版本主要做了如下的更新：将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>