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/1892482448659378176.htm"
title="【vue】Mammoth.js的使用：将.docx转换成HTML" target="_blank">【vue】Mammoth.js的使用：将.docx转换成HTML</a>
<span class="text-muted">暴富暴富暴富啦啦啦</span>
<a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a>
<div>mammoth.convertToHtml(input,options）：把源文档转换为HTML文档mammoth.convertToMarkdown(input,options)：把源文档转换为Markdown文档。mammoth.extractRawText(input)：提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。npminstallelement-uimammot</div>
</li>
<li><a href="/article/1892480557481259008.htm"
title="分布式数据库解析" target="_blank">分布式数据库解析</a>
<span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E7%89%87/1.htm">数据分片</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%8F%AF%E7%94%A8%E6%9E%B6%E6%9E%84/1.htm">高可用架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">云数据库</a><a class="tag" taget="_blank" href="/search/%E5%85%B1%E8%AF%86%E7%AE%97%E6%B3%95/1.htm">共识算法</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E7%90%83%E4%B8%80%E8%87%B4%E6%80%A7/1.htm">全球一致性</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/1.htm">分布式事务</a><a class="tag" taget="_blank" href="/search/CAP%E5%AE%9A%E7%90%86/1.htm">CAP定理</a>
<div>title:分布式数据库解析date:2025/2/20updated:2025/2/20author:cmdragonexcerpt:通过金融交易、社交平台、物联网等9大真实场景，结合GoogleSpanner跨洲事务、DynamoDB毫秒级扩展等38个生产级案例，揭示分布式数据库的核心原理与工程实践。内容涵盖CAP定理的动态权衡策略、Paxos/Raft协议的工程实现差异、TrueTime时钟</div>
</li>
<li><a href="/article/1892474879861649408.htm"
title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
<span class="text-muted">柳旖岭</span>
<div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
</li>
<li><a href="/article/1892473871148314624.htm"
title="单细胞轨迹分析-monocle包的使用" target="_blank">单细胞轨迹分析-monocle包的使用</a>
<span class="text-muted">探序基因</span>
<a class="tag" taget="_blank" href="/search/r%E8%AF%AD%E8%A8%80/1.htm">r语言</a>
<div>探序基因肿瘤研究院整理安装：monocle源码下载：https://www.bioconductor.org/packages/release/bioc/html/monocle.htmlR版本，4.2.0BiocManager::install("monocle")不过在安装过程中还是报错了：Warning:无法在https://bioconductor.org/packages/3.15/bi</div>
</li>
<li><a href="/article/1892471976795107328.htm"
title="前端导出word文件—包含canvas(echarts图表)" target="_blank">前端导出word文件—包含canvas(echarts图表)</a>
<span class="text-muted">Liuer_Qin</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><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>
<div>一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM</div>
</li>
<li><a href="/article/1892471850370396160.htm"
title="HarmonyOS全栈开发指南：从入门到精通，构建万物智联的未来生态（一）" target="_blank">HarmonyOS全栈开发指南：从入门到精通，构建万物智联的未来生态（一）</a>
<span class="text-muted">林钟雪</span>
<a class="tag" taget="_blank" href="/search/Harmonyos/1.htm">Harmonyos</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a>
<div>一、HarmonyOS基础认知篇1.HarmonyOS发展历程与核心使命内容摘要：HarmonyOS，由华为公司于2019年首次公开发布，标志着华为在操作系统领域的深度布局。从最初的智能物联网设备操作系统定位，到如今面向万物智联时代的分布式全场景操作系统，HarmonyOS经历了多次迭代与升级。发展历程：初期探索：2019年，华为正式推出HarmonyOS，旨在打造一个适用于智能物联网设备的操作系</div>
</li>
<li><a href="/article/1892457086076383232.htm"
title="动态蛇形卷积（DySnakeConv）在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv8】" target="_blank">动态蛇形卷积（DySnakeConv）在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv8】</a>
<span class="text-muted">步入烟尘</span>
<a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%9B%87%E5%BD%A2%E5%8D%B7%E7%A7%AF/1.htm">动态蛇形卷积</a><a class="tag" taget="_blank" href="/search/DySnakeConv/1.htm">DySnakeConv</a>
<div>本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术，带你从入门到精通！后续更有实战项目，助你轻松应对面试挑战！立即订阅，开启你的YOLOv8之旅！专栏订阅地址：https://blog.csdn.net/mrdeam/category_12804295.html文章目录动态蛇形卷积（DySnakeConv）在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv</div>
</li>
<li><a href="/article/1892453179853959168.htm"
title="微信支付-扫码支付全流程" target="_blank">微信支付-扫码支付全流程</a>
<span class="text-muted">自娱自乐22</span>
<a class="tag" taget="_blank" href="/search/thinkphp/1.htm">thinkphp</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E6%89%AB%E7%A0%81%E6%94%AF%E4%BB%98/1.htm">微信扫码支付</a>
<div>微信支付官方文档：`https://pay.weixin.qq.com/wiki/doc/api/index.html`微信支付分为2种模式：【模式一】：商户后台系统根据微信支付规则链接生成二维码，链接中带固定参数productid（可定义为产品标识或订单号）。用户扫码后，微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL)，商户后台系统根据pr</div>
</li>
<li><a href="/article/1892453053508939776.htm"
title="mac+php5.3的docker-compose.yml分享" target="_blank">mac+php5.3的docker-compose.yml分享</a>
<span class="text-muted">自娱自乐22</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a>
<div>version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp</div>
</li>
<li><a href="/article/1892449143461310464.htm"
title="Python+Playwright常用元素定位方法" target="_blank">Python+Playwright常用元素定位方法</a>
<span class="text-muted">HAMYHF</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a>
<div>CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ</div>
</li>
<li><a href="/article/1892446115870076928.htm"
title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
</li>
<li><a href="/article/1892433617058066432.htm"
title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a>
<span class="text-muted">odoo中国</span>
<a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a>
<div>使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经</div>
</li>
<li><a href="/article/1892426166254497792.htm"
title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a>
<span class="text-muted">小星袁</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数</div>
</li>
<li><a href="/article/1892421248793767936.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%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/%E7%BD%91%E7%BB%9C/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/CTF/1.htm">CTF</a>
<div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892421249762652160.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<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/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a>
<div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892413304811352064.htm"
title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
<span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
<div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
</li>
<li><a href="/article/1892412295414345728.htm"
title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a>
<span class="text-muted">vvv666s</span>
<div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div>
</li>
<li><a href="/article/1892410530585440256.htm"
title="EDA事件驱动架构 领域事件 Event Sourcing" target="_blank">EDA事件驱动架构 领域事件 Event Sourcing</a>
<span class="text-muted">talentluke</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a>
<div>摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心，与SOA以服务为核心有本质区别，是状态模式的延伸到架构上，事件是触发状态变化的根源，事件是介于业务和技术两者之间的概念，用户界面是事件主要发生来源，事件也可以来源其他系统或模块，通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用，事件也可以用于</div>
</li>
<li><a href="/article/1892407882675187712.htm"
title="前端性能优化——如何提高页面加载速度？" target="_blank">前端性能优化——如何提高页面加载速度？</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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a>
<span class="text-muted">方向感超强的</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892404729082867712.htm"
title="前端504错误分析" target="_blank">前端504错误分析</a>
<span class="text-muted">ox0080</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398677004185600.htm"
title="对象的操作" target="_blank">对象的操作</a>
<span class="text-muted">augenstern416</span>
<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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div>
</li>
<li><a href="/article/1892395273758502912.htm"
title="【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">网安詹姆斯</span>
<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/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/%E5%89%8D%E7%AB%AF/1.htm">前端</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/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892389477767245824.htm"
title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a>
<span class="text-muted">Ama_tor</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div>
</li>
<li><a href="/article/1892375095628853248.htm"
title="MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源" target="_blank">MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源</a>
<span class="text-muted">希希分享</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E5%B8%8C%E7%BD%9158soho_cn/1.htm">软希网58soho_cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%B5%84%E6%BA%90/1.htm">源码资源</a><a class="tag" taget="_blank" href="/search/%E4%BB%BF%E6%AF%92%E8%88%8C%E8%87%AA%E9%80%82%E5%BA%94%E4%B8%BB%E9%A2%98%2F/1.htm">仿毒舌自适应主题/</a>
<div>基于MxonePro二开的主题，全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明：1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台，然后再进入后台设置4、主题后台地址：MXTUMAX图图主题,/admin.php/admin/m</div>
</li>
<li><a href="/article/1892366015967326208.htm"
title="使用Python获取在线股票交易网站的实时交易数据" target="_blank">使用Python获取在线股票交易网站的实时交易数据</a>
<span class="text-muted">嵌入式开发项目</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E7%B2%BE%E9%80%9A%E4%B8%93%E6%A0%8F/1.htm">2025年爬虫精通专栏</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/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
<div>目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，</div>
</li>
<li><a href="/article/1892361849689665536.htm"
title="【FastAPI 】FastAPI 模板：提供静态文件" target="_blank">【FastAPI 】FastAPI 模板：提供静态文件</a>
<span class="text-muted">iFakeCoder</span>
<a class="tag" taget="_blank" href="/search/Flask/1.htm">Flask</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</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>
<div>FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样</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>