RioTian

Web开发初探（系统理解Web知识点）

一、Web开发介绍

我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。

写网页的代码是专门的语言，主要分为Hmtl 、 CSS 和 JavaScript, 被称为网页开发三剑客，分别作用如下：

Html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

主要负责编写页面架构，有点像建房子时，造的毛坯房。

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等

相当于给你的毛坯房做装修

JavaScript

网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

以上3个组件是做网站开发都必须掌握的技能，我们接下来依次体验下~吧

二、HTML

2.1 HTML简介



  
    
    路飞学城
  
  

    我的第一个标题
    我的第一个段落。

声明为 HTML5 文档
元素是 HTML 页面的根元素
标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
元素包含文档的元数据，如定义网页编码格式为 utf-8、关键词啥的
</code>元素里描述了文档的标题</li> <li><code><body></code>元素包含了可见的页面内容</li> <li><code><h1></code>元素定义一个大标题</li> <li><code><p></code>元素定义一个段落</li> </ul> <p><strong>注：</strong>在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p> <h3 id="22--什么是html">2.2 什么是HTML?</h3> <p>HTML 是用来描述网页的一种语言。</p> <ul> <li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li> <li>HTML 不是一种编程语言，而是一种<strong>标记</strong>语言</li> <li>标记语言是一套<strong>标记标签</strong> (markup tag)</li> <li>HTML 使用标记标签来<strong>描述</strong>网页</li> <li>HTML 文档包含了HTML <strong>标签</strong>及<strong>文本</strong>内容</li> <li>HTML文档也叫做 <strong>web 页面</strong></li> </ul> <h4 id="html-标签">HTML 标签</h4> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul> <li>HTML 标签是由<em>尖括号</em>包围的关键词，比如 </li> <li>HTML 标签通常是<strong>成对出现</strong>的，比如<code><b></code> 和 <code></b></code>,标签对中的第一个标签是开始标签，第二个标签是结束标签</li> </ul> <h3 id="23-html网页结构">2.3 HTML网页结构</h3> <p>下面是一个可视化的HTML页面结构：</p> <p><a href="http://img.e-com-net.com/image/info8/78d4a3adbdbf42bfb37d23093c410354.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/78d4a3adbdbf42bfb37d23093c410354.jpg" alt="Web开发初探（系统理解Web知识点）_第2张图片" width="650" height="314" style="border:1px solid black;"></a></p> <p>注意：只有 <body> 区域 (白色部分) 才会在浏览器中显示。</p> <h2 id="三、html常用元素入门">三、HTML常用元素入门</h2> <h3 id="31-html标题">3.1 HTML标题</h3> <p><a href="http://img.e-com-net.com/image/info8/6c3f3107066543f8b3b8531aebe21cb1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c3f3107066543f8b3b8531aebe21cb1.jpg" alt="Web开发初探（系统理解Web知识点）_第3张图片" width="650" height="366" style="border:1px solid black;"></a></p> <h3 id="32-段落">3.2 段落</h3> <p><a href="http://img.e-com-net.com/image/info8/909ffde1096b4c4c9b70c1d1413d7477.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/909ffde1096b4c4c9b70c1d1413d7477.jpg" alt="Web开发初探（系统理解Web知识点）_第4张图片" width="650" height="330" style="border:1px solid black;"></a></p> <h3 id="33-超链接">3.3 超链接</h3> <pre><code class="language-html"><body> <a href="https://www.luffycity.com">这是一个链接使用了 href 属性</a> </body> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/8da32d7f6fce49169119cacd28260405.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8da32d7f6fce49169119cacd28260405.jpg" alt="Web开发初探（系统理解Web知识点）_第5张图片" width="650" height="249" style="border:1px solid black;"></a></p> <pre><code class="language-html"><a href="https://www.luffycity.com" target="_blank" >访问路飞学城</a> </code></pre> <p><code>target="_blank"</code>会打开一个新窗口</p> <h3 id="34-显示图片">3.4 显示图片</h3> <pre><code class="language-html"><img src="black_girl.jpg" width="600" height="500" > </code></pre> <h3 id="35-html表格">3.5 HTML表格</h3> <p>想在页面上显示这种表格怎么做？</p> <table> <thead> <tr> <th style="text-align:left">First Name</th> <th style="text-align:left">Last Name</th> <th style="text-align:left">Points</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">Jill</td> <td style="text-align:left">Smith</td> <td style="text-align:left">50</td> </tr> <tr> <td style="text-align:left">Eve</td> <td style="text-align:left">Jackson</td> <td style="text-align:left">94</td> </tr> <tr> <td style="text-align:left">John</td> <td style="text-align:left">Doe</td> <td style="text-align:left">80</td> </tr> <tr> <td style="text-align:left">Adam</td> <td style="text-align:left">Johnson</td> <td style="text-align:left">67</td> </tr> </tbody> </table> <h4 id="先做个最简单的">先做个最简单的</h4> <pre><code class="language-html"><table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </code></pre> <p>输出</p> <p><a href="http://img.e-com-net.com/image/info8/c4c3b48ed16d48088b16917d15300759.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c4c3b48ed16d48088b16917d15300759.jpg" alt="" width="650" height="78"></a></p> <h4 id="表格的表头">表格的表头</h4> <p>表格的表头使用 <th> 标签进行定义。</p> <pre><code class="language-html"><table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </code></pre> <p>大多数浏览器会把表头显示为粗体居中的文本</p> <p><a href="http://img.e-com-net.com/image/info8/efa7e92bf86045e2b2a08614e627bf01.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/efa7e92bf86045e2b2a08614e627bf01.jpg" alt="" width="650" height="91"></a></p> <p>可以加上边距</p> <pre><code class="language-html"><table border="1" cellpadding="10"> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ae9a285ef54545ee8cf3aff5948e9000.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ae9a285ef54545ee8cf3aff5948e9000.jpg" alt="Web开发初探（系统理解Web知识点）_第6张图片" width="424" height="268" style="border:1px solid black;"></a></p> <h3 id="36-列表">3.6 列表</h3> <p>分为有序列表和无序列表</p> <h4 id="有序列表">有序列表</h4> <pre><code class="language-html"><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/5a3b3d59020d465fa6e4ef80f02a093e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a3b3d59020d465fa6e4ef80f02a093e.jpg" alt="Web开发初探（系统理解Web知识点）_第7张图片" width="362" height="340" style="border:1px solid black;"></a></p> <h4 id="无序列表">无序列表</h4> <pre><code class="language-html"><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/2b4cd52666fd47589cc0bee640bcd7c3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b4cd52666fd47589cc0bee640bcd7c3.jpg" alt="Web开发初探（系统理解Web知识点）_第8张图片" width="462" height="334" style="border:1px solid black;"></a></p> <h4 id="嵌套列表">嵌套列表</h4> <pre><code class="language-html"><ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c3ae261c489246288ddb4f9813c70b11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c3ae261c489246288ddb4f9813c70b11.jpg" alt="Web开发初探（系统理解Web知识点）_第9张图片" width="650" height="181" style="border:1px solid black;"></a></p> <h3 id="37-div区块元素">3.7 div区块元素</h3> <h4 id="html-区块元素">HTML 区块元素</h4> <p>大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。</p> <p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p> <p>实例: <h1>,<p>, <ul>, <table></p> <h4 id="html-内联元素">HTML 内联元素</h4> <p>内联元素在显示时通常不会以新行开始。</p> <p>实例: <b>, <td>, <a>, <img></p> <h4 id="html-div-元素">HTML <code><div></code> 元素</h4> <p>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。</p> <p><code><div></code> 元素没有特定的含义。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p> <p><code><div></code> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。</p> <h4 id="span-元素"><code><span></code> 元素</h4> <p>HTML <span> 元素是内联元素，可用作文本的容器</p> <p><span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p> <h3 id="38-css样式初识">3.8 CSS样式初识</h3> <p>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。</p> <p>CSS 可以通过以下方式添加到HTML中:</p> <ul> <li>内联样式- 在HTML元素中使用"style" <strong>属性</strong></li> <li>内部样式表 -在HTML文档头部 <head> 区域使用<style> <strong>元素</strong> 来包含CSS</li> <li>外部引用 - 使用外部 CSS <strong>文件</strong></li> </ul> <h4 id="381-内联样式">3.8.1 内联样式</h4> <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p> <pre><code class="language-html"><p style="color:blue;margin-left:20px;">这是一个段落。</p> </code></pre> <h5 id="设置背景颜色">设置背景颜色</h5> <pre><code class="language-html"><body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/074bb9e64c014372b26e68b8e1003430.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/074bb9e64c014372b26e68b8e1003430.jpg" alt="Web开发初探（系统理解Web知识点）_第10张图片" width="650" height="311" style="border:1px solid black;"></a></p> <h5 id="设置字体-字体颜色-，字体大小">设置字体, 字体颜色，字体大小</h5> <p>我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:</p> <pre><code class="language-html"><h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> </code></pre> <h4 id="382-内部样式表">3.8.2 内部样式表</h4> <p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:</p> <pre><code class="language-html"><head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> </code></pre> <p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</p> <p><a href="http://img.e-com-net.com/image/info8/0de731fc80af4b86a0e1a442b12bd25e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0de731fc80af4b86a0e1a442b12bd25e.jpg" alt="Web开发初探（系统理解Web知识点）_第11张图片" width="570" height="120" style="border:1px solid black;"></a></p> <p>选择器通常是您需要改变样式的 HTML 元素。</p> <p>每条声明由一个属性和一个值组成。</p> <p>属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开</p> <h4 id="383-外部样式表">3.8.3 外部样式表</h4> <p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p> <pre><code class="language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <h3 id="39-网页布局">3.9 网页布局</h3> <p>网页布局主要使用div</p> <pre><code class="language-html"><body> <div id="header" style="background: darkorange; height: 100px;text-align: center "> Menu </div> <div id="content" style="background: aliceblue; height: 600px"> <div id="left-menu" style="height: 100%; width: 15%; background: deepskyblue; float: left"> 菜单 <ol> <li>HMTL</li> <li>CSS</li> <li>Javascript</li> </ol> </div> <div id="content-panel" style="background: aqua; height: 95%; width: 85%;float: left"> <p>这里是真正写内容的地方。。。</p> </div> </div> <div style="background: greenyellow; height: 50px"> footer </div> </body> </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/ac6be8bf8a614b75a915ee31958c4a26.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ac6be8bf8a614b75a915ee31958c4a26.jpg" alt="Web开发初探（系统理解Web知识点）_第12张图片" width="650" height="415" style="border:1px solid black;"></a></p> <h3 id="310-html-表单">3.10 Html 表单</h3> <p>当你想收集用户数据，提交到后台服务器时，你就可以用html 表单元素</p> <p>表单元素分为文本框、下拉列表、单选、复选、按钮</p> <h4 id="用户注册示例">用户注册示例</h4> <pre><code class="language-html"><form action="baidu_url"> 姓名: <input type="text" name="name"> <br> 电话: <input type="number" name="phone"> <br> <button>注册</button> </form> </code></pre> <p>一点击按钮，<code><form>.....</form></code> 表单里的数据都会被提交到<code>action="baidu_url"</code> 这个地址</p> <h4 id="其它常用输入类型">其它常用输入类型</h4> <pre><code class="language-html"><body> <form action="baidu_url"> 姓名: <input type="text" name="name"> <br> 电话: <input type="number" name="phone"> <br> 姓别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <br> 爱好: <input type="checkbox" name="hobbie" value="girl">姑娘 <input type="checkbox" name="hobbie" value="潜水">潜水 <input type="checkbox" name="hobbie" value="Python">Python <br> 喜欢的姑娘类型：<br> <select name="gilr_type"> <option value="1">胸大貌美大长腿</option> <option value="2">气质小可爱</option> <option value="3">妖娆性感</option> <optgroup label="按区域"> <option value="4">欧美</option> <option value="5">日韩</option> <option value="6">河南开封</option> </optgroup> </select> <br> 个人简介: <br> <textarea name="intro" placeholder="输入不省于50字的个人介绍" rows="3" cols="50" ></textarea> <br> 输入密码：<input type="password" name="password"> <br> <button>注册</button> </form> </body> </code></pre> <p>输出效果</p> <p><a href="http://img.e-com-net.com/image/info8/6ca29be5234540e8a4a024fe17d0ceb6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ca29be5234540e8a4a024fe17d0ceb6.jpg" alt="Web开发初探（系统理解Web知识点）_第13张图片" width="650" height="425" style="border:1px solid black;"></a></p> <h4 id="fieldset-表单集合">Fieldset 表单集合</h4> <pre><code class="language-html"><form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/d08730e2a7244bc2a78d18932b6290dd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d08730e2a7244bc2a78d18932b6290dd.jpg" alt="Web开发初探（系统理解Web知识点）_第14张图片" width="650" height="184" style="border:1px solid black;"></a></p> <h2 id="四、css样式基础">四、CSS样式基础</h2> <h3 id="41-css-id--class-选择器">4.1 CSS id \ class 选择器</h3> <h4 id="id选择器">id选择器</h4> <p>id就像一个元素的身份证地址，可以在网页里，<strong>唯一代表某个元素</strong>，我们也可以通过这个id快速找到它对应的元素对象</p> <p><a href="http://img.e-com-net.com/image/info8/fdf3525eadde4526adfd3d3ef0fcba84.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fdf3525eadde4526adfd3d3ef0fcba84.jpg" alt="Web开发初探（系统理解Web知识点）_第15张图片" width="650" height="457" style="border:1px solid black;"></a></p> <p>输出</p> <p><a href="http://img.e-com-net.com/image/info8/7a5cf99e266f44ed9d690b305f5a4225.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a5cf99e266f44ed9d690b305f5a4225.jpg" alt="Web开发初探（系统理解Web知识点）_第16张图片" width="650" height="338" style="border:1px solid black;"></a></p> <h4 id="class-类选择器">class 类选择器</h4> <p>当你想给多个元素批量设置同样的一个样式的话，就可以使用类选择器</p> <p><a href="http://img.e-com-net.com/image/info8/7532ecdfc0e04135bc2e2e5c3b02d7b2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7532ecdfc0e04135bc2e2e5c3b02d7b2.jpg" alt="Web开发初探（系统理解Web知识点）_第17张图片" width="650" height="370" style="border:1px solid black;"></a></p> <p>输出</p> <p><a href="http://img.e-com-net.com/image/info8/dcbd39a5fa1b450b9ef5e76d78978c6a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dcbd39a5fa1b450b9ef5e76d78978c6a.jpg" alt="Web开发初探（系统理解Web知识点）_第18张图片" width="650" height="395" style="border:1px solid black;"></a></p> <h3 id="42-直接通过元素名设置样式">4.2 直接通过元素名设置样式</h3> <p>若你想给页面所有的<p> 或<input>标签加上同样的样式，可以直接通过元素名批量设置</p> <p><a href="http://img.e-com-net.com/image/info8/097ff73573d243aa99389195a2ede88e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/097ff73573d243aa99389195a2ede88e.jpg" alt="Web开发初探（系统理解Web知识点）_第19张图片" width="650" height="373" style="border:1px solid black;"></a></p> <p><strong>注意：id & class 选择器的样式优先级大于元素名选择器</strong></p> <h3 id="43-组合选择器">4.3 组合选择器</h3> <p>为了测试效果，先准备好3层div</p> <pre><code class="language-html"><div id="layer1"> <p>第1层</p> <div id="layer2"> <p>layer 2</p> <h2>layer 2 h2</h2> <div id="layer3"> <p>第3层</p> <h3>layer 3 h3</h3> </div> </div> </div> <p>我不在任何的div里</p> </code></pre> <p>设置好样式</p> <pre><code class="language-html"><head> <style type="text/css"> #layer1 { height: 500px; padding: 30px; border: 1px dashed blue; } #layer2 { height: 400px; padding: 30px; border: 1px dashed red; } #layer3 { height: 300px; padding: 30px; border: 1px dashed black; } </style> </head> </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/0e1bf5d3132742cc883c322fb3057c83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0e1bf5d3132742cc883c322fb3057c83.jpg" alt="Web开发初探（系统理解Web知识点）_第20张图片" width="650" height="532" style="border:1px solid black;"></a></p> <h4 id="431-后代选择器">4.3.1 后代选择器</h4> <p>给指定元素的所有指定后代，设置样式</p> <p>比如，我给上图第一层div下面所有的</p> <p>标签设置颜色</p> <pre><code class="language-html">#layer1 p { color: red; background: yellow; } </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/17dc252ea29044afa9ce0fbb2f0f5717.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/17dc252ea29044afa9ce0fbb2f0f5717.jpg" alt="Web开发初探（系统理解Web知识点）_第21张图片" width="650" height="489" style="border:1px solid black;"></a></p> <h4 id="432-子元素选择器">4.3.2 子元素选择器</h4> <p>又可称为儿子选择器，是指可给指定元素的下一层儿子元素设置格式，注意，只是儿子，孙子不管</p> <p>给<code>layer1</code>的div的儿子设置样式</p> <pre><code class="language-html">#layer1 > p { color: red; background: yellow; } </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ec69b1fcf3d944c8af95d545f106b8c8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ec69b1fcf3d944c8af95d545f106b8c8.jpg" alt="Web开发初探（系统理解Web知识点）_第22张图片" width="650" height="334" style="border:1px solid black;"></a></p> <h4 id="433-相邻兄弟选择器">4.3.3 相邻兄弟选择器</h4> <p>可选择紧接在另一元素后的元素，且二者有相同父元素。</p> <pre><code class="language-html">#layer2 > p+h2 { color: red; background: yellow; } </code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/980f04ab273c4f7fb2dc5d3c01cbebc8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/980f04ab273c4f7fb2dc5d3c01cbebc8.jpg" alt="Web开发初探（系统理解Web知识点）_第23张图片" width="650" height="430" style="border:1px solid black;"></a></p> <h4 id="434-多个元素组合">4.3.4 多个元素组合</h4> <p>可同时给不相干的多个元素设置同一个样式</p> <p>比如把整个页面所有的</p> <p> 和</p> <h3>标签同时设置样式<p></p> <pre><code class="language-html">p,h3 { color: red; background: yellow; } </code></pre> <p>效果</p> <a href="http://img.e-com-net.com/image/info8/8d1e00e7dcf642b9a00551faae3c1bcd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d1e00e7dcf642b9a00551faae3c1bcd.jpg" alt="Web开发初探（系统理解Web知识点）_第24张图片" width="650" height="472" style="border:1px solid black;"></a> </h3> <h3 id="44-盒子模型">4.4 盒子模型</h3> <p>所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。</p> <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p> <p>盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。</p> <p>下面的图片说明了盒子模型(Box Model)：</p> <p><a href="http://img.e-com-net.com/image/info8/5a0d0c6fa1634701a103ca2f869495aa.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a0d0c6fa1634701a103ca2f869495aa.gif" alt="Web开发初探（系统理解Web知识点）_第25张图片" width="536" height="289" style="border:1px solid black;"></a></p> <p>不同部分的说明：</p> <ul> <li><strong>Margin(外边距)</strong> - 清除边框外的区域，外边距是透明的。</li> <li><strong>Border(边框)</strong> - 围绕在内边距和内容外的边框。</li> <li><strong>Padding(内边距)</strong> - 清除内容周围的区域，内边距是透明的。</li> <li><strong>Content(内容)</strong> - 盒子的内容，显示文本和图像。</li> </ul> <p>为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。</p> <h4 id="元素的宽度和高度">元素的宽度和高度</h4> <p><img src="http://img.e-com-net.com/image/info8/9590305a2bf44a22869bcc55ab18997a.gif" alt="" width="15" height="15"><strong>重要:</strong> 当指定一个 CSS 元素的宽度和高度属性时，你只是设置<strong>内容区域的宽度和高度</strong>。要知道，完整大小的元素，你还必须添加内边距，边框和边距。</p> <p>下面的例子中的元素的总宽度为300px：</p> <pre><code class="language-html">div { width: 300px; border: 25px dashed yellow; padding: 25px; margin: 25px; } </code></pre> <pre><code class="language-html"><body> <h2>盒子模型演示</h2> <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p> <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div> </body> </code></pre> <p>效果</p> <a href="http://img.e-com-net.com/image/info8/85b291a169e14ed68a091889d1bbcfc8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/85b291a169e14ed68a091889d1bbcfc8.jpg" alt="Web开发初探（系统理解Web知识点）_第26张图片" width="650" height="366" style="border:1px solid black;"></a> <h3 id="45-常用css属性">4.5 常用CSS属性</h3> <p>css有很多属性，我们先只讲几个基本的</p> <p>更多的看这里：https://www.runoob.com/cssref/css-reference.html#box</p> <h4 id="451-background背景属性">4.5.1 background背景属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">background</td> <td style="text-align:left">复合属性。设置对象的背景特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-attachment</td> <td style="text-align:left">设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-color</td> <td style="text-align:left">设置或检索对象的背景颜色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-image</td> <td style="text-align:left">设置或检索对象的背景图像。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-position</td> <td style="text-align:left">设置或检索对象的背景图像位置。必须先指定background-image属性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-repeat</td> <td style="text-align:left">设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">background-clip</td> <td style="text-align:left">指定对象的背景图像向外裁剪的区域。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">background-origin</td> <td style="text-align:left">S设置或检索对象的背景图像计算background-position时的参考原点(位置)。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">background-size</td> <td style="text-align:left">检索或设置对象的背景图像的尺寸大小。</td> <td style="text-align:left">3</td> </tr> </tbody> </table> <h4 id="452-边框border-和轮廓outline属性">4.5.2 边框Border 和轮廓Outline属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">描述</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">border</td> <td style="text-align:left">复合属性。设置对象边框的特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-bottom</td> <td style="text-align:left">复合属性。设置对象底部边框的特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-bottom-color</td> <td style="text-align:left">设置或检索对象的底部边框颜色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-bottom-style</td> <td style="text-align:left">设置或检索对象的底部边框样式。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-bottom-width</td> <td style="text-align:left">设置或检索对象的底部边框宽度。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-color</td> <td style="text-align:left">置或检索对象的边框颜色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-left</td> <td style="text-align:left">复合属性。设置对象左边边框的特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-left-color</td> <td style="text-align:left">设置或检索对象的左边边框颜色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-left-style</td> <td style="text-align:left">设置或检索对象的左边边框样式。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-left-width</td> <td style="text-align:left">设置或检索对象的左边边框宽度。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-right</td> <td style="text-align:left">复合属性。设置对象右边边框的特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-right-color</td> <td style="text-align:left">设置或检索对象的右边边框颜色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-right-style</td> <td style="text-align:left">设置或检索对象的右边边框样式。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-right-width</td> <td style="text-align:left">设置或检索对象的右边边框宽度。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-style</td> <td style="text-align:left">设置或检索对象的边框样式。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-top</td> <td style="text-align:left">复合属性。设置对象顶部边框的特性。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-top-color</td> <td style="text-align:left">设置或检索对象的顶部边框颜色</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-top-style</td> <td style="text-align:left">设置或检索对象的顶部边框样式。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-top-width</td> <td style="text-align:left">设置或检索对象的顶部边框宽度。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">border-width</td> <td style="text-align:left">设置或检索对象的边框宽度。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">outline</td> <td style="text-align:left">复合属性。设置或检索对象外的线条轮廓。</td> <td style="text-align:left">2</td> </tr> <tr> <td style="text-align:left">outline-color</td> <td style="text-align:left">设置或检索对象外的线条轮廓的颜色。</td> <td style="text-align:left">2</td> </tr> <tr> <td style="text-align:left">outline-style</td> <td style="text-align:left">设置或检索对象外的线条轮廓的样式。</td> <td style="text-align:left">2</td> </tr> <tr> <td style="text-align:left">outline-width</td> <td style="text-align:left">设置或检索对象外的线条轮廓的宽度。</td> <td style="text-align:left">2</td> </tr> <tr> <td style="text-align:left">border-bottom-left-radius</td> <td style="text-align:left">设置或检索对象的左下角圆角边框。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-bottom-right-radius</td> <td style="text-align:left">设置或检索对象的右下角圆角边框。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image</td> <td style="text-align:left">设置或检索对象的边框样式使用图像来填充。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image-outset</td> <td style="text-align:left">规定边框图像超过边框的量。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image-repeat</td> <td style="text-align:left">规定图像边框是否应该被重复（repeated）、拉伸（stretched）</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image-slice</td> <td style="text-align:left">规定图像边框的向内偏移。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image-source</td> <td style="text-align:left">规定要使用的图像，代替 border-style 属性中设置的边框样式。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-image-width</td> <td style="text-align:left">规定图像边框的宽度。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-radius</td> <td style="text-align:left">设置或检索对象使用圆角边框。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-top-left-radius</td> <td style="text-align:left">定义左上角边框的形状。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">border-top-right-radius</td> <td style="text-align:left">定义右上角边框的形状。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">box-decoration-break</td> <td style="text-align:left">规定行内元素被折行</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">box-shadow</td> <td style="text-align:left">向方框添加一个或多个阴影。</td> <td style="text-align:left">3</td> </tr> </tbody> </table> <h4 id="453-内边距padding属性">4.5.3 内边距Padding属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">说明</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">padding</td> <td style="text-align:left">在一个声明中设置所有填充属性</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">padding-bottom</td> <td style="text-align:left">设置元素的底填充</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">padding-left</td> <td style="text-align:left">设置元素的左填充</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">padding-right</td> <td style="text-align:left">设置元素的右填充</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">padding-top</td> <td style="text-align:left">设置元素的顶部填充</td> <td style="text-align:left">1</td> </tr> </tbody> </table> <h4 id="454-外边距margin-属性">4.5.4 外边距(Margin) 属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">说明</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">margin</td> <td style="text-align:left">在一个声明中设置所有外边距属性</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">margin-bottom</td> <td style="text-align:left">设置元素的下外边距</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">margin-left</td> <td style="text-align:left">设置元素的左外边距</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">margin-right</td> <td style="text-align:left">设置元素的右外边距</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">margin-top</td> <td style="text-align:left">设置元素的上外边距</td> <td style="text-align:left">1</td> </tr> </tbody> </table> <h4 id="455-position-定位属性">4.5.5 position 定位属性</h4> <p><a href="http://img.e-com-net.com/image/info8/d6506f7552c149fe97b87f995a9dbcf3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d6506f7552c149fe97b87f995a9dbcf3.jpg" alt="Web开发初探（系统理解Web知识点）_第27张图片" width="650" height="264" style="border:1px solid black;"></a></p> <p>属性值</p> <table> <thead> <tr> <th style="text-align:left">值</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">absolute</td> <td style="text-align:left">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</td> </tr> <tr> <td style="text-align:left">fixed</td> <td style="text-align:left">生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</td> </tr> <tr> <td style="text-align:left">relative</td> <td style="text-align:left">生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</td> </tr> <tr> <td style="text-align:left">static</td> <td style="text-align:left">默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> </tr> <tr> <td style="text-align:left">sticky</td> <td style="text-align:left">粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。<strong>注意:</strong> Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。</td> </tr> <tr> <td style="text-align:left">inherit</td> <td style="text-align:left">规定应该从父元素继承 position 属性的值。</td> </tr> <tr> <td style="text-align:left"></td> <td style="text-align:left"></td> </tr> </tbody> </table> <h4 id="456-字体（font）-属性">4.5.6 字体（Font）属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">说明</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">font</td> <td style="text-align:left">在一个声明中设置所有字体属性</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">font-family</td> <td style="text-align:left">规定文本的字体系列</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">font-size</td> <td style="text-align:left">规定文本的字体尺寸</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">font-style</td> <td style="text-align:left">规定文本的字体样式</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">font-variant</td> <td style="text-align:left">规定文本的字体样式</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">font-weight</td> <td style="text-align:left">规定字体的粗细</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">@font-face</td> <td style="text-align:left">一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">font-size-adjust</td> <td style="text-align:left">为元素规定 aspect 值</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">font-stretch</td> <td style="text-align:left">收缩或拉伸当前的字体系列</td> <td style="text-align:left">3</td> </tr> </tbody> </table> <h4 id="457-文本（text）-属性">4.5.7 文本（Text）属性</h4> <table> <thead> <tr> <th style="text-align:left">属性</th> <th style="text-align:left">说明</th> <th style="text-align:left">CSS</th> </tr> </thead> <tbody> <tr> <td style="text-align:left">color</td> <td style="text-align:left">设置文本的颜色</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">direction</td> <td style="text-align:left">规定文本的方向 / 书写方向</td> <td style="text-align:left">2</td> </tr> <tr> <td style="text-align:left">letter-spacing</td> <td style="text-align:left">设置字符间距</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">line-height</td> <td style="text-align:left">设置行高</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">text-align</td> <td style="text-align:left">规定文本的水平对齐方式</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">text-decoration</td> <td style="text-align:left">规定添加到文本的装饰效果</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">text-indent</td> <td style="text-align:left">规定文本块首行的缩进</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">text-transform</td> <td style="text-align:left">控制文本的大小写</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">vertical-align</td> <td style="text-align:left">设置元素的垂直对齐方式</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">white-space</td> <td style="text-align:left">设置怎样给一元素控件留白</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">word-spacing</td> <td style="text-align:left">设置单词间距</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">text-emphasis</td> <td style="text-align:left">向元素的文本应用重点标记以及重点标记的前景色。</td> <td style="text-align:left">1</td> </tr> <tr> <td style="text-align:left">hanging-punctuation</td> <td style="text-align:left">指定一个标点符号是否可能超出行框</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">punctuation-trim</td> <td style="text-align:left">指定一个标点符号是否要去掉</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-align-last</td> <td style="text-align:left">当 text-align 设置为 justify 时，最后一行的对齐方式。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-justify</td> <td style="text-align:left">当 text-align 设置为 justify 时指定分散对齐的方式。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-outline</td> <td style="text-align:left">设置文字的轮廓。</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-overflow</td> <td style="text-align:left">指定当文本溢出包含的元素，应该发生什么</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-shadow</td> <td style="text-align:left">为文本添加阴影</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">text-wrap</td> <td style="text-align:left">指定文本换行规则</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">word-break</td> <td style="text-align:left">指定非CJK文字的断行规则</td> <td style="text-align:left">3</td> </tr> <tr> <td style="text-align:left">word-wrap</td> <td style="text-align:left">设置浏览器是否对过长的单词进行换行。</td> <td style="text-align:left">3</td> </tr> </tbody> </table> <h2 id="五、练习题">五、练习题</h2> <h3 id="51-开发登录注册页面">5.1 开发登录注册页面</h3> <p>请参考下面的注册页面，模仿开发一个一样的注册页面，只写好静态页面样式就行，不需要能真的获取验证码等。</p> <p><a href="http://img.e-com-net.com/image/info8/28c720f36af945ad8f1b96f9a44ccaef.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/28c720f36af945ad8f1b96f9a44ccaef.jpg" alt="Web开发初探（系统理解Web知识点）_第28张图片" width="650" height="502" style="border:1px solid black;"></a></p> <blockquote> <p>Ps：部分内容来自博主线上课程的教程的文件内容</p> </blockquote> </div> </div> </div> </div>  <div id="SOHUCS" sid="1305471151434141696"></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">你可能感兴趣的:(Web开发初探（系统理解Web知识点）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1901169943009882112.htm" title="PHP与MySQL的高效数据交互：最佳实践与优化技巧" target="_blank">PHP与MySQL的高效数据交互：最佳实践与优化技巧</a> <span class="text-muted">奥顺互联V</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在现代Web开发中，PHP与MySQL的组合仍然是最常见的技术栈之一。PHP作为一种广泛使用的服务器端脚本语言，与MySQL这一强大的关系型数据库管理系统相结合，能够构建出功能强大且高效的Web应用。然而，随着数据量的增长和用户需求的提升，如何实现高效的数据交互成为了开发者必须面对的重要课题。本文将探讨PHP与MySQL高效数据交互的最佳实践与优化技巧，帮助开发者提升系统性能与用户体验。1.使用预</div> </li> <li><a href="/article/1901169564926930944.htm" title="计算机四级 - 数据库原理 - 第7章「数据库系统实现技术」" target="_blank">计算机四级 - 数据库原理 - 第7章「数据库系统实现技术」</a> <span class="text-muted">akbar&</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%9B%E7%BA%A7/1.htm">计算机四级</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>7.1数据库管理系统概述7.1.1数据库管理系统的基本功能数据定义功能：数据库模式（包括外模式、模式、内模式）的定义、数据库完整性的定义、安全保密的定义，索引和视图的定义数据操纵功能数据存储和管理功能事务管理功能数据定义功能7.1.2数据库管理系统的主要成分和工作流程：存储管理器:高效的利用辅助存储器来存放数据，并使得数据能够快速存取重要模块：索引、文件、记录管理器查询处理器：高效的执行用SQL等</div> </li> <li><a href="/article/1901168177866403840.htm" title="设备物联网无线通信，ESP32-C3芯片模组方案，智能化联动控制" target="_blank">设备物联网无线通信，ESP32-C3芯片模组方案，智能化联动控制</a> <span class="text-muted">深圳启明云端科技</span> <a class="tag" taget="_blank" href="/search/%E4%B9%90%E9%91%AB%E6%96%B9%E6%A1%88/1.htm">乐鑫方案</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E4%B9%90%E9%91%AB/1.htm">乐鑫</a><a class="tag" taget="_blank" href="/search/%E8%8A%AF%E7%89%87/1.htm">芯片</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E7%BB%84/1.htm">模组</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E7%BA%BF%E6%96%B9%E6%A1%88/1.htm">无线方案</a><a class="tag" taget="_blank" href="/search/ESP32-C3/1.htm">ESP32-C3</a> <div>在这个数字化与智能化交相辉映的时代，科技早已不是束之高阁的抽象概念，而是如同空气一般，悄无声息却又实实在在地渗透进我们生活的每一处角落。智能设备通过互联互通，构建起一个高效便捷的智能化交互生态系统，让人们在享受舒适生活的同时，也感受到科技带来的无限魅力。在科技飞速革新的当下，物联网正以前所未有的速度融入各个领域，从智能家居到工业自动化，从消费电子到智能安防，万物互联的愿景逐渐成为现实。ESP32-</div> </li> <li><a href="/article/1901168177216286720.htm" title="如何处理PHP中的编码问题" target="_blank">如何处理PHP中的编码问题</a> <span class="text-muted">奥顺互联V</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>如何处理PHP中的编码问题在PHP开发过程中，编码问题是一个常见且棘手的问题。无论是处理用户输入、数据库交互，还是与外部API通信，编码问题都可能导致数据乱码、解析错误甚至安全漏洞。本文将深入探讨PHP中的编码问题，并提供一些实用的解决方案。1.理解字符编码字符编码是计算机中表示字符的方式。常见的字符编码包括ASCII、UTF-8、GBK等。UTF-8是一种变长的Unicode编码，能够表示世界上</div> </li> <li><a href="/article/1901167043240062976.htm" title="【28】单片机编程核心技巧：Switch驱动的定时中断LED闪烁" target="_blank">【28】单片机编程核心技巧：Switch驱动的定时中断LED闪烁</a> <span class="text-muted">智木芯语</span> <a class="tag" taget="_blank" href="/search/%E3%80%90%E7%BC%96%E7%A8%8B%E6%8A%80%E5%B7%A7%E3%80%91/1.htm">【编程技巧】</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%23STC8/1.htm">#STC8</a><a class="tag" taget="_blank" href="/search/%23STM32/1.htm">#STM32</a> <div>【28】单片机编程核心技巧：Switch驱动的定时中断LED闪烁七律·控时状态为魂控时光，定时中断显锋芒。步骤变量定乾坤，状态流转若飞霜。电光石火随心转，程序逻辑自分明。单片机中真王者，一招一式定乾坤。摘要本文以STC8H单片机为例，通过Switch语句结合定时中断实现LED闪烁控制，系统阐述其状态机设计原理、步骤变量管理及代码实现。Switch语句通过控制核心步骤变量（run_step），将复杂</div> </li> <li><a href="/article/1901166916966346752.htm" title="颠覆传统开发！诚邀您加入AI Dev Engineer计划！" target="_blank">颠覆传统开发！诚邀您加入AI Dev Engineer计划！</a> <span class="text-muted">北堂飘霜</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>前言查看详情过去几年，AI在编程领域的应用越来越广泛。从Copilot到ChatGPT，AI正在帮助开发者加速代码编写、优化逻辑、修复bug。但如果你曾经尝试过让AI生成代码，你一定遇到过这些问题：现有AI编码的3大痛点1️⃣代码生成≠项目构建你问AI：“帮我写一个博客系统！”它给你返回了一段后端代码，或者一个Vue组件……然后呢？你还是要手动搭建整个项目，粘贴代码，配置依赖，调试环境，所有的重复</div> </li> <li><a href="/article/1901165275756163072.htm" title="最新微信小程序面试题集结" target="_blank">最新微信小程序面试题集结</a> <span class="text-muted">江湖二哥</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。第二条是开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级</div> </li> <li><a href="/article/1901165148140269568.htm" title="Spring Boot--@PathVariable、@RequestParam、@RequestBody" target="_blank">Spring Boot--@PathVariable、@RequestParam、@RequestBody</a> <span class="text-muted">m0_74823408</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/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> <div>目录声明！！什么是RESTful？RESTful的基本原则无状态性（Stateless）统一接口（UniformInterface）分层系统（LayeredSystem）缓存（Cacheable）按需代码（CodeonDemand,可选）HTTP协议里面，四个表示操作方式的动词：@PathVariable@PathVariable映射URL绑定的占位符@PathVariable的参数基本用法多个路</div> </li> <li><a href="/article/1901165020071391232.htm" title="2021-05-25" target="_blank">2021-05-25</a> <span class="text-muted">张辣鸡</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E8%AE%B0%E5%BD%95/1.htm">爬虫记录</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>解决12306抢票系统弹出来的弹窗问题应为疫情原因进入12306网站登陆界面弹出来这样一个界面进入登陆界面的网站，把鼠标放在确定的位置右键点击检查，找到#我把它放在另一个函数中，这样调用就可以了defclick_ok1(self):bounce_button=driver.find_element_by_css_selector(".btn.btn-primary.ok")bounce_butto</div> </li> <li><a href="/article/1901164516046073856.htm" title="【云原生之kubernetes实战】在k8s环境中高效部署minio对象存储（详细教程）" target="_blank">【云原生之kubernetes实战】在k8s环境中高效部署minio对象存储（详细教程）</a> <span class="text-muted">江湖有缘</span> <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/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a> <div>【云原生之kubernetes实战】在k8s环境中高效部署minio对象存储（详细教程）前言一、minio介绍1.1MinIO简介1.2主要特点1.3主要使用场景二、相关知识介绍2.1本次实践存储介绍2.2k8s存储介绍三、本次实践介绍3.1本次实践简介3.2本次环境规划3.3部署前需准备工作四、检查k8s环境4.1检查工作节点状态4.2检查系统pod状态五、部署minio对象存储5.1编辑min</div> </li> <li><a href="/article/1901163129115570176.htm" title="JAVA数据库技术（一）" target="_blank">JAVA数据库技术（一）</a> <span class="text-muted">MeyrlNotFound</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>JDBC简介JDBC（JavaDatabaseConnectivity）是Java平台提供的一套用于执行SQL语句的JavaAPI。它允许Java程序连接到数据库，并通过发送SQL语句来查询、更新和管理数据库中的数据。JDBC为不同的数据库提供了一种统一的访问方式，使得Java程序可以独立于特定的数据库管理系统（DBMS）进行开发。以下是JDBC的一些关键特性和组件：1.驱动管理器（DriverM</div> </li> <li><a href="/article/1901162498124476416.htm" title="重生之我在CSDN学基础语法" target="_blank">重生之我在CSDN学基础语法</a> <span class="text-muted">AI26108</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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/python/1.htm">python</a><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/java/1.htm">java</a> <div>C语言是一种通用的、结构化的、静态类型的编程语言，被广泛用于系统编程、嵌入式开发、应用软件开发等领域。以下是C语言的基础语法详细讲解。1.变量与数据类型1.1变量声明变量是存储数据的容器，在使用之前必须先声明：inta;//声明一个整型变量floatb;//声明一个浮点型变量charc;//声明一个字符型变量1.2数据类型C语言的基本数据类型如下：数据类型关键字说明整型int存储整数字符型char</div> </li> <li><a href="/article/1901158722311352320.htm" title="测试ospf多区域和分支对接" target="_blank">测试ospf多区域和分支对接</a> <span class="text-muted">项目工程师余工</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E7%A8%8B/1.htm">网络工程</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>总结：1、完全stub区域，直接导入直连或静态不生效，必须要在stub区域network发布直接的网段才可以，（以前只知道stub区域不能导入其它系统的自治系统，原来导入直连和静态也不生效）2、NSSA区域没问题，效果和骨干一样，所有都能生效。3、最终效果全网贯通，并且可以访问公网9.9.9.9dicu[V200R003C00]sysnamer1snmp-agentlocal-engineid80</div> </li> <li><a href="/article/1901153428256649216.htm" title="matlab 模糊pid实现温度控制" target="_blank">matlab 模糊pid实现温度控制</a> <span class="text-muted">studyer_爱啃鸡爪的小米</span> <a class="tag" taget="_blank" href="/search/Matlab%E7%B3%BB%E5%88%97%E6%A1%88%E4%BE%8B/1.htm">Matlab系列案例</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a> <div>1、内容简介matlab162-模糊pid实现温度控制可以交流、咨询、答疑2、内容说明略基于PID电加热炉温度控制系统设计摘要电加热炉随着科学技术的发展和工业生产水平的提高，已经在冶金、化工、机械等各类工业控制中得到了广泛应用，并且在国民经济中占有举足轻重的地位。对于这样一个具有非线性、大滞后、大惯性、时变性、升温单向性等特点的控制对象，很难用数学方法建立精确的数学模型，因此用传统的控制理论和方法</div> </li> <li><a href="/article/1901153175713411072.htm" title="MyBatis 类型处理器TypeHandler作用" target="_blank">MyBatis 类型处理器TypeHandler作用</a> <span class="text-muted">冰糖心书房</span> <a class="tag" taget="_blank" href="/search/Mybatis/1.htm">Mybatis</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E7%B3%BB%E5%88%97/1.htm">源码系列</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>TypeHandler是MyBatis中用于处理Java类型与JDBC类型之间转换的接口。它在MyBatis的参数绑定和结果映射过程中起着至关重要的作用。为什么需要TypeHandler？Java和数据库（JDBC）使用不同的类型系统。例如：Java中有String、Integer、Date、Boolean、enum等类型。JDBC中有VARCHAR、INTEGER、DATE、BOOLEAN、TI</div> </li> <li><a href="/article/1901151033665581056.htm" title="高效开发利器：ElementUI元件库与后台模板页面（兼容Axure9）" target="_blank">高效开发利器：ElementUI元件库与后台模板页面（兼容Axure9）</a> <span class="text-muted">晏肠冲Jessie</span> <div>高效开发利器：ElementUI元件库与后台模板页面（兼容Axure9）【下载地址】ElementUI元件库与后台模板页面兼容Axure9下载本仓库提供了一个名为“web元件库ElementUI元件库后台模板页面（兼容Axure9）.zip”的资源文件下载。该文件包含了适用于Web开发的ElementUI元件库以及兼容Axure9的后台模板页面项目地址:https://gitcode.com/op</div> </li> <li><a href="/article/1901148763041361920.htm" title="手把手教你学AUTOSAR（10.1）--AUTOSAR 组件的配置与集成实例" target="_blank">手把手教你学AUTOSAR（10.1）--AUTOSAR 组件的配置与集成实例</a> <span class="text-muted">小蘑菇二号</span> <a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%AD%A6AUTOSAR/1.htm">手把手教你学AUTOSAR</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/1.htm">原型模式</a> <div>目录AUTOSAR组件的配置与集成实例1.准备工作1.1安装工具1.2创建项目2.系统设计2.1创建系统包3.添加软件组件（SWCs）3.1创建TemperatureSensorSWC3.2创建ACControlSWC4.配置通信接口4.1连接端口5.配置ECU资源5.1创建ECU资源包5.2分配资源6.生成配置文件和代码6.1生成配置文件6.2生成代码7.示例代码7.1ReadTemperatu</div> </li> <li><a href="/article/1901148636646010880.htm" title="手把手教你学AUTOSAR（8.2）--AUTOSAR 组件的配置与集成" target="_blank">手把手教你学AUTOSAR（8.2）--AUTOSAR 组件的配置与集成</a> <span class="text-muted">小蘑菇二号</span> <a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%AD%A6AUTOSAR/1.htm">手把手教你学AUTOSAR</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/1.htm">游戏引擎</a> <div>目录AUTOSAR组件的配置与集成1.AUTOSAR组件概述2.配置与集成的主要步骤2.1系统设计2.2组件配置2.3组件集成3.工具支持3.1VectorDaVinciDeveloper3.2ETASINTECRIO3.3dSpaceSystemDesk3.4MentorGraphicsVolcanoVSA3.5ElektrobitEBtresos4.示例：使用VectorDaVinciDeve</div> </li> <li><a href="/article/1901147752579002368.htm" title="vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header" target="_blank">vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header</a> <span class="text-muted">Beamon__</span> <a class="tag" taget="_blank" href="/search/vue/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>项目信息vue-cli创建的vue3+webpack5项目；问题现状配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；原因定位代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考Websocketconnectionfailed,Invalidframeheader·Issue#1850·vuejs/vue-cli·GitHub解决方案方案一一刀</div> </li> <li><a href="/article/1901147500396474368.htm" title="SSE vs WebSocket，谁更适合实时文本传输？" target="_blank">SSE vs WebSocket，谁更适合实时文本传输？</a> <span class="text-muted">A__tao</span> <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>引言SSE和WebSocket是常见的实时数据传输技术，在在线文本传输工具中，如何选择合适的方案？技术对比特性SSEWebSocket连接方式单向（服务器→客户端）双向（客户端↔服务器）适用场景消息推送、实时更新双向交互、多用户协作兼容性兼容HTTP/2，支持大部分浏览器需要WebSocket支持复杂度简单易用需要管理连接状态选择建议仅需服务器推送→选择SSE（轻量、兼容性好）。需要双向通信→选择</div> </li> <li><a href="/article/1901146115068194816.htm" title="Java中DDD概念之四理解仓储模式：领域与数据层的优雅桥梁" target="_blank">Java中DDD概念之四理解仓储模式：领域与数据层的优雅桥梁</a> <span class="text-muted">以恒1</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Java，DDD概念之四理解仓储模式：领域与数据层的优雅桥梁一、仓储模式是什么？仓储（Repository）就像一个智能的业务数据管家。想象你经营一家图书馆，书籍的存放、检索、上架工作交给专业管理员，你只需告诉管理员：“我需要2023年出版的所有编程书籍”。仓储就是这样的管理员，把繁琐的数据操作封装起来，让业务代码专注处理核心逻辑。二、为什么需要仓储模式？1.传统开发的问题假设有一个用户管理系统：</div> </li> <li><a href="/article/1901144349366874112.htm" title="使用yolov8+flask实现精美登录界面+图片视频摄像头检测系统" target="_blank">使用yolov8+flask实现精美登录界面+图片视频摄像头检测系统</a> <span class="text-muted">FL1623863129</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>这个是使用flask实现好看登录界面和友好的检测界面实现yolov8推理和展示，代码仅仅有2个html文件和一个python文件，真正做到了用最简洁的代码实现复杂功能。测试通过环境：windowsx64anaconda3+python3.8ultralytics==8.3.81flask==1.1.2torch==2.3.0运行步骤：安装好环境执行pythonlogin.py后端实现代码：from</div> </li> <li><a href="/article/1901144350625165312.htm" title="QT编程之QGIS" target="_blank">QT编程之QGIS</a> <span class="text-muted">byxdaz</span> <a class="tag" taget="_blank" href="/search/QT/1.htm">QT</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、QGIS介绍QuantumGIS（QGIS）是开源地理信息系统桌面软件，使用GNU（GeneralPublicLicense）授权，属于OpenSourceeospatialFoundation（OSGeo）的官方计划。在GNU授权下，开发者可以自行检阅与调整程序代码，并保障让所有使用者可以免费且自由地修改程序。QGIS的目标是成为一个GIS系统，提供常见的功能与特征。借着核心特征提供基本功能</div> </li> <li><a href="/article/1901143090018709504.htm" title="C++使用ZeroMQ和MessagePack实现简单又轻量级的RPC框架" target="_blank">C++使用ZeroMQ和MessagePack实现简单又轻量级的RPC框架</a> <span class="text-muted">特立独行的猫a</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a><a class="tag" taget="_blank" href="/search/zeromq/1.htm">zeromq</a><a class="tag" taget="_blank" href="/search/messagepack/1.htm">messagepack</a> <div>在现代的分布式系统中，远程过程调用（RPC）是一个非常重要的机制，它允许不同的服务或组件之间的通信，就像调用本地函数一样。本文将介绍如何使用ZeroMQ和MessagePack来构建一个轻量级的RPC框架，并提供一个简单的使用示例。ZeroMQ简介ZeroMQ（也称为0MQ）是一个高性能的异步消息库，旨在使用标准的、对等的传输协议实现消息的发送与接收。ZeroMQ的核心是提供一个消息队列，使得消息</div> </li> <li><a href="/article/1901142711004622848.htm" title="深度好文图解 RocketMQ 的系统架构" target="_blank">深度好文图解 RocketMQ 的系统架构</a> <span class="text-muted">橘野禾</span> <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>今天给大家分享一篇学习RocketMQ系统架构核心知识点的梳理和总结,在讲解时力求精简、通俗易懂，通过图解来给正在学习RocketMQ的小伙伴带来帮助。RocketMQ是阿里巴巴的分布式消息中间件，在2012年开源，在2017年成为Apache顶级项目。1集群架构RocketMQ的集群架构如下图：从上图可以看到，整个集群中有四个角色：NameServer集群、Broker主从集群、Producer</div> </li> <li><a href="/article/1901141195455787008.htm" title="使用Spring Boot和Elastic Stack构建实时日志分析系统" target="_blank">使用Spring Boot和Elastic Stack构建实时日志分析系统</a> <span class="text-muted">微赚淘客系统开发者@聚娃科技</span> <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/jenkins/1.htm">jenkins</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>使用SpringBoot和ElasticStack构建实时日志分析系统大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！随着现代应用程序的复杂性增加，实时日志分析成为确保系统稳定性和性能的重要手段。本文将介绍如何利用SpringBoot和ElasticStack（Elasticsearch、Logstash、Kibana）构建一个高效的实时日志分析系统，实现日志的收集、</div> </li> <li><a href="/article/1901141196428865536.htm" title="大规模语言模型从理论到实践开源指令数据集" target="_blank">大规模语言模型从理论到实践开源指令数据集</a> <span class="text-muted">AI天才研究院</span> <a class="tag" taget="_blank" href="/search/DeepSeek/1.htm">DeepSeek</a><a class="tag" taget="_blank" href="/search/R1/1.htm">R1</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AEAI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大数据AI人工智能大模型</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">AI大模型企业级应用开发实战</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BA%94%E7%94%A8%E5%85%A5%E9%97%A8%E5%AE%9E%E6%88%98%E4%B8%8E%E8%BF%9B%E9%98%B6/1.htm">AI大模型应用入门实战与进阶</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E7%A7%91%E5%AD%A6/1.htm">计算科学</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E8%AE%A1%E7%AE%97/1.htm">神经计算</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a><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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%9E%8B%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">大型语言模型</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/AGI/1.htm">AGI</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/RPA/1.htm">RPA</a> <div>大规模语言模型从理论到实践开源指令数据集1.背景介绍大规模语言模型（LargeLanguageModels,LLMs）近年来在自然语言处理（NLP）领域取得了显著的进展。诸如GPT-3、BERT等模型在各种任务中表现出色，从文本生成到翻译，再到问答系统，几乎无所不能。这些模型的成功离不开庞大的训练数据集和复杂的算法架构。然而，如何有效地构建和利用开源指令数据集，仍然是一个值得深入探讨的话题。2.核</div> </li> <li><a href="/article/1901140817532219392.htm" title="xodooIP地址定位" target="_blank">xodooIP地址定位</a> <span class="text-muted">odoo实施</span> <a class="tag" taget="_blank" href="/search/XODOO/1.htm">XODOO</a><a class="tag" taget="_blank" href="/search/PRO/1.htm">PRO</a><a class="tag" taget="_blank" href="/search/Xodoo/1.htm">Xodoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>//src/packages/python/geoip2.rs实现特点：跨平台支持：通过Rust原生实现，兼容Windows、Linux、macOS等主流操作系统类型安全：使用Rust的Option类型处理可能缺失的字段严格校验IP地址格式自动处理编码转换性能优化：数据库文件只加载一次内存映射方式读取数据零拷贝解析技术错误处理：明确的错误类型（IOError/ValueError）友好的错误提示信</div> </li> <li><a href="/article/1901139935658831872.htm" title="如何用Python绘制柱状图堆叠图？" target="_blank">如何用Python绘制柱状图堆叠图？</a> <span class="text-muted">上官美丽</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/1.htm">技术分享</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在数据分析和可视化的过程中，柱状图是一种非常常用的图表类型。它能清晰地展示不同类别之间的比较。而堆叠柱状图则是在此基础上，能够展示各个部分在整体中的占比！今天，我们来聊聊如何使用Python绘制堆叠柱状图，帮助你更好地理解数据。我们将使用一个非常流行的库：Matplotlib。准备工作首先，你需要确保安装了Matplotlib库。如果还没有安装，可以通过以下命令来安装：pipinstallmatp</div> </li> <li><a href="/article/1901138800390762496.htm" title="使用Python和LangChain创建可调用工具的智能对话机器人：全面指南" target="_blank">使用Python和LangChain创建可调用工具的智能对话机器人：全面指南</a> <span class="text-muted">m0_57781768</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a> <div>使用Python和LangChain创建可调用工具的智能对话机器人：全面指南在当今技术迅猛发展的时代，人工智能（AI）和自然语言处理（NLP）技术的应用范围越来越广。尤其是对话机器人，它们不仅能与人类进行自然交互，还能通过调用外部API与各种系统对接，为用户提供更加智能和灵活的服务。本文将通过一系列实例和代码演示，向您展示如何利用Python编程语言和LangChain框架，创建能够使用外部工具（</div> </li> <li><a href="/article/89.htm" title="java责任链模式" target="_blank">java责任链模式</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/1.htm">责任链模式</a><a class="tag" taget="_blank" href="/search/%E6%9D%91%E6%B0%91%E5%91%8A%E5%8E%BF%E9%95%BF/1.htm">村民告县长</a> <div>责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。下面代码模拟这样的效果：创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** * </div> </li> <li><a href="/article/216.htm" title="linux、mysql、nginx、tomcat 性能参数优化" target="_blank">linux、mysql、nginx、tomcat 性能参数优化</a> <span class="text-muted">ronin47</span> <div>一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大</div> </li> <li><a href="/article/343.htm" title="php命令行界面" target="_blank">php命令行界面</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/cli/1.htm">cli</a> <div>常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("</div> </li> <li><a href="/article/470.htm" title="Filter&Session" target="_blank">Filter&Session</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge</div> </li> <li><a href="/article/597.htm" title="连接池与Spring,Hibernate结合" target="_blank">连接池与Spring,Hibernate结合</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> 前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。 1.下载相关内容： &nb</div> </li> <li><a href="/article/724.htm" title="[简单]mybatis判断数字类型" target="_blank">[简单]mybatis判断数字类型</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> 昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下: Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis</div> </li> <li><a href="/article/851.htm" title="项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space" target="_blank">项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space</a> <span class="text-muted">程序员是怎么炼成的</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/catalina.sh/1.htm">catalina.sh</a><a class="tag" taget="_blank" href="/search/eclipse.ini/1.htm">eclipse.ini</a> <div> 在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space. 解决办法是点击eclipse里的tomcat，在</div> </li> <li><a href="/article/978.htm" title="我的crm小结" target="_blank">我的crm小结</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/crm/1.htm">crm</a> <div>各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主</div> </li> <li><a href="/article/1105.htm" title="spring里配置使用hibernate的二级缓存几步" target="_blank">spring里配置使用hibernate的二级缓存几步</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi</div> </li> <li><a href="/article/1232.htm" title="JAVA基础面试题" target="_blank">JAVA基础面试题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">抽象实现接口</a><a class="tag" taget="_blank" href="/search/String%E7%B1%BB/1.htm">String类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E7%BB%A7%E6%89%BF/1.htm">接口继承</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB%E7%BB%A7%E6%89%BF%E5%AE%9E%E4%BD%93%E7%B1%BB/1.htm">抽象类继承实体类</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>/* * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、 *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于 * 寄存器（register），快于堆。堆（heap）：用于存储对象。 */ &</div> </li> <li><a href="/article/1359.htm" title="让sqlmap文件 "继承" 起来" target="_blank">让sqlmap文件 "继承" 起来</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/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/sqlmap/1.htm">sqlmap</a> <div> 多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项</div> </li> <li><a href="/article/1486.htm" title="精通Oracle10编程SQL(13)开发触发器" target="_blank">精通Oracle10编程SQL(13)开发触发器</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O</div> </li> <li><a href="/article/1613.htm" title="【EhCache三】EhCache查询" target="_blank">【EhCache三】EhCache查询</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a> <div>本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu</div> </li> <li><a href="/article/1740.htm" title="CXF框架入门实例" target="_blank">CXF框架入门实例</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。在apache cxf官网提供</div> </li> <li><a href="/article/1867.htm" title="angular.equals" target="_blank">angular.equals</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/AnguarJS+%E4%B8%AD%E6%96%87API/1.htm">AnguarJS 中文API</a><a class="tag" taget="_blank" href="/search/angular.equals/1.htm">angular.equals</a> <div>angular.equals 描述: 比较两个值或者两个对象是不是相等。还支持值的类型，正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项：两个值或者对象能通过=== （恒等）的比较两个值或者对象是同样类型，并且他们的属性都能通过angular</div> </li> <li><a href="/article/1994.htm" title="java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]" target="_blank">java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>这道题的具体思路请参看何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A</div> </li> <li><a href="/article/2121.htm" title="FastDFS 的安装和配置修订版" target="_blank">FastDFS 的安装和配置修订版</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/fastDFS/1.htm">fastDFS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">分布式文件系统</a> <div>FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.</div> </li> <li><a href="/article/2248.htm" title="[强人工智能]拓扑扫描与自适应构造器" target="_blank">[强人工智能]拓扑扫描与自适应构造器</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢? 那么,现在我们必须设计新的模块和代码包来处理上面的问题</div> </li> <li><a href="/article/2375.htm" title="oracle merge into的用法" target="_blank">oracle merge into的用法</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/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/merget+into/1.htm">merget into</a> <div>Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE</div> </li> <li><a href="/article/2502.htm" title="不适合使用Hadoop的场景" target="_blank">不适合使用Hadoop的场景</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>转自：http://dev.yesky.com/296/35381296.shtml。　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop! 实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha</div> </li> <li><a href="/article/2629.htm" title="YII findAll的用法" target="_blank">YII findAll的用法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10)); 第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值；更完善的查询需要</div> </li> <li><a href="/article/2756.htm" title="vim 常用 NERDTree 快捷键" target="_blank">vim 常用 NERDTree 快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳</div> </li> <li><a href="/article/2883.htm" title="Java把目录下的文件打印出来" target="_blank">Java把目录下的文件打印出来</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%88%97%E5%87%BA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">列出目录下的文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">文件夹下面的文件</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">目录下的文件</a> <div>Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:</div> </li> <li><a href="/article/3010.htm" title="linux远程桌面----VNCServer与rdesktop" target="_blank">linux远程桌面----VNCServer与rdesktop</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/Desktop/1.htm">Desktop</a> <div>windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。 linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。下面分别介绍，以windo</div> </li> <li><a href="/article/3137.htm" title="guava中的join和split功能" target="_blank">guava中的join和split功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>guava库中，包含了很好的join和split的功能，例子如下： 1）将LIST转换为使用字符串连接的字符串 List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom"); </div> </li> <li><a href="/article/3264.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</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/html5/1.htm">html5</a> <div>回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div> </li> <li><a href="/article/3391.htm" title="架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)" target="_blank">架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/buffer/1.htm">buffer</a> <div>1.前言。如题。 2.代码。 IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession</div> </li> <li><a href="/article/3518.htm" title="ORA-00054:resource busy and acquire with NOWAIT specified" target="_blank">ORA-00054:resource busy and acquire with NOWAIT specified</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>[Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。 step1，查看被lock的session： select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj</div> </li> <li><a href="/article/3645.htm" title="javascript学习笔记" target="_blank">javascript学习笔记</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是</div> </li> <li><a href="/article/3772.htm" title="Java enum的用法详解" target="_blank">Java enum的用法详解</a> <span class="text-muted">xieke90</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Java中枚举实现的分析：示例： public static enum SEVERITY{ INFO,WARN,ERROR } enum很像特殊的class，实际上enum声明定义的类型就是一个类。而这些类都是类库中Enum类的子类 (java.l</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>