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/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835489438243844096.htm"
                           title="Low Power概念介绍-Voltage Area" target="_blank">Low Power概念介绍-Voltage Area</a>
                        <span class="text-muted">飞奔的大虎</span>

                        <div>随着智能手机,以及物联网的普及,芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标,我们需要在系统设计阶段就采用低功耗设计的方案。而且,随着设计流程的逐步推进,到了芯片后端设计阶段,降低芯片功耗的方法已经很少了,节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗(staticleakagepower)和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等</div>
                    </li>
                    <li><a href="/article/1835483730358136832.htm"
                           title="数字里的世界17期:2021年全球10大顶级数据中心,中国移动榜首" target="_blank">数字里的世界17期:2021年全球10大顶级数据中心,中国移动榜首</a>
                        <span class="text-muted">张三叨</span>

                        <div>你知道吗?2016年,全球的数据中心共计用电4160亿千瓦时,比整个英国的发电量还多40%!前言每天,我们都会创造超过250万TB的数据。并且随着物联网(IOT)的不断普及,这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代,但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术,比如人工智能和机器学习,已经将我们推向</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</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/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><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架(Java + Python)" target="_blank">00. 这里整理了最全的爬虫框架(Java + Python)</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解:如何设计出健壮的秒杀系统?" target="_blank">详解:如何设计出健壮的秒杀系统?</a>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</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><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/%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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835406762153439232.htm"
                           title="助力新能源汽车产业发展,2025第五届广州国际新能源汽车产业智能制造技术展览会将于11月在广州召开" target="_blank">助力新能源汽车产业发展,2025第五届广州国际新能源汽车产业智能制造技术展览会将于11月在广州召开</a>
                        <span class="text-muted">ws201907</span>
<a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a>
                        <div>助力新能源汽车产业发展,2025第五届广州国际新能源汽车产业智能制造技术展览会将于11月在广州召开伴随着全球新一轮科技革命和产业变革,汽车与能源、半导体、物联网等领域有关技术加速融合,新能源汽车已成为全球汽车产业转型升级的主要方向。近年来,在相关政策的影响下,新能源汽车市场呈现出快速增长的态势,市场规模不断扩大。截至2020年,中国新能源汽车保有量已超过500万辆,成为全球最大的新能源汽车市场。随</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835398064727224320.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/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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><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/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<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>一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型:结构体、枚举、联合" target="_blank">【C语言】- 自定义类型:结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】:操作符(https://mp.csdn.net/editor/html/115218055)数据类型(https://mp.csdn.net/editor/html/115219664)自定义类型:结构体、枚举、联合(https://mp.csdn.net/editor/html/115373785)变量、常量(https://mp.csdn.net/editor/html/11523</div>
                    </li>
                    <li><a href="/article/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击</div>
                    </li>
                    <li><a href="/article/1835379153730367488.htm"
                           title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a>
                        <span class="text-muted">zoyation</span>
<a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                        <div>通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div>
                    </li>
                    <li><a href="/article/1835377684025274368.htm"
                           title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a>
                        <span class="text-muted">Derek重名了</span>

                        <div>最快方法,当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来,非常快非常容易参考:https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div>
                    </li>
                    <li><a href="/article/1835376759739084800.htm"
                           title="处理标签包裹的字符串,并取出前250字符" target="_blank">处理标签包裹的字符串,并取出前250字符</a>
                        <span class="text-muted">周bro</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>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落,包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div>
                    </li>
                    <li><a href="/article/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</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暂没发现这个问题)非80端口,遇到跳转异常问题。解决的思路是:$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>