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/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> 露露_e800 <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835513803861749760.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/%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/python/1.htm">python</a> <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a> 随风至 <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> 静候花开_7090 <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835508131032035328.htm" title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a> 研学随笔 <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> 广龙宇 <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835506996258893824.htm" title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a> mmaerd <a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</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%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> William数据分析 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/1835504817905168384.htm" title="2019-12-22-22:30" target="_blank">2019-12-22-22:30</a> 涓涓1016 <div>今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的</div> </li> <li><a href="/article/1835502704827396096.htm" title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a> 落难Coder <a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496402042580992.htm" title="GitHub上克隆项目" target="_blank">GitHub上克隆项目</a> bigbig猩猩 <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> ~在杰难逃~ <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835494131535802368.htm" title="人工智能时代，程序员如何保持核心竞争力？" target="_blank">人工智能时代，程序员如何保持核心竞争力？</a> jmoych <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835492372952215552.htm" title="阶段总结反思" target="_blank">阶段总结反思</a> 轻争 <div>马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥</div> </li> <li><a href="/article/1835489587498151936.htm" title="ARM驱动学习之基础小知识" target="_blank">ARM驱动学习之基础小知识</a> JT灬新一 <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</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/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板</div> </li> <li><a href="/article/1835489588169240576.htm" title="ARM驱动学习之5 LEDS驱动" target="_blank">ARM驱动学习之5 LEDS驱动</a> JT灬新一 <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/C/1.htm">C</a><a class="tag" taget="_blank" href="/search/%E5%BA%95%E5%B1%82/1.htm">底层</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三</div> </li> <li><a href="/article/1835489586684456960.htm" title="ARM驱动学习之4小结" target="_blank">ARM驱动学习之4小结</a> JT灬新一 <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/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo</div> </li> <li><a href="/article/1835489566702792704.htm" title="展现思维导图魅力，不断挖掘人生宝藏" target="_blank">展现思维导图魅力，不断挖掘人生宝藏</a> 思维导图讲师Mandy <div>第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员</div> </li> <li><a href="/article/1835488930972135424.htm" title="2019-3-23晨间日记" target="_blank">2019-3-23晨间日记</a> 红红火火小耳朵 <div>今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte</div> </li> <li><a href="/article/1835485681187647488.htm" title="【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面" target="_blank">【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面</a> 一个射手座的程序媛 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获</div> </li> <li><a href="/article/1835483983241113600.htm" title="教育" target="_blank">教育</a> 用心灵温暖心灵 <div>@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更</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>