2021年信息学部物联网工程学院学生科协前端大培训
2021科协前端培训
- HTML
-
- 概念
- 语法
- 标签学习
- 表单
- CSS
-
- 概念
- 作用
- CSS 规则
- 引入CSS样式表
-
- 内联样式
- 内部样式表
- 外部样式表
- CSS基础选择器
- CSS扩展选择器
- CSS字体样式(font)
- CSS背景(background)
- 页面布局
- 盒子模型
-
- 盒子边框(border)
- 浮动
-
- 清除浮动
- 常用布局
HTML
概念
全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过标签将网络上的文档格式统一，是分散的Internet资源链接为一个逻辑整体。它可以说明文字、图形、动画、声音、表格、链接等。
1.超文本：
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息相关联。
2.标记语言：
标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。他与文本相关的其他信息结合起来但是使用标记进行标识。
语法
1.html文档的后缀名是.html或.htm。
2.标签特点：
（1）由尖括号包围的关键词组成，如
（2）可分为单标签和双标签
双标签：有开始标签和结束标签，如
单标签：开始标签和结束标签在一起，如
（3）在开始标签内部可以定义属性，
（4）标签不分大小写，建议使用小写
（5）标签可以嵌套
标签学习
1.文件标签：
：表示该文件是html文件，使用h5的标准解析
：定义html文件
：所有头部文件的容器，是引入外部元素的位置
：定义浏览器工具栏中的标题，在所有的html文件中是必须的
<body>：定义文档的主体部分，包含文档的所有内容
</code></pre>
<p>2.文本标签：</p>
<pre><code><h1>到<h6>：标题标签，字体大小由大到小
<p>：段落标签，定义段落、】
<hr>：定义水平线，单标签
<br>：换行标签，定义换行
<b>：加粗标签，将内部文字加粗
<i>：倾斜，将内部文字倾斜
<center>：居中标签，将内部文字相对网页居中
</code></pre>
<p>3.图片标签：</p>
<pre><code><img src=””>：图片标签，src用于指定图片文件位置，单标签
相对路径：
./：表示当前文件目录，如：./img/图片.jpg。
../：表示上一级目录。
</code></pre>
<p>4.链接标签：</p>
<pre><code><a>定义一个超链接
属性：
herf：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页打开
</code></pre>
<p>5.表格标签：</p>
<pre><code><table>：定义表格
width：宽度
border：边框
cellpadding：框线与内容的距离
cellspacing：单元格之间的距离
bgcolor：背景颜色
align：内容的对齐方式
<tr>：定义表格的一行
height：行的高度
bgcolor：背景颜色
align：内容的对齐方式
<td>：定义一个单元格
colspan：合并列
rowspan：合并行
width：设置单元格的宽度
</code></pre>
<p>6.转义：</p>
<pre><code> ：空格
<：<
>：>
</code></pre>
<p>7.列表标签：</p>
<pre><code><ol>，<li>：有序列表
<ul>，<li>：无序列表
<dl>，<dt>，<dd>：自定义列表
</code></pre>
<p>8.div和span</p>
<pre><code><div>：占一行，定义一个区域，常用于组合块级元素
<span>：用于对文档中的行内元素进行组合
</code></pre>
<h2>表单</h2>
<pre><code> 概念：用于与服务器进行交互。
<form>：表单最外层，表示此区域用于与用户进行交互
action：指定提交数据的URL
method：指定交互的方式
常用的两种：
get：请求参数会显示在地址栏中，内容大小有限制，不安全。
post：请求参数不会显示在地址栏中，内容大小没有限制，较安全。
<input>：表单最基本的标签，用户输入数据的位置
type：input的属性，表示input的类型
text：文本输入框
placeholder：指定输入框的提示信息
passward：密码输入框
radio：单选框
name：必须设置相同的name才能实现单选效果
value：被选中时提交的数据
checked：指定默认值
checkbox：复选框
button：按钮
submit：提交按钮
reset：重置按钮
file：文件选择按钮
img：图片提交按钮
</code></pre>
<h1>CSS</h1>
<p>CSS：样式渲染、网页美化、页面布局</p>
<h2>概念</h2>
<p>CSS(Cascading Style Sheets)<br> 通常称为CSS样式表或层叠样式表(级联样式表)。<br> 层叠就是多个样式可以作用在同一个html的元素上，同时生效。</p>
<h2>作用</h2>
<p>结构(html)与样式(css)分离。<br> 让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS。<br> CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局，</p>
<p>• 降低耦合度。解耦<br> • 让分工协作更容易<br> • 提高开发效率</p>
<h2>CSS 规则</h2>
<p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:<br> <a href="http://img.e-com-net.com/image/info8/0204041c5e0649d48a5d77c9d47a425a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0204041c5e0649d48a5d77c9d47a425a.jpg" alt="2021年信息学部物联网工程学院学生科协前端大培训_第1张图片" width="570" height="120" style="border:1px solid black;"></a></p>
<p>选择器通常是您需要改变样式的 html 元素。<br> 每条声明由一个属性和一个值组成。<br> 属性（property）是你希望设置的样式属性（style attribute）。<br> 每个属性有一个值。属性和值被冒号分开。</p>
<p><strong>CSS 注释</strong></p>
<pre><code class="prism language-css"><span class="token comment">/* 这是注释 */</span>
</code></pre>
<h2>引入CSS样式表</h2>
<p>CSS与html结合方式</p>
<h3>内联样式</h3>
<p>通过标签的style属性来设置元素的样式</p>
<pre><code>style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
</code></pre>
<pre><code class="prism language-html"><span class="token comment"><!--例如：改变段落的文字颜色和大小--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>这是一个段落<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h3>内部样式表</h3>
<p>也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。</p>
<pre><code>style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
</code></pre>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/CSS<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器（选择的标签）</span> <span class="token punctuation">{</span>
<span class="token property">属性1</span><span class="token punctuation">:</span> 属性值1<span class="token punctuation">;</span>
<span class="token property">属性2</span><span class="token punctuation">:</span> 属性值2<span class="token punctuation">;</span>
<span class="token property">属性3</span><span class="token punctuation">:</span> 属性值3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
</code></pre>
<h3>外部样式表</h3>
<p>也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。</p>
<pre><code>rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
</code></pre>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<h2>CSS基础选择器</h2>
<p>CSS选择器作用：找到指定的HTML页面元素，选择标签。</p>
<table>
<thead>
<tr>
<th align="center">选择器</th>
<th align="center">作用</th>
<th align="center">缺点</th>
<th align="center">使用情况</th>
<th align="center">用法</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">标签选择器</td>
<td align="center">可以选出所有相同的标签，比如p</td>
<td align="center">不能差异化选择</td>
<td align="center">较多</td>
<td align="center">p { color：red;}</td>
</tr>
<tr>
<td align="center">类选择器</td>
<td align="center">可以选出1个或者多个标签</td>
<td align="center">可以根据需求选择</td>
<td align="center">非常多</td>
<td align="center">.nav { color: red; }</td>
</tr>
<tr>
<td align="center">id选择器</td>
<td align="center">一次只能选择器1个标签</td>
<td align="center">只能使用一次</td>
<td align="center">不推荐使用</td>
<td align="center">#nav {color: red;}</td>
</tr>
<tr>
<td align="center">通配符选择器</td>
<td align="center">选择所有的标签</td>
<td align="center">选择的太多，有部分不需要</td>
<td align="center">不推荐使用</td>
<td align="center">* {color: red;}</td>
</tr>
</tbody>
</table>
<h2>CSS扩展选择器</h2>
<table>
<thead>
<tr>
<th align="center">选择器</th>
<th align="center">作用</th>
<th align="center">特征</th>
<th align="center">使用情况</th>
<th align="center">隔开符号及用法</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">后代选择器</td>
<td align="center">用来选择元素后代</td>
<td align="center">是选择所有的子孙后代</td>
<td align="center">较多</td>
<td align="center">符号是<code>空格</code> .nav a</td>
</tr>
<tr>
<td align="center">子代选择器</td>
<td align="center">选择 最近一级元素</td>
<td align="center">只选亲儿子</td>
<td align="center">较少</td>
<td align="center">符号是<code>></code> .nav>p</td>
</tr>
<tr>
<td align="center">交集选择器</td>
<td align="center">选择两个标签交集的部分</td>
<td align="center">既是 又是</td>
<td align="center">较少</td>
<td align="center"><code>没有符号</code> p.one</td>
</tr>
<tr>
<td align="center">并集选择器</td>
<td align="center">选择某些相同样式的选择器</td>
<td align="center">可以用于集体声明</td>
<td align="center">较多</td>
<td align="center">符号是<code>逗号</code> .nav, .header</td>
</tr>
<tr>
<td align="center">链接伪类选择器</td>
<td align="center">给链接更改状态</td>
<td align="center"></td>
<td align="center">较多</td>
<td align="center"><code>a:link</code> 未访问的链接 <code>a:visited</code> 已访问的链接 <code>a:hover</code> 鼠标移动到链接上 <code>a:active</code> 选定的链接</td>
</tr>
</tbody>
</table>
<h2>CSS字体样式(font)</h2>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">表示</th>
<th align="center">注意点</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">font-size</td>
<td align="center">字号</td>
<td align="center">我们通常用的单位是px 像素，一定要跟上单位</td>
</tr>
<tr>
<td align="center">font-family</td>
<td align="center">字体</td>
<td align="center">实际工作中按照团队约定来写字体</td>
</tr>
<tr>
<td align="center">font-weight</td>
<td align="center">字体粗细</td>
<td align="center">记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位</td>
</tr>
<tr>
<td align="center">font-style</td>
<td align="center">字体样式</td>
<td align="center">记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal</td>
</tr>
<tr>
<td align="center">font</td>
<td align="center">字体连写</td>
<td align="center">1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">表示</th>
<th align="center">注意点</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">color</td>
<td align="center">颜色</td>
<td align="center">我们通常用 十六进制 比如 而且是简写形式 #fff</td>
</tr>
<tr>
<td align="center">line-height</td>
<td align="center">行高</td>
<td align="center">控制行与行之间的距离</td>
</tr>
<tr>
<td align="center">text-align</td>
<td align="center">水平对齐</td>
<td align="center">可以设定文字水平的对齐方式</td>
</tr>
<tr>
<td align="center">text-indent</td>
<td align="center">首行缩进</td>
<td align="center">通常我们用于段落首行缩进2个字的距离 text-indent: 2em;</td>
</tr>
<tr>
<td align="center">text-decoration</td>
<td align="center">文本修饰</td>
<td align="center">记住 添加 下划线 underline 取消下划线 none</td>
</tr>
</tbody>
</table>
<hr>
<h2>CSS背景(background)</h2>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">作用</th>
<th align="center">值</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">background-color</td>
<td align="center">背景颜色</td>
<td align="center">预定义的颜色值/十六进制/RGB代码</td>
</tr>
<tr>
<td align="center">background-image</td>
<td align="center">背景图片</td>
<td align="center">url(图片路径)</td>
</tr>
<tr>
<td align="center">background-repeat</td>
<td align="center">是否平铺</td>
<td align="center">repeat/no-repeat/repeat-x/repeat-y</td>
</tr>
<tr>
<td align="center">background-position</td>
<td align="center">背景位置</td>
<td align="center">length/position 分别是x和y坐标，切记如果有精确数值单位，则必须按照先X后Y的写法</td>
</tr>
<tr>
<td align="center">background-attachment</td>
<td align="center">背景固定还是滚动</td>
<td align="center">scroll/fixed</td>
</tr>
<tr>
<td align="center">背景简写</td>
<td align="center">更简单</td>
<td align="center">背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序</td>
</tr>
<tr>
<td align="center">背景透明</td>
<td align="center">让盒子半透明</td>
<td align="center">background: rgba(0,0,0,0.3); 后面必须是 4个值</td>
</tr>
</tbody>
</table>
<h2>页面布局</h2>
<p><strong>标签显示模式(display)</strong></p>
<p><code>标签显示模式</code>是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。</p>
<p><strong>标签显示模式转换 display</strong></p>
<pre><code class="prism language-markdown">- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块：display: inline-block;
</code></pre>
<p><strong>三种模式</strong></p>
<table>
<thead>
<tr>
<th align="center">元素模式</th>
<th align="center">元素排列</th>
<th align="center">设置样式</th>
<th align="center">默认宽度</th>
<th align="center">包含</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">块级元素</td>
<td align="center">一行只能放一个块级元素</td>
<td align="center">可以设置宽度高度</td>
<td align="center">容器的100%</td>
<td align="center">容器级可以包含任何标签</td>
</tr>
<tr>
<td align="center">行内元素</td>
<td align="center">一行可以放多个行内元素</td>
<td align="center">不可以直接设置宽度高度</td>
<td align="center">它本身内容的宽度</td>
<td align="center">容纳文本或则其他行内元素</td>
</tr>
<tr>
<td align="center">行内块元素</td>
<td align="center">一行放多个行内块元素</td>
<td align="center">可以设置宽度和高度</td>
<td align="center">它本身内容的宽度</td>
<td align="center"></td>
</tr>
</tbody>
</table>
<h2>盒子模型</h2>
<p><strong>网页布局的本质</strong></p>
<pre><code>首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
最后把网页元素比如文字图片等等，放入盒子里面。
</code></pre>
<p><strong>W3c标准盒子模型</strong></p>
<p>标准 w3c 盒子模型的范围包括 margin、border、padding、content<br> 盒子的实际大小：<strong>内容的宽度和高度 + 内边距 + 边框</strong></p>
<p><a href="http://img.e-com-net.com/image/info8/2b7a055c22304e5caf567caddf21b3f1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b7a055c22304e5caf567caddf21b3f1.png" alt="2021年信息学部物联网工程学院学生科协前端大培训_第2张图片" width="237" height="171" style="border:1px solid black;"></a></p>
<p>注意：width和height设置的都是content的内容</p>
<h3>盒子边框(border)</h3>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">border-width</td>
<td align="center">定义边框粗细，单位是px</td>
</tr>
<tr>
<td align="left">border-style</td>
<td align="center">边框的样式</td>
</tr>
<tr>
<td align="left">border-color</td>
<td align="center">边框颜色</td>
</tr>
</tbody>
</table>
<pre><code class="prism language-markdown">边框的样式：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
</code></pre>
<p><strong>内边距(padding)</strong><br> padding属性用于设置内边距。是指边框与内容之间的距离。</p>
<p><strong>外边距（margin）</strong></p>
<p>margin属性用于设置外边距。margin就是控制<code>盒子和盒子之间的距离</code></p>
<pre><code>块级盒子水平居中
盒子指定宽度（width）
然后给左右的外边距都设置为auto
常见的写法，以下下三种都可以
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
</code></pre>
<pre><code>文字居中和盒子居中区别
1. 盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐
2. 块级盒子水平居中 左右margin 改为 auto
</code></pre>
<h2>浮动</h2>
<pre><code>优点：
1. 实现层叠布局,简单实现精美布局
2. 实现文字环绕
3.解决行内元素不能设置宽高属性问题
......
缺点：
父元素塌陷问题
</code></pre>
<h3>清除浮动</h3>
<p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。</p>
<p>1.添加额外标签清除浮动。</p>
<pre><code> <div class="parent">
<div class="f"></div>
<div style="clear:both"></div>
</div>
</code></pre>
<p>优点：通俗易懂，容易掌握。<br> 缺点：添加了无意义的空标签，后期不好维护。</p>
<p>2.添加<br>标签，使用<br>标签本身的的clear属性</p>
<pre><code> <div class="parent">
<div class="f"></div>
<br clear="all">
</div>
</code></pre>
<p>优点：通俗易懂，容易掌握。<br> 缺点：添加了无意义的空标签，后期不好维护。</p>
<p>3.父元素设置overflow:hidden</p>
<pre><code> <div class="parent" style="overflow:hidden">
<div class="f"></div>
</div>
</code></pre>
<p>优点：代码量少。<br> 缺点：内容较多时不换行的文件会被隐藏，无法显示溢出元素。</p>
<p>4.使用伪元素:after（推荐使用）</p>
<pre><code> .parent:after{
content:"";
visibility:hidden;
display:block;
width:100%;
height:0;
clear:both;
}
<div class="parent">
<div class="f"></div>
</div>
</code></pre>
<p>优点：结构和语义正确，没有多余的标签，一般不会产生新的问题。<br> 缺点：复用方式不当会造成代码量增多。</p>
<h2>常用布局</h2>
<ol>
<li> <p>float（浮动）</p> </li>
<li> <p>static（默认）</p> <p>Position：static；<br> 默认值。也就是按照文档的流式（flow）定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。<br> Static定位不能通过z-index进行层次分级。</p> </li>
<li> <p>relative（相对定位）</p> <p>Position：relative；<br> 在static基础上，让元素在它本来的位置上有一定的偏移。<br> 通过设置left/right、top/bottom值来实现。<br> 相对定位的元素没有脱离文档流，仍处于文档流中，依然占据原来的位置，虽然它已偏移。<br> 相对定位相对的元素是它自身在文档流中的位置。</p> </li>
<li> <p>absolute（绝对定位）</p> <p>Position：absolute；<br> 使用绝对定位将一个元素放到文档（Document）中的指定位置。<br> 也是通过设置left/right、top/bottom值来实现。<br> 绝对定位的元素参照的是离它最近的父元素（非static定位）。通常采用“子绝父相”的定位方式。</p> </li>
<li> <p>fixed（固定定位）<br> Position：fixed；<br> 固定定位的元素的参照物始终是整个文档（viewport）。<br> 通过设置left/right、top/bottom值来让某一个元素定位在浏览器文档的某一个位置。<br> 它与绝对定位的不同之处是：绝对定位的参照是离它最近的非static定位的父元素，而固定定位的参照始终是viewport。</p> </li>
<li> <p>sticky（粘性定位）<br> Position：sticky；<br> 不论页面如何移动，当页面将元素移出可视区域时，固定于页面上。</p> </li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1577259853368344576"></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">
<!-- 文章页-右侧1 动态广告位 -->
<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>
<!-- 文章页-右侧2 动态广告位 -->
<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>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,物联网,html)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1943990125864218624.htm"
title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a>
<span class="text-muted">Auscy</span>
<a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a>
<div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div>
</li>
<li><a href="/article/1943987856808669184.htm"
title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a>
<span class="text-muted"></span>
<div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div>
</li>
<li><a href="/article/1943987101301272576.htm"
title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a>
<span class="text-muted">烟幕缭绕</span>
<div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div>
</li>
<li><a href="/article/1943983696184930304.htm"
title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a>
<span class="text-muted">Mint_Datazzh</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a>
<div>个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样</div>
</li>
<li><a href="/article/1943979785097113600.htm"
title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a>
<span class="text-muted"></span>
<div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div>
</li>
<li><a href="/article/1943974618851241984.htm"
title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a>
<span class="text-muted">老马聊技术</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div>
</li>
<li><a href="/article/1943971211121848320.htm"
title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a>
<span class="text-muted">前端视界</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div>
</li>
<li><a href="/article/1943963776244051968.htm"
title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a>
<span class="text-muted">ξ流ぁ星ぷ132</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec</div>
</li>
<li><a href="/article/1943961125532004352.htm"
title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a>
<span class="text-muted">ui设计前端开发老司机</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a>
<div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div>
</li>
<li><a href="/article/1943960369345130496.htm"
title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</a>
<span class="text-muted">可曾去过倒悬山</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div>
</li>
<li><a href="/article/1943959738240790528.htm"
title="等保测评中的物联网设备安全评估" target="_blank">等保测评中的物联网设备安全评估</a>
<span class="text-muted">亿林数据</span>
<a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%AD%89%E4%BF%9D%E6%B5%8B%E8%AF%84/1.htm">等保测评</a>
<div>随着物联网（IoT）技术的飞速发展，物联网设备已经广泛应用于智能家居、智慧城市、工业自动化等多个领域，极大地提升了社会生产力和生活便利性。然而，随着IoT设备数量的激增，其安全性问题也日益凸显，成为我们必须面对的重要课题。在这一背景下，等级保护（等保）测评中的物联网设备安全评估显得尤为重要，它为我们提供了一个有效的安全评估和管理机制。一、物联网设备安全评估的重要性物联网设备的核心理念是实现物物相连</div>
</li>
<li><a href="/article/1943946255763828736.htm"
title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a>
<span class="text-muted"></span>
<div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div>
</li>
<li><a href="/article/1943932016164663296.htm"
title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a>
<span class="text-muted">武昌库里写JAVA</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a>
<div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div>
</li>
<li><a href="/article/1943930502771699712.htm"
title="Flutter基础（前端教程⑥-按钮切换）" target="_blank">Flutter基础（前端教程⑥-按钮切换）</a>
<span class="text-muted">aaiier</span>
<a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
<div>1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div>
</li>
<li><a href="/article/1943929870320988160.htm"
title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a>
<span class="text-muted">caifox菜狐狸</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/1.htm">学习之旅：从新手到专家</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/1.htm">表格搜索</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div>
</li>
<li><a href="/article/1943926338326949888.htm"
title="flutter知识点" target="_blank">flutter知识点</a>
<span class="text-muted">ZhDan91</span>
<a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a>
<div>#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微</div>
</li>
<li><a href="/article/1943919909612351488.htm"
title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a>
<span class="text-muted">lsx202406</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div>
</li>
<li><a href="/article/1943919026744913920.htm"
title="JavaScript之DOM操作与事件处理详解" target="_blank">JavaScript之DOM操作与事件处理详解</a>
<span class="text-muted">AA-代码批发V哥</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性</div>
</li>
<li><a href="/article/1943914107526770688.htm"
title="Vue框架之模板语法全面解析" target="_blank">Vue框架之模板语法全面解析</a>
<span class="text-muted">AA-代码批发V哥</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式：数据渲染的基础2.1基本用法：渲染文本2.2纯HTML渲染：`v-html`指令2.3一次性插值：`v-once`指令三、指令系统：控制DOM的行为3.1条件渲染：`v-if`与`v-show`3.1.1`v-if`：动态创建/销毁元素3.1.2`v-else`与`v-else-if`：条件分支3.1.3`v-show`：动态显示/</div>
</li>
<li><a href="/article/1943905285789773824.htm"
title="three前置课程知识" target="_blank">three前置课程知识</a>
<span class="text-muted"></span>
<div>学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档</div>
</li>
<li><a href="/article/1943902891983040512.htm"
title="【Qualcomm】高通SNPE框架简介、下载与使用" target="_blank">【Qualcomm】高通SNPE框架简介、下载与使用</a>
<span class="text-muted">Jackilina_Stone</span>
<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/Qualcomm/1.htm">Qualcomm</a><a class="tag" taget="_blank" href="/search/SNPE/1.htm">SNPE</a>
<div>目录一高通SNPE框架1SNPE简介2QNN与SNPE3Capabilities4工作流程二SNPE的安装与使用1下载2Setup3SNPE的使用概述一高通SNPE框架1SNPE简介SNPE（SnapdragonNeuralProcessingEngine），是高通公司推出的面向移动端和物联网设备的深度学习推理框架。SNPE提供了一套完整的深度学习推理框架，能够支持多种深度学习模型，包括Pytor</div>
</li>
<li><a href="/article/1943897977810644992.htm"
title="【Freertos实战】零基础制作基于stm32的物联网温湿度检测(教程非常简易)持续更新中........." target="_blank">【Freertos实战】零基础制作基于stm32的物联网温湿度检测(教程非常简易)持续更新中.........</a>
<span class="text-muted">熬夜的猪仔</span>
<a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a>
<div>本次记录采用Freertos的第二个DIY作品，基于Onenet的物联网温湿度检测系统，此次代码依然是全部开源。通过网盘分享的文件：物联网温湿度检测.rar链接:https://pan.baidu.com/s/1uj9UURVtGE6ZB6OsL2W8lw?pwd=qm2e提取码:qm2e大家也可以看看我上个的开源项目【Freertos实战】零基础制作基于stm32智能小车(教程非常简易)实物演示</div>
</li>
<li><a href="/article/1943883484288315392.htm"
title="stm32与ESP32-C3通过串口连接" target="_blank">stm32与ESP32-C3通过串口连接</a>
<span class="text-muted">林内克思</span>
<a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a>
<div>ESP32-C3是一款安全稳定、低功耗、低成本的物联网芯片，搭载RISC-V32位单核处理器，支持2.4GHzWi-Fi和Bluetooth5（LE）。ESP32-C3本身就可以作为一个单片机使用，但是我们这里只是把ESP32-C3作为一个Wi-Fi/蓝牙模块使用。STM32与ESP32-C3使用串口进行通讯。STM32可以给ESP32-C3发送命令，这种命令叫ESP-AT指令。首先通过pc串口E</div>
</li>
<li><a href="/article/1943875785089675264.htm"
title="Webpack5 多页面实践" target="_blank">Webpack5 多页面实践</a>
<span class="text-muted"></span>
<div>特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl</div>
</li>
<li><a href="/article/1943853592725221376.htm"
title="GPT实操——利用GPT创建一个应用" target="_blank">GPT实操——利用GPT创建一个应用</a>
<span class="text-muted">狗木马</span>
<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/gpt-3/1.htm">gpt-3</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a>
<div>功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：</div>
</li>
<li><a href="/article/1943847416503529472.htm"
title="前端面试题总结——JS篇" target="_blank">前端面试题总结——JS篇</a>
<span class="text-muted">又又呢</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号</div>
</li>
<li><a href="/article/1943844765225250816.htm"
title="前端面试题——5.AjAX的缺点？" target="_blank">前端面试题——5.AjAX的缺点？</a>
<span class="text-muted">浅端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a>
<div>①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist</div>
</li>
<li><a href="/article/1943842998383079424.htm"
title="2023高薪前端面试题（二、前端核心——Ajax）" target="_blank">2023高薪前端面试题（二、前端核心——Ajax）</a>
<span class="text-muted"></span>
<div>原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML，就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示</div>
</li>
<li><a href="/article/1943841736426057728.htm"
title="前端面试题——手写实现 ajax" target="_blank">前端面试题——手写实现 ajax</a>
<span class="text-muted">阿水爱踢中锋</span>
<a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封</div>
</li>
<li><a href="/article/1943832156052713472.htm"
title="配置Nginx实现静态资源访问" target="_blank">配置Nginx实现静态资源访问</a>
<span class="text-muted">Gappsong874</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%9E%B6%E6%9E%84/1.htm">安全架构</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91/1.htm">运维开发</a>
<div>Nginx是一款高性能的HTTP和反向代理服务器，常用于处理静态资源请求。通过合理配置，可以显著提升静态资源的访问速度和服务器性能。以下内容将详细介绍如何配置Nginx以实现静态资源的高效访问。基本静态资源配置静态资源通常包括HTML文件、CSS样式表、JavaScript脚本、图片、视频等。Nginx通过简单的配置即可处理这些请求。在Nginx的配置文件中，通常位于/etc/nginx/ngin</div>
</li>
<li><a href="/article/65.htm"
title="Java常用排序算法/程序员必须掌握的8大排序算法" target="_blank">Java常用排序算法/程序员必须掌握的8大排序算法</a>
<span class="text-muted">cugfy</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>分类：
1）插入排序（直接插入排序、希尔排序）
2）交换排序（冒泡排序、快速排序）
3）选择排序（直接选择排序、堆排序）
4）归并排序
5）分配排序（基数排序）
所需辅助空间最多：归并排序
所需辅助空间最少：堆排序
平均速度最快：快速排序
不稳定：快速排序，希尔排序，堆排序。
先来看看8种排序之间的关系：
1.直接插入排序
（1</div>
</li>
<li><a href="/article/192.htm"
title="【Spark102】Spark存储模块BlockManager剖析" target="_blank">【Spark102】Spark存储模块BlockManager剖析</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/manager/1.htm">manager</a>
<div>Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色</div>
</li>
<li><a href="/article/319.htm"
title="linux 查看端口被占用情况详解" target="_blank">linux 查看端口被占用情况详解</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8D%A0%E7%94%A8/1.htm">端口占用</a><a class="tag" taget="_blank" href="/search/netstat/1.htm">netstat</a><a class="tag" taget="_blank" href="/search/lsof/1.htm">lsof</a>
<div>经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序
1、lsof -i:port
port为端口号
[root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080
COMMAND PID USER FD TY</div>
</li>
<li><a href="/article/446.htm"
title="Hosts文件使用" target="_blank">Hosts文件使用</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/hosts/1.htm">hosts</a><a class="tag" taget="_blank" href="/search/locahost/1.htm">locahost</a>
<div> 一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:</div>
</li>
<li><a href="/article/573.htm"
title="java excel工具" target="_blank">java excel工具</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/Java+excel/1.htm">Java excel</a>
<div>直接上代码，一看就懂，利用的是jxl：
import java.io.File;
import java.io.IOException;
import jxl.Cell;
import jxl.Sheet;
import jxl.Workbook;
import jxl.read.biff.BiffException;
import jxl.write.Label;
import </div>
</li>
<li><a href="/article/700.htm"
title="web报表工具finereport常用函数的用法总结（数组函数）" target="_blank">web报表工具finereport常用函数的用法总结（数组函数）</a>
<span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E6%80%BB%E7%BB%93/1.htm">函数总结</a>
<div>ADD2ARRAY
ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。
示例：
ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7].
ADDARRAY([3,4, 1, 5, 7], "测试&q</div>
</li>
<li><a href="/article/827.htm"
title="游戏服务器网络带宽负载计算" target="_blank">游戏服务器网络带宽负载计算</a>
<span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>家庭所安装的4M，8M宽带。其中M是指，Mbits/S
其中要提前说明的是：
8bits = 1Byte
即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。
8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。
我是在计算我们网络流量时想到的</div>
</li>
<li><a href="/article/954.htm"
title="我的spring学习笔记2-IoC（反向控制 依赖注入）" target="_blank">我的spring学习笔记2-IoC（反向控制 依赖注入）</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3+%E7%B3%BB%E5%88%97/1.htm">Spring 3 系列</a>
<div>IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe</div>
</li>
<li><a href="/article/1081.htm"
title="高性能mysql 之 选择存储引擎(一)" target="_blank">高性能mysql 之 选择存储引擎(一)</a>
<span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/InnoDB/1.htm">InnoDB</a><a class="tag" taget="_blank" href="/search/MySQL%E5%BC%95%E6%93%8E/1.htm">MySQL引擎</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E5%BC%95%E6%93%8E/1.htm">存储引擎</a>
<div> 1 没有特殊情况，应尽可能使用InnoDB存储引擎。 原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她 被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃 恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常</div>
</li>
<li><a href="/article/1208.htm"
title="UDP网络编程" target="_blank">UDP网络编程</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/UDP%E7%BC%96%E7%A8%8B/1.htm">UDP编程</a><a class="tag" taget="_blank" href="/search/%E5%B1%80%E5%9F%9F%E7%BD%91%E7%BB%84%E6%92%AD/1.htm">局域网组播</a>
<div>
UDP是基于无连接的,不可靠的传输 与TCP/IP相反
UDP实现私聊,发送方式客户端,接受方式服务器
package netUDP_sc;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.Ine</div>
</li>
<li><a href="/article/1335.htm"
title="JQuery对象的val()方法执行结果分析" target="_blank">JQuery对象的val()方法执行结果分析</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div> JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。
</div>
</li>
<li><a href="/article/1462.htm"
title="http请求测试实例（采用json-lib解析）" target="_blank">http请求测试实例（采用json-lib解析）</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a>
<div> 由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。
package com;
import java.util.HashMap;
import java.util.Map;
import </div>
</li>
<li><a href="/article/1589.htm"
title="【RPC框架Hessian四】Hessian与Spring集成" target="_blank">【RPC框架Hessian四】Hessian与Spring集成</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hessian/1.htm">hessian</a>
<div>在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。
定义模型、接口和服务器端代码
|---Model
&nb</div>
</li>
<li><a href="/article/1716.htm"
title="【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析" target="_blank">【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a>
<div>1.Mahout环境搭建
1.下载Mahout
http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz
2.解压Mahout
3. 配置环境变量
vim /etc/profile
export HADOOP_HOME=/home</div>
</li>
<li><a href="/article/1843.htm"
title="nginx负载tomcat遇非80时的转发问题" target="_blank">nginx负载tomcat遇非80时的转发问题</a>
<span class="text-muted">ronin47</span>
<div> nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port
详细如下：
该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的：
? 1 2 3 4 5 </div>
</li>
<li><a href="/article/1970.htm"
title="java-17-在一个字符串中找到第一个只出现一次的字符" target="_blank">java-17-在一个字符串中找到第一个只出现一次的字符</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class FirstShowOnlyOnceElement {
/**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b
* 1.int[] count:count[i]表示i对应字符出现的次数
* 2.将26个英文字母映射：a-z <--> 0-25
* 3.假设全部字母都是小写
*/
pu</div>
</li>
<li><a href="/article/2097.htm"
title="mongoDB 复制集" target="_blank">mongoDB 复制集</a>
<span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div>mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题
mo</div>
</li>
<li><a href="/article/2224.htm"
title="[宇宙与天文]宇宙时代的经济学" target="_blank">[宇宙与天文]宇宙时代的经济学</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a>
<div>
宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。
在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源
以目前地球上国家的经济发展水平来讲，</div>
</li>
<li><a href="/article/2351.htm"
title="Git忽略文件" target="_blank">Git忽略文件</a>
<span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
<div> 有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。
==== ==== ==== 一些牢骚</div>
</li>
<li><a href="/article/2478.htm"
title="MySQL连接数据库的必须配置" target="_blank">MySQL连接数据库的必须配置</a>
<span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%95%B0%E6%8D%AE%E5%BA%93%E9%85%8D%E7%BD%AE/1.htm">连接数据库配置</a>
<div>MySQL连接数据库的必须配置
1.driverClass：com.mysql.jdbc.Driver
2.jdbcUrl：jdbc:mysql://localhost:3306/dbname
3.user：username
4.password：password
其中1是驱动名；2是url，这里的‘dbna</div>
</li>
<li><a href="/article/2605.htm"
title="一生要养成的60个习惯" target="_blank">一生要养成的60个习惯</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E4%B9%A0%E6%83%AF/1.htm">习惯</a>
<div>一生要养成的60个习惯
第1篇 让你更受大家欢迎的习惯
1 守时，不准时赴约,让别人等,会失去很多机会。
如何做到：
①该起床时就起床，
②养成任何事情都提前15分钟的习惯。
③带本可以随时阅读的书，如果早了就拿出来读读。
④有条理，生活没条理最容易耽误时间。
⑤提前计划：将重要和不重要的事情岔开。
⑥今天就准备好明天要穿的衣服。
⑦按时睡觉，这会让按时起床更容易。
2 注重</div>
</li>
<li><a href="/article/2732.htm"
title="[介绍]Yii 是什么" target="_blank">[介绍]Yii 是什么</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
<div>Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。
Yii 最适合做什么？
Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应</div>
</li>
<li><a href="/article/2859.htm"
title="Linux SSH常用总结" target="_blank">Linux SSH常用总结</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux+ssh/1.htm">linux ssh</a><a class="tag" taget="_blank" href="/search/SSHD/1.htm">SSHD</a>
<div>转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机
格式：
ssh name@remoteserver
例如：
ssh ickes@192.168.27.211
二、连接到远程主机指定的端口
格式：
ssh name@remoteserver -p 22
例如：
ssh i</div>
</li>
<li><a href="/article/2986.htm"
title="快速上传头像到服务端工具类FaceUtil" target="_blank">快速上传头像到服务端工具类FaceUtil</a>
<span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>快速迭代用
import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOExceptio</div>
</li>
<li><a href="/article/3113.htm"
title="jQuery入门之怎么使用" target="_blank">jQuery入门之怎么使用</a>
<span class="text-muted">ini</span>
<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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？
首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。</div>
</li>
<li><a href="/article/3240.htm"
title="带filter的hbase查询优化" target="_blank">带filter的hbase查询优化</a>
<span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E4%BC%98%E5%8C%96/1.htm">查询优化</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a><a class="tag" taget="_blank" href="/search/RandomRowFilter/1.htm">RandomRowFilter</a>
<div>
问题描述
hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。
问题原因
直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需</div>
</li>
<li><a href="/article/3367.htm"
title="java设计模式-单例模式" target="_blank">java设计模式-单例模式</a>
<span class="text-muted">men4661273</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a><a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%B0%84/1.htm">反射</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a>
<div> 单例模式1，饿汉模式
//饿汉式单例类.在类初始化时，已经自行实例化
public class Singleton1 {
//私有的默认构造函数
private Singleton1() {}
//已经自行实例化
private static final Singleton1 singl</div>
</li>
<li><a href="/article/3494.htm"
title="mongodb 查询某一天所有信息的3种方法，根据日期查询" target="_blank">mongodb 查询某一天所有信息的3种方法，根据日期查询</a>
<span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
<div>// mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。
// 第一种方式：
coll.aggregate([
{$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}},
{$match:{sendDate: '2015-</div>
</li>
<li><a href="/article/3621.htm"
title="二维数组转换成JSON" target="_blank">二维数组转换成JSON</a>
<span class="text-muted">tangqi609567707</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>原文出处：http://blog.csdn.net/springsen/article/details/7833596
public class Demo {
public static void main(String[] args) { String[][] blogL</div>
</li>
<li><a href="/article/3748.htm"
title="erlang supervisor" target="_blank">erlang supervisor</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a>
<div>定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<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.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</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>