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/1950233199242178560.htm" title="x86-64汇编语言训练程序与实战" target="_blank">x86-64汇编语言训练程序与实战</a> 十除以十等于一 <div>本文还有配套的精品资源，点击获取简介：汇编语言是一种低级语言，与机器代码紧密相关，特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器，支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题，鼓励编程技巧应用，前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令，提升了数据处理效率。学习汇编语言能够深入理解计算机底层</div> </li> <li><a href="/article/1950233072825856000.htm" title="三菱PLC全套学习资料及应用手册" target="_blank">三菱PLC全套学习资料及应用手册</a> good2know <div>本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化</div> </li> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232782412247040.htm" title="日更006 终极训练营day3" target="_blank">日更006 终极训练营day3</a> 懒cici <div>人生创业课（2）今天的主题：学习方法一：遇到有用的书，反复读，然后结合自身实际，列践行清单，不要再写读书笔记思考这本书与我有什么关系，我在哪些地方能用到，之后我该怎么用方法二：读完书没映像怎么办?训练你的大脑，方法：每读完一遍书，立马合上书，做一场分享，几分钟都行对自己的学习要求太低，要逼自己方法三：学习深度不够怎么办？找到细分领域的榜样，把他们的文章、书籍、产品都体验一遍，成为他们的超级用户，向</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> universe_01 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950231381485350912.htm" title="《极简思维》第三部分" target="_blank">《极简思维》第三部分</a> 小洋苏兮 <div>整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别</div> </li> <li><a href="/article/1950230873060208640.htm" title="你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。" target="_blank">你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。</a> 霖霖z <div>打卡人:周云日期:2018年11月09日【日精进打卡第180天】【知～学习】《六项精进》0遍共214遍《通篇》1遍共106遍《大学》2遍共347遍《坚强工作，温柔生活》ok《不抱怨的世界》104-108页《经典名句》你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。【行～实践】一、修身：（对自己个人）1、坚持打卡二、齐家：（对家庭和家人）打扫卫生，接送孩子，洗衣做饭，陪</div> </li> <li><a href="/article/1950229986984128512.htm" title="贫穷家庭的孩子考上985以后会怎样？" target="_blank">贫穷家庭的孩子考上985以后会怎样？</a> Mellisa蜜思言 <div>我出生在一个贫穷的农村家庭，据我妈说，我出生的时候才4斤多，而她生完我以后月子里就瘦到70斤。家里一直很穷，父母都是在菜市场卖菜的，家里还有几亩地种庄稼的。我很小开始就要去帮忙，暑假的生活就是帮忙去卖菜和割稻谷，那时候自己对于割稻谷这种事情有着莫名的恐惧，生怕自己长大以后还是每年都要过着割稻谷这种日子。父母因为忙于生计无暇顾及我的学习，幸好我因为看到他们这样子的生活，内心里有深深的恐惧感，驱使着我</div> </li> <li><a href="/article/1950227573938122752.htm" title="2019-06-05" target="_blank">2019-06-05</a> 第十七把巴鲁克 <div>今天去实验田里实习，见到了福寿螺真的可怕且牛皮，六级也快来了，说实话还是害怕。我昨天考了环工原理，真的太难了，太烦了，理工科真的难，烦。实验报告还是没写，要抓紧速度抓紧时间，还是应该学会努力学习，远离一些不上进的事物。</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950223878005518336.htm" title="为什么焦虑、抑郁、自残的青少年越来越多？" target="_blank">为什么焦虑、抑郁、自残的青少年越来越多？</a> 精神健康 <div>很多家长觉得没缺孩子吃的穿的，他们有安稳的生活，他们有什么可焦虑、抑郁的，但现在的孩子，学习压力越来越大，每天休息的时间越来越少，出现焦虑抑郁是很正常的。从发展的角度看，青少年时期，人的身体、情绪，智力、人格都急剧发展，正从未成熟走向成熟，情绪起伏不定，易冲动，再者，由于缺乏生活经验，以及来自于家长、学校、社会的各种要求和压力，从而不知所措，心中的焦虑、恐惧、彷徨得不到及时的排解，从而导致心理上的</div> </li> <li><a href="/article/1950222857124507648.htm" title="读书打卡《别想太多啦》" target="_blank">读书打卡《别想太多啦》</a> chenchen_68ed <div>第一，世间之事，不去尝试永远不知道其中的奥秘，在尝试中有失败是必然的。如果担心失败，那什么都学不会。第二，经历的失败越多，越会对失败者抱有宽容的态度，“原来如此，我也经历过类似的失败啦，那只是暂时的”。经历越多失败的长者，越能包容别人，这也就是所谓的“越年长越宽容”。成熟的人，就是在众多失败经历中不断学习，并接纳别人的失败。对于他人的小小过失不吹毛求疵，自己的心态会更加平和。在不断失败中学习，让自</div> </li> <li><a href="/article/1950222602781913088.htm" title="2023-01-26" target="_blank">2023-01-26</a> 胡喜平 <div>我觉得《可见的学习》一书确实从底层逻辑说清楚了，教学的本质。可是太多术语和概念，一时间难以消化啊。而且知道和懂得有距离，运用就更不行了，需要高手和专家的指导。我需要多听听新课标的讲座了，来反复印证。读论文也有了一点点灵感，明天修改我的论文。</div> </li> <li><a href="/article/1950221204333850624.htm" title="平静得接受自己的笨拙 20190118 晨间日记" target="_blank">平静得接受自己的笨拙 20190118 晨间日记</a> 吴伯符 <div>图片发自App最近做了一个关于微习惯的分享，这里有八个字：微量开始，超额完成。这里的言下之意其实是要你在一开始的时候，平静地接受自己的笨拙。接受自己的笨拙，理解自己的笨拙，放慢速度尝试，观察哪里可以改进，再反复练习，观察自己哪里可以再进一步改进，再反复…这是学习一切技能的必须的过程。这里的两个关键点是：1.尽快的开始这个过程，这就能够用到微习惯的微量开始。2.尽快的度过这个过程，这就需要用到超额完</div> </li> <li><a href="/article/1950219924043526144.htm" title="二十四节气组诗谷雨" target="_blank">二十四节气组诗谷雨</a> 离陌_6639 <div>图片来源网络，若侵犯了你的权益，请联系我删除6.谷雨文/离陌背上行囊背上如行囊的我从此任行程马不停蹄今天家乡的田野春雨快马加鞭播下希望的种子观音不语目送着我和夏天一道在观音山出关图片来源网络，若侵犯了你的权益，请联系我删除你好啊，我是离陌，已然在懵懂中走过了16年的岁月，为了珍惜当下的每一秒，所以立志做一名终身学习者。文学对于我来说是一种信仰，诗歌是我的生命。人生之道，四通八达，即入文学，自当持之</div> </li> <li><a href="/article/1950219036667211776.htm" title="你好，2020年" target="_blank">你好，2020年</a> 瑄瑄妍妍的妈咪 <div>早上好，今天是2020年的第一天，也就是元旦，新年新的一天开始了。新的开始，重新规划未来的一年。从今天开始，用了一个新的记账软件，之前的随手记软件，也没有删除，只是重新下载了一个别的软件，开始一个新的记账旅程，对于理财开支，有个新的规划。通过小红书视频软件，学习了不少育儿知识，和各种不同的美食，以后动手制作，给宝宝做健康美味的营养餐。学习方面，继续学英语吧！虽然是抽出时间学的，进度也比较慢，但是积</div> </li> <li><a href="/article/1950216170401492992.htm" title="常规笔记本和加固笔记本的区别" target="_blank">常规笔记本和加固笔记本的区别</a> luchengtech <a class="tag" taget="_blank" href="/search/%E7%94%B5%E8%84%91/1.htm">电脑</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E9%98%B2%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">三防笔记本</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%9B%BA%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">加固计算机</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%9B%BA%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">加固笔记本</a> <div>在现代科技产品中，笔记本电脑因其便携性和功能性被广泛应用。根据使用场景和需求的不同，笔记本可分为常规笔记本和加固笔记本，二者在多个方面存在显著区别。适用场景是区分二者的重要标志。常规笔记本主要面向普通消费者和办公人群，适用于家庭娱乐、日常办公、学生学习等相对稳定的室内环境。比如，人们在家用它追剧、处理文档，学生在教室用它完成作业。而加固笔记本则专为特殊行业设计，像军事、野外勘探、工业制造、交通运输</div> </li> <li><a href="/article/1950215728720310272.htm" title="《云襄传》：云襄做的局是浑水摸鱼吗？" target="_blank">《云襄传》：云襄做的局是浑水摸鱼吗？</a> 书生号贺 <div>云襄入南都是要浑水摸鱼吗？他是云台的高材生吗？他为啥笃定师父一定会让他留在南都？他为啥觉得他能够做局成功？他是在经商吗？还是在经营人心与欲望？云襄是云台弟子，云台属千门的一支，另一支叫凌渊，云台教人经商之道，重智慧，凌渊以武力取胜，但倍受打压。云襄学习十五年，下高山奔越州，途经南洋，因恩人闻聪被害，囚于白驹镇，念于情分，被卷入这样一个局面里，结识了舒亚南与金十两，于是，复仇小组成立，目标是南都漕帮</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> 郝加升 <div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div> </li> <li><a href="/article/1950214458265628672.htm" title="心力践行营十二期一阶学习打卡" target="_blank">心力践行营十二期一阶学习打卡</a> LX_王彤彤 <div>姓名：王彤彤时间：2021年4月24日一：朗读师父的十大人生哲学二：师父的早安分享感悟很喜欢这句话：所有的行动都是基于目标的尝试，没有所谓的失败，只是不同尝试后得到的不同结果，让我们更好地调整下一次的行动。三：感恩日记1.我太幸福了，我很感恩姑姑，因为姑姑放假又投喂了我，还给我带了饺子回家，这让我感觉很幸福。谢谢，谢谢，谢谢。2.我太幸福了，我很感恩师父晚上的直播，因为听他的分享我知道怎么更好的去</div> </li> <li><a href="/article/1950214205252628480.htm" title="为了在未来的人工智能世界中取得成功，学生们必须学习人类写作的优点" target="_blank">为了在未来的人工智能世界中取得成功，学生们必须学习人类写作的优点</a> 睿邸管家 <div>澳大利亚各地的学生在新学年开始使用铅笔、钢笔和键盘学习写字。在工作场所，机器也在学习写作，如此有效，几年之内，它们可能会写得比人类更好。有时它们已经做到了，就像Grammarly这样的应用程序所展示的那样。当然，人类现在的日常写作可能很快就会由具有人工智能(AI)的机器来完成。手机和电子邮件软件常用的预测文本是无数人每天都在使用的一种人工智能写作形式。据AI行业研究机构称，到2022年，人工智能及</div> </li> <li><a href="/article/1950213434863841280.htm" title="闭组进行时..." target="_blank">闭组进行时...</a> 李亚青_强化班 <div>今天是2019年12月1号距离开始三月学习的日子:2019年10月07,已经过去将近两个月，回顾这一阶段的学习，收获了什么?又学会了什么呢?图片发自App我想，收获最大的就是身边这一群人吧,有和蔼可亲的学姐，贴心的学长，嬉戏打闹，玩的不亦乐乎，但也同样认真踏实学习小伙伴图片发自App本以为在这样的时刻，有太多太多话，太多太多想法想要表达，可言到此处，又觉得似乎没有什么想要说的了还是那句话，幸运遇到</div> </li> <li><a href="/article/1950213052171350016.htm" title="2021-10-23" target="_blank">2021-10-23</a> 赵甄文的幸福 <div>秀荣感恩日记Day42[烟花]感恩语录感恩自己有能力有好身体，可以到处走动，做自己想做的事情10.23感恩日记今天做的事情瑜伽一小时户外散步一小时泡脚20分钟学习打卡和孩子沟通[爱心]感动的瞬间今天瑜伽回来，发现老公在厨房里做鱼。每次老公有时间休息的时候都会给我做硬菜。刘姐约我一起去公园散步晒太阳。虽然完美错过，但心里还是暖暖的。每天睁开眼打开手机，先去自己的群里逛一逛，每每发现有人点赞或者互动都</div> </li> <li><a href="/article/1950212797946195968.htm" title="孤独的守候" target="_blank">孤独的守候</a> 怒吼的生命 <div>孤独了时光岁月了寂寞带来了惆怅那些孤独的日子里我们珍惜奋斗起来品味人生的真谛做到更好奋斗当中的你是那么努力格外自律学习起来五彩斑斓那些日子时光匆匆人生的机会很多需要把握痛苦的回忆记得住那些忧愁孤苦五一的日子寂寞当中的你时光荏苒独自带给我荒草学习起来努力奋斗可是我们做的还不够把握发展生活带给我们更多希望静静的述说你的故事你的精彩人生当中我们总是努力把握生活带给我们更多的学习生活当中我们奋斗可是做的还</div> </li> <li><a href="/article/1950209368356089856.htm" title="AI模型训练中过拟合和欠拟合的区别是什么？" target="_blank">AI模型训练中过拟合和欠拟合的区别是什么？</a> workflower <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%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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>在AI模型训练中，过拟合和欠拟合是两种常见的模型性能问题，核心区别在于模型对数据的学习程度和泛化能力：欠拟合（Underfitting）-定义：模型未能充分学习到数据中的规律，对训练数据的拟合程度较差，在训练集和测试集上的表现都不好（如准确率低、损失值高）。-原因：-模型结构过于简单（如用线性模型解决非线性问题）；-训练数据量不足或特征信息不充分；-训练时间太短，模型尚未学到有效模式。-表现：训练</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> 小馋喵知识杂货铺 <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950208983868436480.htm" title="2018-08-29精进打卡" target="_blank">2018-08-29精进打卡</a> 米兰王 <div>姓名:王兰英【日精进打卡第25天】【知～学习】《六项精进》1遍共39遍《大学》1遍共50遍【经典名句分享】一切都是最好的安排。【行～实践】一、修身：（对自己个人）1，散步1小时。2，每天坚持读书。二、齐家：（对家庭和家人）1，指导孩子开车。2，和家人一起逛超市。三、建功：（对工作）用心做好每件事。｛积善｝：发愿从2018年8月5日起1年内365个善事。今日1善，累计27善。【省～觉悟】正人先正己。</div> </li> <li><a href="/article/1950207203017289728.htm" title="陶勇：要不要参加分班考试学习？看完再说。" target="_blank">陶勇：要不要参加分班考试学习？看完再说。</a> 陶勇 <div>每年到了升学季，有很多培训机构都特别忙，为什么呢？因为有成千上万的学生，会选择升学前的分班考试的培训。比如说，小升初的孩子，到了暑假，很多孩子都会去选择一个初中，初一的分班考试的培训，那考入高中的孩子也有很多孩子会选择这种新高一的分班考试的培训。当然了，我个人认为这种选择并不是孩子自身的选择，主要还是家长的选择。当然也有少数孩子会对自己有比较高的要求，他们也会主动的去选择。为什么要去上分班考试的这</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> weixin_39607620 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950204954295726080.htm" title="Anaconda 和 Miniconda：功能详解与选择建议" target="_blank">Anaconda 和 Miniconda：功能详解与选择建议</a> 古月฿ <a class="tag" taget="_blank" href="/search/python%E5%85%A5%E9%97%A8/1.htm">python入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a> <div>Anaconda和Miniconda详细介绍一、Anaconda的详细介绍1.什么是Anaconda？Anaconda是一个开源的包管理和环境管理工具，在数据科学、机器学习以及科学计算领域发挥着关键作用。它以Python和R语言为基础，为用户精心准备了大量预装库和工具，极大地缩短了搭建数据科学环境的时间。对于那些想要快速开展数据分析、模型训练等工作的人员来说，Anaconda就像是一个一站式的“数</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>