前端最菜

前端查漏补缺全知识点合集（更新中9.3）

该篇文章用于本人查漏补缺，会有大量知识点，不定期更新，有人愿意看就随便看看。

HTML

浏览器的运行机制：

构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现
布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
绘制渲染树（paint/repaint）：遍历渲染树，使用UI 层来绘制每个节点。

HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

CSS

为何img、input等内联元素可以设置宽、高

从元素本身的特点来讲，可以分为替换和不可替换元素。
可替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据标签的src属性的值来读取图片信息并显示。例如根据标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的、、</code>、<code><select></code>、<code><object></code>都是替换元素。这些元素往往没有实际的内容，即是一个空元素</p> <h4>CSS画正方体，三角形</h4> <p>画三角形</p> <pre><code>#triangle02{ width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid yellow; } </code></pre> <p>画正方体：</p> <pre><code><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>立方体</title> <style> .box{ width: 200px; height: 200px; position: relative; top: 65px; margin: 50px; transform-style:preserve-3d ;/*给子级设置3d效果*/ transform: rotateX(33deg) rotateY(39deg) rotateZ(0deg) translate3d(0px,0px,0px); } .back1{ width: 100px; height: 100px; position: absolute; background-color: chartreuse; opacity: 0.5;/*设置透明效果*/ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,100px); } .back2{ width: 100px; height: 100px; position: absolute; background-color: #ff2d27; opacity: 0.5; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px); } .back3{ width: 100px; height: 100px; position: absolute; background-color: #e492ff; opacity: 0.5; transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,50px); } .back4{ width: 100px; height: 100px; position: absolute; background-color: #2f18a1; opacity: 0.5; transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,-50px); } .back5{ width: 100px; height: 100px; position: absolute; background-color: #12fffd; opacity: 0.5; transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,-50px); } .back6{ width: 100px; height: 100px; position: absolute; background-color: #421221; opacity: 0.5; transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,50px); } </style> </head> <body> <div class="box"> <div class="back1"></div> <div class="back2"></div> <div class="back3"></div> <div class="back4"></div> <div class="back5"></div> <div class="back6"></div> </div> </body> </html> </code></pre> <h1>JS</h1> <h5>this指向问题</h5> <p>（函数内部的this 是由函数调用的时候来确定其指向的。）<br> 1.在普通函数中：this指向window对象<br> 2.在对象的方法中，this指向调用该方法的对象<br> 3.在构造函数的调用中，this指向new关键字创建的对象<br> 4.在定时器中，this指向window对象<br> 5.在事件的处理函数中，this指向触发该事件的对象</p> <h1>ES6</h1> <h3>ES6装饰器的使用</h3> <h4>核心问题讲解</h4> <p>装饰器就是相当于给人或者事多加一些东西就是现实中装饰类似的意思化妆打扮加衣服</p> <p><strong>装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法与属性。许多面向对象的语言都有这项功能</strong>。<strong>一般和类class相关普通函数不要使用</strong></p> <p><strong>进入代码就会执行完成</strong></p> <p>装饰器是一种函数，写成<code>@ + 函数名</code>。它可以放在类和类方法的定义前面。</p> <pre><code>装饰类Foo @frozen class Foo { //装饰method方法 @configurable(false) method() {} //装饰yy方法 @throttle(500) yy() {} } </code></pre> <h4>问题扩展</h4> <ol> <li>修饰类基本形式</li> </ol> <pre><code class="prism language-js">@decorator <span class="token keyword">class</span> <span class="token class-name">A</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span> <span class="token comment">// 等同于</span> <span class="token keyword">class</span> <span class="token class-name">A</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span> <span class="token constant">A</span> <span class="token operator">=</span> <span class="token function">decorator</span><span class="token punctuation">(</span><span class="token constant">A</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// decorator 是一个函数相当于调用它给A 类可以加上一些其他代码</span> 举例： @testable <span class="token keyword">class</span> <span class="token class-name">MyTestableClass</span> <span class="token punctuation">{ </span> <span class="token comment">// ...</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">testable</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{ </span> target<span class="token punctuation">.</span>isTestable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> MyTestableClass<span class="token punctuation">.</span>isTestable <span class="token comment">// true</span> <span class="token comment">//为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。</span> </code></pre> <ol start="2"> <li>修饰的复杂形式多套一个函数返回一个函数</li> </ol> <pre><code class="prism language-js"><span class="token comment">//testable是一个Factory</span> <span class="token keyword">function</span> <span class="token function">testable</span><span class="token punctuation">(</span>isTestable<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{ </span> target<span class="token punctuation">.</span>isTestable <span class="token operator">=</span> isTestable<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> @<span class="token function">testable</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">MyTestableClass</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span> MyTestableClass<span class="token punctuation">.</span>isTestable <span class="token comment">// true</span> @<span class="token function">testable</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span> MyClass<span class="token punctuation">.</span>isTestable <span class="token comment">// false</span> </code></pre> <ol start="3"> <li>修饰类方法</li> </ol> <pre><code>修饰器第一个参数是类的原型对象，是Person.prototype，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，所以只能去修饰原型（这不同于类的修饰，那种情况时target参数指的是类本身）；第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。 function readonly(target, name, descriptor){ // descriptor对象原来的值如下 // { configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、， false为不可重新定义，默认值为true enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true writable:false,//对象属性是否可修改,flase为不可修改，默认值为true value:'xiaoming' //对象属性的默认值 // }; descriptor.writable = false; return descriptor; } class Person { @readonly abc() { console.log('我是person的abc函数') } } </code></pre> <ol start="4"> <li> <p>多个装饰器一起</p> <p>同一处的多个装饰器是按照洋葱模型，由外到内进入，再由内到外执行</p> </li> </ol> <pre><code>function dec(id){ console.log('进入', id); return (target, property, descriptor) => { console.log('执行', id) }; } class Example { @dec(1) @dec(2) xxx(){ console.log('xxx') } } // 进入 1 // 进入 2 // 执行 2 // 执行 1 </code></pre> <h1>VUE</h1> <h4>v-bind 和 v-model 的区别</h4> <p>1.v-bind 用来绑定数据和属性以及表达式，缩写为’：’<br> 2.v-model 使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用</p> <h4>什么是 mvvm？</h4> <p>MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。</p> <p>在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。</p> <p>ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。</p> <h3>mvvm 和 mvc 区别？</h3> <p>mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。</p> <h4>vue 的优点是什么？</h4> <ul> <li>低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。</li> <li>可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。</li> <li>独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。</li> <li>可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。</li> </ul> <h4>请详细说下你对 vue 生命周期的理解？</h4> <p>答：总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。</p> <ul> <li>创建前/后：在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。</li> <li>载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。</li> <li>更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。</li> <li>销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在</li> </ul> <h3>组件之间的传值？</h3> <ol> <li>父组件与子组件传值</li> </ol> <pre><code class="prism language-html">//父组件通过标签上面定义传值 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">:obj</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token comment">//引入子组件</span> <span class="token keyword">import</span> Main form <span class="token string">"./main"</span> exprot <span class="token keyword">default</span><span class="token punctuation">{ </span> name<span class="token punctuation">:</span><span class="token string">"parent"</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token punctuation">{ </span> data<span class="token punctuation">:</span><span class="token string">"我要向子组件传递数据"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//初始化组件</span> components<span class="token punctuation">:</span><span class="token punctuation">{ </span> Main <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> //子组件通过props方法接受数据 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{ {data}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> exprot <span class="token keyword">default</span><span class="token punctuation">{ </span> name<span class="token punctuation">:</span><span class="token string">"son"</span><span class="token punctuation">,</span> <span class="token comment">//接受父组件传值</span> props<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">"data"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <ol start="2"> <li>子组件向父组件传递数据</li> </ol> <pre><code class="prism language-html">//子组件通过$emit方法传递参数 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>events<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token comment">//引入子组件</span> <span class="token keyword">import</span> Main form <span class="token string">"./main"</span> exprot <span class="token keyword">default</span><span class="token punctuation">{ </span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> events<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> // <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{ {data}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> exprot <span class="token keyword">default</span><span class="token punctuation">{ </span> name<span class="token punctuation">:</span><span class="token string">"son"</span><span class="token punctuation">,</span> <span class="token comment">//接受父组件传值</span> props<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">"data"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <h4>active-class 是哪个组件的属性？</h4> <p>vue-router 模块的 router-link 组件。</p> <h4>嵌套路由怎么定义？</h4> <p>在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。<br> index.html，只有一个路由出口</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，当然子路由里面还可以继续嵌套子路由。</p> <pre><code class="prism language-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">"vue-router"</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//引入两个组件</span> <span class="token keyword">import</span> home <span class="token keyword">from</span> <span class="token string">"./home.vue"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> game <span class="token keyword">from</span> <span class="token string">"./game.vue"</span><span class="token punctuation">;</span> <span class="token comment">//定义路由</span> <span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{ </span> path<span class="token punctuation">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> redirect<span class="token punctuation">:</span> <span class="token string">"/home"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//重定向,指向了home组件</span> <span class="token punctuation">{ </span> path<span class="token punctuation">:</span> <span class="token string">"/home"</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> home<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{ </span> path<span class="token punctuation">:</span> <span class="token string">"/home/game"</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> game <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//创建路由实例</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{ </span> routes <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{ </span> el<span class="token punctuation">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">,</span> router<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。</p> <h4>路由之间跳转？</h4> <ul> <li>声明式（标签跳转） <code><router-link :to="index"></code></li> <li>编程式（ js 跳转） <code>router.push('index')</code></li> </ul> <h4>懒加载（按需加载路由）（常考）</h4> <p>webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。</p> <ul> <li>不进行页面按需加载引入方式：</li> </ul> <pre><code class="prism language-js"><span class="token keyword">import</span> home <span class="token keyword">from</span> <span class="token string">"../../common/home.vue"</span><span class="token punctuation">;</span> </code></pre> <ul> <li>进行页面按需加载的引入方式：</li> </ul> <pre><code class="prism language-js"><span class="token keyword">const</span> <span class="token function-variable function">home</span> <span class="token operator">=</span> <span class="token punctuation">(</span>r<span class="token punctuation">)</span> <span class="token operator">=></span> require<span class="token punctuation">.</span><span class="token function">ensure</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">r</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"../../common/home.vue"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h4>vuex 是什么？怎么使用？哪种功能场景使用它？</h4> <p>vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车</p> <pre><code class="prism language-js"><span class="token comment">// 新建 store.js</span> <span class="token keyword">import</span> vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> vuex form <span class="token string">'vuex'</span> vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vuex<span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">vuex<span class="token punctuation">.</span>store</span><span class="token punctuation">(</span><span class="token punctuation">{ </span> <span class="token comment">//...code</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//main.js</span> <span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span> <span class="token operator">...</span> </code></pre> <h4>vue-router 有哪几种导航钩子?</h4> <p>三种</p> <ul> <li>全局导航钩子 <ul> <li>router.beforeEach(to, from, next),</li> <li>router.beforeResolve(to, from, next),</li> <li>router.afterEach(to, from ,next)</li> </ul> </li> <li>组件内钩子 <ul> <li>beforeRouteEnter,</li> <li>beforeRouteUpdate,</li> <li>beforeRouteLeave</li> </ul> </li> <li>单独路由独享组件 <ul> <li>beforeEnter</li> </ul> </li> </ul> <h4>自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数</h4> <ul> <li>全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。</li> <li>组件内定义指令：directives</li> <li>钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)</li> <li>钩子函数参数： el、binding</li> </ul> <h4>说出至少 4 种 vue 当中的指令和它的用法</h4> <p>v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)</p> <h4>vue 的双向绑定的原理是什么(常考)</h4> <p>vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。</p> <p>具体步骤：<br> 第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化</p> <p>第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图</p> <p>第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:</p> <ul> <li>在自身实例化时往属性订阅器(dep)里面添加自己</li> <li>自身必须有一个 update()方法</li> <li>待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。</li> </ul> <p>第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。</p> <h3>vuex 相关</h3> <h4>vuex 有哪几种属性</h4> <p>有 5 种，分别是 state、getter、mutation、action、module</p> <h4>vuex 的 store 特性是什么</h4> <ul> <li>vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data</li> <li>state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新</li> <li>它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性</li> </ul> <h4>vuex 的 getter 特性是什么</h4> <ul> <li>getter 可以对 state 进行计算操作，它就是 store 的计算属性</li> <li>虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用</li> <li>如果一个状态只在一个组件内使用，是可以不用 getters</li> </ul> <h3>vuex 的 mutation 特性是什么</h3> <ul> <li>action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态</li> <li>action 可以包含任意异步操作</li> </ul> <h4>vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中</h4> <p>如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里</p> <p>如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回</p> <h4>不用 vuex 会带来什么问题</h4> <ul> <li>可维护性会下降，你要修改数据，你得维护 3 个地方</li> <li>可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的</li> <li>增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背</li> </ul> <h3>vuex 原理</h3> <p>vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，</p> <p>vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；</p> <h4>使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？</h4> <p>Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的<span class="katex--inline"><span class="katex"><span class="katex-mathml"> s t o r e 中。因此在 V u e C o m p o n e n t 任意地方都能够通过 t h i s . store 中。因此在 Vue Component 任意地方都能够通过 this. </span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord mathdefault">s</span><span class="mord mathdefault">t</span><span class="mord mathdefault">o</span><span class="mord mathdefault" style="margin-right: 0.02778em;">r</span><span class="mord mathdefault">e</span><span class="mord cjk_fallback">中</span><span class="mord cjk_fallback">。</span><span class="mord cjk_fallback">因</span><span class="mord cjk_fallback">此</span><span class="mord cjk_fallback">在</span><span class="mord mathdefault" style="margin-right: 0.22222em;">V</span><span class="mord mathdefault">u</span><span class="mord mathdefault">e</span><span class="mord mathdefault" style="margin-right: 0.07153em;">C</span><span class="mord mathdefault">o</span><span class="mord mathdefault">m</span><span class="mord mathdefault">p</span><span class="mord mathdefault">o</span><span class="mord mathdefault">n</span><span class="mord mathdefault">e</span><span class="mord mathdefault">n</span><span class="mord mathdefault">t</span><span class="mord cjk_fallback">任</span><span class="mord cjk_fallback">意</span><span class="mord cjk_fallback">地</span><span class="mord cjk_fallback">方</span><span class="mord cjk_fallback">都</span><span class="mord cjk_fallback">能</span><span class="mord cjk_fallback">够</span><span class="mord cjk_fallback">通</span><span class="mord cjk_fallback">过</span><span class="mord mathdefault">t</span><span class="mord mathdefault">h</span><span class="mord mathdefault">i</span><span class="mord mathdefault">s</span><span class="mord">.</span></span></span></span></span>store 访问到该 store。</p> <h4>state 内部支持模块配置和模块嵌套，如何实现的？</h4> <p>在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder’, payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。</p> <h4>在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？</h4> <p>store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder’, payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。</p> <h4>Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？</h4> <p>Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。</p> <h4>调试时的"时空穿梭"功能是如何实现的？</h4> <p>devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，‘时空穿梭’ 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。</p> <h3>axios</h3> <h4>axios 是什么？怎么使用？描述使用它实现登录功能的流程</h4> <p>axios 是请求后台资源的模块。 npm i axios -S</p> <p>如果发送的是跨域请求，需在配置文件中 config/index.js 进行配置</p> <h4>hash模式和history模式</h4> <p>vue-router（前端路由）有两种模式，hash模式和history模式，这里来谈谈两者的区别。</p> <h5><strong>hash模式</strong></h5> <p>这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。</p> <p>由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件*（hashchange只能改变 # 后面的url片段**）*；更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。</p> <p>hash模式背后的原理是<code>onhashchange</code>事件,可以在window对象上监听这个事件:</p> <pre><code>window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq' var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 监听hash变化，点击浏览器的前进后退会触发 }) </code></pre> <p>hash模式又叫前端路由，这成为了单页应用标配；</p> <h5>history模式</h5> <p>hash 能兼容到IE8， history 只能兼容到 IE10；<br> 首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。<br> *如果不想要很丑的 hash，我们可以用路由的 history 模式；<br> history api可以分为两大部分：切换和修改<br> 1、切换历史状态包括back、forward、go<br> 这三个方法，对应浏览器的前进，后退，跳转操作；（跳转操作：在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转）</p> <pre><code>history.go(-2);//后退两次 history.go(2);//前进两次 history.back(); //后退 hsitory.forward(); //前进 </code></pre> <p>2、修改历史状态包括了 <code>pushState</code>, <code>replaceState</code>两个方法</p> <pre><code> `这两个方法接收三个参数:`stateObj`, `title`, `url 相关API： window.history.pushState(state, title, url) // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取 // title：标题，基本没用，一般传 null // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。 //如当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/， //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/ window.history.replaceState(state, title, url) // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录 window.addEventListener("popstate", function() { // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发 }); </code></pre> <p>通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。</p> <p>history 模式改变 url 的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。</p> <h5>history模式的问题</h5> <p>通过history api，我们丢掉了丑陋的#；但是，它也有个问题：不怕前进，不怕后退，<em><strong>*就怕刷新，f5*</strong></em><em>（如果后端没有准备的话，会分分钟刷出一个404来**）</em>,因为刷新是实实在在地去请求服务器的,不玩虚的</p> <blockquote> <p>这里是引用<br> https://blog.csdn.net/ygh5123687/article/details/89473578?biz_id=102&utm_term=hash%20history%E6%A8%A1%E5%BC%8F&utm_medium=distribute.pc_search_result.none-task-blog-2<sub>all</sub>sobaiduweb~default-0-89473578&spm=1018.2118.3001.4187</p> </blockquote> <h1>小程序</h1> <h1>移动端</h1> <h3>混合APP</h3> <h4>uniapp</h4> <h3>webappp</h3> <h1>网络知识</h1> <h4>简单讲解一下http2的多路复用</h4> <p>在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：</p> <ol> <li>第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）</li> <li>第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。</li> </ol> <p>HTTP/2的多路复用就是为了解决上述的两个性能问题。在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。</p> <h1>面试</h1> <h5>8.31</h5> <p>1.tcp udp 区别<br> 2.跨域<br> 3.事件代理<br> 4.基本数据类型引用数据类型区别<br> 5.instanssof原理<br> 6.水平居中<br> 7.数组去重<br> 8.ajax原理<br> 9.多种方式获取key值<br> 10.左右两栏宽度固定中间自适应</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1305083230793273344"></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">你可能感兴趣的:(前端,es6,网络,javascript,css,vue.js,html,html5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</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> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835502451877310464.htm" title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a> <span class="text-muted">智能算法研学社（Jack旭）</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/1.htm">图像分割</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498349264990208.htm" title="2023-04-17|篮球女孩" target="_blank">2023-04-17|篮球女孩</a> <span class="text-muted">长一木</span> <div>1小学抑或初中阶段，在课外书了解到她的故事。“篮球女孩”。当时佩服她的顽强，也对生命多了一丝敬畏。今天刚好在公众号看到，长大后的“篮球女孩”。佩服之余又满是心疼。网络侵删祝那素未蒙面的女孩，未来一切顺遂。</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496780066811904.htm" title="在一台Ubuntu计算机上构建Hyperledger Fabric网络" target="_blank">在一台Ubuntu计算机上构建Hyperledger Fabric网络</a> <span class="text-muted">落叶无声9</span> <a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E8%B6%85%E7%BA%A7%E8%B4%A6%E6%9C%AC/1.htm">超级账本</a><a class="tag" taget="_blank" href="/search/Hyperledger/1.htm">Hyperledger</a><a class="tag" taget="_blank" href="/search/fabric/1.htm">fabric</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E5%BB%BA/1.htm">构建</a><a class="tag" taget="_blank" href="/search/hyperledger/1.htm">hyperledger</a><a class="tag" taget="_blank" href="/search/fabric/1.htm">fabric</a> <div>在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835491354004779008.htm" title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）</a> <span class="text-muted">算法大师</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div> </li> <li><a href="/article/1835484742221393920.htm" title="《在战“疫”中成长致敬生活》观后感" target="_blank">《在战“疫”中成长致敬生活》观后感</a> <span class="text-muted">梅子刘的刀</span> <div>（作者：周晨）今天上午，我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱，默默地捐给了武汉，有几千块钱的、有几万块钱的，也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔，虽然他没有钱，但是他地里有蔬菜，捐了几大卡</div> </li> <li><a href="/article/1835475963543121920.htm" title="中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享约练次数（74）咨询师（6）来访者（53）观察者（15）" target="_blank">中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享约练次数（74）咨询师（6）来访者（53）观察者（15）</a> <span class="text-muted">阴丽丽</span> <div>今天是忙碌的一天，一早起来，总想着找点把事情弄完，可总也弄不完。就这样弄着吧！孩子的事，自己的事都在那里搁置着，不想做，有点欧！今天总体还不错，只是在下午起床时走神了俩小时，也算是给自己的放松吧！今日难得1.儿子乖巧、听话，努力配合，一天下来也是忙忙碌碌，这真的很难得！2.儿子今天录的视频被班主任认可，这真的很难得3.我今天早上做核酸时，自己把教案整了一下，这真的很难得</div> </li> <li><a href="/article/1835473957185220608.htm" title="网络编程基础" target="_blank">网络编程基础</a> <span class="text-muted">记得开心一点啊</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程，指网络上</div> </li> <li><a href="/article/1835468963086168064.htm" title="多子女家庭问题" target="_blank">多子女家庭问题</a> <span class="text-muted">3e5c5362403c</span> <div>杨宁宁焦点解决网络初17中19坚持分享589天（2021.3.20）本周约练我1次，总计166次，读书打卡第256天案例督导收获：【家有老大篇】被爱与高期待下的独舞家里的第一个孩子往往集万千宠爱于一身。爸爸妈妈、爷爷奶奶、姥姥姥爷的目光都聚焦在他的身上。在这种光环下长大的孩子，就如小皇帝一般，衣来伸手、饭来张口。拥有爱的同时，也意味着拥有了更高的被期待，父母会花血本给你报各种各样的早教班，给你买各</div> </li> <li><a href="/article/1835468833360539648.htm" title="父母教育孩子的方式，将影响孩子一生" target="_blank">父母教育孩子的方式，将影响孩子一生</a> <span class="text-muted">树英教育</span> <div>为什么有些孩子总是充满自信与快乐？独立、有主见又坚强？而有些孩子却自卑、胆怯，软弱又过度依赖父母？为什么有些孩子总是健康、阳光又富于创造力？而有些孩子却悲观、孤僻又思想空乏？一个孩子的行为取决于孩子的思想，思想取决于环境和自己的认知，认知取决于教育。父母是孩子人生中的第一位教育者，父母养育孩子的方式，将决定他们人生的高度，影响他们的一生。网络图，侵权即删优秀的父母就像园丁，既要浇水施肥，又要修剪杂</div> </li> <li><a href="/article/1835463115882459136.htm" title="2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图" target="_blank">2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图</a> <span class="text-muted">RaidenQ</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3/1.htm">力扣</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">广度优先</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E5%90%91%E5%9B%BE/1.htm">无向图</a> <div>1.字符串格式化name="Alice"age=30formatted_string="Name:{},Age:{}".format(name,age)print(formatted_string)或者name="Alice"age=30formatted_string=f"Name:{name},Age:{age}"print(formatted_string)2.网络健康检查第一行有两个整数m</div> </li> <li><a href="/article/1835463094311153664.htm" title="戴容容中原焦点团队.网络初级第33期,坚持分享第19天 2022年3月9日" target="_blank">戴容容中原焦点团队.网络初级第33期,坚持分享第19天 2022年3月9日</a> <span class="text-muted">TessDai</span> <div>《每个人眼中的世界都是不同的》“一千个人眼里有一千个哈姆雷特”世界是多元的,每个人都有自己的道理,人人按照自己的理解去看待这个世界的人和物.我们如此,其他人也是如此.因此,任何事情,我们要放下自己以为的真理,去理解他人认为的真理,只有同频方能共振.孩子在慢慢长大的过程中慢慢学会独立,甚至对抗.尤其当孩子处于青春期的时候,他们开始有很多自己独立的想法,和一些特立独行的做法,家长常常会觉得不可思议,觉</div> </li> <li><a href="/article/1835461728423473152.htm" title="第1步win10宿主机与虚拟机通过NAT共享上网互通" target="_blank">第1步win10宿主机与虚拟机通过NAT共享上网互通</a> <span class="text-muted">学习3人组</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>VM的CentOS采用NAT共用宿主机网卡宿主机器无法连接到虚拟CentOS要实现宿主机与虚拟机通信，原理就是给宿主机的网卡配置一个与虚拟机网关相同网段的IP地址，实现可以互通。1、查看虚拟机的IP地址2、编辑虚拟机的虚拟网络的NAT和DHCP的配置，设置虚拟机的网卡选择NAT共享模式3、宿主机的IP配置，确保vnet8的IPV4属性与虚拟机在同一网段4、ping测试连通性[root@localh</div> </li> <li><a href="/article/1835456812720156672.htm" title="网络通信流程" target="_blank">网络通信流程</a> <span class="text-muted">记得开心一点啊</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>目录♫IP地址♫子网掩码♫MAC地址♫相关设备♫ARP寻址♫网络通信流程♫IP地址我们已经知道IP地址由网络号+主机号组成，根据IP地址的不同可以有5钟划分网络号和主机号的方案：其中，各类地址的表示范围是：分类范围适用网络网络数量主机最大连接数A类0.0.0.0~127.255.255.255大型网络12616777214【(2^24)-2】B类128.0.0.0~191.255.255.255中</div> </li> <li><a href="/article/1835454921990828032.htm" title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</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/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1/1.htm">任务</a><a class="tag" taget="_blank" href="/search/html%E8%A7%A3%E6%9E%90%E5%99%A8/1.htm">html解析器</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast</div> </li> <li><a href="/article/1835449250159357952.htm" title="计算机木马详细编写思路" target="_blank">计算机木马详细编写思路</a> <span class="text-muted">小熊同学哦</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%9C%A8%E9%A9%AC/1.htm">木马</a><a class="tag" taget="_blank" href="/search/%E6%9C%A8%E9%A9%AC%E6%80%9D%E8%B7%AF/1.htm">木马思路</a> <div>导语：计算机木马（ComputerTrojan）是一种恶意软件，通过欺骗用户从而获取系统控制权限，给黑客打开系统后门的一种手段。虽然木马的存在给用户和系统带来严重的安全风险，但是了解它的工作原理与编写思路，对于我们提高防范意识、构建更健壮的网络安全体系具有重要意义。本篇博客将深入剖析计算机木马的详细编写思路，以及如何复杂化挑战，以期提高读者对计算机木马的认识和对抗能力。计算机木马的基本原理计算机木</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835447985601867776.htm" title="Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net" target="_blank">Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net</a> <span class="text-muted">佛一脚</span> <a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不</div> </li> <li><a href="/article/1835444156714020864.htm" title="高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？" target="_blank">高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？</a> <span class="text-muted">寻求改变</span> <div>我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情</div> </li> <li><a href="/article/105.htm" title="Js函数返回值" target="_blank">Js函数返回值</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/return/1.htm">return</a> <div>一、返回控制与函数结果，语法为：return 表达式;作用: 结束函数执行，返回调用函数，而且把表达式的值作为函数的结果二、返回控制语法为：return;作用: 结束函数执行，返回调用函数，而且把undefined作为函数的结果在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性</div> </li> <li><a href="/article/232.htm" title="MySQL 的 char 与 varchar" target="_blank">MySQL 的 char 与 varchar</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 今天发现，create table 时，MySQL 4.1有时会把 char 自动转换成 varchar 测试举例： CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-</div> </li> <li><a href="/article/359.htm" title="Quartz——TriggerListener和JobListener" target="_blank">Quartz——TriggerListener和JobListener</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/TriggerListener/1.htm">TriggerListener</a><a class="tag" taget="_blank" href="/search/JobListener/1.htm">JobListener</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象，用于监听scheduler中发生的事件，然后执行相应的操作；你可能已经猜到了，TriggerListeners接受与trigger相关的事件，JobListeners接受与jobs相关的事件。二.JobListener监听器 j</div> </li> <li><a href="/article/486.htm" title="oracle层次查询" target="_blank">oracle层次查询</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/oracle%EF%BC%9B%E5%B1%82%E6%AC%A1%E6%9F%A5%E8%AF%A2%EF%BC%9B%E6%A0%91%E6%9F%A5%E8%AF%A2/1.htm">oracle；层次查询；树查询</a> <div>.oracle层次查询(connect by) oracle的emp表中包含了一列mgr指出谁是雇员的经理，由于经理也是雇员，所以经理的信息也存储在emp表中。这样emp表就是一个自引用表，表中的mgr列是一个自引用列，它指向emp表中的empno列，mgr表示一个员工的管理者， select empno,mgr,ename,sal from e</div> </li> <li><a href="/article/613.htm" title="通过反射把map中的属性赋值到实体类bean对象中" target="_blank">通过反射把map中的属性赋值到实体类bean对象中</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/javaee/1.htm">javaee</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2/1.htm">类型转换</a> <div>使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中但现在主要使用Spring框架的MVC，虽然也有@ModelAttribute可以使用但是明显感觉不方便。好吧，那就自己再造一个轮子吧。原理都知道，就是利用反射进行字段的赋值，下面贴代码主要类如下： import java.lang.reflect.Field; imp</div> </li> <li><a href="/article/740.htm" title="SAP HANA数据存储：传统硬盘的瓶颈问题" target="_blank">SAP HANA数据存储：传统硬盘的瓶颈问题</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/HANA/1.htm">HANA</a> <div>SAPHANA平台有各种各样的应用场景，这也意味着客户的实施方法有许多种选择，关键是如何挑选最适合他们需求的实施方案。在《Implementing SAP HANA》这本书中，介绍了SAP平台在现实场景中的运作原理，并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》，介绍了行存储和列存储的各自特点，以及SAP HANA的数据存储方式如何提升空间压</div> </li> <li><a href="/article/867.htm" title="Java Socket 多线程实现文件传输" target="_blank">Java Socket 多线程实现文件传输</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/socket/1.htm">socket</a> <div> 高级操作系统作业，让用Socket实现文件传输，有些代码也是在网上找的，写的不好，如果大家能用就用上。客户端类： package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered</div> </li> <li><a href="/article/994.htm" title="java初学者路径" target="_blank">java初学者路径</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>学习Java有没有什么捷径?要想学好Java，首先要知道Java的大致分类。自从Sun推出Java以来，就力图使之无所不包，所以Java发展到现在，按应用来分主要分为三大块：J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版，主要用于桌面应用软件的编程；J2ME主要应用于嵌入是系统开发，如手机和PDA的编程；J2EE</div> </li> <li><a href="/article/1121.htm" title="APP推广" target="_blank">APP推广</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%B9%BF/1.htm">推广</a> <div>一，免费篇 1，APP推荐类网站自主推荐最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖，还能获取最美应用的评测推荐。PS：推荐简单。只要产品有趣好玩，用户会自主分享传播。例如足迹APP在最美应用推荐一次，几天用户暴增将服务器击垮。 2，各大应用商店首发合作老实盯着排期，多给应用市场官方负责人献殷勤。 3，论坛贴吧推广百度知道，百度贴吧，猫扑论坛，天涯社区，豆瓣（</div> </li> <li><a href="/article/1248.htm" title="JSP转发与重定向" target="_blank">JSP转发与重定向</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/Java+Web/1.htm">Java Web</a><a class="tag" taget="_blank" href="/search/jsp%E8%BD%AC%E5%8F%91/1.htm">jsp转发</a> <div> 在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向; 转发包括;forward和include 例子;forwrad转发; 将请求装法给reg.html页面关键代码; req.getRequestDispatcher("reg.html</div> </li> <li><a href="/article/1375.htm" title="web.xml之jsp-config" target="_blank">web.xml之jsp-config</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/jsp-config/1.htm">jsp-config</a> <div>1.作用：主要用于设定JSP页面的相关配置。 2.常见定义： <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置 </div> </li> <li><a href="/article/1502.htm" title="JSF2.2 ViewScoped Using CDI" target="_blank">JSF2.2 ViewScoped Using CDI</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/CDI/1.htm">CDI</a><a class="tag" taget="_blank" href="/search/JSF+2.2/1.htm">JSF 2.2</a><a class="tag" taget="_blank" href="/search/ViewScoped/1.htm">ViewScoped</a> <div>JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w</div> </li> <li><a href="/article/1629.htm" title="【分布式数据一致性二】Zookeeper数据读写一致性" target="_blank">【分布式数据一致性二】Zookeeper数据读写一致性</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>很多文档说Zookeeper是强一致性保证，事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336 Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数，3台能够满足数据可靠性同时</div> </li> <li><a href="/article/1756.htm" title="Java开发笔记" target="_blank">Java开发笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java%E5%BC%80%E5%8F%91/1.htm">java开发</a> <div>1、Map<key,value>的remove方法只能识别相同类型的key值 Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"</div> </li> <li><a href="/article/1883.htm" title="图片黑色阴影" target="_blank">图片黑色阴影</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87/1.htm">图片</a> <div> .event{ padding:0; width:460px; min-width: 460px; border:0px solid #e4e4e4; height: 350px; min-heig</div> </li> <li><a href="/article/2010.htm" title="编程之美-饮料供货-动态规划" target="_blank">编程之美-饮料供货-动态规划</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a> <div> import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美饮料供货 * 设Opt（V’，i）表示从i到n-1种饮料中，总容量为V’的方案中，满意度之和的最大值。 * 那么递归式就应该是：Opt（V’，i）=max{ k * Hi+Op</div> </li> <li><a href="/article/2137.htm" title="ajax大参数（大数据）提交性能分析" target="_blank">ajax大参数（大数据）提交性能分析</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a> <div>近期在项目中发现如下一个问题项目中有个提交现场事件的功能，该功能主要是在web客户端保存现场数据（主要有截屏，终端日志等信息）然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢，大概要等10到20秒的时间浏览器才能操作，期间页面不响应事件。根据客户描述分析了下的代码流程，很简单，主要通过OCX控件截屏，在将前端的日志等文件使用OCX控件打包，在将之转换为</div> </li> <li><a href="/article/2264.htm" title="[宇宙与天文]在太空采矿,在太空建造" target="_blank">[宇宙与天文]在太空采矿,在太空建造</a> <span class="text-muted">comsci</span> <div> 我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大.... 地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没</div> </li> <li><a href="/article/2391.htm" title="ORACLE中CONSTRAINT的四对属性" target="_blank">ORACLE中CONSTRAINT的四对属性</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/CONSTRAINT/1.htm">CONSTRAINT</a> <div>ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如</div> </li> <li><a href="/article/2518.htm" title="Gradle入门教程" target="_blank">Gradle入门教程</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a> <div>一、寻找gradle的历程一开始的时候，我们只有一个工程，所有要用到的jar包都放到工程目录下面，时间长了，工程越来越大，使用到的jar包也越来越多，难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里，靠ide来管理工程之间的依赖关系，各工程下的jar包依赖是杂乱的。一段时间后，我们发现用ide来管理项程很不方便，比如不方便脱离ide自动构建，于是我们写自己的ant脚本。再后</div> </li> <li><a href="/article/2645.htm" title="C语言简单循环示例" target="_blank">C语言简单循环示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg</div> </li> <li><a href="/article/2772.htm" title="presentModalViewController 的动画效果" target="_blank">presentModalViewController 的动画效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/controller/1.htm">controller</a> <div>系统自带(四种效果)： presentModalViewController模态的动画效果设置： [cpp] view plain copy UIViewController *detailViewController = [[UIViewController al</div> </li> <li><a href="/article/2899.htm" title="java 二分查找" target="_blank">java 二分查找</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a><a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">java二分查找</a> <div>需求：在排好顺序的一串数字中，找到数字T 一般解法：从左到右扫描数据，其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati</div> </li> <li><a href="/article/3026.htm" title="Spring Security（07）——缓存UserDetails" target="_blank">Spring Security（07）——缓存UserDetails</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a> <div> Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类，CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时，其首先会从缓存中获取，如果缓存中没</div> </li> <li><a href="/article/3153.htm" title="Dozer 深层次复制" target="_blank">Dozer 深层次复制</a> <span class="text-muted">jayluns</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a> <div>最近在做项目上遇到了一些小问题，因为架构在做设计的时候web前段展示用到了vo层，而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层，每一次都需要从po-->转化到vo层，用到BeanUtils.copyProperties(source, target)只能复制简单的属性，因为实体类都配置了hibernate那些关联关系，所以它满足不了现在的需求，但后发现还有个很</div> </li> <li><a href="/article/3280.htm" title="CSS规范整理（摘自懒人图库）" target="_blank">CSS规范整理（摘自懒人图库）</a> <span class="text-muted">a409435341</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a> <div> 刚没事闲着在网上瞎逛，找了一篇CSS规范整理，粗略看了一下后还蛮有一定的道理，并自问是否有这样的规范，这也是初入前端开发的人一个很好的规范吧。一、文件规范 1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：基本样式库 /css/core </div> </li> <li><a href="/article/3407.htm" title="C++动态链接库创建与使用" target="_blank">C++动态链接库创建与使用</a> <span class="text-muted">你不认识的休道人</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/dll/1.htm">dll</a> <div>一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked"，完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls</div> </li> <li><a href="/article/3534.htm" title="Android代码混淆之ProGuard" target="_blank">Android代码混淆之ProGuard</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/ProGuard/1.htm">ProGuard</a> <div>Android应用的Java代码，通过反编译apk文件（dex2jar、apktool）很容易得到源代码，所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器（obfuscation）。ADT r8开始它被默认集成到了Android SDK中。官网： http://proguard.sourceforge.net/</div> </li> <li><a href="/article/3661.htm" title="程序员在编程中遇到的奇葩弱智问题" target="_blank">程序员在编程中遇到的奇葩弱智问题</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>　　现在收集一下：　　排名不分先后，按照发言顺序来的。 1、Jquery插件一个通用函数一直报错，尤其是很明显是存在的函数，很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化：不在同一个文件中调试。这个很可怕，我们很多时候会备份好几个项目，改完发现改错了。有个群友说的好：在汤匙</div> </li> <li><a href="/article/3788.htm" title="解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported" target="_blank">解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/dependency/1.htm">dependency</a> <div>解决办法：在plugins之前添加如下pluginManagement，二者前后顺序如下： [html] view plain copy <build> <pluginManagement</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>

前端查漏补缺 全知识点合集（更新中9.3）

HTML

浏览器的运行机制：

HTML5 drag api

CSS

为何img、input等内联元素可以设置宽、高

前端查漏补缺全知识点合集（更新中9.3）