Cpdr

【JavaWeb学习-第一章】HTML & CSS

文章目录

前言
1. HTML快速入门
- 1.1. 操作
2. 基础标签 & 样式
- 2.1. 标题实现
- - 2.1.1. 标题排版
  - - 2.1.1.1. 标签
    - 2.1.1.2. 实现
  - 2.1.2. 标题样式
  - - 2.1.2.1. CSS引入方式
    - 2.1.2.2. 颜色表示
    - 2.1.2.3. 实现1
    - 2.1.2.4. CSS选择器
    - 2.1.2.5. 实现2
  - 2.1.3. 超链接
  - - 2.1.3.1. 标签介绍
    - 2.1.3.2 实现
- 2.2. 新浪新闻-正文实现
- - 2.2.1. 正文排版
  - 2.2.2. 相关标签
  - 2.2.3. 实现1
  - 2.2.4. 页面布局
  - - 2.2.4.1. 盒子模型
    - - 2.2.4.1.1. 布局标签
      - 2.2.4.1.2. 盒子模型代码
    - 2.2.4.2. 布局实现
3. 表格标签
4. 表单标签
- 4.1. 表单
- - 4.1.1. 介绍
  - 4.1.2. 实现
- 4.2. 表单项
- - 4.2.1. 介绍
  - 4.2.2. 实现
附录. 文档查阅

前言

什么是HTML ?

HTML：HyperText Markup Language，超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言
HTML标签都是预定义好的。下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

什么是CSS ?

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

下面展示的是一段 html代码及 CSS样式经过浏览器解析，呈现的效果如右图所示：

1. HTML快速入门

创建一个简单的HTML项目，需要准备一张图片。

1.1. 操作

第一步：创建一个名为HTML的文件夹作为你的工程文件夹，然后将一张图片文件放到该目录下。

第二步：创建一个文本文件，然后修改文件名为hello.html，注意文件的后缀是.html。如下图所示

第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码


<html>

<head>
	<title>HTML 快速入门title>
head>

<body>
	<h1>Hello HTMLh1>
	<img src="1.jpg" />
body>

html>

其中，是根标签，和是子标签，中的字标签</code>是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置。而 <code><body></code> 中编写的内容，就网页中显示的核心内容。 </blockquote> 第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下: <a href="http://img.e-com-net.com/image/info8/16a6edec49084807aa0a107771ac76b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16a6edec49084807aa0a107771ac76b7.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第4张图片" width="650" height="442" style="border:1px solid black;"></a> <blockquote> 小结： 1.HTML页面的基础结构标签 <pre><code class="prism language-html"><html> <head> <title> </title> </head> <body> </body> </html> </code></pre> 其中：<code><title></code>中定义标题：显示在浏览器的标题位置， <code><body></code>中定义内容：会呈现在浏览器的内容区域 2.HTML中的标签特点： HTML标签不区分大小写 HTML标签的属性值，采用单引号、双引号都可以 HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些) </blockquote> <blockquote> 通过上面案例，发现由记事本文件开发html是非常不方便的，所以接下来需要学习一款前端专业的开发工具VSCode。 Visual Studio Code（简称 VS Code ）是Microsoft 于2015年4月发布的一款代码编辑器。VS Code对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code提供了非常强大的插件库，大大提高了开发效率。 官网： https://code.visualstudio.com </blockquote> <h2>2. 基础标签 & 样式</h2> 下面讲解HTML的常见基础标签 及 CSS的基本样式，以 新浪新闻页面 为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。 新浪新闻的具体页面效果如下： <a href="http://img.e-com-net.com/image/info8/466f1a469abf4b00b1d5be7d6f8fcd11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/466f1a469abf4b00b1d5be7d6f8fcd11.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第5张图片" width="650" height="350" style="border:1px solid black;"></a> 而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下： <ul> <li>新浪新闻-标题部分（图中绿色部分）</li> <li>新浪新闻-正文部分（图中黄色部分）<a href="http://img.e-com-net.com/image/info8/afb73a82338441bca51de05b997f1cb9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afb73a82338441bca51de05b997f1cb9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第6张图片" width="650" height="641" style="border:1px solid black;"></a></li> </ul> <h3>2.1. 标题实现</h3> <h4>2.1.1. 标题排版</h4> 分析： <a href="http://img.e-com-net.com/image/info8/56a5fccb6f234475a6ed8e72909f07ce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/56a5fccb6f234475a6ed8e72909f07ce.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第7张图片" width="650" height="184" style="border:1px solid black;"></a> <ol> <li>第一部分，是一张图片，需要用到HTML中的图片标签 来实现。</li> <li>第二部分，是一个标题，需要用到HTML中的标题标签来实现。</li> <li>第三部分，有两条水平分割线，需要用到HTML中的标签来定义水平分割线。</li> </ol> <h5>2.1.1.1. 标签</h5> 1.图片标签 A. 标签: <code><img></code> B. 常见属性: <code>src</code>: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径) <code>width</code>: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) <code>height</code>: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比) <blockquote> 备注: 一般<code>width</code> 和 <code>height</code> 只会指定一个，另外一个会自动的等比例缩放。 </blockquote> C. 路径书写方式: （1）绝对路径: ①<code>绝对磁盘路径</code>: C:\Users\Administrator\Desktop\HTML\img\news_logo.png <img src=“C:\Users\Administrator\Desktop\HTML\img\news_logo.png”> ②<code>绝对网络路径</code>: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png <img src=“https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png”> （2）相对路径: <code>./</code> ：当前目录， <code>./</code> 可以省略的 <code>../</code>：上一级目录 2.标题标签 A. 标签: <h1> - <h6> <h2>一级标题</h2> <pre><code class="prism language-html"> <h1>一级标题</h1> </code></pre> <h3>二级标题</h3> <pre><code class="prism language-html"> <h2>二级标题</h2> </code></pre> <h4>三级标题</h4> <pre><code class="prism language-html"> <h3>三级标题</h3> </code></pre> <h5>四级标题</h5> <pre><code class="prism language-html"> <h4>四级标题</h4> </code></pre> <h6>五级标题</h6> <pre><code class="prism language-html"> <h5>五级标题</h5> </code></pre> <h6>六级标题</h6> <pre><code class="prism language-html"> <h6>六级标题</h6> </code></pre> B. 效果：h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。 3.水平分页线标签 <pre><code class="prism language-html"> <hr> 2023年03月02日 21:50 央视网 <hr> </code></pre> <h5>2.1.1.2. 实现</h5> <ol> <li>打开VsCode，选择左侧最底部的 “资源管理器”，然后选择打开的项目文件夹，项目文件夹的目录结构如下：</li> </ol> <a href="http://img.e-com-net.com/image/info8/cc6fbedcf7ee41a3a1b47679ff6e32cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc6fbedcf7ee41a3a1b47679ff6e32cf.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第8张图片" width="496" height="127" style="border:1px solid black;"></a> <ol start="2"> <li>在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html</li> </ol> <a href="http://img.e-com-net.com/image/info8/92781af2e57847ada979214e45d450f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/92781af2e57847ada979214e45d450f9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第9张图片" width="650" height="136" style="border:1px solid black;"></a> <ol start="3"> <li>html 文件创建好之后，在其中输入 <code>!</code>，然后直接<code>回车</code>，就可以生成 HTML 的基础结构标签</li> </ol> <a href="http://img.e-com-net.com/image/info8/112341c7c71b4fc7a20183f3f11a3006.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/112341c7c71b4fc7a20183f3f11a3006.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第10张图片" width="650" height="225" style="border:1px solid black;"></a> <ol start="4"> <li>编写标题排版的核心代码</li> </ol> <pre><code class="prism language-html"> <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：China底气 new思想夯实大country粮仓</title> </head> <body>  <img src="img/news_logo.png"> 新浪政务 > 正文 <h1>焦点访谈：China底气新思想夯实大country粮仓</h1> <hr> 2023年03月02日 21:50 xx网 <hr> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/f8ee98db278f461eb1b0480b59ede434.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8ee98db278f461eb1b0480b59ede434.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第11张图片" width="650" height="127" style="border:1px solid black;"></a> <h4>2.1.2. 标题样式</h4> 新浪新闻的标题部分的基本排版，前面已经完成了，然后大家会看到，我们编写的一级标题，默认字体颜色为纯黑色。而原始的新浪新闻页面的新闻标题字体，并不是纯黑色，而是灰黑色，那接下来，我们就要来设置这个字体的颜色。而要设置这个字体的颜色，我们就需要通过<code>CSS样式</code>来控制。 那在HTML的文件中，如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。 <h5>2.1.2.1. CSS引入方式</h5> 具体有3种引入方式，语法如下表格所示： <table> <thead> <tr> <th>名称</th> <th>语法描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>行内样式</td> <td>在标签内使用style属性，属性值是css属性键值对</td> <td><h1 style=“xxx:xxx;”>中国新闻网</h1></td> </tr> <tr> <td>内嵌样式</td> <td>定义<style>标签，在标签内部定义css样式</td> <td><style> h1 {…} </style></td> </tr> <tr> <td>外联样式</td> <td>定义<link>标签，通过href属性引入外部css文件</td> <td><link rel=“stylesheet” href=“css/news.css”></td> </tr> </tbody> </table> 对于上述3种引入方式，企业开发的使用情况如下： ① 行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用。 ② 内嵌样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。 ③ 外联样式：html和css实现了完全的分离，企业开发常用方式。 <h5>2.1.2.2. 颜色表示</h5> <table> <thead> <tr> <th>表示方式</th> <th>表示含义</th> <th>取值</th> </tr> </thead> <tbody> <tr> <td>关键字</td> <td>预定义的颜色名</td> <td>red、green、blue、…</td> </tr> <tr> <td>rgb表示</td> <td>红绿蓝三原色，每项取值范围：0-255</td> <td>rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)</td> </tr> <tr> <td>十六进制表示法</td> <td>#开头，将数字转换成十六进制表示</td> <td>#000000、#ff0000、#cccccc、… 简写：#000、#f00、#ccc、…</td> </tr> </tbody> </table> <h5>2.1.2.3. 实现1</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：china底气新思想夯实大country粮仓</title>  <style> h1 { /* color: red; */ /* color: rgb(0, 0, 255); */ color: #4D4F53; } </style>   </head> <body> <img src="img/news_logo.png"> xxxx > 正文   <h1>焦点访谈：xx底气新思想夯实大x粮仓</h1> <hr> 2023年03月02日 21:50 xx网 <hr> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/55d2d89dd9004ee5b1d0b96ab8ba236f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/55d2d89dd9004ee5b1d0b96ab8ba236f.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第12张图片" width="650" height="173" style="border:1px solid black;"></a> <blockquote> 备注: 要想拾取某一个网页中的颜色，我们可以借助于浏览器的拾色器插件来完成。【拾色器插件的安装，参照黑马程序资料中提供的文档即可】 </blockquote> <h5>2.1.2.4. CSS选择器</h5> 顾名思义，选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。 选择器通用语法如下： <pre><code class="prism language-html">选择器名 { css样式名：css样式值; css样式名：css样式值; } </code></pre> 我们需要学习的3种选择器是元素选择器，class选择器，id选择器，语法以及作用如下： 1.元素（标签）选择器 选择器的名字必须是标签的名字 作用：选择器中的样式会作用于所有同名的标签上 <pre><code class="prism language-html">元素名称 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-html">div{ color: red; } </code></pre> 2.类选择器： 选择器的名字前面需要加上 . 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个 <pre><code class="prism language-html">.class属性值 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-html">.cls{ color: green; } </code></pre> 3.id选择器 选择器的名字前面需要加上# 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的） <pre><code class="prism language-html">#id属性值 { css样式名:css样式值； } </code></pre> 例子如下： <pre><code class="prism language-html">#did { color: blue; } </code></pre> <h5>2.1.2.5. 实现2</h5> 修改发布时间字体颜色 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：xx底气新思想夯实大x粮仓</title> <style> h1 { color: #4D4F53; } /* 元素选择器 */ /* span { color: red; } */ /* 类选择器 */ /* .cls { color: green; } */ /* ID选择器 */ #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } </style> </head> <body> <img src="img/news_logo.png"> 新浪政务 > 正文 <h1>焦点访谈：xx底气新思想夯实大x粮仓</h1> <hr> <span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls">xx网</span> <hr> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/0fde895137504b289484bbf8d7b8dac1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fde895137504b289484bbf8d7b8dac1.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第13张图片" width="650" height="205" style="border:1px solid black;"></a> <blockquote> 上述我们还使用了一个css的属性 <code>font-size</code> , 用来设置字体的大小。但是需要注意，在设置字体的大小时，单位<code>px</code>不能省略，否则不生效 </blockquote> <h4>2.1.3. 超链接</h4> 在新浪新闻的标题部分，当我们点击顶部的 “新浪xx”，浏览器将自动在当前窗口访问新浪政务首页这个资源（http://gov.sina.com.cn/） 当我们点击新闻发布时间之后的 “yangshi网”，浏览器将会自动打开一个新的标签页，然后在新的标签页中访问yangshi网中的该新闻资源（https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml） 接下来，就来完善新闻标题部分的这个功能，那此时呢，就需要用到HTML中的超链接的标签 <h5>2.1.3.1. 标签介绍</h5> 标签: <code><a href="..." target="..."></code>央视网 属性: <code>href</code>：指定资源访问的url <code>target</code>：指定在何处打开资源链接 ① _self：默认值，在当前页面打开 ② _blank：在空白页面打开 <h5>2.1.3.2 实现</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：xx底气新思想夯实大x粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉超链接下面默认的下划线 */ } </style> </head> <body> <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪xx</a> > 正文 <h1>焦点访谈：xx底气新思想夯实大x粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a> </span> <hr> </body> </html> </code></pre> <h3>2.2. 新浪新闻-正文实现</h3> <h4>2.2.1. 正文排版</h4> 分析： <a href="http://img.e-com-net.com/image/info8/291cb38969d44b8fb240213d143e5172.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/291cb38969d44b8fb240213d143e5172.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第14张图片" width="644" height="763" style="border:1px solid black;"></a> 整个正文部分的排版，主要分为这么四个部分： ① 视频 (当前这种新闻页面,可能也会存在音频) ② 文字段落 ③ 字体加粗 ④ 图片 <h4>2.2.2. 相关标签</h4> 1. 视频、音频标签 视频标签: <code><video></code> 属性: <code>src</code>: 规定视频的url <code>controls</code>: 显示播放控件 <code>width</code>: 播放器的宽度 <code>height</code>: 播放器的高度 音频标签: <code><audio></code> 属性: <code>src</code>: 规定音频的url <code>controls</code>: 显示播放控件 2. 段落标签 ①换行标签: <code> </code> 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过<code> </code>标签。 ②段落标签: <code></code> 如： 这是一个段落 3. 文本格式标签 <table> <thead> <tr> <th>效果</th> <th>标签</th> <th>标签（强调）</th> </tr> </thead> <tbody> <tr> <td>加粗</td> <td>b</td> <td>strong</td> </tr> <tr> <td>倾斜</td> <td>i</td> <td>em</td> </tr> <tr> <td>下划线</td> <td>u</td> <td>ins</td> </tr> <tr> <td>删除线</td> <td>s</td> <td>del</td> </tr> </tbody> </table> 前面的标签 <code>b</code>、<code>i</code>、<code>u</code>、<code>s</code> 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而后面的<code>strong</code>、<code>em</code>、<code>ins</code>、<code>del</code>在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义（授课老师并没有讲到两者的具体区别）。 <h4>2.2.3. 实现1</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：xx底气新思想夯实大x粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 */ } p { text-indent: 35px; /* 设置首行缩进 */ line-height: 40px; /* 设置行高 */ } #plast { text-align: right; /* 对齐方式 */ } </style> </head> <body>  <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪xx</a> > 正文 <h1>焦点访谈：xx底气新思想夯实大x粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a></span> <hr>   <video src="video/1.mp4" controls width="950px"></video>   <p> <strong>央视网消息</strong> （焦点访谈）：xxxxx以来，以xxx同志为xxxxxxxxxx始终把解决xxx问题作为xxxx的头等大事，xxxx一系列x x举措有力有效，xxxx产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？ </p> <p> 人勤春来早，春耕农事忙。立春之后，由南到北，xx春耕春管工作陆续展开，春天的田野处处生机盎然。 </p> <img src="img/1.jpg"> <p> 今年，xx启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。 2015年以来，xx粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。 </p> <img src="img/2.jpg"> <p> xxx现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足xx，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以xxx同志为核心的xxxxxxxxx 下，亿万xx人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“xxxx”，把中国人的饭碗牢牢端在自己手中，夯实xxxxx基础。 </p> <p id="plast"> 责任编辑：xxx SN242 </p> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/408773582fb0481bbe16d4049cabaa4d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/408773582fb0481bbe16d4049cabaa4d.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第15张图片" width="650" height="303" style="border:1px solid black;"></a> 在上述的正文排版实现中，还用到了几个CSS属性： <code>text-indent</code>: 设置段落的首行缩进 <code>line-height</code>: 设置行高 <code>text-align</code>: 设置对齐方式, 可取值为 left / center / right <blockquote> 注意事项: 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符（；）来生成空格，如果需要多个空格，就使用多次占位符。 </blockquote> 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下： <table> <thead> <tr> <th>占位符</th> <th>描述</th> <th>显示结果</th> </tr> </thead> <tbody> <tr> <td> </td> <td>空格</td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> </tr> <tr> <td>"</td> <td>引号</td> <td>"</td> </tr> <tr> <td>'</td> <td>撇号</td> <td>'</td> </tr> </tbody> </table> <h4>2.2.4. 页面布局</h4> 目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。 <a href="http://img.e-com-net.com/image/info8/8bd09ef27e544ab3a1111d69045cb7b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8bd09ef27e544ab3a1111d69045cb7b9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第16张图片" width="650" height="533" style="border:1px solid black;"></a> 那接下来呢，我们就需要按照这个效果，来完成页面布局。而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型。 <h5>2.2.4.1. 盒子模型</h5> 盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） <a href="http://img.e-com-net.com/image/info8/cc92d6bc61c4495cbd1f123edad22822.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc92d6bc61c4495cbd1f123edad22822.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第17张图片" width="632" height="390" style="border:1px solid black;"></a> CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如： <a href="http://img.e-com-net.com/image/info8/76a66323aef94e7f9b07f8fe6cab78d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/76a66323aef94e7f9b07f8fe6cab78d6.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第18张图片" width="650" height="406" style="border:1px solid black;"></a> 盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。 <h6>2.2.4.1.1. 布局标签</h6> 布局标签：实际开发网页中，会大量频繁的使用 <code>div</code> 和 <code>span</code> 这两个没有语义的布局标签。 <code>div</code>标签： 一行只显示一个（独占一行） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高（width、height） <code>span</code>标签： 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高（width、height） <h6>2.2.4.1.2. 盒子模型代码</h6> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>盒子模型</title> <style> div { width: 200px; /* 宽度 */ height: 200px; /* 高度 */ box-sizing: border-box; /* 指定width height为盒子的高宽 */ background-color: aquamarine; /* 背景色 */ padding: 20px 20px 20px 20px; /* 内边距, 上右下左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度线条类型颜色 */ margin: 30px 30px 30px 30px ; /* 外边距, 上右下左 , 边距都一行, 可以简写: margin: 30px; */ } </style> </head> <body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> </body> </html> </code></pre> 代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)： <a href="http://img.e-com-net.com/image/info8/0fae5dc2ee6741d6afe43a9ae0501af9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fae5dc2ee6741d6afe43a9ae0501af9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第19张图片" width="650" height="294" style="border:1px solid black;"></a> 也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小： <a href="http://img.e-com-net.com/image/info8/6f5c4ee6d96f4cbeb4d28ce98272d5ba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f5c4ee6d96f4cbeb4d28ce98272d5ba.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第20张图片" width="650" height="244" style="border:1px solid black;"></a> <h5>2.2.4.2. 布局实现</h5> 在实现新闻页面的布局时，我们需要做两部操作： 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。 第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。 具体的代码实现如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>焦点访谈：中国底气新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } #time { color: #968D92; font-size: 13px; /* 设置字体大小 */ } a { color: black; text-decoration: none; /* 设置文本为一个标准的文本 */ } p { text-indent: 35px; /* 设置首行缩进 */ line-height: 40px; /* 设置行高 */ } #plast { text-align: right; /* 对齐方式 */ } #center { width: 65%; /* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上右下左 */ margin: 0 auto; } </style> </head> <body> <div id="center">  <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪xx</a> > 正文 <h1>焦点访谈：xx底气新思想夯实大x粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a></span> <hr>   <video src="video/1.mp4" controls width="950px"></video>   <p> <strong>xx网消息</strong> （xx访谈）：xxxxx以来，以xxx同志为xxxxxxxxxx始终把解决xxx问题作为xxxx的头等大事，xxxx一系列x x举措有力有效，xxxx产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？ </p> <p> 人勤春来早，春耕农事忙。立春之后，由南到北，xx春耕春管工作陆续展开，春天的田野处处生机盎然。 </p> <img src="img/1.jpg"> <p> 今年，xx启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。 2015年以来，xx粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。 </p> <img src="img/2.jpg"> <p> xxx现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足xx，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以xxx同志为核心的xxxxxxxxx 下，亿万xx人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“xxxx”，把中国人的饭碗牢牢端在自己手中，夯实xxxxx基础。 </p> <p id="plast"> 责任编辑：xxx SN242 </p> </div> </body> </html> </code></pre> 浏览器打开此页面，最终效果如下： <a href="http://img.e-com-net.com/image/info8/3ed80664f5b84601a6ab97a86c255be8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ed80664f5b84601a6ab97a86c255be8.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第21张图片" width="650" height="348" style="border:1px solid black;"></a> <h2>3. 表格标签</h2> 场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。 <a href="http://img.e-com-net.com/image/info8/7d4f58aacd194d86b0ddc8140ad1e0ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d4f58aacd194d86b0ddc8140ad1e0ed.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第22张图片" width="650" height="281" style="border:1px solid black;"></a> 标签： <code><table></code> ：用于定义整个表格, 可以包裹多个 <code><tr></code>，常用属性如下： <code>border</code>：规定表格边框的宽度 <code>width</code>：规定表格的宽度 <code>cellspacing</code>: 规定单元之间的空间 <code><tr></code> : 表格的行，可以包裹多个 <code><td></code> <code><td></code> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <code><th></code> 演示： 代码如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>HTML-表格</title> <style> td { text-align: center; /* 单元格内容居中展示 */ } </style> </head> <body> <table border="1px" cellspacing="0" width="600px"> <tr> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr> <td>1</td> <td> <img src="img/huawei.jpg" width="100px"> </td> <td>华为</td> <td>华为技术有限公司</td> </tr> <tr> <td>2</td> <td> <img src="img/alibaba.jpg" width="100px"> </td> <td>阿里</td> <td>阿里巴巴集团控股有限公司</td> </tr> </table> </body> </html> </code></pre> 打开浏览器，效果如下图所示： <a href="http://img.e-com-net.com/image/info8/66d818bea7fa4dc18cb4c36d10bef544.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66d818bea7fa4dc18cb4c36d10bef544.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第23张图片" width="650" height="305" style="border:1px solid black;"></a> 整合表格使用 <code>table标签</code>包裹 , 其中的每一行数据都是一个 <code>tr</code> , 每一行中的每一个单元格都是一个 <code>td</code> , 而如果是表头单元格, 可以使用 <code>th</code> (具有加粗居中展示的效果)。 <h2>4. 表单标签</h2> <h3>4.1. 表单</h3> <h4>4.1.1. 介绍</h4> 表单在我们日常的上网的过程中，基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单。当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交，那其实这个数据呢，一般会提交到服务端，最终保存在数据库中。 <a href="http://img.e-com-net.com/image/info8/4801c1d6bd354814b1bdd99388c6b045.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4801c1d6bd354814b1bdd99388c6b045.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第24张图片" width="441" height="332" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/3eee996f89dd47b8889ddb9c99158a3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3eee996f89dd47b8889ddb9c99158a3f.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第25张图片" width="541" height="584" style="border:1px solid black;"></a> 其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为 表单项 或 表单元素。 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。 表单标签： <code><form></code> 表单属性： <code>action</code>：规定表单提交时，向何处发送表单数据，表单提交的URL。 <code>method</code>：规定用于发送表单数据的方式，常见为： GET、POST。 <code>GET</code>：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Jack&age=12，url中能携带的表单数据大小是有限制的。 <code>POST</code>：表单数据是在请求体（消息体）中携带的，大小没有限制。 表单项标签：不同类型的input元素、下拉列表、文本域等。 <code>input</code>: 定义表单项，通过type属性控制输入形式 <code>select</code>：定义下拉列表 <code>textarea</code>：定义文本域 <h4>4.1.2. 实现</h4> <ol> <li>GET方式提交的表单</li> </ol> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>HTML-表单</title> </head> <body>  <form action="" method="get"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html> </code></pre> 表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。 <a href="http://img.e-com-net.com/image/info8/40713588eb5f49f0a6caad7dbfcd0729.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40713588eb5f49f0a6caad7dbfcd0729.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第26张图片" width="650" height="166" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/764c23eadc624aceaaac817a8c223d52.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/764c23eadc624aceaaac817a8c223d52.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第27张图片" width="650" height="140" style="border:1px solid black;"></a> <ol start="2"> <li>POST方式提交表单</li> </ol> 将上述的表单提交方式由get，改为post <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>HTML-表单</title> </head> <body>  <form action="" method="post"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html> </code></pre> 表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。 <a href="http://img.e-com-net.com/image/info8/4fefb8a211154b7bb5f248878b328abd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fefb8a211154b7bb5f248878b328abd.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第28张图片" width="650" height="280" style="border:1px solid black;"></a> <blockquote> 注意事项： 表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。如：用户名: <input type=“text” name=“username”> </blockquote> <h3>4.2. 表单项</h3> <h4>4.2.1. 介绍</h4> 在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是： <code><input></code>：表单项，通过<code>type属性</code>控制输入形式。type可取得值如下表所示： <table> <thead> <tr> <th>type取值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>默认值，定义单行的输入字段</td> </tr> <tr> <td>password</td> <td>定义密码字段</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义文件上传按钮</td> </tr> <tr> <td>date/time/datetime-local</td> <td>定义日期/时间/日期时间</td> </tr> <tr> <td>number</td> <td>定义数字输入框</td> </tr> <tr> <td>email</td> <td>定义邮件输入框</td> </tr> <tr> <td>hidden</td> <td>定义隐藏域</td> </tr> <tr> <td>submit/reset/button</td> <td>定义提交按钮 / 重置按钮 / 可点击按钮</td> </tr> </tbody> </table> <code><select></code>：定义下拉列表, <code><option></code> 定义列表项 <code><textarea></code>：文本域 <h4>4.2.2. 实现</h4> 创建一个新的表单项的html文件，具体内容如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>HTML-表单项标签</title> </head> <body>  <form action="" method="post"> 姓名: <input type="text" name="name"> <br><br> 密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男 <label><input type="radio" name="gender" value="2"> 女 </label> <br><br> 爱好: <label><input type="checkbox" name="hobby" value="java"> java </label> <label><input type="checkbox" name="hobby" value="game"> game </label> <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br> 图像: <input type="file" name="image"> <br><br> 生日: <input type="date" name="birthday"> <br><br> 时间: <input type="time" name="time"> <br><br> 日期时间: <input type="datetime-local" name="datetime"> <br><br> 邮箱: <input type="email" name="email"> <br><br> 年龄: <input type="number" name="age"> <br><br> 学历: <select name="degree"> <option value="">----------- 请选择 ----------- </option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述: <textarea name="description" cols="30" rows="10"> </textarea> <br><br> <input type="hidden" name="id" value="1">  <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> <br> </form> </body> </html> </code></pre> 通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下： <a href="http://img.e-com-net.com/image/info8/85de4f264b0643ccbcae8853280027e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/85de4f264b0643ccbcae8853280027e8.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第29张图片" width="650" height="578" style="border:1px solid black;"></a> 而对于<code>input type="hidden"</code>，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据（按F12）： <a href="http://img.e-com-net.com/image/info8/e71a0f570831443da5482717f56ac7fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e71a0f570831443da5482717f56ac7fa.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第30张图片" width="650" height="297" style="border:1px solid black;"></a> <h2>附录. 文档查阅</h2> 文档地址: https://www.w3school.com.cn/index.html </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1737568627017703424"></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">你可能感兴趣的:(JavaWeb学习,学习,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943993659967991808.htm" title="系统学习Python——并发模型和异步编程：进程、线程和GIL" target="_blank">系统学习Python——并发模型和异步编程：进程、线程和GIL</a> <div>分类目录：《系统学习Python》总目录在文章《并发模型和异步编程：基础知识》我们简单介绍了Python中的进程、线程和协程。本文就着重介绍Python中的进程、线程和GIL的关系。Python解释器的每个实例都是一个进程。使用multiprocessing或concurrent.futures库可以启动额外的Python进程。Python的subprocess库用于启动运行外部程序（不管使用何种</div> </li> <li><a href="/article/1943991261279088640.htm" title="C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1)" target="_blank">C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element((1)</a> 2401_84976182 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上CC++开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新如果你需要这些资料，可以戳这里获取#include#include#includeusingnamespacestd;boolcmp(int</div> </li> <li><a href="/article/1943991262029869056.htm" title="C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(" target="_blank">C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(</a> <div>网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！intmain(){vectormyvec{3,</div> </li> <li><a href="/article/1943989244456398848.htm" title="冒泡、选择、插入排序：三大基础排序算法深度解析（C语言实现）" target="_blank">冒泡、选择、插入排序：三大基础排序算法深度解析（C语言实现）</a> xienda <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>在算法学习道路上，排序算法是每位程序员必须掌握的基石。本文将深入解析冒泡排序、选择排序和插入排序这三种基础排序算法，通过C语言代码实现和对比分析，帮助读者彻底理解它们的差异与应用场景。算法原理与代码实现1.冒泡排序（BubbleSort）工作原理：通过重复比较相邻元素，将较大元素逐步"冒泡"到数组末尾。voidbubbleSort(intarr[],intn){ for(inti=0;iarr[</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a> 烟幕缭绕 <div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div> </li> <li><a href="/article/1943986975048527872.htm" title="高效批量单词翻译工具的设计与应用" target="_blank">高效批量单词翻译工具的设计与应用</a> <div>本文还有配套的精品资源，点击获取简介：在信息技术飞速发展的今天，批量单词翻译工具通过计算机的数据处理能力，大大提高了语言学习和文字处理的效率。用户通过简单输入单词列表到一个文本文件，并运行翻译程序，即可获得翻译结果并保存至指定文件。该工具集成了内置或外部翻译引擎，利用自然语言处理技术实现快速准确的翻译，并可能提供词性识别等附加功能。尽管机器翻译无法完全取代人工校对，但它为用户提供了一种高效的翻译解</div> </li> <li><a href="/article/1943985460749594624.htm" title="FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）" target="_blank">FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）</a> 阿牛的药铺 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/verilog/1.htm">verilog</a> <div>FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）引言：为什么这个FPGA入门路线能帮你快速上岗？本文设计了一条**"Verilog语法→工具链操作→光学项目实战→岗位技能对标"的阶梯式学习路径。不同于泛泛而谈的FPGA教程，我们聚焦光学类产品开发**核心能力（时序接口设计、图像处理算法移植、高速接口应用），通过3个递进式项目（从LED闪烁到图像边缘检测），</div> </li> <li><a href="/article/1943985461282271232.htm" title="PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）" target="_blank">PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）</a> 阿牛的药铺 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>PyTorch&TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）引言：为什么算法移植工程师必须掌握框架基础？针对光学类产品算法FPGA移植岗位需求（如可见光/红外图像处理），深度学习框架是算法落地的"桥梁"——既要用PyTorch/TensorFlow验证算法可行性，又要将训练好的模型（如CNN、目标检测）转换为FPGA可部署的格式（ONNX、TFLite）。本文采用"</div> </li> <li><a href="/article/1943983696184930304.htm" title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a> Mint_Datazzh <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a> <div>个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样</div> </li> <li><a href="/article/1943983064304644096.htm" title="算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记：17.蒙特卡洛算法 ——从原理到实战，涵盖 LeetCode 与考研 408 例题</a> <div>在计算机科学和数学领域，蒙特卡洛算法（MonteCarloAlgorithm）以其独特的随机抽样思想，成为解决复杂问题的有力工具。从圆周率的计算到金融风险评估，从物理模拟到人工智能，蒙特卡洛算法都发挥着不可替代的作用。本文将深入剖析蒙特卡洛算法的思想、解题思路，结合实际应用场景与Java代码实现，并融入考研408的相关考点，穿插图片辅助理解，帮助你全面掌握这一重要算法。蒙特卡洛算法的基本概念蒙特卡</div> </li> <li><a href="/article/1943983064719880192.htm" title="分布式学习笔记_04_复制模型" target="_blank">分布式学习笔记_04_复制模型</a> NzuCRAS <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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%90%8E%E7%AB%AF/1.htm">后端</a> <div>常见复制模型使用复制的目的在分布式系统中，数据通常需要被分布在多台机器上，主要为了达到：拓展性：数据量因读写负载巨大，一台机器无法承载，数据分散在多台机器上仍然可以有效地进行负载均衡，达到灵活的横向拓展高容错&高可用：在分布式系统中单机故障是常态，在单机故障的情况下希望整体系统仍然能够正常工作，这时候就需要数据在多台机器上做冗余，在遇到单机故障时能够让其他机器接管统一的用户体验：如果系统客户端分布</div> </li> <li><a href="/article/1943983063352537088.htm" title="算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题" target="_blank">算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题</a> 呆呆企鹅仔 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%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><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a> <div>在计算机科学的查找算法中，二分查找以其高效性占据着重要地位。它利用数据的有序性，通过不断缩小查找范围，将原本需要线性时间的查找过程优化为对数时间，成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找（BinarySearch），又称折半查找，是一种在有序数据集合中查找特定元素的高效算法。其核心原理是：通过不断将查找范围减半，快速定位目标元素。与线性查找逐个遍历元素不同，二分查找依赖</div> </li> <li><a href="/article/1943968187112550400.htm" title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a> 青苔猿猿 <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a> <div>目录文件名：`constants.py`功能概述：主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div> </li> <li><a href="/article/1943964406694080512.htm" title="RocketMQ 基础教程-应用篇-死信队列" target="_blank">RocketMQ 基础教程-应用篇-死信队列</a> 码炫课堂-码哥 <a class="tag" taget="_blank" href="/search/rocketmq%E4%B8%93%E9%A2%98/1.htm">rocketmq专题</a><a class="tag" taget="_blank" href="/search/rocketmq/1.htm">rocketmq</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬学习必须往深处挖，挖的越深，基础越扎实！阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析</div> </li> <li><a href="/article/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> ξ流ぁ星ぷ132 <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>HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec</div> </li> <li><a href="/article/1943956589136375808.htm" title="OKHttp3源码分析——学习笔记" target="_blank">OKHttp3源码分析——学习笔记</a> Sincerity_ <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E7%9B%B8%E5%85%B3/1.htm">源码相关</a><a class="tag" taget="_blank" href="/search/Okhttp/1.htm">Okhttp</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/1.htm">源码解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a><a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>文章目录1.HttpClient与HttpUrlConnection的区别2.OKHttp源码分析使用步骤:dispatcher任务调度器,（后面有详细说明）Request请求RealCallAsyncCall3.OKHttp架构分析1.异步请求线程池,Dispather2.连接池清理线程池-ConnectionPool3.缓存整理线程池DisLruCache4.Http2异步事务线程池,http</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</a> 梦想当全栈 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943949027624153088.htm" title="【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）基于历史对话重新生成Query？" target="_blank">【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）基于历史对话重新生成Query？</a> 985小水博一枚呀 <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">AI大模型学习路线</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a> <div>【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Q</div> </li> <li><a href="/article/1943949028291047424.htm" title="【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）其他Query优化相关策略？" target="_blank">【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）其他Query优化相关策略？</a> 985小水博一枚呀 <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">AI大模型学习路线</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a> <div>【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？一</div> </li> <li><a href="/article/1943941591924273152.htm" title="传奇修改map地图教程_传奇技能第三祭：NPC的增加、隐藏和脚本修改" target="_blank">传奇修改map地图教程_传奇技能第三祭：NPC的增加、隐藏和脚本修改</a> 垃圾箱博物馆 <a class="tag" taget="_blank" href="/search/%E4%BC%A0%E5%A5%87%E4%BF%AE%E6%94%B9map%E5%9C%B0%E5%9B%BE%E6%95%99%E7%A8%8B/1.htm">传奇修改map地图教程</a> <div>技能献祭，Get新技能：传奇技能——NPC功能与实现跟航家学技能，用干货带你飞，现学现用，底部有配套学习资源本篇内容简介：通过对游戏内NPC的控制，可以让NPC出现在地图中的任意位置，还可以控制外观显示、自定义命名，新增与隐藏以及脚本功能的实现。一、NPC总控制文本所在路径：D:MirServerMir200EnvirEnvir目录下，找到NPC总控制文本：Merchant，游戏内的所有NPC都在</div> </li> <li><a href="/article/1943940204628865024.htm" title="LangChain中的向量数据库接口－Weaviate" target="_blank">LangChain中的向量数据库接口－Weaviate</a> 洪城叮当 <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/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%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/1.htm">知识图谱</a> <div>文章目录前言一、原型定义二、代码解析1、add_texts方法1.1、应用样例2、from_texts方法2.1、应用样例3、similarity_search方法3.1、应用样例三、项目应用1、安装依赖2、引入依赖3、创建对象4、添加数据5、查询数据总结前言 Weaviate是一个开源的向量数据库，支持存储来自各类机器学习模型的数据对象和向量嵌入，并能无缝扩展至数十亿数据对象。它提供存储文档嵌</div> </li> <li><a href="/article/1943932395958890496.htm" title="深度学习模型表征提取全解析" target="_blank">深度学习模型表征提取全解析</a> ZhangJiQun&MXP <a class="tag" taget="_blank" href="/search/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/2024%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BB%A5%E5%8F%8A%E7%AE%97%E5%8A%9B/1.htm">2024大模型以及算力</a><a class="tag" taget="_blank" href="/search/2021/1.htm">2021</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/embedding/1.htm">embedding</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>模型内部进行表征提取的方法在自然语言处理（NLP）中，“表征（Representation）”指将文本（词、短语、句子、文档等）转化为计算机可理解的数值形式（如向量、矩阵），核心目标是捕捉语言的语义、语法、上下文依赖等信息。自然语言表征技术可按“静态/动态”“有无上下文”“是否融入知识”等维度划分一、传统静态表征（无上下文，词级为主）这类方法为每个词分配固定向量，不考虑其在具体语境中的含义（无法解</div> </li> <li><a href="/article/1943930249423155200.htm" title="GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏" target="_blank">GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏</a> GitCode 代码君 <a class="tag" taget="_blank" href="/search/gitcode/1.htm">gitcode</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/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go</div> </li> <li><a href="/article/1943929867959595008.htm" title="AI Agent开发学习系列 - langchain之Chains的使用(7)：用四种处理文档的预制链轻松实现文档对话" target="_blank">AI Agent开发学习系列 - langchain之Chains的使用(7)：用四种处理文档的预制链轻松实现文档对话</a> alex100 <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/%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/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/prompt/1.htm">prompt</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/python/1.htm">python</a> <div>在LangChain中，四种文档处理预制链（stuff、refine、mapreduce、mapre-rank）是实现文档问答、摘要等任务的常用高阶工具。它们的核心作用是：将长文档切分为块，分步处理，再整合结果，极大提升大模型处理长文档的能力。stuff直接拼接所有文档内容到prompt，一次性交给大模型处理。适合文档较短、token不超限的场景。refine递进式摘要。先对第一块文档生成初步答案</div> </li> <li><a href="/article/1943929866940379136.htm" title=".NET 一款基于BGInfo的红队内网渗透工具" target="_blank">.NET 一款基于BGInfo的红队内网渗透工具</a> dot.Net安全矩阵 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a> <div>01阅读须知此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等（包括但不限于）进行检测或维护参考，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失，均由使用者本人负责。本文所提供的工具仅用于学习，禁止用于其他方面02基本介绍在内网渗透过程中，白名单绕过是红队常见的技术需求。Sharp4Bginfo.exe是一款基于微软签名工具</div> </li> <li><a href="/article/1943926338326949888.htm" title="flutter知识点" target="_blank">flutter知识点</a> ZhDan91 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微</div> </li> <li><a href="/article/1943920162180755456.htm" title="Python学习笔记5|条件语句和循环语句" target="_blank">Python学习笔记5|条件语句和循环语句</a> iamecho9 <a class="tag" taget="_blank" href="/search/Python%E4%BB%8E0%E5%88%B01%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Python从0到1学习笔记</a><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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、条件语句条件语句用于根据不同的条件执行不同的代码块。1、if语句基本语法：if布尔型语句1:代码块#语句1为True时执行的代码示例：age=int(input("请输入你的年龄:"))ifage>=18:print("你已成年")2、if-else语句如果if条件不成立，则执行else代码块：if布尔型语句1:代码块#语句1为True时执行的代码else:代码块#语句1为False时执行的代</div> </li> <li><a href="/article/1943920035919622144.htm" title="2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）" target="_blank">2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）</a> 独行soc <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E6%8A%A4%E7%BD%91/1.htm">2025年护网</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/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/%E6%8A%A4%E7%BD%91/1.htm">护网</a> <div>安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> lsx202406 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943919026744913920.htm" title="JavaScript之DOM操作与事件处理详解" target="_blank">JavaScript之DOM操作与事件处理详解</a> AA-代码批发V哥 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性</div> </li> <li><a href="/article/77.htm" title="算法单链的创建与删除" target="_blank">算法单链的创建与删除</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div> 先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //?????? </div> </li> <li><a href="/article/204.htm" title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a> 白糖_ <a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a> <div> 断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。看完整章内容，</div> </li> <li><a href="/article/331.htm" title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a> deng520159 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/jdbc/1.htm">jdbc</a> <div>今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试 package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import </div> </li> <li><a href="/article/458.htm" title="Rss 订阅开发" target="_blank">Rss 订阅开发</a> 周凡杨 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a> <div> RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。 RSS</div> </li> <li><a href="/article/585.htm" title="分页查询实现" target="_blank">分页查询实现</a> g21121 <a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a> <div>在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。按实现形式分前台分页和服务器分页：前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据</div> </li> <li><a href="/article/712.htm" title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a> 510888780 <a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： </div> </li> <li><a href="/article/839.htm" title="highCharts柱状图" target="_blank">highCharts柱状图</a> 布衣凌宇 <a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a> <div>第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController { private UserServi</div> </li> <li><a href="/article/966.htm" title="我的spring学习笔记2-IoC（反向控制依赖注入）" target="_blank">我的spring学习笔记2-IoC（反向控制依赖注入）</a> aijuans <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a> <div>IoC（反向控制依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：如：程序中有 Mysql.calss 、Oracle.class 、SqlSe</div> </li> <li><a href="/article/1093.htm" title="TLS java简单实现" target="_blank">TLS java简单实现</a> antlove <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/keystore/1.htm">keystore</a><a class="tag" taget="_blank" href="/search/tls/1.htm">tls</a><a class="tag" taget="_blank" href="/search/secure/1.htm">secure</a> <div> 1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import </div> </li> <li><a href="/article/1220.htm" title="Zip解压压缩文件" target="_blank">Zip解压压缩文件</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/Zip%E6%A0%BC%E5%BC%8F%E8%A7%A3%E5%8E%8B/1.htm">Zip格式解压</a><a class="tag" taget="_blank" href="/search/Zip%E6%B5%81%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Zip流的使用</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E8%A7%A3%E5%8E%8B/1.htm">文件解压</a> <div> ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName)); &n</div> </li> <li><a href="/article/1347.htm" title="underscore.js 学习（一）" target="_blank">underscore.js 学习（一）</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/underscore/1.htm">underscore</a> <div> 工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。学</div> </li> <li><a href="/article/1474.htm" title="java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)" target="_blank">java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jstatd/1.htm">jstatd</a> <div>1.介绍 jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。 jstatd是基于RMI的，所以在运行jstatd的服务</div> </li> <li><a href="/article/1601.htm" title="【Spring框架三】Spring常用注解之Transactional" target="_blank">【Spring框架三】Spring常用注解之Transactional</a> bit1129 <a class="tag" taget="_blank" href="/search/transactional/1.htm">transactional</a> <div>Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义： /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version </div> </li> <li><a href="/article/1728.htm" title="我(程序员)的前进方向" target="_blank">我(程序员)的前进方向</a> bitray <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....</div> </li> <li><a href="/article/1855.htm" title="nginx lua开发经验总结" target="_blank">nginx lua开发经验总结</a> ronin47 <div>使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa</div> </li> <li><a href="/article/1982.htm" title="java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶" target="_blank">java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers</div> </li> <li><a href="/article/2109.htm" title="正确理解Linux内存占用过高的问题" target="_blank">正确理解Linux内存占用过高的问题</a> cfyme <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem: 3889836k total, 3341868k used, 547968k free, 286044k buffers Swap: 6127608k total,&nb</div> </li> <li><a href="/article/2236.htm" title="[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题" target="_blank">[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题</a> comsci <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div> 当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。</div> </li> <li><a href="/article/2363.htm" title="自定义类的equals函数" target="_blank">自定义类的equals函数</a> dai_lm <a class="tag" taget="_blank" href="/search/equals/1.htm">equals</a> <div>仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI</div> </li> <li><a href="/article/2490.htm" title="Linux下安装R语言" target="_blank">Linux下安装R语言</a> datageek <a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80+linux/1.htm">R语言 linux</a> <div>命令如下：sudo gedit /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke</div> </li> <li><a href="/article/2617.htm" title="如何修改mysql 并发数(连接数)最大值" target="_blank">如何修改mysql 并发数(连接数)最大值</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了方法一：进入MYSQL安装目录打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass</div> </li> <li><a href="/article/2744.htm" title="单一功能原则" target="_blank">单一功能原则</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">面向对象的程序设计</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1/1.htm">软件设计</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%8E%9F%E5%88%99/1.htm">编程原则</a> <div>单一功能原则[ 编辑] SOLID 原则单一功能原则开闭原则 Liskov代换原则接口隔离原则依赖反转原则查论编在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有</div> </li> <li><a href="/article/2871.htm" title="POJO、VO和JavaBean区别和联系" target="_blank">POJO、VO和JavaBean区别和联系</a> fanmingxing <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a> <div>POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被</div> </li> <li><a href="/article/2998.htm" title="SpringSecurity3.X--LDAP：AD配置" target="_blank">SpringSecurity3.X--LDAP：AD配置</a> hanqunfeng <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div>前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。将配置文件中的如下部分删除：  </div> </li> <li><a href="/article/3125.htm" title="mac mysql 修改密码" target="_blank">mac mysql 修改密码</a> IXHONG <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>$ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-</div> </li> <li><a href="/article/3252.htm" title="设计模式--抽象工厂模式" target="_blank">设计模式--抽象工厂模式</a> kerryg <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>抽象工厂模式：工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，</div> </li> <li><a href="/article/3379.htm" title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a> nannan408 <div> 首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军</div> </li> <li><a href="/article/3506.htm" title="scala如何读取和写入文件内容？" target="_blank">scala如何读取和写入文件内容？</a> qindongliang1922 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/</div> </li> <li><a href="/article/3633.htm" title="C语言算法之百元买百鸡" target="_blank">C语言算法之百元买百鸡</a> qiufeihu <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc</div> </li> <li><a href="/article/3760.htm" title="Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode" target="_blank">Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode</a> wyz2009107220 <a class="tag" taget="_blank" href="/search/NameNode/1.htm">NameNode</a> <div>正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，</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>