CoderSharry

【前端】HTML

文章目录

前言
1. HTML 概念
2. HTML 常用标签
- 2.1 段落与标题
- 2.2 粗体与斜体
- 2.3 删除线与下划线
- 2.4 预格式与块
- 2.5 图像与超链接
- 2.6 列表与表格
- 2.7 字体与内联窗口
- 2.8 框
- 2.9 按钮
- 2.10 下拉选择与文本域
3. 补充与总结
- 3.1 如何理解“超文本标记语言”？
- 3.2 总结
参考教程

跟着大佬学前端之HTML

前言

随着时间的推移、科技的发展、社会的进步，各行业对工人的要求也越来越高。至于我们程序猿，越来越多的厂开始要求咱们具备全栈能力。最近咱大佬 @CaptinKoo 就玩上了嘛，承担起全栈的开发工作；我们单位也对前端有更多的需求，因此我决定今日起跟着@CaptinKoo学前端，一来在单位可以随时用上，二来拓宽技术栈，有空可以自己整点网站应用；拓宽技术栈总有好处滴。

学习目标

学习 HTML 基础概念、常用标签
学习常用标签的一些属性，用法。留个印象，用到再查，不必强记

工具选用
前端的常用集成工具有：VSCode、Hbuilder、IDEA、WebStorm等，无论是否初学，上述均可选用。

1. HTML 概念

HTML是什么
HTML (Hypertext Markup Language) 是用于创建网页的标记语言，称为超文本标记语言。

HTML基础结构
以下，我们用一个 HelloWorld 的例子来说明 HTML 的基础结构：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Worldtitle>
head>
<body>
    
    <p>Hello World!p>
body>
html>

内容解析
我们先来解释一下上述例子的内容：

标签告诉浏览器该文档是 HTML 文档。
标签是 HTML 文档的根元素。它包含文档中的所有其他元素。
标签包含有关文档的信息，例如标题、字符编码和元标签。
标签指定文档的字符编码。
标签告诉浏览器将文档缩放到适合设备屏幕宽度的大小。
</code>标签指定文档的标题。</li> <li><code><body></code>标签包含文档的主要内容。</li> <li><code></code>标签定义一个段落。接下来的学习中，我们会接触到更多不同功能的标签。</li> <li><code>Hello World!</code>标签包含文本“Hello World！”。</li> </ul> 一般情况下，我们学习与开发的过程中，主要关注<code><body></code>里的内容，及以后将要学习到的<code><style></code>、<code><script></code>等标签内容即可。关于上面解释的标签、属性等概念是什么，在下面的相关概念介绍： 相关概念 <ul> <li>标签：HTML由一套标记标签组成，通常就叫标签。一个标签通常由开始标签和结束标签组成。例如，这个示例的<code><body></code>是开始标签，<code></body></code>是结束标签，区别在于结束标签在标签名描述之前加了<code>/</code>。在接下来的学习中，我们会接触到自闭标签，意思是省略了结束标签的标签，例如，一个单独的<code> </code>标签表示一个换行，省略了结束标签。有点混淆了？不用慌，常见的自闭标签只有几个，用到再查或者多练即可掌握。</li> <li>注释：HTML 的注释由<code></code>表示，和XML的注释格式是一致的，通常我们使用IDE工具快捷键生成即可。</li> <li>元素：元素是指一个标签开始和结束之间的所有代码。例如，上述例子中的<code>Hello World!</code>，"Hello World!"就是<code></code>标签的元素。</li> <li>属性：标签内的看似赋值的操作，称为属性。如上述例子的：<code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>，" name=“viewport” " 就是一个属性。“name” 是属性名，“viewport” 是属性值，属性值应该用双引号括起来。</li> </ul> <h2>2. HTML 常用标签</h2> 这一小节介绍常见标签，篇幅关系，此处选用2个标签一组来学习。 <h3>2.1 段落与标题</h3> 段落 在上文的 HelloWorld 示例中，我们的“Hello World!”文本是被p标签包裹的。p代表一个段落。段落会自动换行。 标题 标题会自动粗体，大写其中的内容，并且带有换行效果。 一般会使用<code><h1></code>到 <code><h6></code>分别表示不同大小的标题，其中，数字越小，标题越大。 示例 <pre><code class="prism language-html"><body>  This is a normal text. This is a normal text.  <p>This is a p paragraph.</p> <p>This is a p paragraph.</p>  <h1>This is a h1 tag.</h1>  <h2>This is a h2 tag.</h2>  <h3>This is a h3 tag.</h3>  <h4>This is a h4 tag.</h4>  <h5>This is a h5 tag.</h5>  <h6>This is a h6 tag.</h6> </body> </code></pre> <h3>2.2 粗体与斜体</h3> 粗体 粗体主要由两个标签实现，b与strong标签。 b与strong标签粗体实现效果是一样的，但strong更多的是强调语义上的加重，提醒用户该文本的重要性。在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容。一般情况下推荐使用strong。 斜体 斜体也主要由两个标签实现，i与em标签。 i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性。 em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。 示例 <pre><code class="prism language-html"><body>  <p><strong>This is a strong tag with strong text</strong></p> <p><b>This is a b tag with b text</b></p>  <p><em>This is an em tag</em></p> <p><i>This is an i tag</i></p>  <p><strong><em>This is a strong and em tag</em></strong></p> </body> </code></pre> 小补充：若需要复合的效果，如斜体加粗的段落，就可像上述的例子一样进行组合。 <h3>2.3 删除线与下划线</h3> 删除线 删除线也有两种标签实现，del和s，但一般情况下，由于一些浏览器不支持s标签，因此建议使用del标签。 下划线 下划线也有两种标签实现，ins和u，一般情况下，也是语义侧重的原因，不建议使用u，因此我们掌握ins即可。特别地，由于超链接的形式和下划线也很像，实际开发中，非特殊原因不建议使用下划线。 示例 <pre><code class="prism language-html"><body>  <del>This text has been deleted.</del> <br/>  <s>This text has been struck through.Not suggest to use this tag.</s> <br/>  <ins>This text has been inserted.</ins> <br>  <u>This text has been underlined. Not suggest to use this tag.</u> <br> </body> </code></pre> 小补充：此处的示例，我用了br自闭标签来换行。是的，br是一个换行，且自闭标签既可以省略<code>/</code>，也可以将<code>/</code>放到标签名之后，如上述例子所示。 <h3>2.4 预格式与块</h3> 这一小节的预格式实际用到较少，了解一下即可。块是需要重点掌握的。 预格式 预格式使用的是pre标签。预格式包裹的内容，可以根据其内容自动换行，以达到“预先格式化”的效果。 块 块有两种：span 与 div。块通常结合样式进行布局。块包裹一段代码，使用同一的块样式布局即可统一布局，增加代码复用性。 <ul> <li>div ：块级元素，常见的块元素 h1,table,p等</li> <li>span ：行内元素，也称内联元素，常见的内联元素还有 img,a,strong等</li> </ul> 块级与行内元素的直接可见的区别在于，div 自动换行，span 则不会。 示例 <ul> <li>代码示例：</li> </ul> <pre><code class="prism language-html"><body>  This is a normal text without any tag. It won't have any formatting.  <pre> This is a pre tag. It is used to display preformatted text. It preserves the spaces and line breaks. </pre>  <div style="background-color: yellow; margin-left:150px"> <p> This is a div tag. It is used to group content. </p> <p>It can be styled using CSS.</p> </div>  <p>This is a paragraph with <span style="background-color: green; margin-left:150px">a green span</span> inside it.</p>  <div> <p>This is a paragraph inside a div.</p> </div> <span> This is a paragraph inside a span. </span> <span> This is a paragraph inside a span. </span> </body> </code></pre> <ul> <li>效果示例图： <a href="http://img.e-com-net.com/image/info8/80ccc1017262455ea16298fff08c02b4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80ccc1017262455ea16298fff08c02b4.jpg" alt="【前端】HTML_第1张图片" width="650" height="257" style="border:1px solid black;"></a></li> </ul> <h3>2.5 图像与超链接</h3> 图像 图像的标签是img。具体显示什么图像,图像的大小、布局，替换文字等，均用图像的属性来指定。一般若要显示不同目录的图像，使用相对路径或绝对路径。 超链接 超链接的标签是a。跳转的链接也由属性指定。 示例 <pre><code class="prism language-html"><body>  <img src="../images/title.png" alt="Image"/> <p>This is a test image is a test image </p> <img width="200px" height="200" src="../images/title.png" alt="Image"> <p>This is an image with alt attribute and width and height</p> <img src="image.png" alt="Image"/> <p>This is an image ,didn't find, display alt</p>  <a href="https://www.baidu.com/">百度一下，你就知道</a> </body> </code></pre> <h3>2.6 列表与表格</h3> 列表 列表分为有序列表和无序列表，用ol和ul标签分别表示。列表标签内用li标签表示每一行。 表格 表格标签为table，由border属性设置边框。表格里th为表头，每一行为td标签，每一列为tr标签。 举例 <pre><code class="prism language-html"><body>  <ul> <li>Java</li> <li>Python</li> </ul>  <ol> <li>Java</li> <li>Python</li> </ol>  <table> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Mary</td> <td>30</td> <td>Female</td> </tr> </table>  <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Mary</td> <td>30</td> <td>Female</td> </tr> </table> </body> </code></pre> 除了可以使用CSS对 table 内的元素进行样式指定，table本身的属性可提供合并单元格、自定义大小等。 <pre><code class="prism language-html"> <table border="1" width="100%" height="100%"> <tr> <th colspan="3">Table Title</th> </tr> <tr> <th bgcolor="#FF0000">First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>Doe</td> <td>25</td> </tr> <tr> <td rowspan="2">Jane</td> <td>30</td> </tr> <tr> <td width="50%">Mike</td> <td>Johnson</td> <td>40</td> </tr> </table> </code></pre> <h3>2.7 字体与内联窗口</h3> 这一小节的内容实际用得相比其它标签用得不算太多，现阶段了解一下即可。 字体 字体用font标签描述，一般结合属性和样式使用。 内联窗口 内联窗口是iframe，表示一个独立窗口显示外部网页。 示例 <pre><code class="prism language-html"><body>  <p style="font-family: Arial, sans-serif; color: blue;">This is a paragraph with Arial font.</p> <p style="font-family: Verdana, sans-serif; color: red;">This is a paragraph with Verdana font.</p> <p style="font-family: Georgia, serif;">This is a paragraph with Georgia font.</p>  <iframe src="https://www.baidu.com" width="500" height="300"></iframe> </body> </code></pre> <h3>2.8 框</h3> 框有文本、密码、单选、复选、时间、邮件等框。框用的是input标签，通过type属性指定类型，可以通过其它属性设置样式。input同时也是一个自闭标签，一般我们不需要写input的结束标签 常见的框对应的 type： <table> <thead> <tr> <th>框</th> <th>type</th> </tr> </thead> <tbody> <tr> <td>文本框</td> <td>text</td> </tr> <tr> <td>密码框</td> <td>password</td> </tr> <tr> <td>单选框</td> <td>radio</td> </tr> <tr> <td>多选框</td> <td>checkbox</td> </tr> <tr> <td>时间框</td> <td>time</td> </tr> <tr> <td>邮件框</td> <td>email</td> </tr> <tr> <td>数字框</td> <td>number</td> </tr> </tbody> </table> 举例 <pre><code class="prism language-html"><body>  <input type="text"> <br>  <input type="text" placeholder="Enter your name"> <br>  <input type="password"> <br>  <input type="email"> <br>  <input type="number"> <br>  <input type="date"> <br>  <input type="time"> <br>  <input type="datetime-local"> <br>  <input type="file"> <br>  <br> <input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female  <br> <input type="checkbox" name="interest" value="sports">Sports <input type="checkbox" name="interest" value="music">Music <input type="checkbox" name="interest" value="reading">Reading </body> </code></pre> <h3>2.9 按钮</h3> 按钮的标签也可以是 input ，不同的按钮也用不同的 type 表示。 常见的 input 按钮对应的 type： <table> <thead> <tr> <th>按钮</th> <th>type</th> </tr> </thead> <tbody> <tr> <td>普通按钮</td> <td>button</td> </tr> <tr> <td>提交按钮</td> <td>submit</td> </tr> <tr> <td>重置按钮</td> <td>reset</td> </tr> </tbody> </table> 除了 input 按钮之外， button 标签也是按钮。其中，button 标签的功能更加丰富。 input通常用于表单中，button 则用type=“submit”属性也可使其拥有提交能力。 示例 <pre><code class="prism language-html"><body>  <input type="button" value="Click Me" onclick="location.href='https://www.baidu.com'" /> <br> <input type="button" value="Reset" onclick="location.href='https://www.baidu.com'" /> <br> <input type="button" value="Submit" onclick="location.href='https://www.baidu.com'" />  <button type="button" onclick="location.href='https://www.baidu.com'">Click Me</button> <br> <button type="submit" onclick="location.href='https://www.baidu.com'">Click Me</button> </body> </code></pre> <h3>2.10 下拉选择与文本域</h3> 下拉选择 下拉选择的标签是 select ，提供选择的元素用 option 标签包裹。 文本域 文本域的标签是 textarea 。 示例 <pre><code class="prism language-html"><body>  <select> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <br>  <textarea rows="4" cols="50">Enter your text here</textarea> </body> </code></pre> <h2>3. 补充与总结</h2> <h3>3.1 如何理解“超文本标记语言”？</h3> <ul> <li> “超文本”（HyperText）指的是文本中包含的链接，可以通过点击链接跳转到其他页面或文档。 </li> <li> “标记语言”（Markup Language）指的是用标记（标签）来定义文本的结构和样式。 因此，HTML被称为超文本标记语言，是因为它可以创建包含链接的文本，并使用标记来定义文本的结构和样式。 </li> </ul> 上述解释来自 ——IT干货网 <h3>3.2 总结</h3> 本文我们学习了HTML 基础概念、基本结构以及常见HTML标签。HTML是网页的骨架，是前端的基础。后续CSS、JavaScript的学习都要基于HTML。 对于标签的学习，我们一是要了解常见的标签及其功能，要留个印象。通常，都是用到再查，查其详细用法，以及常用属性。 <h2>参考教程</h2> <ul> <li>菜鸟教程</li> <li>how2j-优秀全栈教程</li> <li>IT干货网</li> <li>微软教程</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1755829686715301888"></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">你可能感兴趣的:(前端,前端,html,状态模式)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902707338272370688.htm" title="前端性能优化之SSR优化" target="_blank">前端性能优化之SSR优化</a> xiangzhihong8 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应</div> </li> <li><a href="/article/1902699520030994432.htm" title="前端面经分享（25/03/18）" target="_blank">前端面经分享（25/03/18）</a> CreatorRay <a class="tag" taget="_blank" href="/search/react/1.htm">react</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a> <div>北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年上家公司的项目为什么会选择MQTT进行通信React常用Hook为什么React不能在条件语句里用Hook前端常见的优化策略React如何捕获子组件的错误React给节点加key会有什么效果最近俩家公司都用WebSocket做了什么HTTP各个版本的区别跨域的常见解决方案前端常见布局WebSocket和SSE的区别A页面滚动到一</div> </li> <li><a href="/article/1902696998495121408.htm" title="智慧物流数字管理系统设计案例分析" target="_blank">智慧物流数字管理系统设计案例分析</a> UI设计开发服务商 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一</div> </li> <li><a href="/article/1902695734495473664.htm" title="前端面经真题解析10-字节/抖音电商/前端/超详细记录" target="_blank">前端面经真题解析10-字节/抖音电商/前端/超详细记录</a> 浪里个浪zxf <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录1.自我介绍2.介绍下自己的项目3.看你项目里面用了axios,说下请求拦截和响应拦截怎么做？4.说下项目里面前后端交互过程及设计？5.怎么处理切换分页请求数据的，优化手段？6.说下你爬取别人网站数据的时候，别人如果设置了拦截，你的解决方案是？7.你说下http请求的refer字段？**Origin字段：****Referer字段：****Host字段****区别：**8.看你做了路由懒加</div> </li> <li><a href="/article/1902695229501272064.htm" title="【网易雷火秋招】前端面经分享" target="_blank">【网易雷火秋招】前端面经分享</a> 编程自学-领绿学长 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%B1%82%E8%81%8C%E6%8B%9B%E8%81%98/1.htm">求职招聘</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>网易网易雷火是国内一流且最有创新力的游戏研发团队，是网易杭州的第一个游戏工作室。雷火开创性的打造了《逆水寒》、《永劫无间》、《倩女幽魂》、《全明星街球派对》等一众爆款游戏；并在二次元、FPS、主机游戏等方向上持续探索，《代号：无限大》等在研项目收到玩家广泛关注。与此同时，我们与全球合作伙伴一起共同构建开放、协同、共荣共生的产业生态，致力于让中国游戏走出去，让世界听见雷火声音。雷火还拥有国内专业从事</div> </li> <li><a href="/article/1902694722653188096.htm" title="【万字总结】前端全方位性能优化指南（四）——虚拟DOM批处理、文档碎片池、重排规避" target="_blank">【万字总结】前端全方位性能优化指南（四）——虚拟DOM批处理、文档碎片池、重排规避</a> 庸俗今天不摸鱼 <a class="tag" taget="_blank" href="/search/Web%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%90%88%E9%9B%86/1.htm">Web性能优化合集</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>前言在浏览器宇宙中，DOM操作如同「时空裂缝」——一次不当的节点更新可能引发连锁重排，吞噬整条渲染流水线的性能。本章直面这一核心矛盾，以原子级操作合并、节点记忆重组、排版禁忌破解为三重武器，重构DOM更新的物理法则。通过虚拟DOM的批处理引擎将千次操作坍缩为单次提交，借助文档碎片池实现90%节点的跨时空复用，再以transform替代top等20项反重排铁律，我们将彻底终结「JavaScript线</div> </li> <li><a href="/article/1902694091133612032.htm" title="前端面经分享（25/03/19）" target="_blank">前端面经分享（25/03/19）</a> CreatorRay <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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>北京一家做协同办公软件出海的公司，技术一面，20k-40k，要求3-5年详细聊了一下上家公司的项目上家公司的项目是不做了吗，离职原因是什么，你觉得公司的这个产品怎么样在做AI类的业务时，作为前端感觉跟常规业务有什么区别详细聊了一下上上家公司的项目细节讲一下项目里用编辑器做了什么事遇到过什么难解决的问题项目里提供的UI自动化的功能是怎么做的聊了一下写博客的事情有没有了解过浏览器底层的东西最近在研究或</div> </li> <li><a href="/article/1902682115355504640.htm" title="常用的pdf技术有哪些？--笔记" target="_blank">常用的pdf技术有哪些？--笔记</a> 我不是彭于晏灬 <a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>常用的pdf技术有哪些？1.iTextPDF：iText是著名的开放项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。Openoffice：openoffice是开源软件且能在windows和linux平台下运行，可以灵活的将word或者Excel转化为PDF文档。JasperReport：是一个强大、灵活</div> </li> <li><a href="/article/1902676816485740544.htm" title="【VSCode】VSCode常用快捷键" target="_blank">【VSCode】VSCode常用快捷键</a> Ctrl Z. <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>！+回车键快速创建html骨架Ctrl+/单行注释（取消）快捷键Alt+Shift+A块注释（取消）快捷键Ctrl+加号代码放大（适合浏览器）Ctrl+减号代码缩小（适合浏览器）Ctrl+Shift+K删除当前行Ctrl+H替换查询下一个/上一个：F3/Shift+F3选中所有出现在查询中的：Alt+EnterCtrl+D匹配当前选中的词汇或者行，再次选中-可操作Shift+Alt+F格式化代码F</div> </li> <li><a href="/article/1902674423505285120.htm" title="【VSCode】VSCode常用插件" target="_blank">【VSCode】VSCode常用插件</a> Ctrl Z. <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>Chinese(Simplified)(简体中文)LanguagePackforVisualStudioCode：简体中文支持插件HTML/CSS/JavaScriptSnippets：支持HTML/CSS/JavaScript快速匹配输入HTMLSnippets：这个插件提供了一系列HTML代码片段，通过简单的缩写就可以快速生成常用的HTML结构。例如，输入!并按下Tab键，就可以快速生成一个完</div> </li> <li><a href="/article/1902664210089832448.htm" title="浏览器开发者工具深度调试指南：从入门到高阶技巧" target="_blank">浏览器开发者工具深度调试指南：从入门到高阶技巧</a> 109702008 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>浏览器开发者工具（DevTools）是现代前端工程师的"瑞士军刀"，本文将系统解析其核心功能与实战技巧，助您掌握高效调试的终极奥义。一、基础操作与核心功能1.1工具启动方式快捷键：F12（Win/Linux）|Cmd+Opt+I（Mac）右键菜单：网页任意位置右键→检查（Inspect）移动端调试：启用设备模式（Ctrl+Shift+M）1.2核心面板全景图面板名称核心功能快捷键切换Element</div> </li> <li><a href="/article/1902659669063692288.htm" title="《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅" target="_blank">《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅</a> JJCTO袁龙 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这</div> </li> <li><a href="/article/1902659037737054208.htm" title="Webpack常见面试题总结" target="_blank">Webpack常见面试题总结</a> xiangzhihong8 <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Native/1.htm">Native</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、谈谈你对Webpack的理解1.1背景Webpack的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：但这种模块化开发的弊端也十分</div> </li> <li><a href="/article/1902656013656453120.htm" title="最完整的webpack Dll打包与采坑总结" target="_blank">最完整的webpack Dll打包与采坑总结</a> 仰望星空的代码 <a class="tag" taget="_blank" href="/search/Vue.js%E8%B8%A9%E5%9D%91%E8%AE%B0/1.htm">Vue.js踩坑记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/dll%E6%89%93%E5%8C%85/1.htm">dll打包</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85%E4%BC%98%E5%8C%96/1.htm">打包优化</a> <div>webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），Dl</div> </li> <li><a href="/article/1902654375545860096.htm" title="echarts柱状图区间滚动" target="_blank">echarts柱状图区间滚动</a> 没有天赋的搬砖者 <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>constxData=['00:00','01:00','02:00','03:00','04:00','05:00','06:00'];constbarData=[5,20,36,10,10,20];option={tooltip:{show:true,trigger:'axis',confine:true,formatter(item){consthtml=`${xData[item[0].d</div> </li> <li><a href="/article/1902653238423908352.htm" title="Java WebSocket与项目页面（通常是HTML + JavaScript）之间建立连接并传输数据" target="_blank">Java WebSocket与项目页面（通常是HTML + JavaScript）之间建立连接并传输数据</a> hh_fine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>JavaWebSocket与项目页面（通常是HTML+JavaScript）之间建立连接并传输数据1.创建JavaWebSocket服务器：使用JavaWebSocketAPI创建一个WebSocket服务器端点。2.在HTML页面中使用JavaScript连接WebSocket：通过JavaScript的WebSocketAPI与JavaWebSocket服务器建立连接。3.双向数据传输：实现服</div> </li> <li><a href="/article/1902646431789936640.htm" title="前端开发：Webpack的使用总结" target="_blank">前端开发：Webpack的使用总结</a> 三掌柜666 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E6%B1%87%E6%80%BB/1.htm">web前端知识汇总</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工</div> </li> <li><a href="/article/1902636857032765440.htm" title="什么时候用到jupyter notebook的NBConvert" target="_blank">什么时候用到jupyter notebook的NBConvert</a> 老光私享 <a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>JupyterNotebook的NBConvert功能是用来将JupyterNotebook文件转换为其他格式的工具。通常情况下，我们会用到NBConvert功能来将JupyterNotebook文件转换为HTML、LaTeX、PDF或其他文本格式。这样可以方便地将JupyterNotebook分享给他人，或者将其用于报告、文章、文档或其他写作目的。要使用NBConvert功能，需要在命令行中运行</div> </li> <li><a href="/article/1902636729777582080.htm" title="【css酷炫效果】纯CSS实现球形阴影效果" target="_blank">【css酷炫效果】纯CSS实现球形阴影效果</a> 冰夏之夜影 <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>【css酷炫效果】纯CSS实现球形阴影效果缘创作背景html结构css样式完整代码基础版进阶版(动态版)效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码，令人丧气的是：活动的领域有要求，不是发够就行，瞬间意志消沉。html结构css样式.button{background-image:url('a.gif');border-</div> </li> <li><a href="/article/1902636351883374592.htm" title="UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING）" target="_blank">UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING）</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%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/1.htm">项目实践</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。快速开发模板unibest：最好的uniapp开发框架，由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui（</div> </li> <li><a href="/article/1902635596015267840.htm" title="sql与html" target="_blank">sql与html</a> 就很对 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>sql与htmlsqlite3sqlsql_callbacksql_dicthtmlhtml01ser02sersql_workhtml_ser03.htmlwebser06ser012.html011.html013.html015.html03.html04.html05.html06.htmlsqlite3sql//sqlite3_open//sqlite3_exec//sqlite3_cl</div> </li> <li><a href="/article/1902625250974167040.htm" title="详细介绍 Jupyter nbconvert 工具及其用法：如何将 Notebook 转换为 Python 脚本" target="_blank">详细介绍 Jupyter nbconvert 工具及其用法：如何将 Notebook 转换为 Python 脚本</a> 源代码杀手 <a class="tag" taget="_blank" href="/search/python%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7/1.htm">python使用技巧</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>nbconvert是Jupyter提供的一个非常强大的工具，允许用户将JupyterNotebook文件（.ipynb）转换成多种格式，包括Python脚本（.py）、HTML、PDF、LaTeX等。你可以通过命令行来运行nbconvert，也可以在JupyterNotebook中通过一些自定义的设置来实现转换。安装nbconvert通常情况下，nbconvert会随Jupyter一起安装，因此不</div> </li> <li><a href="/article/1902619196961910784.htm" title="【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建" target="_blank">【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建</a> un_fired <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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/java/1.htm">java</a> <div>系列文章目录【SpringAI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端+后端代码）【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建文章目录系列文章目录前言1.Service层知识库构建与检索函数详</div> </li> <li><a href="/article/1902613138394640384.htm" title="个人AI助手的未来：Yi AI开源系统助力快速搭建" target="_blank">个人AI助手的未来：Yi AI开源系统助力快速搭建</a> 耶耶Norsea <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E6%9D%82%E7%83%A9/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%BC%80%E6%BA%90/1.htm">开源</a> <div>摘要YiAI推出了一站式个人AI助手平台解决方案，助力用户快速搭建专属AI助手。该平台采用全套开源系统，涵盖前端应用、后台管理及小程序功能，并基于MIT协议开放使用。同时，平台集成了本地RAG方案，利用Milvus与Weaviate向量数据库支持本地部署，为用户提供高效、灵活的数据处理能力。关键词个人AI助手,快速搭建,开源系统,本地RAG,向量数据库一、YiAI开源系统概述1.1个人AI助手的发</div> </li> <li><a href="/article/1902610360431603712.htm" title="HTML：ul标签的作用" target="_blank">HTML：ul标签的作用</a> 凭君语未可 <a class="tag" taget="_blank" href="/search/Web%E5%BC%80%E5%8F%91/1.htm">Web开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>ul标签解释解释举例效果分析``标签支持的属性1.`type`举例：效果：分析2.`class`举例：效果：分析解释在HTML中，标签表示无序列表（UnorderedList）。它用于创建一个项目列表，其中列表项通常以圆形、方形或none的图标（也称为列表项标记）进行标记。每个列表项都是使用（listitem）标签创建的。举例123效果分析在上面的例子中，我们创建了一个包含三个项目的无序列表，这些</div> </li> <li><a href="/article/1902599516868112384.htm" title="2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新...." target="_blank">2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新....</a> 祈澈菇凉 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.什么是React？它的主要特点是什么？答案解析：React是一个用于构建用户界面的JavaScript库，主要用于构建单页应用。其主要特点包括：组件化：React应用由多个可重用的组件组成，便于管理和维护。虚拟DOM：React使用虚拟DOM提高性能，通过最小化实际DOM操作来优化渲染过程。单向数据流：数据在组件之间以单向流动的方式传递，简化了数据管理和调试。声明式编程：React允许开发者以</div> </li> <li><a href="/article/1902598381671346176.htm" title="Ubuntu 22.05编译OpenWrt 23.05实战" target="_blank">Ubuntu 22.05编译OpenWrt 23.05实战</a> 诺依阁 <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</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/linux/1.htm">linux</a> <div>本篇文章原文地址:https://blog.nuoyis.net/posts/9990.html哔哩哔哩视频教程:https://www.bilibili.com/video/BV1rnsCe1ErV博主基本插件版本推荐编译配置:16核心20G内存150G硬盘用于存储数据包以及编译包等前情提要1.需要准备能访问到外网域名的加速器(自己斟酌)2.准备一个安装好的ubuntu虚拟机(或者直接使用海外服</div> </li> <li><a href="/article/1902594848398045184.htm" title="Python前端开发" target="_blank">Python前端开发</a> PITSU <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中</div> </li> <li><a href="/article/1902593208039305216.htm" title="初识HTML中的div块元素—零基础自学网页制作" target="_blank">初识HTML中的div块元素—零基础自学网页制作</a> 猿说前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>块元素基础属性讲解元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。那时，大街小巷上有好多网吧。那时，马云刚刚辞去工作准备创业。那时，发送邮件的操作都会出现在计算机课程中。那时，对页面还没有现在的跨平台</div> </li> <li><a href="/article/1902581729210724352.htm" title="FastAPI测试策略：参数解析单元测试" target="_blank">FastAPI测试策略：参数解析单元测试</a> qcidyu <a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E4%BC%A0%E6%92%AD%E9%AA%8C%E8%AF%81/1.htm">异常传播验证</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E6%B5%8B%E8%AF%95/1.htm">依赖注入测试</a><a class="tag" taget="_blank" href="/search/%E8%AF%B7%E6%B1%82%E6%A8%A1%E6%8B%9F%E6%8A%80%E6%9C%AF/1.htm">请求模拟技术</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96%E7%8E%87%E4%BC%98%E5%8C%96/1.htm">测试覆盖率优化</a><a class="tag" taget="_blank" href="/search/Pydantic%E9%AA%8C%E8%AF%81%E6%B5%8B%E8%AF%95/1.htm">Pydantic验证测试</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E7%AD%96%E7%95%A5/1.htm">单元测试策略</a><a class="tag" taget="_blank" href="/search/%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90%E6%B5%8B%E8%AF%95/1.htm">参数解析测试</a> <div>扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：核心测试方法论1.1三层测试体系架构#第一层：模型级测试deftest_user_model_validation():withpytest.raises(ValidationError):User(age=-5)#第二层：依赖项测试deftest_auth_dependency()</div> </li> <li><a href="/article/23.htm" title="HttpClient 4.3与4.3版本以下版本比较" target="_blank">HttpClient 4.3与4.3版本以下版本比较</a> spjich <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div>网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3</div> </li> <li><a href="/article/150.htm" title="Essential Studio Enterprise Edition 2015 v1新功能体验" target="_blank">Essential Studio Enterprise Edition 2015 v1新功能体验</a> Axiba <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本</div> </li> <li><a href="/article/277.htm" title="[宇宙与天文]微波背景辐射值与地球温度" target="_blank">[宇宙与天文]微波背景辐射值与地球温度</a> comsci <a class="tag" taget="_blank" href="/search/%E8%83%8C%E6%99%AF/1.htm">背景</a> <div> 宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢? 如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢? &nbs</div> </li> <li><a href="/article/404.htm" title="lvs-server" target="_blank">lvs-server</a> 男人50 <a class="tag" taget="_blank" href="/search/server/1.htm">server</a> <div>#!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start) /sbin/ifconfig eth2:0 $VIP broadca</div> </li> <li><a href="/article/531.htm" title="java的WebCollector爬虫框架" target="_blank">java的WebCollector爬虫框架</a> oloz <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra</div> </li> <li><a href="/article/658.htm" title="jQuery append 与 after 的区别" target="_blank">jQuery append 与 after 的区别</a> 小猪猪08 <div>1、after函数定义和用法： after() 方法在被选元素后插入指定的内容。语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr</div> </li> <li><a href="/article/785.htm" title="mysql知识充电" target="_blank">mysql知识充电</a> 香水浓 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>索引索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎</div> </li> <li><a href="/article/912.htm" title="我的架构经验系列文章索引" target="_blank">我的架构经验系列文章索引</a> agevs <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。（内容是前几天写的，现附上索引）前端架构 http://www.</div> </li> <li><a href="/article/1039.htm" title="Android so lib库远程http下载和动态注册" target="_blank">Android so lib库远程http下载和动态注册</a> aijuans <a class="tag" taget="_blank" href="/search/andorid/1.htm">andorid</a> <div>一、背景在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。二、主要</div> </li> <li><a href="/article/1166.htm" title="linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法" target="_blank">linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法</a> baalwolf <a class="tag" taget="_blank" href="/search/option/1.htm">option</a> <div>在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##</div> </li> <li><a href="/article/1293.htm" title="MongoDB的连接池和连接管理" target="_blank">MongoDB的连接池和连接管理</a> BigCat2013 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也</div> </li> <li><a href="/article/1420.htm" title="AngularJS使用Socket.IO" target="_blank">AngularJS使用Socket.IO</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Socket.IO/1.htm">Socket.IO</a> <div> 目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。 Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实</div> </li> <li><a href="/article/1547.htm" title="[Maven学习笔记四]Maven依赖特性" target="_blank">[Maven学习笔记四]Maven依赖特性</a> bit1129 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>三个模块为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service 依赖作用范围 Maven的dependency定义</div> </li> <li><a href="/article/1674.htm" title="【Akka一】Akka入门" target="_blank">【Akka一】Akka入门</a> bit1129 <a class="tag" taget="_blank" href="/search/akka/1.htm">akka</a> <div>什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio</div> </li> <li><a href="/article/1801.htm" title="zabbix_api之perl语言写法" target="_blank">zabbix_api之perl语言写法</a> ronin47 <a class="tag" taget="_blank" href="/search/zabbix_api%E4%B9%8Bperl/1.htm">zabbix_api之perl</a> <div>zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use </div> </li> <li><a href="/article/1928.htm" title="比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！" target="_blank">比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！</a> brotherlamp <a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E5%B7%A5%E7%A8%8B%E5%B8%88/1.htm">linux运维工程师</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E5%B7%A5%E7%A8%8B%E5%B8%88%E6%95%99%E7%A8%8B/1.htm">linux运维工程师教程</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E5%B7%A5%E7%A8%8B%E5%B8%88%E8%A7%86%E9%A2%91/1.htm">linux运维工程师视频</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E5%B7%A5%E7%A8%8B%E5%B8%88%E8%B5%84%E6%96%99/1.htm">linux运维工程师资料</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E5%B7%A5%E7%A8%8B%E5%B8%88%E8%87%AA%E5%AD%A6/1.htm">linux运维工程师自学</a> <div>比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65 兄弟连Lin</div> </li> <li><a href="/article/2055.htm" title="bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(" target="_blank">bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大</div> </li> <li><a href="/article/2182.htm" title="map的三种遍历方法" target="_blank">map的三种遍历方法</a> chicony <a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div> package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v</div> </li> <li><a href="/article/2309.htm" title="Linux安装mysql的一些坑" target="_blank">Linux安装mysql的一些坑</a> chenchao051 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1、mysql不建议在root用户下运行 2、出现服务启动不了，111错误，注意要用chown来赋予权限，我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf) chown -R cc /etc/init.d/mysql</div> </li> <li><a href="/article/2436.htm" title="Sublime Text 3 配置" target="_blank">Sublime Text 3 配置</a> daizj <a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a><a class="tag" taget="_blank" href="/search/Sublime+Text/1.htm">Sublime Text</a> <div>Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和</div> </li> <li><a href="/article/2563.htm" title="MySQL server has gone away 问题的解决方法" target="_blank">MySQL server has gone away 问题的解决方法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>MySQL server has gone away 问题解决方法，需要的朋友可以参考下。应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h</div> </li> <li><a href="/article/2690.htm" title="javascript/dom:固定居中效果" target="_blank">javascript/dom:固定居中效果</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&</div> </li> <li><a href="/article/2817.htm" title="使用 Spring 2.5 注释驱动的 IoC 功能" target="_blank">使用 Spring 2.5 注释驱动的 IoC 功能</a> e200702084 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a><a class="tag" taget="_blank" href="/search/Office/1.htm">Office</a> <div>使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项将打印机的版面设置成横向打印模式打印本页将此页作为电子邮件发送将此页作为电子邮件发送级别：初级陈雄华 (quickselect@163.com), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日 &nb</div> </li> <li><a href="/article/2944.htm" title="MongoDB常用操作命令" target="_blank">MongoDB常用操作命令</a> geeksun <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 基本操作 db.AddUser(username,password) 添加用户 db.auth(usrename,password) 设置数据库连接验证 db.cloneDataBase(fromhost) </div> </li> <li><a href="/article/3071.htm" title="php写守护进程（Daemon）" target="_blank">php写守护进程（Daemon）</a> hongtoushizi <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655 守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。 1、基本概念 &nbs</div> </li> <li><a href="/article/3198.htm" title="spring整合mybatis,关于注入Dao对象出错问题" target="_blank">spring整合mybatis,关于注入Dao对象出错问题</a> jonsvien <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a> <div>今天在公司测试功能时发现一问题：先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型） @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型） </div> </li> <li><a href="/article/3325.htm" title="对象关系行为模式之标识映射" target="_blank">对象关系行为模式之标识映射</a> home198979 <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E5%85%B3%E7%B3%BB/1.htm">对象关系</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E8%AF%86%E6%98%A0%E5%B0%84/1.htm">标识映射</a> <div>HELLO!架构一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。二、为什么要使用标识映射？在数据源架构模式之数据映射器中 //c</div> </li> <li><a href="/article/3452.htm" title="Linux下hosts文件详解" target="_blank">Linux下hosts文件详解</a> pda158 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>　1、主机名：　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机</div> </li> <li><a href="/article/3579.htm" title="nginx配置文件粗解" target="_blank">nginx配置文件粗解</a> spjich <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>#运行用户#user nobody;#启动进程,通常设置成和cpu的数量相等worker_processes 2;#全局错误日志及PID文件#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log inf</div> </li> <li><a href="/article/3706.htm" title="数学函数" target="_blank">数学函数</a> w54653520 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>public class S { // 传入两个整数，进行比较，返回两个数中的最大值的方法。 public int get( int num1, int nu</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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>