【前端】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/1773569718641295360.htm" title="uni-app实现步骤条" target="_blank">uni-app实现步骤条</a> 夏夏的码农 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st</div> </li> <li><a href="/article/1773504513622212608.htm" title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a> 黑夜照亮前行的路 <a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a> <div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div> </li> <li><a href="/article/1773504261557125120.htm" title="谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程" target="_blank">谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程</a> pigerr杨 <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/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/drivers/1.htm">drivers</a> <div>ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装</div> </li> <li><a href="/article/1773501994674225152.htm" title="虚拟 DOM 的优缺点有哪些" target="_blank">虚拟 DOM 的优缺点有哪些</a> 咕噜签名分发 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优</div> </li> <li><a href="/article/1773495574226599936.htm" title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a> 所谓远行Misnearch <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div> </li> <li><a href="/article/1773450885851054080.htm" title="python转码" target="_blank">python转码</a> Desamond <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，</div> </li> <li><a href="/article/1773382031552610304.htm" title="java实体中返回前端的double类型四舍五入（格式化）" target="_blank">java实体中返回前端的double类型四舍五入（格式化）</a> 婲落ヽ紅顏誶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f</div> </li> <li><a href="/article/1773360885226602496.htm" title="Django forms组件" target="_blank">Django forms组件</a> 在飞行-米龙 <a class="tag" taget="_blank" href="/search/Django/1.htm">Django</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict</div> </li> <li><a href="/article/1773347793847517184.htm" title="UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS" target="_blank">UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS</a> liferecords <a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</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/%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> <div>UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调</div> </li> <li><a href="/article/1773308900838277120.htm" title="Web前端Html的表单" target="_blank">Web前端Html的表单</a> 任家伟 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单</div> </li> <li><a href="/article/1773279695408791552.htm" title="Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）" target="_blank">Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）</a> 王佳斌 <a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Thinkphp/1.htm">Thinkphp</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</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%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。</div> </li> <li><a href="/article/1772795036136701952.htm" title="程序员开发技术整理" target="_blank">程序员开发技术整理</a> laizhixue <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工</div> </li> <li><a href="/article/1772773132000624640.htm" title="【前端学习——js篇】7.函数缓存" target="_blank">【前端学习——js篇】7.函数缓存</a> 笔下无竹墨下有鱼 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的</div> </li> <li><a href="/article/1772709062681624576.htm" title="html版本号 webpack_html-webpack-plugin详解" target="_blank">html版本号 webpack_html-webpack-plugin详解</a> weixin_39994949 <a class="tag" taget="_blank" href="/search/html%E7%89%88%E6%9C%AC%E5%8F%B7/1.htm">html版本号</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面</div> </li> <li><a href="/article/1772700000292241408.htm" title="HTML语言剖析" target="_blank">HTML语言剖析</a> 混沌破晓 <div>HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签</div> </li> <li><a href="/article/1772673815097180160.htm" title="Websocket服务监听收发消息" target="_blank">Websocket服务监听收发消息</a> beiback <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%97%AE%E9%A2%98/1.htm">服务器问题</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致</div> </li> <li><a href="/article/1772673816238030848.htm" title="Netty服务器结合WebSocke协议监听和接收数据" target="_blank">Netty服务器结合WebSocke协议监听和接收数据</a> beiback <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%97%AE%E9%A2%98/1.htm">服务器问题</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa</div> </li> <li><a href="/article/1772654174425645056.htm" title="基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java" target="_blank">基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java</a> 计算机程序老哥 <div>作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个</div> </li> <li><a href="/article/1772647114975805440.htm" title="CDH 启停使用HiveServer2" target="_blank">CDH 启停使用HiveServer2</a> 金刚_30bf <div>翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模</div> </li> <li><a href="/article/1772631263593693184.htm" title="javascript实现SM2加密解密" target="_blank">javascript实现SM2加密解密</a> 人生在勤，不索何获 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu</div> </li> <li><a href="/article/1772617543765262336.htm" title="HTML背景带视频的个人炫酷引导页源码" target="_blank">HTML背景带视频的个人炫酷引导页源码</a> erthre <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:</div> </li> <li><a href="/article/1772553729602551808.htm" title="vue生命周期" target="_blank">vue生命周期</a> 涡看你就不是好人呐 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa</div> </li> <li><a href="/article/1772541266194661376.htm" title="前端埋点解决方案" target="_blank">前端埋点解决方案</a> zhu_zhu_xia <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func</div> </li> <li><a href="/article/1772511560346959872.htm" title="C#使用ASP.NET Core Razor Pages构建网站（二）" target="_blank">C#使用ASP.NET Core Razor Pages构建网站（二）</a> 林祖师 <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>上一篇文章讲了HTTP协议的基本概念、客户端Web开发技术以及ASP.NETCore框架的关键特点和创建项目方法链接：C#使用ASP.NETCoreRazorPages构建网站（一）接下来继续了解ASP.NETCoreRazorPages构建网站的后续内容了解RazorPagesRazorPages允许开发人员轻松地将HTML标记和C#代码混合在一起，这是使用.cshtml扩展名的原因。默认情况下</div> </li> <li><a href="/article/1772399131164213248.htm" title="如何提出令人爱回答的好问题？" target="_blank">如何提出令人爱回答的好问题？</a> 兮若耶 <div>我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统</div> </li> <li><a href="/article/1772378002940821504.htm" title="谈谈对前端性能监控的理解和实践" target="_blank">谈谈对前端性能监控的理解和实践</a> Layla_c <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/jave/1.htm">jave</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业</div> </li> <li><a href="/article/1772365540988354560.htm" title="mineadmin使用docker启动方式" target="_blank">mineadmin使用docker启动方式</a> qq_38812523 <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a> <div>找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho</div> </li> <li><a href="/article/1772335078576291840.htm" title="为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？" target="_blank">为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？</a> 智伴科技 <a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共</div> </li> <li><a href="/article/1772328030845337600.htm" title="vue-pdf 预览pdf (数据流)" target="_blank">vue-pdf 预览pdf (数据流)</a> reembarkation <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat</div> </li> <li><a href="/article/1772307893329133568.htm" title="低代码与前端开发架构：重塑软件开发的未来" target="_blank">低代码与前端开发架构：重塑软件开发的未来</a> 快乐非自愿 <a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模</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>