| 01 02 03 04 05 06 07 08 09 |
="UTF-8">
Title<</code><code>/</code><code>title></code></p> <p><code> </code><code><style></code></p> <p><code> </code><code>p{</code></p> <p><code> </code><code>background</code><code>-</code><code>color: </code><code>#2b99ff;</code></p> <p><code> </code><code>}</code></p> <p><code> </code><code><</code><code>/</code><code>style></code></p> <p><code><</code><code>/</code><code>head></code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle4">2.3、链接式</h4>
<p>将一个.css文件引入到HTML文件中（常用）</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> </td>
<td> <p><code><link href</code><code>=</code><code>"mystyle.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code><code>/</code><code>></code></p> <p><code><link href</code><code>=</code><code>"test1.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle5">2.4、导入式</h4>
<p>将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> </td>
<td> <p><code><style </code><code>type</code><code>=</code><code>"text/css"</code><code>></code></p> <p><code> </code> </p> <p><code> </code><code>@import</code><code>"mystyle.css"</code><code>; 此处要注意.css文件的路径</code></p> <p><code> </code> </p> <p><code><</code><code>/</code><code>style> </code></p> </td>
</tr>
</tbody>
</table>
<p>特别注意：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。</p>
<h3 id="blogTitle6">三、css选择器(selector)</h3>
<p>“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素</p>
<h4 id="blogTitle7">3.1、基础选择器</h4>
<p>1）* 通用元素选择器，匹配任何元素</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> </td>
<td> <p><code>*</code><code>{</code></p> <p><code> </code><code>color: red;</code></p> <p><code>}</code></p> </td>
</tr>
</tbody>
</table>
<p>2）标签选择器，匹配所有使用某标签的元素</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> </td>
<td> <p><code>p { color:green; } </code><code>#匹配p标签</code></p> </td>
</tr>
</tbody>
</table>
<p>3）id选择器</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td>
<td> <p><code>#littleP{</code></p> <p><code> </code><code>background</code><code>-</code><code>color: blue;</code></p> <p><code>}</code></p> <p></p> <p><code>......</code></p> <p><code><p </code><code>id</code><code>=</code><code>"littleP"</code><code>>pppp<</code><code>/</code><code>p></code></p> </td>
</tr>
</tbody>
</table>
<p>4）class选择器</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> </td>
<td> <p><code>.info和E.info: </code><code>class</code><code>选择器，匹配所有</code><code>class</code><code>属性中包含info的元素 </code></p> <p><code>.info { background:</code><code>#ff0; } </code></p> <p><code>p.info { background:blue; }</code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle8">3.2、组合选择器</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> </td>
<td> <p><code>E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:</code><code>#f00; }</code></p> <p><code>E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font</code><code>-</code><code>weight:bold;</code></p> <p><code>E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:</code><code>#f00; }</code></p> <p><code>E </code><code>+</code> <code>F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div </code><code>+</code> <code>p { color:</code><code>#f00; }</code></p> </td>
</tr>
</tbody>
</table>
<p>注意<strong>嵌套规则</strong>：</p>
<ol>
<li>块级元素可以包含内联元素或<strong>某些</strong>块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。</li>
<li><strong>有几个特殊的块级元素只能包含内联元素，不能包含块级元素</strong>。如h1,h2,h3,h4,h5,h6,p,dt</li>
<li>li内可以包含div</li>
<li>块级元素与块级元素并列、内联元素与内联元素并列。</li>
</ol>
<p>示例一：</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> </td>
<td> <p><code>#littleP,div.cuihua{ #匹配id为littleP，或者标签为div且class为cuihua的标签</code></p> <p><code> </code><code>color: chartreuse;</code></p> <p><code>}</code></p> <p></p> <p><code>#++++++++++++++++++++++++++++</code></p> <p><code>#匹配</code></p> <p><code><p </code><code>id</code><code>=</code><code>"littleP"</code><code>>pppp<</code><code>/</code><code>p></code></p> <p><code><div </code><code>class</code><code>=</code><code>"cuihua"</code><code>>div<</code><code>/</code><code>div></code></p> </td>
</tr>
</tbody>
</table>
<p>参考地址：</p>
<p>JavaScript：</p>
<p> </p>
<h4 id="blogTitle9">3.3、属性选择器</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td>
<td> <p><code>E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:</code><code>#f00; }</code></p> <p><code>E[att</code><code>=</code><code>val] 匹配所有att属性等于“val”的E元素 div[</code><code>class</code><code>=</code><code>”error”] { color:</code><code>#f00; }</code></p> <p><code>E[att~</code><code>=</code><code>val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[</code><code>class</code><code>~</code><code>=</code><code>”name”] { color:</code><code>#f00; }</code></p> <p><code>E[attr^</code><code>=</code><code>val] 匹配属性值以指定值开头的每个元素 div[</code><code>class</code><code>^</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> <p><code>E[attr$</code><code>=</code><code>val] 匹配属性值以指定值结尾的每个元素 div[</code><code>class</code><code>$</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> <p><code>E[attr</code><code>*</code><code>=</code><code>val] 匹配属性值中包含指定值的每个元素 div[</code><code>class</code><code>*</code><code>=</code><code>"test"</code><code>]{background:</code><code>#ffff00;}</code></p> </td>
</tr>
</tbody>
</table>
<p>示例：</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> </td>
<td> <p><code>[alex]{ </code><code>#匹配属性为alex</code></p> <p><code> </code><code>color: red;</code></p> <p><code>}</code></p> <p></p> <p><code>p[alex</code><code>=</code><code>"dasb"</code><code>]{ </code><code>#匹配标签为p标签，且属性值为alex="dasb"</code></p> <p><code> </code><code>color: blue;</code></p> <p><code> </code><code>font</code><code>-</code><code>family: </code><code>"Times New Roman"</code><code>;</code></p> <p><code> </code><code>font</code><code>-</code><code>size: </code><code>30px</code><code>;</code></p> <p><code>}</code></p> <p></p> <p><code>[alex</code><code>*</code><code>=</code><code>"b"</code><code>]{ </code><code>#匹配属性为alex，且值只要含有b的标签</code></p> <p><code> </code><code>color: teal;</code></p> <p><code>}</code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle10">3.4、伪类(Pseudo-classes)</h4>
<p>CSS伪类是用来给选择器添加一些特殊效果。</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> </td>
<td> <p><code>a:link </code><code>#（没有接触过的链接）,用于定义了链接的常规状态。</code></p> <p><code>a:hover </code><code>#（鼠标放在链接上的状态）,用于产生视觉效果。</code></p> <p><code>a:visited </code><code>#（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。</code></p> <p><code>a:active </code><code>#（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。</code></p> <p></p> <p><code>#伪类选择器 : 伪类指的是标签的不同状态:</code></p> <p><code>a </code><code>=</code><code>=</code><code>> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态</code></p> <p></p> <p><code>a:link {color: </code><code>#FF0000} /* 未访问的链接 */</code></p> <p><code>a:visited {color: </code><code>#00FF00} /* 已访问的链接 */</code></p> <p><code>a:hover {color: </code><code>#FF00FF} /* 鼠标移动到链接上 */</code></p> <p><code>a:active {color: </code><code>#0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }</code></p> </td>
</tr>
</tbody>
</table>
<p>示例：</p>
<p>+ View Code</p>
<p><strong>before after</strong>伪类 ：</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> </td>
<td> <p><code>:before p:before 在每个<p>元素之前插入内容</code></p> <p><code>:after p:after 在每个<p>元素之后插入内容</code></p> <p></p> <p><code>p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:</code><code>"hello"</code><code>;color:red}</code></p> <p><code>p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:</code><code>"hello"</code><code>；color:red}</code></p> </td>
</tr>
</tbody>
</table>
<h3 id="blogTitle11">四、css优先级和继承</h3>
<h4 id="blogTitle12">4.1、css优先级</h4>
<p>所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td>
<td> <p><code>#样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：</code></p> <p><code>1</code> <code>内联样式表的权值最高 style</code><code>=</code><code>""</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>-</code><code>1000</code></p> <p><code>2</code> <code>统计选择符中的</code><code>ID</code><code>属性个数。 </code><code>#id －－－－－－－－－－－－－100</code></p> <p><code>3</code> <code>统计选择符中的CLASS属性个数。 .</code><code>class</code> <code>－－－－－－－－－－－－－</code><code>10</code></p> <p><code>4</code> <code>统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－</code><code>-</code><code>1</code></p> <p></p> <p><code>#按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。</code></p> </td>
</tr>
</tbody>
</table>
<p>优先级示例：</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> </td>
<td> <p><code><!DOCTYPE html></code></p> <p><code><html lang</code><code>=</code><code>"en"</code><code>></code></p> <p><code><head></code></p> <p><code> </code><code><meta charset</code><code>=</code><code>"UTF-8"</code><code>></code></p> <p><code> </code><code><title>Title<</code><code>/</code><code>title></code></p> <p><code> </code><code><style></code></p> <p><code> </code><code>#p{</code></p> <p><code> </code><code>color: rebeccapurple;</code></p> <p><code> </code><code>}</code></p> <p><code> </code><code>.p{</code></p> <p><code> </code><code>color: </code><code>#2459a2;</code></p> <p><code> </code><code>}</code></p> <p><code> </code><code>p{</code></p> <p><code> </code><code>color: yellow;</code></p> <p><code> </code><code>}</code></p> <p><code> </code><code><</code><code>/</code><code>style></code></p> <p><code><</code><code>/</code><code>head></code></p> <p><code><body></code></p> <p><code><p </code><code>id</code><code>=</code><code>"p"</code> <code>class</code><code>=</code><code>"p"</code> <code>style</code><code>=</code><code>"color: deeppink"</code><code>>hello yuan<</code><code>/</code><code>p> </code><code>#优先级最高</code></p> <p><code><!</code><code>-</code><code>-</code><code><p </code><code>id</code><code>=</code><code>"p"</code> <code>class</code><code>=</code><code>"p"</code><code>>hello yuan<</code><code>/</code><code>p></code><code>-</code><code>-</code><code>></code></p> <p><code><</code><code>/</code><code>body></code></p> <p><code><</code><code>/</code><code>html></code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle13">4.2、css继承</h4>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> </td>
<td> <p><code>body{color:red;} <p>helloyuan<</code><code>/</code><code>p></code></p> </td>
</tr>
</tbody>
</table>
<p>这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0，发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。 此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等</p>
<h4 id="blogTitle14">4.3、附加说明</h4>
<p>1、文内的样式优先级为1000，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。<br> 2、有!important声明的规则高于一切。<br> 3、如果!important声明冲突，则比较优先权。<br> 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。<br> 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。</p>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> </td>
<td> <p><code>#div1 .div3 {</code></p> <p><code> </code><code>color: chartreuse!important; </code><code>#优先级最高</code></p> <p><code>}</code></p> </td>
</tr>
</tbody>
</table>
<h3 id="blogTitle15">五、css常用属性</h3>
<h4 id="blogTitle16">5.1、颜色属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td>
<td> <p><code><div style</code><code>=</code><code>"color:blueviolet"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p></p> <p><code><div style</code><code>=</code><code>"color:#ffee33"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p><code> </code> </p> <p><code><div style</code><code>=</code><code>"color:rgb(255,0,0)"</code><code>>ppppp<</code><code>/</code><code>div></code></p> <p><code> </code> </p> <p><code><div style</code><code>=</code><code>"color:rgba(255,0,0,0.5)"</code><code>>ppppp<</code><code>/</code><code>div> </code><code>#增加了透明度</code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle17">5.2、字体属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> </td>
<td> <p><code>font</code><code>-</code><code>size: </code><code>20px</code><code>/</code><code>50</code><code>%</code><code>/</code><code>larger </code><code>#字体大小</code></p> <p><code> </code> </p> <p><code>font</code><code>-</code><code>family:</code><code>'Lucida Bright'</code> <code>#字体格式</code></p> <p><code> </code> </p> <p><code>font</code><code>-</code><code>weight: lighter</code><code>/</code><code>bold</code><code>/</code><code>border</code><code>/</code> <code>#字体粗细</code></p> <p><code> </code> </p> <p><code><h1 style</code><code>=</code><code>"font-style: oblique"</code><code>>老男孩<</code><code>/</code><code>h1></code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle18">5.3、背景属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> </td>
<td> <p><code>background</code><code>-</code><code>color: cornflowerblue</code></p> <p><code>background</code><code>-</code><code>image: url(</code><code>'1.jpg'</code><code>);</code></p> <p><code>background</code><code>-</code><code>repeat: no</code><code>-</code><code>repeat;(repeat:平铺满)</code></p> <p><code>background</code><code>-</code><code>position: right top（</code><code>20px</code> <code>20px</code><code>）;(横向：left center right)(纵向：top center bottom)</code></p> <p></p> <p></p> <p><code>#简写：</code></p> <p><code><body style</code><code>=</code><code>"background: 20px 20px no-repeat #ff4 url('1.jpg')"</code><code>></code></p> <p><code><div style</code><code>=</code><code>"width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"</code><code>></code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle19">5.4、文本属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> </td>
<td> <p><code>font</code><code>-</code><code>size: </code><code>10px</code><code>;</code></p> <p><code>text</code><code>-</code><code>align: center; </code><code>#横向排列</code></p> <p><code>line</code><code>-</code><code>height: </code><code>200px</code><code>; </code><code>#文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比</code></p> <p><code>vertical</code><code>-</code><code>align:－</code><code>4px</code> <code>#设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效</code></p> <p></p> <p><code>text</code><code>-</code><code>indent: </code><code>150px</code><code>; </code><code>#首行缩进</code></p> <p><code>letter</code><code>-</code><code>spacing: </code><code>10px</code><code>;</code></p> <p><code>word</code><code>-</code><code>spacing: </code><code>20px</code><code>;</code></p> <p><code>text</code><code>-</code><code>transform: capitalize; </code><code>#首字母大写</code></p> </td>
</tr>
</tbody>
</table>
<p>示例：</p>
<p>+ View Code</p>
<h4 id="blogTitle20">5.5、边框属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> </td>
<td> <p><code>border</code><code>-</code><code>style: solid;</code></p> <p><code>border</code><code>-</code><code>color: chartreuse;</code></p> <p><code>border</code><code>-</code><code>width: </code><code>20px</code><code>;</code></p> <p><code>#简写：border: 30px rebeccapurple solid;</code></p> </td>
</tr>
</tbody>
</table>
<p>示例：</p>
<p>+ View Code</p>
<h4 id="blogTitle21">5.6、列表属性</h4>
<table border="0">
<tbody>
<tr>
<td> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </td>
<td> <p><code>ol,ul{</code></p> <p><code> </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: circle;</code><code>*</code><code>/</code></p> <p><code> </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: square;</code><code>*</code><code>/</code></p> <p><code> </code><code>/</code><code>*</code><code>list</code><code>-</code><code>style: lower</code><code>-</code><code>latin;</code><code>*</code><code>/</code></p> <p><code> </code><code>list</code><code>-</code><code>style: none; </code><code>#去样式</code></p> <p><code>}</code></p> </td>
</tr>
</tbody>
</table>
<h4 id="blogTitle22">5.7、 display属性</h4>
<p>display属性有：none，block，inline，inline-block</p>
<p>display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决</p>
<p><strong>今天的分享就到此结束了，大家还有什么不懂的可以评论区下提问哈，如果我的文章对你有所帮助的话，可以点赞三联支持一下哈</strong></p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1713439454905053184"></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">
<!-- 文章页-右侧1 动态广告位 -->
<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>
<!-- 文章页-右侧2 动态广告位 -->
<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>
<!-- 文章页-右侧3 动态广告位 -->
<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">你可能感兴趣的:(软件测试,安全测试,自动化测试,前端,测试工具,集成测试,功能测试,软件测试,jmeter,自动化测试)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1882713699878236160.htm"
title="【前端】--- ES6下篇（带你深入了解ES6语法）" target="_blank">【前端】--- ES6下篇（带你深入了解ES6语法）</a>
<span class="text-muted">心.c</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>前言：ECMAScript是JavaScript的标准化版本，由ECMA国际组织制定。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字等。ES6是ECMAScript的第六个版本，于2015年发布，引入了许多重要的新特性，使JavaScript更加现代化。进制ES6中增加了二进制和八进制的写法：二进制使用前缀'0b'或'0B'，八进制使用前缀'0o'或'0O'二进制</div>
</li>
<li><a href="/article/1882711557171900416.htm"
title="java枚举转json" target="_blank">java枚举转json</a>
<span class="text-muted">软件老王</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>1、背景java后端的枚举类型，要展示到前端，提供给用户进行下拉选择，java后端需要封装enum为json字符串提供给前端，需要首先将枚举类型转为list，然后再转为json字符串。2、方案方案也很简单，使用EnumSet.allOf(TestEnum.class)，将数据获取到再塞到list中就可以了。代码如下：importcom.alibaba.fastjson.JSONObject;imp</div>
</li>
<li><a href="/article/1882710587939549184.htm"
title="多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括" target="_blank">多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括</a>
<span class="text-muted"></span>
<div>技术栈与工具前端技术栈UniApp框架：用于开发跨平台的移动应用。Vue.js：用于构建用户界面。微信小程序云函数：用于在微信小程序中实现后端逻辑。后端技术栈PHP：用于开发后端服务。MySQL：用于存储用户数据和陪玩人员信息。TP6框架：用于开发后端服务。开发工具HBuilderX：用于开发UniApp项目。微信开发者工具：用于开发微信小程序。适用行业陪玩行业：游戏陪玩领域国内已经很成熟。陪聊行</div>
</li>
<li><a href="/article/1882707015579529216.htm"
title="浅谈视频智能化的发展与应用" target="_blank">浅谈视频智能化的发展与应用</a>
<span class="text-muted">weixin_33692284</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%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a>
<div>视频监控发展到今天，大家对视频系统规模的快速发展是有目共睹的。近年来基于成熟的以太网技术，大规模数字化视频监控系统的建设变得非常简单，很多项目拥有成百上千个前端点位，达到上万个前端点位的超大规模监控系统也不少见。随着视频监控系统规模的增加，在图像质量越来越好的当下，能否让摄像机看懂正在发生的事件并提出告警，这正是近年来非常流行的智能化需求的由来。本文将对目前智能视频分析技术的发展做些简单的阐述。一</div>
</li>
<li><a href="/article/1882703479785451520.htm"
title="nginx闲谈" target="_blank">nginx闲谈</a>
<span class="text-muted">沉默monkey</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录介绍特点高并发轻量级模块化设计应用场景web服务器反向代理正向代理（类似机场）配置demo负载均衡缓存处理https与ssl/tlsapi网关介绍nginx高性能（同比tomcat性能高20%），轻量的weib服务器和反向代理服务器，能解决大量并发连接（C10K问题），高并发，高可靠，低内存消耗，支持多功能模块（如前端静态资源</div>
</li>
<li><a href="/article/1882701334310875136.htm"
title="制作动态菜单" target="_blank">制作动态菜单</a>
<span class="text-muted">大磊程序员(“hello world”)</span>
<a class="tag" taget="_blank" href="/search/Java%E5%90%8E%E7%AB%AF/1.htm">Java后端</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>动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para</div>
</li>
<li><a href="/article/1882694650184134656.htm"
title="Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目" target="_blank">Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目</a>
<span class="text-muted">Milk夜雨</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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/javascript/1.htm">javascript</a>
<div>单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包</div>
</li>
<li><a href="/article/1882684565487677440.htm"
title="Node.js的解释" target="_blank">Node.js的解释</a>
<span class="text-muted">web15085415935</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%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师</div>
</li>
<li><a href="/article/1882681663088029696.htm"
title="vue2在线生成二维码" target="_blank">vue2在线生成二维码</a>
<span class="text-muted">家里有只小肥猫</span>
<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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs</div>
</li>
<li><a href="/article/1882648882781941760.htm"
title="最受欢迎的WebAssembly Web开发框架：Blazor前端开发" target="_blank">最受欢迎的WebAssembly Web开发框架：Blazor前端开发</a>
<span class="text-muted">ScriptWELL</span>
<a class="tag" taget="_blank" href="/search/wasm/1.htm">wasm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>WebAssembly（简称Wasm）是一种用于在Web平台上运行高性能代码的二进制格式。它可以在现代Web浏览器中以原生速度执行，并为开发人员提供了使用其他编程语言编写Web应用程序的能力。在WebAssembly的推动下，出现了许多与其兼容的Web开发框架，其中最受欢迎的之一是Blazor。Blazor是一个由微软开发的Web开发框架，它允许开发人员使用C#语言编写前端Web应用程序。Blaz</div>
</li>
<li><a href="/article/1882642327231590400.htm"
title="【前端知识】简单易懂的vue前端页面元素权限控制" target="_blank">【前端知识】简单易懂的vue前端页面元素权限控制</a>
<span class="text-muted">问道飞鱼</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6/1.htm">权限控制</a>
<div>文章目录设计思路代码实现1.**权限数据管理**2.**权限判断方法**3.**动态控制元素**4.**路由权限控制**5.**无权限页面**总结相关文献在前端实现基于Vue的权限控制，通常需要结合后端返回的用户权限数据，动态控制页面元素的显示与隐藏、按钮的可点击状态等。以下是设计思路和代码实现：设计思路权限数据管理:从后端获取用户的权限数据（如角色、权限列表等），并存储在Vuex或组件的data</div>
</li>
<li><a href="/article/1882634509904572416.htm"
title="分布式微服务搭建" target="_blank">分布式微服务搭建</a>
<span class="text-muted">Xi-Tong</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a>
<div>分布式微服务架构搭建（举出一个项目搭建的例子，其他项目可参考本文档）基于Nginx作为web服务器、JDK作为Java运行环境、MySQL作为关系型数据库、Nacos作为服务发现和配置中心、Maven作为项目管理工具、Redis作为缓存和消息中间件（视具体需求而定）、Node.js与npm作为某些微服务（如前端服务或特定业务逻辑服务）的开发和依赖管理工具，可以搭建一个完整的分布式微服务架构项目。以</div>
</li>
<li><a href="/article/1882633250959060992.htm"
title="前端开发概述" target="_blank">前端开发概述</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>我们前后端工程师都一样,最终目的都是开发和维护软件,以给用户以更好的服务我们可以将软件分为以下几类:系统软件:WindowsLinuxmacOS应用软件:officeqq游戏软件:王者荣耀绝地求生我们的软件通常由服务器端和客户端组成客户端:通过客户端来使用软件,我们通常使用电脑时能看到的也就是客户端的软件,服务器端我们平常在使用过程中是无法看到的客户端的形式:文字客户端:一种古老的方式,通过命令行</div>
</li>
<li><a href="/article/1882625556692922368.htm"
title="React 前端框架开发详细操作" target="_blank">React 前端框架开发详细操作</a>
<span class="text-muted">编码小袁</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>一、引言在当今的web开发领域，React作为一款流行的前端框架，以其高效的组件化开发模式、虚拟DOM带来的高性能以及灵活的生态系统，受到了广大开发者的青睐。无论是开发小型的单页应用还是大型的企业级项目，React都能展现出强大的能力。本文将详细介绍React前端框架的操作使用方法，帮助开发者快速上手并深入理解React开发。二、环境搭建在开始使用React进行开发之前，需要先搭建好开发环境。以下</div>
</li>
<li><a href="/article/1882622403645861888.htm"
title="React 前端框架简介与应用" target="_blank">React 前端框架简介与应用</a>
<span class="text-muted">仰望丨苍穹</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%EF%BC%9A%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">前端：技巧与实践</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>React是一个用于构建用户界面的JavaScript库，在前端开发中被广泛应用。1：主要特点1.1：组件化开发React提倡以组件的方式构建用户界面。每个组件都具有独立的功能和逻辑，可以重复使用和组合，提高了开发效率和代码的可维护性。例如，一个网页中的导航栏、侧边栏、内容区域等都可以分别构建为不同的组件。1.2：虚拟DOMReact引入了虚拟DOM（VirtualDOM）的概念。当数据发生变化时</div>
</li>
<li><a href="/article/1882622151463333888.htm"
title="React 前端框架：简介与核心概念" target="_blank">React 前端框架：简介与核心概念</a>
<span class="text-muted">一ge科研小菜鸡</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>React是由Facebook开发和维护的一个用于构建用户界面的JavaScript库。它专注于通过组件化的方式构建单页应用（SPA），允许开发者高效地创建复杂、交互性强的界面。React的核心特点是其虚拟DOM、组件化开发和声明式编程，使其成为目前最流行的前端开发框架之一。1.React的优势1.1组件化开发React的核心是组件（Component），它允许开发者将界面划分为多个独立的、可重用</div>
</li>
<li><a href="/article/1882616980394012672.htm"
title="【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js" target="_blank">【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js</a>
<span class="text-muted">RS迷途小书童</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8E%A2%E7%B4%A2%E4%B9%8B%E6%97%85/1.htm">前端开发探索之旅</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和</div>
</li>
<li><a href="/article/1882614456085704704.htm"
title="ubuntu调用图形化网络测试工具" target="_blank">ubuntu调用图形化网络测试工具</a>
<span class="text-muted">hunter206206</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a>
<div>在Ubuntu中，除了命令行工具外，还有一些图形化的网络测试工具可以帮助你更直观地测试和分析网络性能。以下是几款常用的图形化网络测试工具及其使用方法：1.gnome-nettoolgnome-nettool是一个简单的图形化网络工具集，包含ping、traceroute、端口扫描等功能。安装：sudoaptupdatesudoaptinstallgnome-nettool使用：在应用程序菜单中搜索</div>
</li>
<li><a href="/article/1882612565192798208.htm"
title="前端路由的hash模式和history模式" target="_blank">前端路由的hash模式和history模式</a>
<span class="text-muted">bsr1983</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/hash/1.htm">hash</a><a class="tag" taget="_blank" href="/search/history/1.htm">history</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F/1.htm">路由模式</a>
<div>hash模式和history模式是前端路由实现的两种常见方式，分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。1.浏览器实现1.1Hash模式•核心机制：•基于浏览器的location.hash属性和hashchange事件。•#后的内容（如#home）被称为“fragmentidentifier”，不会被浏览器发送到服务器，因此只在前端有效。</div>
</li>
<li><a href="/article/1882608532386279424.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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E6%B5%81/1.htm">文件流</a>
<div>前端上传文件后，文件流暂存在数组中。保存时，接口传参多个文件流一、前端暂存文件流//上传附件，attachFiles前端暂存文件流为一个数组httpSuggestionRequest:function(param){console.log(param,'param')if(this.attachFiles.length===10){this.$message.error('上限10个文件！');r</div>
</li>
<li><a href="/article/1882607395406934016.htm"
title="前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。" target="_blank">前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。</a>
<span class="text-muted">21级应用技术UI3班何珍锋</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>一、Web1.0时代1990年代末到2000年代初，Web1.0时代是Web发展的初期阶段，这个阶段的Web界面设计以简单的文本和图像为主，用户的互动性和用户体验都很低。在这个时代，浏览器的前端技术主要是基于HTML和CSS的，HTML指的是超文本标记语言，而CSS则指的是层叠样式表。由于这些技术的简单性，前端开发者往往需要手动编写HTML和CSS代码，并进行基本的样式设计。二、Web2.0时代随</div>
</li>
<li><a href="/article/1882606636225327104.htm"
title="探索React前端框架：JavaScript技巧与最佳实践" target="_blank">探索React前端框架：JavaScript技巧与最佳实践</a>
<span class="text-muted">自由翱翔碧海蓝</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>React是一个广泛使用的JavaScript前端框架，它提供了一种组件化的开发模式，使得构建交互式用户界面变得更加简单和高效。在本文中，我们将深入探讨React框架的一些关键技巧和最佳实践，同时提供相应的源代码示例。合理使用函数组件和类组件React提供了两种主要的组件类型：函数组件和类组件。函数组件是纯粹的JavaScript函数，而类组件则是通过继承React.Component类创建的。在</div>
</li>
<li><a href="/article/1882602855412592640.htm"
title="【分布式日志篇】从工具选型到实战部署：全面解析日志采集与管理路径" target="_blank">【分布式日志篇】从工具选型到实战部署：全面解析日志采集与管理路径</a>
<span class="text-muted">网罗开发</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98/1.htm">实战</a><a class="tag" taget="_blank" href="/search/java%E9%9B%86/1.htm">java集</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a>
<div>网罗开发（小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO</div>
</li>
<li><a href="/article/1882596928332558336.htm"
title="前端实现PDf文件下载功能" target="_blank">前端实现PDf文件下载功能</a>
<span class="text-muted">南风贰拾捌</span>
<a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E7%82%B9%E6%95%B4%E7%90%86/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/pdf/1.htm">pdf</a>
<div>前言：pc端需要实现生成PDF并下载的功能。方法一：侧重点在前端，后端只需要配合把PDF所需要的数据给到前端即可。准备工作：需要npminstall这两个插件，html2Canvas，JsPDF。注：上面给的不是npm的命令，不可以直接当做npm命令使用//引入importhtml2Canvasfrom'html2canvas'importJsPDFfrom'jspdf'//也可以在main.js</div>
</li>
<li><a href="/article/1882595413127655424.htm"
title="swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果..." target="_blank">swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果...</a>
<span class="text-muted">weixin_39726971</span>
<a class="tag" taget="_blank" href="/search/swiper%E7%A7%BB%E5%85%A5%E6%9A%82%E5%81%9C/1.htm">swiper移入暂停</a>
<div>正常操作，正常分析，大家好，我是D1n910。文章关键词：技术前端JQuery入门滚动文章前言：公司要求做官网呀呀呀，其中有一部分设计是要求我们最亲爱的品牌商的LOGO能够在底部无缝轮播，鼠标移上去就停下来。效果如下：一、使用插件介绍1、使用的框架是JQuery，因为讲究快速、兼容、展示，所以没有用vue、react之类的看起来高大上的框架。2、使用的是优秀的轮播插件Swiper3.0版(实际上S</div>
</li>
<li><a href="/article/1882594781478055936.htm"
title="后端传入文件流，前台pdf展示（pc端和手机端）" target="_blank">后端传入文件流，前台pdf展示（pc端和手机端）</a>
<span class="text-muted">w001yy</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>近日项目用到的用文件流传递pdf文件的情况，后端将数据流传到前端，需要前端进行处理然后再预览下载，总结了一下几点方法，1.PC端一开始想引用pdf.js插件进行实现，但是总是白屏，借鉴的文章是https://www.jianshu.com/p/242525315bf6，用了里面的方法测试了，但是一直是白屏，展示不出pdf，也没有看到错误提示，最后直接用window.open(url),其中url表</div>
</li>
<li><a href="/article/1882590110776619008.htm"
title="vue前端运行报错 Error: listen EACCES: permission denied 0.0.0.0:3100" target="_blank">vue前端运行报错 Error: listen EACCES: permission denied 0.0.0.0:3100</a>
<span class="text-muted">qq_38204247</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>报错原因：端口占用解决方法：重启nat服务netstopwinnatnetstartwinnat</div>
</li>
<li><a href="/article/1882574590689996800.htm"
title="CSS语言的编程范式" target="_blank">CSS语言的编程范式</a>
<span class="text-muted">ByteBlossom666</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>CSS语言的编程范式引言随着互联网的发展，网络应用和网站的数量不断增加，前端开发的复杂性也在日益增加。在前端开发中，CSS（层叠样式表）作为一种描述文档外观的语言，扮演着至关重要的角色。虽然CSS语言的设计初心是为HTML文档提供样式和布局，但在实际使用中，它的表达能力与编程范式的结合，使得我们能够以更加高效和灵活的方式来构建用户界面。本文将深入探讨CSS语言的编程范式，分析其基本概念、特点、应用</div>
</li>
<li><a href="/article/1882565640871538688.htm"
title="【前端js】 indexedDB Nosql的使用方法" target="_blank">【前端js】 indexedDB Nosql的使用方法</a>
<span class="text-muted">Loong_DQX</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a><a class="tag" taget="_blank" href="/search/indexedDB/1.htm">indexedDB</a>
<div>一、背景Redis的数据存储位置是在服务器内存中，它的目的是是获取数据更快；indexedDB是在客户端的本地存储中，它想要解决的问题是存储更多的数据，相较于localStorage、sessionStorage。这篇文章想讲的是indexedDB，用于将网页中所要用到的数据存储在本地中，使用索引实现对数据的高性能搜索。二、indexedDB数据库2.1indexedDB的特点非关系型数据库：数据</div>
</li>
<li><a href="/article/1882556809483448320.htm"
title="怎么测试4g5g信号" target="_blank">怎么测试4g5g信号</a>
<span class="text-muted">network_tester</span>
<a class="tag" taget="_blank" href="/search/5G%E6%B5%8B%E8%AF%95/1.htm">5G测试</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/5G/1.htm">5G</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E5%8F%B7%E5%A4%84%E7%90%86/1.htm">信号处理</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E4%B8%8E%E9%80%9A%E4%BF%A1/1.htm">信息与通信</a>
<div>测试4G和5G信号可以通过以下几种方法进行：一、使用手机自带功能测试信号栏查看：在大多数手机上，信号栏通常以格子的形式显示信号强度，有时也会显示信号强度的具体数值。一般而言，满格代表信号强度很好，而少于两格则表示信号较弱。工程模式查看：打开手机拨号界面，输入特定代码（不同手机型号的代码可能不同）进入工程模式。找到信号信息或网络信息选项，即可查看信号强度数值。例如，对于iPhone手机，可以在拨号盘</div>
</li>
<li><a href="/article/27.htm"
title="rust的指针作为函数返回值是直接传递，还是先销毁后创建？" target="_blank">rust的指针作为函数返回值是直接传递，还是先销毁后创建？</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%94%E5%9B%9E%E5%80%BC/1.htm">返回值</a>
<div> 这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。
fn main() {
let mut a = 34;
println!("a's addr:{:p}", &a);
let p = &mut a;
println!("p's addr:{:p}", &a</div>
</li>
<li><a href="/article/154.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%95%B0%E6%8D%AE%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">数据的初始化</a>
<div>
1.使用构造器确保数据初始化
/*
*在ReckInitDemo类中创建Reck的对象
*/
public class ReckInitDemo {
public static void main(String[] args) {
//创建Reck对象
new Reck();
}
}</div>
</li>
<li><a href="/article/281.htm"
title="[航天与宇宙]为什么发射和回收航天器有档期" target="_blank">[航天与宇宙]为什么发射和回收航天器有档期</a>
<span class="text-muted">comsci</span>
<div>
地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...
所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行
&</div>
</li>
<li><a href="/article/408.htm"
title="linux下批量替换文件内容" target="_blank">linux下批量替换文件内容</a>
<span class="text-muted">商人shang</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a>
<div>1、网络上现成的资料
格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径`
linux sed 批量替换多个文件中的字符串
sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir`
例如：替换/home下所有文件中的www.admi</div>
</li>
<li><a href="/article/535.htm"
title="网页在线天气预报" target="_blank">网页在线天气预报</a>
<span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5/1.htm">天气预报</a>
<div>网页在线调用天气预报
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit</div>
</li>
<li><a href="/article/662.htm"
title="SpringMVC和Struts2比较" target="_blank">SpringMVC和Struts2比较</a>
<span class="text-muted">杨白白</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
<div>1. 入口
spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。
参见：http://blog.csdn.net/zs15932616453/article/details/8832343
2</div>
</li>
<li><a href="/article/789.htm"
title="refuse copy, lazy girl!" target="_blank">refuse copy, lazy girl!</a>
<span class="text-muted">小桔子</span>
<a class="tag" taget="_blank" href="/search/copy/1.htm">copy</a>
<div> 妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到：
1.那是我自己觉得写不出的高度
2.如果直接拿来用，很快就能解决问题
3.然后就是抄咩~~
4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！
</div>
</li>
<li><a href="/article/916.htm"
title="apache与php整合" target="_blank">apache与php整合</a>
<span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/php+apache+web/1.htm">php apache web</a>
<div>一 apache web服务器
1 apeche web服务器的安装
1)下载Apache web服务器
2)配置域名(如果需要使用要在DNS上注册)
3)测试安装访问http://localhost/验证是否安装成功
2 apache管理
1)service.msc进行图形化管理
2)命令管理，配</div>
</li>
<li><a href="/article/1043.htm"
title="Maven常用内置变量" target="_blank">Maven常用内置变量</a>
<span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>Built-in properties
${basedir} represents the directory containing pom.xml
${version} equivalent to ${project.version} (deprecated: ${pom.version})
Pom/Project properties
Al</div>
</li>
<li><a href="/article/1170.htm"
title="java的类和对象" target="_blank">java的类和对象</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E7%B1%BB+%E5%AF%B9%E8%B1%A1/1.htm">JAVA面向对象 类 对象</a>
<div>java中的类：
java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决
java使用 class 类名 来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的
创建一个A类：
class A{
}
java中的类：将某两个事物有联系的属性包装在一个类中，再通</div>
</li>
<li><a href="/article/1297.htm"
title="JS控制页面输入框为只读" target="_blank">JS控制页面输入框为只读</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。
</div>
</li>
<li><a href="/article/1424.htm"
title="AngularJS与服务器交互" target="_blank">AngularJS与服务器交互</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%24http/1.htm">$http</a>
<div> 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange</div>
</li>
<li><a href="/article/1551.htm"
title="[Maven学习笔记八]Maven常用插件应用" target="_blank">[Maven学习笔记八]Maven常用插件应用</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>常用插件及其用法位于：http://maven.apache.org/plugins/
1. Jetty server plugin
2. Dependency copy plugin
3. Surefire Test plugin
4. Uber jar plugin
1. Jetty Pl</div>
</li>
<li><a href="/article/1678.htm"
title="【Hive六】Hive用户自定义函数(UDF)" target="_blank">【Hive六】Hive用户自定义函数(UDF)</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0/1.htm">自定义函数</a>
<div>1. 什么是Hive UDF
Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括：
文件格式：Text File，Sequence File
内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text
用户提供的 map/reduce 脚本：不管什么</div>
</li>
<li><a href="/article/1805.htm"
title="杀掉nginx进程后丢失nginx.pid，如何重新启动nginx" target="_blank">杀掉nginx进程后丢失nginx.pid，如何重新启动nginx</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E9%87%8D%E5%90%AF+pid%E4%B8%A2%E5%A4%B1/1.htm">nginx 重启 pid丢失</a>
<div>nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng</div>
</li>
<li><a href="/article/1932.htm"
title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a>
<span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a>
<div>随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。
但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。
一、加强体验舒适度
嗯，就是让用户更加爽更加爽的用你的产品。 </div>
</li>
<li><a href="/article/2059.htm"
title="Spring中JdbcDaoSupport的DataSource注入问题" target="_blank">Spring中JdbcDaoSupport的DataSource注入问题</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>
<div>参考以下两篇文章：
http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/
http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration
Sprin</div>
</li>
<li><a href="/article/2186.htm"
title="数据库连接池的工作原理" target="_blank">数据库连接池的工作原理</a>
<span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a>
<div> 随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对</div>
</li>
<li><a href="/article/2313.htm"
title="java 关键字" target="_blank">java 关键字</a>
<span class="text-muted">CrazyMizzz</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。
Java中的关键字按功能主要可以分为以下几类：
（1）访问修饰符
public,private,protected
p</div>
</li>
<li><a href="/article/2440.htm"
title="Hive中的排序语法" target="_blank">Hive中的排序语法</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/order+by/1.htm">order by</a><a class="tag" taget="_blank" href="/search/DISTRIBUTE+BY/1.htm">DISTRIBUTE BY</a><a class="tag" taget="_blank" href="/search/sort+by/1.htm">sort by</a>
<div>Hive中的排序语法 2014.06.22 ORDER BY
hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。
与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。</div>
</li>
<li><a href="/article/2567.htm"
title="单态设计模式" target="_blank">单态设计模式</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div> 单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。
<?phpclass Example{ // 保存类实例在此属性中 private static&</div>
</li>
<li><a href="/article/2694.htm"
title="svn locked" target="_blank">svn locked</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a>
<div>post-commit hook failed (exit code 1) with output:
svn: E155004: Working copy 'D:\xx\xxx' locked
svn: E200031: sqlite: attempt to write a readonly database
svn: E200031: sqlite: attempt to write a </div>
</li>
<li><a href="/article/2821.htm"
title=" ARM寄存器学习" target="_blank"> ARM寄存器学习</a>
<span class="text-muted">e200702084</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a>
<div>无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。
ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。
1、不分组寄存器（R0-R7）
不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是</div>
</li>
<li><a href="/article/2948.htm"
title="常用编码资料" target="_blank">常用编码资料</a>
<span class="text-muted">gengzg</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a>
<div> List<UserInfo> list=GetUserS.GetUserList(11);
String json=JSON.toJSONString(list);
HashMap<Object,Object> hs=new HashMap<Object, Object>();
for(int i=0;i<10;i++)
{
</div>
</li>
<li><a href="/article/3075.htm"
title="进程 vs. 线程" target="_blank">进程 vs. 线程</a>
<span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E7%A8%8B/1.htm">进程</a>
<div>我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。
首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。
如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。
如果用多线程实现</div>
</li>
<li><a href="/article/3202.htm"
title="Linux定时Job：crontab -e 与 /etc/crontab 的区别" target="_blank">Linux定时Job：crontab -e 与 /etc/crontab 的区别</a>
<span class="text-muted">Josh_Persistence</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a>
<div>一、linux中的crotab中的指定的时间只有5个部分：* * * * *
分别表示：分钟，小时，日，月，星期，具体说来：
第一段 代表分钟 0—59
第二段 代表小时 0—23
第三段 代表日期 1—31
第四段 代表月份 1—12
第五段 代表星期几，0代表星期日 0—6
如：
*/1 * * * * 每分钟执行一次。
* </div>
</li>
<li><a href="/article/3329.htm"
title="KMP算法详解" target="_blank">KMP算法详解</a>
<span class="text-muted">hm4123660</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</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%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/KMP/1.htm">KMP</a>
<div> 字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。
假设主串s="ababcabcacbab",模式串为t="</div>
</li>
<li><a href="/article/3456.htm"
title="枚举类型的单例模式" target="_blank">枚举类型的单例模式</a>
<span class="text-muted">zhb8015</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a>
<div>E.编写一个包含单个元素的枚举类型[极推荐]。代码如下：
public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*</div>
</li>
<li><a href="/article/3583.htm"
title="Kafka+Storm+HDFS" target="_blank">Kafka+Storm+HDFS</a>
<span class="text-muted">ssydxa219</span>
<a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a>
<div>cd /myhome/usr/stormbin/storm nimbus &bin/storm supervisor &bin/storm ui &Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk</div>
</li>
<li><a href="/article/3710.htm"
title="Java获取本地服务器的IP" target="_blank">Java获取本地服务器的IP</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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E6%9C%8D%E5%8A%A1%E5%99%A8ip%E5%9C%B0%E5%9D%80/1.htm">获取服务器ip地址</a>
<div>
System.out.println("getRequestURL:"+request.getRequestURL());
System.out.println("getLocalAddr:"+request.getLocalAddr());
System.out.println("getLocalPort:&quo</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.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</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>
|
