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/1903769711456350208.htm" title=".net 4.0 webServices 的使用，从前端到后端，代码超全。" target="_blank">.net 4.0 webServices 的使用，从前端到后端，代码超全。</a> 静静香甜 <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</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%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin</div> </li> <li><a href="/article/1903765044324265984.htm" title="先验地图--slam学习笔记" target="_blank">先验地图--slam学习笔记</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/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>先验信息(PriorInformation)先验信息指的是在收集新数据之前已有的知识或假设。这种信息可以来自之前的实验、历史数据、理论模型或专家意见。地图信息：在无人驾驶中，车辆通常会预先加载高精度地图数据，这些地图数据提供了道路布局、车道线位置、交叉口结构等信息。这些信息就是先验信息。车辆动力学模型：车辆的动力学模型，包括车辆的物理特性（如质量、轮胎摩擦系数等），这些模型可以帮助预测车辆的行为。</div> </li> <li><a href="/article/1903764288569405440.htm" title="零基础入门机器学习：用Scikit-learn实现鸢尾花分类" target="_blank">零基础入门机器学习：用Scikit-learn实现鸢尾花分类</a> 藍海琴泉 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/scikit-learn/1.htm">scikit-learn</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/1.htm">分类</a> <div>适合人群：机器学习新手|数据分析爱好者|需快速展示案例的学生一、引言：为什么要学这个案例？目的：明确机器学习解决什么问题，建立学习信心。机器学习定义：让计算机从数据中自动学习规律（如分类鸢尾花品种）。为什么选鸢尾花数据集：数据量小、特征明确，适合教学演示。Scikit-learn优势：提供现成算法和工具，无需从头写数学公式。二、环境准备：5分钟快速上手目的：搭建可运行的代码环境，避免卡在工具安装环</div> </li> <li><a href="/article/1903762017118908416.htm" title="机器学习--DBSCAN聚类算法详解" target="_blank">机器学习--DBSCAN聚类算法详解</a> 2201_75491841 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%9A%E7%B1%BB/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> <div>目录引言1.什么是DBSCAN聚类？2.DBSCAN聚类算法的原理3.DBSCAN算法的核心概念3.1邻域（Neighborhood）3.2核心点（CorePoint）3.3直接密度可达（DirectlyDensity-Reachable）3.4密度可达（Density-Reachable）3.5密度相连（Density-Connected）4.DBSCAN算法的步骤5.DBSCAN算法的优缺点5</div> </li> <li><a href="/article/1903759495310405632.htm" title="【机器学习】机器学习工程实战-第3章数据收集和准备" target="_blank">【机器学习】机器学习工程实战-第3章数据收集和准备</a> 腊肉芥末果 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%B7%A5%E7%A8%8B%E5%AE%9E%E6%88%98/1.htm">机器学习工程实战</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>上一章：第2章项目开始前文章目录3.1关于数据的问题3.1.1数据是否可获得3.1.2数据是否相当大3.1.3数据是否可用3.1.4数据是否可理解3.1.5数据是否可靠3.2数据的常见问题3.2.1高成本3.2.2质量差3.2.3噪声（noise）3.2.4偏差（bias）3.2.5预测能力低（lowpredictivepower）3.2.6过时的样本3.2.7离群值3.2.8数据泄露/目标泄漏3</div> </li> <li><a href="/article/1903758738213367808.htm" title="HTML+CSS案例展示(CSS3D效果旋转相册)" target="_blank">HTML+CSS案例展示(CSS3D效果旋转相册)</a> hacalili <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其</div> </li> <li><a href="/article/1903757352520183808.htm" title="html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册" target="_blank">html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册</a> 岑依惜 <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%86%8C%E7%BF%BB%E8%BD%AC%E6%95%88%E6%9E%9C/1.htm">相册翻转效果</a> <div>这篇博客的目的是因为上篇HTML5CSS3专题诱人的实例CSS3打造百度贴吧的3D翻牌效果中有个关于CSS3D效果的比较重要的知识点没讲到，就是perspective和tranlateY效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~1、perspectiveperspective属性包括两个属性：none和具有单位的长度值。其中perspective属</div> </li> <li><a href="/article/1903756721722028032.htm" title="机器学习实战第一章机器学习基础" target="_blank">机器学习实战第一章机器学习基础</a> LuoY、 <a class="tag" taget="_blank" href="/search/Machine/1.htm">Machine</a><a class="tag" taget="_blank" href="/search/Learning/1.htm">Learning</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>第一章机器学习1.1何谓机器学习1.2关键术语1.3机器学习的主要任务1.4如何选择合适的算法1.5开发机器学习应用程序的步骤1.6Python语言的优势1.1何谓机器学习 1、简单地说，机器学习就是把无序的数据转换成有用的信息； 2、机器学习能让我们自数据集中受启发，我们会利用计算机来彰显数据背后的真实含义； 3、机器学习横跨计算机科学、工程技术和统计学等多个学科，需要多学科的</div> </li> <li><a href="/article/1903756469484974080.htm" title="HTML5+CSS实现图片3D旋转效果，附音乐" target="_blank">HTML5+CSS实现图片3D旋转效果，附音乐</a> 宁醉小白 <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>利用程序呈现图片，可以俘获一众女生的心，增加音乐可以实现图片变化的同时也带上了想要得到效果，如此一程序实乃众人之喜。先看看程序呈现的效果，还是特别吸引人的。先在网上爬取想要呈现的美女照片，存放在文件夹img-one，与程序路径一致。图片像素需进行调整，同一面图片可以使用同一个图片，保持图片像素一致的同时也增加了立体感。第二张02.jpg和2.jpg可以倒着放，这样在程序实现的时候，可以和其他方向的</div> </li> <li><a href="/article/1903755965526765568.htm" title="炫酷的HTML5粒子动画特效实现详解" target="_blank">炫酷的HTML5粒子动画特效实现详解</a> 木木黄木木 <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>炫酷的HTML5粒子动画特效实现详解这里写目录标题炫酷的HTML5粒子动画特效实现详解项目介绍技术栈项目架构1.HTML结构2.样式设计核心实现1.粒子类设计2.动画效果实现星空效果烟花效果雨滴效果3.鼠标交互性能优化效果展示总结项目介绍本文将详细介绍如何使用HTML5Canvas技术实现一个炫酷的粒子动画特效系统。该系统包含三种不同的动画效果：星空、烟花和雨滴，并支持鼠标交互功能，能够为网页增添</div> </li> <li><a href="/article/1903754956477886464.htm" title="数据挖掘实战-基于机器学习的垃圾邮件检测模型" target="_blank">数据挖掘实战-基于机器学习的垃圾邮件检测模型</a> 艾派森 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98%E5%AE%9E%E6%88%98%E5%90%88%E9%9B%86/1.htm">数据挖掘实战合集</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%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> <div>‍♂️个人主页：@艾派森的个人主页✍作者简介：Python学习者希望大家多多支持，我们一起进步！如果文章对你有帮助的话，欢迎评论点赞收藏加关注+目录1.项目背景2.数据集介绍</div> </li> <li><a href="/article/1903754198000922624.htm" title="systemd-networkd 的 *.network 配置文件详解笔记250323" target="_blank">systemd-networkd 的 *.network 配置文件详解笔记250323</a> kfepiza <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E9%80%9A%E8%AE%AF%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE/1.htm">网络通讯传输协议</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94/1.htm">物联</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%8E%A7%E5%88%B6%E5%8F%B0%E5%91%BD%E4%BB%A4%E8%A1%8C/1.htm">控制台命令行</a><a class="tag" taget="_blank" href="/search/Shell%E8%84%9A%E6%9C%AC/1.htm">Shell脚本</a><a class="tag" taget="_blank" href="/search/sh/1.htm">sh</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E7%AD%89/1.htm">等</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/CentOS/1.htm">CentOS</a><a class="tag" taget="_blank" href="/search/Ubuntu/1.htm">Ubuntu</a><a class="tag" taget="_blank" href="/search/%E7%AD%89/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/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>systemd-networkd的*.network配置文件详解笔记250323查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html名称systemd.network—网络配置概要network.network描述一个纯INI风格的</div> </li> <li><a href="/article/1903754192896454656.htm" title="systemd-networkd 的 /etc/systemd/network/*.network 的配置属性名称是不是严格区分大小写?是" target="_blank">systemd-networkd 的 /etc/systemd/network/*.network 的配置属性名称是不是严格区分大小写?是</a> kfepiza <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/CentOS/1.htm">CentOS</a><a class="tag" taget="_blank" href="/search/Ubuntu/1.htm">Ubuntu</a><a class="tag" taget="_blank" href="/search/%E7%AD%89/1.htm">等</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E9%80%9A%E8%AE%AF%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE/1.htm">网络通讯传输协议</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94/1.htm">物联</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>systemd-networkd的/etc/systemd/network/*.network的配置属性名称是不是严格区分大小写?是查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html亲测在Debian10.12-standard中</div> </li> <li><a href="/article/1903753688472678400.htm" title="集成学习（随机森林）" target="_blank">集成学习（随机森林）</a> herry57 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%A6%E5%BB%BA%E6%A8%A1/1.htm">数学建模</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%A3%AE%E6%9E%97/1.htm">随机森林</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E6%88%90%E5%AD%A6%E4%B9%A0/1.htm">集成学习</a> <div>目录一、集成学习概念二、Bagging集成原理三、随机森林四、例子（商品分类）一、集成学习概念集成学习通过建⽴⼏个模型来解决单⼀预测问题。它的⼯作原理是⽣成多个分类器/模型，各⾃独⽴地学习和作出预测。这些预测最后结合成组合预测，因此优于任何⼀个单分类的做出预测。只要单分类器的表现不太差，集成学习的结果总是要好于单分类器的二、Bagging集成原理分类圆形和长方形三、随机森林在机器学习中，随机森林是</div> </li> <li><a href="/article/1903753561662091264.htm" title="HTML实现酷炫3D相册" target="_blank">HTML实现酷炫3D相册</a> 算法与编程之美 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd</div> </li> <li><a href="/article/1903753056751775744.htm" title="CSS动画：逐帧动画与steps()函数" target="_blank">CSS动画：逐帧动画与steps()函数</a> 双囍菜菜 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9A%8F%E8%AE%B0/1.htm">前端随记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代</div> </li> <li><a href="/article/1903752297968627712.htm" title="【Html+CSS】3D旋转相册" target="_blank">【Html+CSS】3D旋转相册</a> 小木荣 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a> <div>3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s</div> </li> <li><a href="/article/1903751413188587520.htm" title="【机器学习】朴素贝叶斯入门：从零到垃圾邮件过滤实战" target="_blank">【机器学习】朴素贝叶斯入门：从零到垃圾邮件过滤实战</a> 吴师兄大模型 <a class="tag" taget="_blank" href="/search/0%E5%9F%BA%E7%A1%80%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">0基础实现机器学习入门到精通</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9C%B4%E7%B4%A0%E8%B4%9D%E5%8F%B6%E6%96%AF/1.htm">朴素贝叶斯</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/sklearn/1.htm">sklearn</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Langchain系列文章目录01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南02-玩转LangChainMemory模块：四种记忆类型详解及应用场景全覆盖03-全面掌握LangChain：从核心链条构建到动态任务分配的实战指南04-玩转LangChain：从文档加载到高效问答系统构建的全程实战05-玩转LangChain：深度评估问答系统的三种高效方法（示例生成、手</div> </li> <li><a href="/article/1903749649190154240.htm" title="【机器学习】机器学习工程实战-第2章项目开始前" target="_blank">【机器学习】机器学习工程实战-第2章项目开始前</a> 腊肉芥末果 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%B7%A5%E7%A8%8B%E5%AE%9E%E6%88%98/1.htm">机器学习工程实战</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>上一章：第1章概述文章目录2.1机器学习项目的优先级排序2.1.1机器学习的影响2.1.2机器学习的成本2.2估计机器学习项目的复杂度2.2.1未知因素2.2.2简化问题2.2.3非线性进展2.3确定机器学习项目的目标2.3.1模型能做什么2.3.2成功模型的属性2.4构建机器学习团队2.4.1两种文化2.4.2机器学习团队的成员2.5机器学习项目为何失败2.5.1缺乏有经验的人才2.5.2缺乏领</div> </li> <li><a href="/article/1903749270721327104.htm" title="systemd-networkd 的 /etc/systemd/network/*.network 能不能一个文件配置多块网卡?不能" target="_blank">systemd-networkd 的 /etc/systemd/network/*.network 能不能一个文件配置多块网卡?不能</a> kfepiza <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/CentOS/1.htm">CentOS</a><a class="tag" taget="_blank" href="/search/Ubuntu/1.htm">Ubuntu</a><a class="tag" taget="_blank" href="/search/%E7%AD%89/1.htm">等</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%8E%A7%E5%88%B6%E5%8F%B0%E5%91%BD%E4%BB%A4%E8%A1%8C/1.htm">控制台命令行</a><a class="tag" taget="_blank" href="/search/Shell%E8%84%9A%E6%9C%AC/1.htm">Shell脚本</a><a class="tag" taget="_blank" href="/search/sh/1.htm">sh</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E7%AD%89/1.htm">等</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E9%80%9A%E8%AE%AF%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE/1.htm">网络通讯传输协议</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94/1.htm">物联</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a> <div>systemd-networkd的/etc/systemd/network/*.network能不能一个文件配置多块网卡?不能查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html在systemd-networkd的配置中，一个.ne</div> </li> <li><a href="/article/1903748010672713728.htm" title="Xilinx系ZYNQ学习笔记（二）ZYNQ入门及点亮LED灯" target="_blank">Xilinx系ZYNQ学习笔记（二）ZYNQ入门及点亮LED灯</a> 贾saisai <a class="tag" taget="_blank" href="/search/FPGA%E5%AD%A6%E4%B9%A0/1.htm">FPGA学习</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/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>系列文章目录文章目录系列文章目录前言简单介绍简称xc7z020型号FPGAZYNQ实操通用IO点亮LED灯硬件逻辑基础前言简单入门一下ZYNQ是何种架构，如何编程，至于深入了解应该要分开深入学习Linux和FPGA简单介绍其基本架构都是在同一个硅片上集成FPGA和CPU，并通过高速、高带宽的互联架构连接起来。ARM的顺序控制、丰富外设，开源驱动、FPGA的并行运算、高速接口、灵活定制、数字之王的特</div> </li> <li><a href="/article/1903746371584847872.htm" title="ZYNQ学习笔记_GPIO之输入输出" target="_blank">ZYNQ学习笔记_GPIO之输入输出</a> 凌星星星星星 <a class="tag" taget="_blank" href="/search/ZYNQ%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">ZYNQ学习笔记</a><a class="tag" taget="_blank" href="/search/gpio/1.htm">gpio</a><a class="tag" taget="_blank" href="/search/mio/1.htm">mio</a><a class="tag" taget="_blank" href="/search/fpga/1.htm">fpga</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>ZYNQ学习笔记_GPIO之输入输出GPIO介绍MIO介绍EMIO介绍控制GPIO接口的寄存器原理_输入输出部分GPIO介绍GPIO的英文全称为General-purposeinput/output，即一种通用外设，可以通过MIO（MultiuseI/O）模块对器件的引脚做观测（input）和控制（output）。ZYNQ的PS端上的GPIO也可以通过EMIO（ExtraMIO）模块对PL端的IP</div> </li> <li><a href="/article/1903743977794891776.htm" title="《基于自适应正负样本对比学习的特征提取框架》-核心公式提炼简洁版 2022年neural networks" target="_blank">《基于自适应正负样本对比学习的特征提取框架》-核心公式提炼简洁版 2022年neural networks</a> 阳光明媚大男孩 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E7%AC%94%E8%AE%B0/1.htm">论文笔记</a> <div>论文源地址以下是从文档中提取的关于“基于对比学习的特征提取框架（CL-FEFA）”中正负样本对比学习实现的技术细节，包括详细的数学公式、特征提取过程以及特征表示方式的说明。1.正负样本的定义与构造在CL-FEFA框架中，正负样本的定义是动态且自适应的，基于特征提取的结果，而不是预先固定的。这种自适应性是CL-FEFA区别于传统对比学习（如SimCLR、SupCon）的一个关键点。定义方式：指示矩阵</div> </li> <li><a href="/article/1903743725616558080.htm" title="zynq设计学习笔记2——GPIO之MIO控制LED实验" target="_blank">zynq设计学习笔记2——GPIO之MIO控制LED实验</a> 墨漓_lyl <a class="tag" taget="_blank" href="/search/FPGA%E4%B9%8Bzynq%E8%AE%BE%E8%AE%A1%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">FPGA之zynq设计学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/fpga/1.htm">fpga</a> <div>vivado软件操作步骤与学习笔记1——helloworld差不多，这里不再过多赘述，不同点是在zynq的设置中添加上GPIO的设置即可。进入SDK软件后，程序如下：#include"stdio.h"#include"xparameters.h"#include"xgpiops.h"#include"sleep.h"#defineGPIO_DEVICE_IDXPAR_XGPIOPS_0_DEVIC</div> </li> <li><a href="/article/1903742714948677632.htm" title="深入理解 <；和 >；：HTML 实体转义的核心指南！！！" target="_blank">深入理解 <；和 >；：HTML 实体转义的核心指南！！！</a> 小丁学Java <a class="tag" taget="_blank" href="/search/%E7%A7%AF%E7%B4%AF%E5%B0%8F%E7%9F%A5%E8%AF%86/1.htm">积累小知识</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>️深入理解<和>：HTML实体转义的核心指南️在编程和文档编写中，符号无处不在，但它们也是引发语法错误、安全漏洞和渲染混乱的头号元凶！本文将聚焦<（小于号）和>（大于号）这两个HTML实体，解析它们的核心作用、使用场景及避坑技巧，助你写出更安全、更健壮的代码！一、❓为什么需要转义？1.符号冲突问题•HTML/XML标签冲突：是标签的起始和结束符（如）。若直接在文本中使用，解</div> </li> <li><a href="/article/1903740698562195456.htm" title="蓝桥杯备赛计划" target="_blank">蓝桥杯备赛计划</a> laitywgx <a class="tag" taget="_blank" href="/search/%E8%93%9D%E6%A1%A5%E6%9D%AF/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> <div>1-2小时的蓝桥杯PythonB组冲刺日程表（持续1个月，聚焦高频考点）：第一周：核心算法突破Day1（周一）学习重点：动态规划（01背包问题）学习资源：AcWing《蓝桥杯辅导课》第8讲（背包问题模板）代码模板速记：#一维01背包模板n,V=map(int,input().split())dp=[0]*(V+1)for_inrange(n):w,v=map(int,input().split()</div> </li> <li><a href="/article/1903740698990014464.htm" title="机器学习怎么做特征工程" target="_blank">机器学习怎么做特征工程</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/%E6%9C%BA%E5%99%A8%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/%E7%89%B9%E5%BE%81%E5%B7%A5%E7%A8%8B/1.htm">特征工程</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E9%A2%84%E5%A4%84%E7%90%86/1.htm">数据预处理</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E5%BE%81%E5%8F%98%E6%8D%A2/1.htm">特征变换</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E5%BE%81%E9%99%8D%E7%BB%B4/1.htm">特征降维</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E5%BE%81%E6%9E%84%E9%80%A0/1.htm">特征构造</a> <div>一、特征工程通俗解释特征工程就像厨师做菜前的食材处理：原始数据是“生肉和蔬菜”，特征工程是“切块、腌制、调料搭配”，目的是让机器学习模型（食客）更容易消化吸收，做出更好预测（品尝美味）。二、为什么要做特征工程？数据质量差：原始数据常有缺失、噪声、不一致问题（如年龄列混入“未知”）。模型限制：算法无法直接理解原始数据（如文本、日期需要数值化）。提升效果：好特征能显著提升模型性能（准确率提升10%~5</div> </li> <li><a href="/article/1903740444278321152.htm" title="SassScript：Sass中的编程特性详解" target="_blank">SassScript：Sass中的编程特性详解</a> jiajia651304 <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变</div> </li> <li><a href="/article/1903738553834205184.htm" title="【机器学习】机器学习四大分类" target="_blank">【机器学习】机器学习四大分类</a> 藓类少女 <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/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> <div>机器学习的方法主要可以分为四大类，根据学习方式和数据标注情况进行分类：1.监督学习（SupervisedLearning）特点：有标注数据（即训练数据有明确的输入(X)和输出(Y)）。学习目标是找到一个映射(f(X)\approxY)。适用于分类和回归问题。主要算法：分类（Classification）：逻辑回归（LogisticRegression）支持向量机（SVM）朴素贝叶斯（NaïveBa</div> </li> <li><a href="/article/1903737293223555072.htm" title="大模型学习终极指南：从新手到专家的必经之路，全网最详尽解析，你敢挑战吗？" target="_blank">大模型学习终极指南：从新手到专家的必经之路，全网最详尽解析，你敢挑战吗？</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/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0/1.htm">大模型学习</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E6%95%99%E7%A8%8B/1.htm">大模型教程</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a> <div>随着人工智能技术的飞速发展，大模型（Large-ScaleModels）已经成为推动自然语言处理（NLP）、计算机视觉（CV）等领域进步的关键因素。本文将为您详细介绍从零开始学习大模型直至成为专家的全过程，包括所需掌握的知识点、学习资源以及实践建议等。无论您是初学者还是有一定基础的专业人士，都能从中获得有价值的指导。一、基础知识准备在开始学习大模型之前，需要先掌握一些基础知识，这些知识将为后续的学</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>