RioTian
RioTian

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

一、Web开发介绍

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

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

Html

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

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

CSS

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

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

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

JavaScript

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

Web开发初探（系统理解Web知识点）_第1张图片

以上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> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧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">你可能感兴趣的:(Web开发初探（系统理解Web知识点）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902984188466884608.htm" title="阅读理解英语" target="_blank">阅读理解英语</a> <span class="text-muted">小崔的技术博客</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E6%88%90%E9%95%BF%E7%AC%94%E8%AE%B0/1.htm">读书成长笔记</a><a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a> <div>Wesearchforloveandtrytogetlove,andyetitseemslikewenevergetenough.Evenwhenwehavefoundlove,itcanslipawayastimepasses.Loveisthespacious,openattentionofourawareness.Thekeytoexperiencingloveistonoticewhere</div> </li> <li><a href="/article/1902982928024006656.htm" title="旋转位置编码（Rotary Positional Encoding, RoPE）：中文公式详解与代码实现" target="_blank">旋转位置编码（Rotary Positional Encoding, RoPE）：中文公式详解与代码实现</a> <span class="text-muted">RockLiu@805</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E6%A8%A1%E5%9D%97/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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/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> <div>旋转位置编码（RotaryPositionalEncoding,RoPE）：中文公式详解与代码实现在序列模型中，位置信息对于任务的理解至关重要。传统的绝对和相对位置编码各有优缺点，而RoPE作为一种创新的位置编码方法，展现了其独特的优势。RoPE的核心思想RoPE通过旋转机制动态地捕捉位置信息。它允许查询（query）和键（key）向量的旋转程度根据它们之间的相对或绝对位置自动调整。这种方法使模型</div> </li> <li><a href="/article/1902980407872253952.htm" title="10分钟了解基金基础知识" target="_blank">10分钟了解基金基础知识</a> <span class="text-muted">leo_厉锵</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D%E6%A0%8F/1.htm">金融栏</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>一、基金的本质股票、债券和基金具有一定的可比性，而银行理财产品较为特殊。（一）股票股票代表一个公司的股份。拥有公司股票就相当于拥有部分公司股份。股票投资收益潜力大，因为公司可能是赚钱机器从而导致股价暴涨；但风险也很高，因为公司可能经营不善致使股价暴跌。（二）债券债券代表一种债权，即借钱给别人。例如国债，可理解为国家向你借钱并打借条，约定偿还时间和利息。债券代表着债券关系。（三）基金股票和债券属于直</div> </li> <li><a href="/article/1902978013075664896.htm" title="OpenHarmony子系统开发 - 电源管理（一）" target="_blank">OpenHarmony子系统开发 - 电源管理（一）</a> <span class="text-muted">__Benco</span> <a class="tag" taget="_blank" href="/search/openharmony/1.htm">openharmony</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">子系统开发</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>OpenHarmony子系统开发-电源管理（一）一、电源模式定制开发指导概述简介OpenHarmony默认提供了电源模式（如正常模式、性能模式、省电模式、超级省电模式）的特性。但由于不同产品的部件存在差异，导致在同样场景下电源模式的配置需要也存在差异，为此，OpenHarmony提供了电源管理的定制方式，产品定制开发者可根据产品的设计规格来定制这些特性。基本概念OpenHarmony支持的可定制的</div> </li> <li><a href="/article/1902976879523065856.htm" title="【北京迅为】iTOP-RK3568开发板OpenHarmony系统南向驱动开发UART接口运作机制" target="_blank">【北京迅为】iTOP-RK3568开发板OpenHarmony系统南向驱动开发UART接口运作机制</a> <span class="text-muted">迅为电子</span> <a class="tag" taget="_blank" href="/search/RK3568%E5%BC%80%E5%8F%91%E6%9D%BF/1.htm">RK3568开发板</a><a class="tag" taget="_blank" href="/search/RK3568%E5%BC%80%E5%8F%91%E6%9D%BF/1.htm">RK3568开发板</a><a class="tag" taget="_blank" href="/search/OpenHarmony/1.htm">OpenHarmony</a> <div>瑞芯微RK3568芯片是一款定位中高端的通用型SOC，采用22nm制程工艺，搭载一颗四核Cortex-A55处理器和MaliG522EE图形处理器。RK3568支持4K解码和1080P编码，支持SATA/PCIE/USB3.0外围接口。RK3568内置独立NPU，可用于轻量级人工智能应用。RK3568支持安卓11和linux系统，主要面向物联网网关、NVR存储、工控平板、工业检测、工控盒、卡拉OK</div> </li> <li><a href="/article/1902970946688446464.htm" title="使用 openapi-generator-cli 生成代码，以 3GPP TS29518_Namf_Communication 为例" target="_blank">使用 openapi-generator-cli 生成代码，以 3GPP TS29518_Namf_Communication 为例</a> <span class="text-muted">波格斯特</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98%E5%A4%87%E5%BF%98/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>使用openapi-generator-cli生成代码，以3GPPTS29518_Namf_Communication为例安装openapi-generator-cli（前提有安装Java11以上）#使用阿里云镜像Invoke-WebRequest-OutFileopenapi-generator-cli.jarhttps://maven.aliyun.com/repository/public/</div> </li> <li><a href="/article/1902970947577638912.htm" title="Docker下载，包含Win、Mac" target="_blank">Docker下载，包含Win、Mac</a> <span class="text-muted">码码哈哈0.0</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%B7%A5%E5%85%B7/1.htm">实用工具</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>介绍Docker是一种开源的容器化平台，通过操作系统级虚拟化技术实现应用的快速开发、部署和运行。以下从多个维度对Docker进行详细介绍：一、Docker的核心概念与功能容器化技术Docker利用Linux内核的容器隔离技术（如Cgroups和Namespace），将应用及其依赖打包为轻量级、可移植的容器。容器与虚拟机不同，它无需模拟完整操作系统，而是共享主机内核，因此启动更快、资源占用更低。核心</div> </li> <li><a href="/article/1902970949330857984.htm" title="Ubuntu零基础入门到精通【1.3讲】：为什么选择 Ubuntu？" target="_blank">Ubuntu零基础入门到精通【1.3讲】：为什么选择 Ubuntu？</a> <span class="text-muted">bug菌¹</span> <a class="tag" taget="_blank" href="/search/%E6%BB%9A%E9%9B%AA%E7%90%83%E5%AD%A6Ubuntu/1.htm">滚雪球学Ubuntu</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9Ubuntu/1.htm">为什么选择Ubuntu</a><a class="tag" taget="_blank" href="/search/%E9%9B%B6%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/1.htm">零基础教程</a> <div>目录：上期回顾：Ubuntu的生态与社区✨前言：为什么我们都在谈论Ubuntu？为什么Ubuntu是个人和企业的首选？1️⃣安全性与开源：Ubuntu构建的安全生态系统更高的安全性：Ubuntu对安全的极致追求✨️开放性与可审查性：更透明的操作系统长期支持版（LTS）：稳定与安全的完美平衡2️⃣对比其他Linux发行版：Ubuntu如何脱颖而出？Fedora：创新的前沿，但稳定性欠佳CentOS：</div> </li> <li><a href="/article/1902970694585610240.htm" title="git clone 指定目录" target="_blank">git clone 指定目录</a> <span class="text-muted">波格斯特</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98%E5%A4%87%E5%BF%98/1.htm">问题备忘</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>GitClone指定目录详解Git是一个强大的版本控制系统，它允许用户克隆远程仓库到本地，同时可以指定克隆的目录。在Git中，gitclone命令是用来复制远程仓库到本地的常用命令。默认情况下，gitclone会克隆整个仓库，但有时我们可能只需要仓库的一部分或者特定的文件或目录。这时，我们可以通过一些参数来指定克隆的目标目录。基本用法要克隆一个仓库到一个特定的目录，可以使用如下命令：gitclon</div> </li> <li><a href="/article/1902969560139624448.htm" title="北斗导航｜接收机自主完好性监测算法研究现状及发展趋势" target="_blank">北斗导航｜接收机自主完好性监测算法研究现状及发展趋势</a> <span class="text-muted">单北斗SLAMer</span> <a class="tag" taget="_blank" href="/search/%E5%8D%AB%E6%98%9F%E5%AF%BC%E8%88%AA/1.htm">卫星导航</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BA%E6%96%87%E8%AE%BE%E8%AE%A1/1.htm">毕业论文设计</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>接收机自主完好性监测（RAIM）算法是保障卫星导航系统可靠性的核心技术，其研究现状与发展趋势可从算法设计、多系统融合、智能化技术等方面进行分析。以下基于现有研究成果及行业动态进行总结：一、研究现状传统故障检测算法RAIM的核心目标是通过冗余观测值检测并隔离故障卫星。早期研究聚焦单星故障场景，主要方法包括：残差分析法：通过比较观测残差与阈值判断故障，如最小二乘残差和法、奇偶矢量法等。距离比较法：基于</div> </li> <li><a href="/article/1902968172810661888.htm" title="python+flask计算机毕业设计基于Android平台的景区移动端旅游软件系统（程序+开题+论文）" target="_blank">python+flask计算机毕业设计基于Android平台的景区移动端旅游软件系统（程序+开题+论文）</a> <span class="text-muted">Node.js彤彤 程序</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容研究背景随着移动互联网技术的飞速发展，智能手机已成为人们日常生活中不可或缺的一部分，特别是在旅游领域，移动端应用以其便捷性、实时性和个性化服务的特点，极大地改变了人们的旅游体验方式。当前，旅游市场日益繁荣，游客对于旅游信息获取、行程规划、景点导航、票务预订及个性化服务的需</div> </li> <li><a href="/article/1902966659358978048.htm" title="【布鲁姆6大认知层级】" target="_blank">【布鲁姆6大认知层级】</a> <span class="text-muted">搞技术的季</span> <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>认知思维目标层次由低到高、由简到繁分为六个层次，层层递进，这6个层级分别是：记忆——理解——应用——分析——评价——创新。第一层：记忆是指认识并记忆概念、知识，将其储存在大脑并及时提取，例如背单词、古诗、名词概念等。这一层次所涉及的是具体知识或抽象知识的辨认，虽然机械，但对学习和解决更复杂的问题来说是必不可少的基础环节。第二层：理解是指对事物或知识的领会，当学习者对"新"知识与原有知识产生联系时，</div> </li> <li><a href="/article/1902964264763715584.htm" title="传统金融和分布式金融" target="_blank">传统金融和分布式金融</a> <span class="text-muted">倒霉男孩</span> <a class="tag" taget="_blank" href="/search/DeFi/1.htm">DeFi</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>文章目录传统金融和分布式金融一、传统金融机构的核心问题深度剖析1.支付与清算系统的结构性缺陷2.金融排斥（FinancialExclusion）的根源3.中心化风险的爆发与传导二、DeFi的技术突破与创新机制1.支付与清算：区块链的底层重构2.普惠金融的技术民主化3.去中心化治理与透明化运作三、DeFivs传统金融的范式革命1.价值传递范式的颠覆2.风险分散机制的升级3.经济模型的创新实验四、De</div> </li> <li><a href="/article/1902964012576993280.htm" title="Java Web开发技术解析：从基础到实践的全栈指南" target="_blank">Java Web开发技术解析：从基础到实践的全栈指南</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%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>JavaWeb开发技术解析：从基础到实践的全栈指南在互联网技术演进中，JavaWeb凭借其跨平台特性、成熟的生态系统和强大的企业级服务能力，成为构建动态Web应用的核心技术栈。本文从技术组成、开发工具、实战应用三个维度，全面解析JavaWeb的完整技术体系，并结合最新行业实践探讨其演进方向。一、JavaWeb的核心技术组成JavaWeb开发以Servlet和JSP为基石，通过分层架构实现动态网页生</div> </li> <li><a href="/article/1902963382236016640.htm" title="全面掌握Python：从安装到基础再到进阶的系统学习之路（附代码，建议新手收藏）" target="_blank">全面掌握Python：从安装到基础再到进阶的系统学习之路（附代码，建议新手收藏）</a> <span class="text-muted">der丸子吱吱吱</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8/1.htm">新手入门</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div>Python，作为一种现代化的高级编程语言，因其简洁易懂的语法和强大的功能，成为了数据科学、人工智能、Web开发等多个领域的首选语言。在这篇文章中，我们将从大学课本的结构来详细介绍Python，帮助大家从零基础开始，逐步深入掌握Python的各个方面。目录第一章：Python简介与安装1.1Python语言概述1.2安装Python1.3Python的开发环境1.4第一个Python程序第二章：基</div> </li> <li><a href="/article/1902961744603574272.htm" title="Centos7软件包管理(rpm、yum)" target="_blank">Centos7软件包管理(rpm、yum)</a> <span class="text-muted">Bulut0907</span> <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/%E8%BD%AF%E4%BB%B6%E5%8C%85%E7%AE%A1%E7%90%86/1.htm">软件包管理</a><a class="tag" taget="_blank" href="/search/rpm/1.htm">rpm</a><a class="tag" taget="_blank" href="/search/yum/1.htm">yum</a><a class="tag" taget="_blank" href="/search/yum%E6%BA%90%E4%BF%AE%E6%94%B9/1.htm">yum源修改</a> <div>目录1.rpm2.yum2.1修改yum源1.rpmRPM(RedHatPackageManager)，redhat系列操作系统里面的打包安装工具查询命令：查询安装的所有rpm软件包：rpm-qa查询指定rpm软件包，并显示详细信息：rpm-qipython3卸载命令：卸载软件包，不管是否有其它软件包依赖该软件包：rpm-e--nodeps软件包名称安装命令：安装rpm包，并显示详细信息和进度条(</div> </li> <li><a href="/article/1902960354858692608.htm" title="谷歌：对比学习将LLM转为嵌入模型" target="_blank">谷歌：对比学习将LLM转为嵌入模型</a> <span class="text-muted">大模型任我行</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B-%E6%88%90%E7%86%9F%E5%9F%BA%E5%BA%A7/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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E7%AC%94%E8%AE%B0/1.htm">论文笔记</a> <div>标题：GeminiEmbedding:GeneralizableEmbeddingsfromGemini来源：arXiv,2503.07891摘要在本报告中，我们介绍了Gemini嵌入，这是一种最先进的嵌入模型，它利用了Gemini、Google最有能力的大型语言模型的力量。利用Gemini固有的多语言和代码理解能力，GeminiEmbedding为跨越多种语言和文本模式的文本生成高度可概括的嵌入</div> </li> <li><a href="/article/1902959975316123648.htm" title="yum install locate出现Error: Unable to find match: locate解决方案" target="_blank">yum install locate出现Error: Unable to find match: locate解决方案</a> <span class="text-muted">爱编程的喵喵</span> <a class="tag" taget="_blank" href="/search/Linux%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">Linux解决方案</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/locate/1.htm">locate</a><a class="tag" taget="_blank" href="/search/yum/1.htm">yum</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">解决方案</a> <div>  大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理解，而且能够帮助新手快速入门。  本文主要介绍了yuminstalllocate出现</div> </li> <li><a href="/article/1902959976217899008.htm" title="【CXX-Qt】2.1 构建系统" target="_blank">【CXX-Qt】2.1 构建系统</a> <span class="text-muted">Source.Liu</span> <a class="tag" taget="_blank" href="/search/CXX-Qt/1.htm">CXX-Qt</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>CXX-Qt可以集成到现有的CMake项目中，也可以仅使用Cargo进行构建。需要了解的可以阅读上2篇文章：Cargo集成CMake集成CXX-Qt可以与任何C++构建系统一起使用，只要在调用Cargo之前设置了QMAKE、CXX_QT_EXPORT_DIR和CXX_QT_EXPORT_CRATE_环境变量。请查看我们的CMake代码以了解如何使用这些变量。然而，除了Cargo或CMake之外，使</div> </li> <li><a href="/article/1902956952984547328.htm" title="从 0 到 1 构建 Python 分布式爬虫，实现搜索引擎全攻略" target="_blank">从 0 到 1 构建 Python 分布式爬虫，实现搜索引擎全攻略</a> <span class="text-muted">七七知享</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a> <div>从0到1构建Python分布式爬虫，实现搜索引擎全攻略在大数据与信息爆炸的时代，搜索引擎已然成为人们获取信息的关键入口。你是否好奇，像百度、谷歌这般强大的搜索引擎，背后是如何精准且高效地抓取海量网页数据的？本文将带你一探究竟，以Python为工具，打造属于自己的分布式爬虫，进而搭建一个简易搜索引擎，完整呈现从底层代码编写到系统搭建的全过程。通过本文的实践，我们成功打造了Python分布式爬虫，并以</div> </li> <li><a href="/article/1902956946005225472.htm" title="STM32寄存器编码流程总结（上部）" target="_blank">STM32寄存器编码流程总结（上部）</a> <span class="text-muted">物联网菜鸟</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A0/1.htm">基础知识学习</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</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> <div>目录一、GPIO二、中断系统三、USART串口通信四、I2C通讯五、高级定时器六、DMA存储访问七、ADC数模转换八、API通信九、FSMC控制器十、LCD显示一、GPIO1.时钟的配置//开启引脚的时钟RCC->APB2ENR|=RCC_APB2ENR_IOPAEN;2.设置GPIO的工作模式//PA0的工作模式为通用推挽输出模式//CNF选择输入或输出的不同模式GPIOA->CRL&=~GPI</div> </li> <li><a href="/article/1902954927089577984.htm" title="TK矩阵系统：高效管理与智能化操作平台" target="_blank">TK矩阵系统：高效管理与智能化操作平台</a> <span class="text-muted">m0_74891046</span> <a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a> <div>随着TikTok等社交媒体平台的快速发展，短视频创作和内容运营逐渐成为互联网行业的重要组成部分。为了帮助内容创作者、品牌运营商以及数据分析人员更高效地管理多个TikTok账号并优化运营策略，TK矩阵系统提供了一种全新的解决方案，结合了先进的软件技术与硬件设施，旨在简化操作流程，提高工作效率。TK矩阵系统概述TK矩阵系统是一款集成软件与硬件的综合平台，专为TikTok内容管理和数据采集设计。系统使用</div> </li> <li><a href="/article/1902954296677298176.htm" title="兵器室门禁管理系统/智慧库室管控系统" target="_blank">兵器室门禁管理系统/智慧库室管控系统</a> <span class="text-muted">立控信息</span> <a class="tag" taget="_blank" href="/search/%E6%8E%A7%E5%88%B6%E7%B3%BB%E7%BB%9F/1.htm">控制系统</a><a class="tag" taget="_blank" href="/search/%E9%97%A8%E7%A6%81/1.htm">门禁</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E4%BE%B5%E6%8A%A5%E8%AD%A6/1.htm">入侵报警</a><a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83%E6%8E%A7%E5%88%B6/1.htm">环境控制</a> <div>智慧营区库室联管联控系统对营区库室安全管理意义重大，它集成指纹、人脸、动态密码等多元身份识别技术，实现严谨门禁管控，非法开门即报警，断网也能保安全；整合多种报警设备，自动布防，全方位监测入侵；具备视频交互与监控功能，方便沟通和监督；还能依据预设温湿度自动调控环境，从多维度构建起全面、智能、高效的安全管理体系，为营区库室安全稳定运行提供坚实保障。</div> </li> <li><a href="/article/1902953037056503808.htm" title="一、大语言模型微调 vs. 大语言模型应用" target="_blank">一、大语言模型微调 vs. 大语言模型应用</a> <span class="text-muted">AI Echoes</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>一、大语言模型微调vs.大语言模型应用1.微调（Fine-Tuning）的含义与特点定义与作用微调指在预训练好（通用）的基础模型上，通过在特定领域或任务的数据集上进一步训练来调整模型参数，使其在该领域任务中获得更优表现。这种方法可以使通用模型“定制化”，更好地理解专业术语和领域知识，从而提升准确性和响应质量。例如，为医疗、法律、金融等垂直领域构建专属模型，往往需要在预训练模型基础上进行微调。特点参</div> </li> <li><a href="/article/1902952910925393920.htm" title="Hive面试题" target="_blank">Hive面试题</a> <span class="text-muted">御风行云天</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E5%A4%A7%E5%85%A8/1.htm">面试题大全</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>Hive面试题1Hive基础概念1.1解释Hive是什么以及它的用途Hive的主要用途：1.2描述Hive架构和组件1.HiveCLI/Beeline和WebUI2.HiveQL3.HiveDriver（驱动）4.Metastore5.Compiler（编译器）6.Optimizer（优化器）7.Executor（执行器）8.HadoopCoreComponents（核心组件）9.HiveUDFs</div> </li> <li><a href="/article/1902951146767577088.htm" title="SpringBoot可以同时处理多少请求？" target="_blank">SpringBoot可以同时处理多少请求？</a> <span class="text-muted">java1234_小锋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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>大家好，我是锋哥。今天分享关于【SpringBoot可以同时处理多少请求？】面试题。希望对大家有帮助；SpringBoot可以同时处理多少请求？1000道互联网大厂Java工程师精选面试题-Java资源分享网SpringBoot本身并不直接限制可以处理的请求数量，能处理多少请求取决于几个因素，主要是底层的Web服务器（如嵌入式的Tomcat、Jetty或Undertow），以及服务器硬件、操作系统</div> </li> <li><a href="/article/1902951147790987264.htm" title="说说你对Java里Integer缓存的理解？" target="_blank">说说你对Java里Integer缓存的理解？</a> <span class="text-muted">java1234_小锋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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里Integer缓存的理解？】面试题。希望对大家有帮助；说说你对Java里Integer缓存的理解？1000道互联网大厂Java工程师精选面试题-Java资源分享网Java中的Integer缓存是为了提高性能而引入的优化机制，特别是对于频繁使用的小范围整数的情况。具体来说，Integer类对从-128到127范围内的整数值做了缓存。这些整数值被缓存起</div> </li> <li><a href="/article/1902950390756864000.htm" title="编程语言选择分析：C#、Rust、Go 与 TypeScript 编译器优化" target="_blank">编程语言选择分析：C#、Rust、Go 与 TypeScript 编译器优化</a> <span class="text-muted">互联网搬砖老肖</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8/1.htm">工具使用</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%8A%9B%E8%AE%A1%E5%88%92/1.htm">原力计划</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a> <div>编程语言选择分析：C#、Rust、Go与TypeScript编译器优化在讨论编程语言的选择时，特别是针对微软的C#和Rust，以及谷歌的Go语言，以及微软试图通过Go来拯救TypeScript编译器的问题，我们可以从多个角度来分析和理解。首先，我们来逐一分析这些语言的特点和它们各自的应用场景。1.C#C#是微软开发的一种面向对象的编程语言，它是.NET框架的核心部分。C#广泛用于Windows应用</div> </li> <li><a href="/article/1902949633383002112.htm" title="解决Ubuntu报错 E: Unable to locate package yum" target="_blank">解决Ubuntu报错 E: Unable to locate package yum</a> <span class="text-muted">SH-ke</span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/yum/1.htm">yum</a><a class="tag" taget="_blank" href="/search/apt/1.htm">apt</a> <div>开门见山，Ubuntu的包管理工具是apt-get，所以不必再安装yum。如果要安装其他包需要使用apt-get命令。#这里以locate命令为例sudoapt-getinstallmlocate下文就是问题解决的全过程了。1.报错E:Unabletolocatepackageyum我在学习Linux命令的时候需要使用locate命令，但是Ubuntu的系统里没有安装locate命令。根据弹幕的指</div> </li> <li><a href="/article/1902949128502046720.htm" title="IDEA本地启动flink 任务" target="_blank">IDEA本地启动flink 任务</a> <span class="text-muted">Direction_Wind</span> <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/flink/1.htm">flink</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1pom中添加org.apache.flinkflink-clients_${scala.binary.version}${flink.version}org.apache.flinkflink-runtime-web_${scala.binary.version}${flink.version}2下载flink-dist包并3打印日志中搜索localhost可以找到flink的管理页面</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. <!-- <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>