| <![CDATA[</span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">为那些不支持框架的浏览器显示文本，于 <span style="font-family:Verdana;">frameset </span><span style="font-family:'宋体';">元素内部</span></span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><noscript></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义在脚本未被执行时的替代内容</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><ol></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义有序列表</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><ul></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义无序列表</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><p></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签定义段落</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><pre></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义预格式化的文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><table></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签定义 <span style="font-family:Verdana;">HTML </span><span style="font-family:'宋体';">表格</span></span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><tbody></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签表格主体（正文）</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><td></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">表格中的标准单元格</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><tfoot></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义表格的页脚（脚注或表注）</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><th></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义表头单元格</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><thead></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签定义表格的表头</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><tr></span></p> </td>
<td width="338" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义表格中的行</span></p> </td>
</tr>
</tbody>
</table>
<p><span style="color:#474747;background:rgb(255,255,255);"> </span></p>
<table>
<tbody>
<tr>
<td valign="top" width="553" colspan="2"> <p><span style="color:#474747;background:rgb(255,255,255);">行内元素列表</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><a></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签可定义锚</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><abbr></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">表示一个缩写形式</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><acronym></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义只取首字母缩写</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><b></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">字体加粗</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><bdo></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">可覆盖默认的文本方向</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><big></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">大号字体加粗</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><br></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">换行</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><cite></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">引用进行定义</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><code></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义计算机代码文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><dfn></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义一个定义项目</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><em></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义为强调的内容</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">< i></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">斜体文本效果</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><img></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">向网页中嵌入一幅图像</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><input></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">输入框</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><kbd></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义键盘文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><label></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签为 <span style="font-family:Verdana;">input </span><span style="font-family:'宋体';">元素定义标注（标记）</span></span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><q></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义短的引用</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><samp></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义样本文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><select></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">创建单选或多选菜单</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><small></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">呈现小号字体效果</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><span></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">组合文档中的行内元素</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><strong></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">语气更强的强调的内容</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><sub></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义下标文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><sup></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义上标文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><textarea></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">多行的文本输入控件</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><tt></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">打字机或者等宽的文本效果</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><var></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义变量</span></p> </td>
</tr>
</tbody>
</table>
<p><span style="color:#474747;background:rgb(255,255,255);"> </span></p>
<table>
<tbody>
<tr>
<td valign="top" width="553" colspan="2"> <p><span style="color:#474747;background:rgb(255,255,255);">可变元素素列表<span style="font-family:Verdana;">--</span><span style="font-family:'宋体';">可变元素为根据上下文语境决定该元素为块元素或者内联元素</span></span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><button></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">按钮</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><del></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">定义文档中已被删除的文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><iframe></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">创建包含另外一个文档的内联框架（即行内框架）</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><ins></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">标签定义已经被插入文档中的文本</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><map></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">客户端图像映射（即热区）</span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><object></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">object<span style="font-family:'宋体';">对象</span></span></p> </td>
</tr>
<tr>
<td style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);"><script></span></p> </td>
<td width="297" colspan="2" style="background:rgb(255,255,255);"> <p style="background:rgb(255,255,255);"><span style="color:#474747;background:rgb(255,255,255);">客户端脚本</span></p> </td>
</tr>
</tbody>
</table>
<p style="background:rgb(255,255,255);"><span style="color:#333333;background:rgb(255,255,255);"> </span></p>
<p>（四）居中问题</p>
<p> （先说水平居中）</p>
<p>1，用display标签，把块元素转换为行级元素，使用text-align居中</p>
<p>2，margin:0 auto; 居中问题（必有宽度）</p>
<p><span style="background:rgb(255,255,255);">margin:0 auto;<span style="font-family:'宋体';">的意思就是：上下边界为</span><span style="font-family:Arial;">0</span><span style="font-family:'宋体';">，左右根据宽度自适应！其实就是</span><span style="font-family:Arial;">~~</span><span style="font-family:'宋体';">水平居中的意思</span></span><span style="background:rgb(255,255,255);">，</span>两个典型的错误引起的不能居中的问题：<br> 1.1、没有设置宽度<br> <div style="margin:0 auto;"></div><br> 看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！<br> 1.<span style="background:rgb(255,255,255);">2<span style="font-family:'宋体';">、没声明</span><span style="font-family:Arial;">DOCTYPE</span></span></p>
<p>DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！<br><br> 你有三种选择，用来声明DOCTYPE<br> * 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：<br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> * 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：<br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br> * 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：<br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br><br> 还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。</p>
<p> </p>
<p>（五）Display详解</p>
<p>display:inline-block与display:-moz-inline-box display:-moz-inline-stack 的区别</p>
<p>很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是<span>块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG</span>，所以很多时候不得不把这个<span>块元素套在一个内联元素里面，然后给内联元素浮动和边距</span>。今天看到这篇文章不错 就COPY 过来 希望大家做个参考：<br><br> display:inline-block<br> 简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下<br><br> 在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：<br> 1、display:-moz-inline-stack<br> “当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”<br> 2、display:-moz-inline-box<br> 使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack<br><br> 在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在<br> IE下实现display:inline-block效果的两种方法：<br><br> 1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：<br><span style="background:rgb(192,192,192);">div {display:inline-block;}</span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);">div {display:inline;}</span><span style="background:rgb(192,192,192);"><br></span><br> 2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：<br><span style="background:rgb(192,192,192);">d</span><span style="background:rgb(192,192,192);">iv {display:inline; zoom:1;}</span><span style="background:rgb(192,192,192);"><br></span><br> 那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：<br><br><span style="background:rgb(192,192,192);">display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/</span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);">display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */</span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);">zoom:1; /*同样是IE 下触发 hasLayout*/</span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);">*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline</span><span style="background:rgb(192,192,192);"><br></span><span style="background:rgb(192,192,192);">效果与 display:inline-block 相似*/</span></p>
<p style="background:rgb(255,255,255);"><span style="color:#333333;background:rgb(255,255,255);"> </span></p>
<p> </p>
<blockquote>
<blockquote>
<p> </p>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1292763051942027264"></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">你可能感兴趣的:(Web前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1892580705813196800.htm"
title="【无标题】" target="_blank">【无标题】</a>
<span class="text-muted">是懒羊羊吖～</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告</div>
</li>
<li><a href="/article/1892510471286747136.htm"
title="【OpenTiny调研征集】共创技术未来，分享您的声音！" target="_blank">【OpenTiny调研征集】共创技术未来，分享您的声音！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.js%E5%BC%80%E6%BA%90/1.htm">前端vue.js开源</a>
<div>欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展，我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求，提升项目的实用性和易用性，我们决定发起一项用户调研活动，诚挚邀请您参与。调研目的了解用户需求：收集您在使用OpenTiny开源项目过程中的需求、问题和建议，以便我们更好地改进和优化。提升用户体验：通过您的反馈，我们将</div>
</li>
<li><a href="/article/1892506293600579584.htm"
title="cesium（vue）一些面试问题（包含Three.js）" target="_blank">cesium（vue）一些面试问题（包含Three.js）</a>
<span class="text-muted">GIS瞧葩菜</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a>
<div>1.在不同的应用场景和技术栈中，模型加载方法和格式有所不同，下面主要从Web前端三维场景（使用Three.js和cesium）使用Three.js加载模型常见模型格式及加载方法GLTF/GLB格式格式特点：GLTF（GraphicsLibraryTransmissionFormat）是一种开放的、基于JSON的三维模型传输格式，GLB是其二进制版本。它们具有文件小、加载快、支持动画、材质和骨骼等优</div>
</li>
<li><a href="/article/1892267275638075392.htm"
title="electron学习笔记" target="_blank">electron学习笔记</a>
<span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div>
</li>
<li><a href="/article/1891780445150965760.htm"
title="HTML CSS整理笔记（建议收藏）" target="_blank">HTML CSS整理笔记（建议收藏）</a>
<span class="text-muted">程序员的生活1</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-</div>
</li>
<li><a href="/article/1891444013068775424.htm"
title="计算机学习建议" target="_blank">计算机学习建议</a>
<span class="text-muted">qincjun</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去</div>
</li>
<li><a href="/article/1891302346894405632.htm"
title="web前端面试问什么，【前端，2024华为前端高级面试题及答案" target="_blank">web前端面试问什么，【前端，2024华为前端高级面试题及答案</a>
<span class="text-muted">uiuuyy67</span>
<a class="tag" taget="_blank" href="/search/2024%E5%B9%B4%E7%A8%8B%E5%BA%8F%E5%91%98%E5%AD%A6%E4%B9%A0/1.htm">2024年程序员学习</a><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><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a>
<div>效果截图：用户名是只读的，所以无法在text文本框里输入值；账号是禁用的，直接变成灰色了。2.input标签常用的type属性值讲解text文本框password密码框radio单选框checkbox复选框file文件选择hidden隐藏域hidden是用户看不见的东西，给管理员（写网页的）操作保存信息的！submit提交reset重置（2）select下拉框option：下拉选项（下拉框的基本标</div>
</li>
<li><a href="/article/1891281664047378432.htm"
title="electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了" target="_blank">electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了</a>
<span class="text-muted">阿毛sky</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文</div>
</li>
<li><a href="/article/1891276997259227136.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能播放声音" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能播放声音</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/web%E6%9C%8D%E5%8A%A1/1.htm">web服务</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.</div>
</li>
<li><a href="/article/1891273089291972608.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能显示图片" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能显示图片</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉</div>
</li>
<li><a href="/article/1890793818513534976.htm"
title="Web前端面试题(持续更新中)" target="_blank">Web前端面试题(持续更新中)</a>
<span class="text-muted">Bearin</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>一、闭包是什么JS中内层函数可以访问外层函数的变量，使内部私有变量不受外界干扰，起到保护和保存的作用，我们把这个特性称作闭包。好处：1.隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。2.让我们可以使用回调，操作其他函数内部；3.变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；坏处：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起</div>
</li>
<li><a href="/article/1890779817410883584.htm"
title="【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)" target="_blank">【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)</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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/HTML%E5%AD%A6%E7%94%9F%E4%B8%AA%E4%BA%BA%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">HTML学生个人网页设计</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%BD%9C%E4%B8%9A/1.htm">网页设计作业</a>
<div>文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、网站题目学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计，采用DIV+C</div>
</li>
<li><a href="/article/1890621943606996992.htm"
title="javascript的成熟分类：“成熟分类”之路" target="_blank">javascript的成熟分类：“成熟分类”之路</a>
<span class="text-muted">lizi88888</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是一门广泛应用于Web前端开发的高级编程语言，具有交互性强、界面效果丰富等优点。其在Web开发中的广泛应用越来越受到业界的关注，从最初的“套壳”式编程到现在的成熟分类，JavaScript已经发生了巨大的变化。ES5ES5标准于2009年发布，是JavaScript发展的一个重要里程碑。这个版本添加了一些新的语言特性，例如：严格模式、Object.create()方法、Func</div>
</li>
<li><a href="/article/1890495203920375808.htm"
title="36.Web前端网页制作 NBA体育主题网页设计实例 大学生期末大作业 html+css+js" target="_blank">36.Web前端网页制作 NBA体育主题网页设计实例 大学生期末大作业 html+css+js</a>
<span class="text-muted">d321654987123</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%93%E8%82%B2/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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><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/jquery/1.htm">jquery</a>
<div>目录一、前言二、网页文件三、网页效果四、代码展示1.HTML2.CSS3.JS五、更多推荐一、前言本实例以“体育”NBA为主题设计，应用html+css+js，包括图片轮翻效果、视频、表单等，12个子页面，代码简洁明了，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q</div>
</li>
<li><a href="/article/1890159659646513152.htm"
title="Web前端三大主流框架：Angular、React与Vue的对比与解析" target="_blank">Web前端三大主流框架：Angular、React与Vue的对比与解析</a>
<span class="text-muted">生活的方式简单点</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>在快速发展的Web前端领域，框架的选择对于项目的成功至关重要。Angular、React和Vue作为三大主流前端框架，各自拥有独特的特点和优势，为开发者提供了强大的工具集和灵活的解决方案。本文将对这三大框架进行详细的对比与解析，帮助读者更好地了解它们的特点和适用场景。一、AngularAngular是Google开发的一款开源JavaScript框架，它提供了一套完整的开发解决方案，包括数据绑定、</div>
</li>
<li><a href="/article/1890114703837949952.htm"
title="Web前端第一次作业" target="_blank">Web前端第一次作业</a>
<span class="text-muted">unfeeling_</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>作业代码：（1）登录页面：登录会员登录页面YQ会员登录账号：密码：（2）注册页面：DocumentYQ会员注册账号：密码：确认密码：昵称：(3)主页页面跳转：index主页登录页面注册页面效果展示：总结：主页点击登录或者注册能直接跳转到新页面，登录页面，输入账号密码，就可以跳转到对应主页，注册页面也是如此，该次作业运用了表格标签修饰页面，用表单标签做出要求，最后运用超链接实现页面跳转</div>
</li>
<li><a href="/article/1890053438876741632.htm"
title="手把手教你给 windows装个vmware虚拟机" target="_blank">手把手教你给 windows装个vmware虚拟机</a>
<span class="text-muted">python算法小白</span>
<div>附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ</div>
</li>
<li><a href="/article/1890051165182291968.htm"
title="Web前端第三次作业" target="_blank">Web前端第三次作业</a>
<span class="text-muted">shayell</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.学校官网（1）相关信息学校官网-相关信息body{font-family:Arial,sans-serif;}.header{background-color:#4CAF50;color:white;padding:10px;text-align:center;}.nav{overflow:hidden;background-color:#333;}.nava{float:left;displ</div>
</li>
<li><a href="/article/1889684126726942720.htm"
title="web前端Vue项目搭建流程" target="_blank">web前端Vue项目搭建流程</a>
<span class="text-muted">sulu_all is well</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>Node.js安装教程一、安装环境node.js下载官网:nodejs官网.二、安装步骤1、双击安装包，一直点击下一步。2、点击change按钮，更换到自己的指定安装位置，点击下一步（不修改默认位置也是可以的）。3、一直点击下一步，最后安装成功即可。三、验证安装在键盘按下【win+R】键，输入cmd，然后回车，打开命令行界面进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功node-v显</div>
</li>
<li><a href="/article/1889621218743611392.htm"
title="AI前端开发：拥抱未来，提升薪资！" target="_blank">AI前端开发：拥抱未来，提升薪资！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在AI时代，数字化转型浪潮席卷全球，前端开发人才的需求量也随之水涨船高。而更进一步，掌握AI写代码工具等AI前端开发技能，则成为提升竞争力，获得高薪的关键。本文将深入探讨AI前端开发如何助力你提升薪资水平，开启职业发展新篇章。AI前端开发的市场价值：高薪的秘密传统的Web前端开发工作，常常面临着重复性工作繁多、开发周期长、人效低下的问题。而AI前端开发的出现，彻底改变了这一现状。熟练掌握AI前端开</div>
</li>
<li><a href="/article/1889213341218435072.htm"
title="【转】前端组件化框架之路" target="_blank">【转】前端组件化框架之路</a>
<span class="text-muted">weixin_33924220</span>
<div>1.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混乱而欣欣向荣的景象。这一方面说明前端领域的创造力很旺盛，另一方面却说明了基础设</div>
</li>
<li><a href="/article/1889200235373195264.htm"
title="2015前端组件化框架之路(转)" target="_blank">2015前端组件化框架之路(转)</a>
<span class="text-muted">aisheng3237</span>
<div>https://github.com/xufei/blog/issues/191.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混</div>
</li>
<li><a href="/article/1888087919932010496.htm"
title="web前端学习7-css动画过渡" target="_blank">web前端学习7-css动画过渡</a>
<span class="text-muted">修罗_</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%96%B0%E6%89%8B%E5%BF%85%E7%9C%8B16%E7%AF%87/1.htm">web前端新手必看16篇</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>学习7-css动画过渡css使用过渡p{/*初始属性*/width:100px;height:100px;background-color:#00FFFF;}p:hover{/*间接过渡法-鼠标经过区域会显示为以下属性*/width:200px;height:200px;background-color:#FF0000;transition-delay:1s;/*1秒后执行过渡*/transiti</div>
</li>
<li><a href="/article/1887801120756133888.htm"
title="web前端必做笔试题-HTML/CSS篇" target="_blank">web前端必做笔试题-HTML/CSS篇</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>HTML/CSS1、什么是盒子模型？请画出盒模型示意图2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？3、如何居中一个div？如何居中一个浮动元素?(多种方式)4、什么是cssHack？5、css选择器有哪些?优先级是怎样的？6、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？7、什么是外边距重叠？重叠的结果是什么？8、Rgba()和opacity的透明效果有什么不同？9、</div>
</li>
<li><a href="/article/1887450787869683712.htm"
title="【axios】尚硅谷Web前端axios入门与源码解析" target="_blank">【axios】尚硅谷Web前端axios入门与源码解析</a>
<span class="text-muted">abigale03</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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>视频地址：【尚硅谷Web前端axios入门与源码解析】https://www.bilibili.com/video/BV1wr4y1K7tq/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155前置知识promise【Promise】阮一峰JavaScript教程-7-异步操作-CSDN博客ajax【千峰前端】day11</div>
</li>
<li><a href="/article/1886804614259470336.htm"
title="【web前端】单向数据绑定和双向数据绑定有什么区别？" target="_blank">【web前端】单向数据绑定和双向数据绑定有什么区别？</a>
<span class="text-muted">myt2000</span>
<a class="tag" taget="_blank" href="/search/arkTS/1.htm">arkTS</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>单向数据绑定和双向数据绑定有什么区别？单向数据绑定和双向数据绑定有什么区别？总结单向数据绑定和双向数据绑定有什么区别？绑定方向：单向数据绑定是只从数据到模板的绑定，即外部数据（如后台数据）的变化会导致页面更新，但页面上的修改不会反馈到数据。而双向数据绑定则是数据模型（Module）和视图（View）之间的双向绑定，即无论用户在视图上的修改还是数据模型中的值发生变化，都会立刻同步到对方的层面。数据更</div>
</li>
<li><a href="/article/1886344952858865664.htm"
title="大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐）" target="_blank">大学生HTML期末大作业——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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/1.htm">大学生</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BE%8E%E9%A3%9F/1.htm">美食</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a>
<div>HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️如何学习进步七、☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单</div>
</li>
<li><a href="/article/1886308001552330752.htm"
title="【自学笔记】Web前端的重点知识点-持续更新" target="_blank">【自学笔记】Web前端的重点知识点-持续更新</a>
<span class="text-muted">Long_poem</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、</div>
</li>
<li><a href="/article/1885780530847346688.htm"
title="html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？" target="_blank">html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？</a>
<span class="text-muted">安检</span>
<a class="tag" taget="_blank" href="/search/html%E8%87%AA%E5%AD%A6%E5%AD%A6%E5%A4%9A%E4%B9%85/1.htm">html自学学多久</a>
<div>HTML和CSS要学多久？相信很多想要学习网页前端开发的小伙伴都会有这个疑问，今天W3Cschool小编就来和大家探讨一下这个问题。作为Web前端开发的基础，HTML和CSS是都是非常基础的语言，但是想要以此为工作的话，只是掌握HTML和CSS还是不够的，JS也需要学习。这样还不够，最好还能花一些时间学习一下近几年非常火的HTML5和CSS3，这样才能算是完全掌握了Web前端相关技术。如果单说HT</div>
</li>
<li><a href="/article/1885528247937069056.htm"
title="Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践" target="_blank">Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践</a>
<span class="text-muted">2401_84447112</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基本使用router.get(“/”,asyncctx=>{ctx.body=“h</div>
</li>
<li><a href="/article/77.htm"
title="算法 单链的创建与删除" target="_blank">算法 单链的创建与删除</a>
<span class="text-muted">换个号韩国红果果</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>
先创建结构体
struct student {
int data;
//int tag;//标记这是第几个
struct student *next;
};
// addone 用于将一个数插入已从小到大排好序的链中
struct student *addone(struct student *h,int x){
if(h==NULL) //??????
</div>
</li>
<li><a href="/article/204.htm"
title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a>
<div> 断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。
看完整章内容，</div>
</li>
<li><a href="/article/331.htm"
title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a>
<span class="text-muted">deng520159</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
<div>今天把zeus事务单元测试放出来,让大家指出他的毛病,
1.ZeusTransactionTest.java 单元测试
package com.dengliang.zeus.webdemo.test;
import java.util.ArrayList;
import java.util.List;
import org.junit.Test;
import </div>
</li>
<li><a href="/article/458.htm"
title="Rss 订阅 开发" target="_blank">Rss 订阅 开发</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a>
<div>
RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。
RSS</div>
</li>
<li><a href="/article/585.htm"
title="分页查询实现" target="_blank">分页查询实现</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a>
<div>在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。
按实现形式分前台分页和服务器分页：
前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。
服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据</div>
</li>
<li><a href="/article/712.htm"
title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a>
<div>spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： </div>
</li>
<li><a href="/article/839.htm"
title="highCharts柱状图" target="_blank">highCharts柱状图</a>
<span class="text-muted">布衣凌宇</span>
<a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a>
<div>第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller
@Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController { private UserServi</div>
</li>
<li><a href="/article/966.htm"
title="我的spring学习笔记2-IoC（反向控制 依赖注入）" target="_blank">我的spring学习笔记2-IoC（反向控制 依赖注入）</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a>
<div>IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe</div>
</li>
<li><a href="/article/1093.htm"
title="TLS java简单实现" target="_blank">TLS java简单实现</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/keystore/1.htm">keystore</a><a class="tag" taget="_blank" href="/search/tls/1.htm">tls</a><a class="tag" taget="_blank" href="/search/secure/1.htm">secure</a>
<div>
1. SSLServer.java
package ssl;
import java.io.FileInputStream;
import java.io.InputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.security.KeyStore;
import </div>
</li>
<li><a href="/article/1220.htm"
title="Zip解压压缩文件" target="_blank">Zip解压压缩文件</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/Zip%E6%A0%BC%E5%BC%8F%E8%A7%A3%E5%8E%8B/1.htm">Zip格式解压</a><a class="tag" taget="_blank" href="/search/Zip%E6%B5%81%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Zip流的使用</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E8%A7%A3%E5%8E%8B/1.htm">文件解压</a>
<div>
ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件;
ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));
&n</div>
</li>
<li><a href="/article/1347.htm"
title="underscore.js 学习（一）" target="_blank">underscore.js 学习（一）</a>
<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/underscore/1.htm">underscore</a>
<div> 工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。 学</div>
</li>
<li><a href="/article/1474.htm"
title="java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)" target="_blank">java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jstatd/1.htm">jstatd</a>
<div>1.介绍
jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。
jstatd是基于RMI的，所以在运行jstatd的服务</div>
</li>
<li><a href="/article/1601.htm"
title="【Spring框架三】Spring常用注解之Transactional" target="_blank">【Spring框架三】Spring常用注解之Transactional</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/transactional/1.htm">transactional</a>
<div>Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：
/*
* Copyright 2002-2010 the original author or authors.
*
* Licensed under the Apache License, Version </div>
</li>
<li><a href="/article/1728.htm"
title="我(程序员)的前进方向" target="_blank">我(程序员)的前进方向</a>
<span class="text-muted">bitray</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....</div>
</li>
<li><a href="/article/1855.htm"
title="nginx lua开发经验总结" target="_blank">nginx lua开发经验总结</a>
<span class="text-muted">ronin47</span>
<div>使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa</div>
</li>
<li><a href="/article/1982.htm"
title="java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶" target="_blank">java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
import java.util.Stack;
public class ReverseStackRecursive {
/**
* Q 66.颠倒栈。
* 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。
* 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。
*1. Pop the top element
*2. Revers</div>
</li>
<li><a href="/article/2109.htm"
title="正确理解Linux内存占用过高的问题" target="_blank">正确理解Linux内存占用过高的问题</a>
<span class="text-muted">cfyme</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上：
Mem: 3889836k total, 3341868k used, 547968k free, 286044k buffers
Swap: 6127608k total,&nb</div>
</li>
<li><a href="/article/2236.htm"
title="[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题" target="_blank">[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a>
<div>
当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。
而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。</div>
</li>
<li><a href="/article/2363.htm"
title="自定义类的equals函数" target="_blank">自定义类的equals函数</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/equals/1.htm">equals</a>
<div>仅作笔记使用
public class VectorQueue {
private final Vector<VectorItem> queue;
private class VectorItem {
private final Object item;
private final int quantity;
public VectorI</div>
</li>
<li><a href="/article/2490.htm"
title="Linux下安装R语言" target="_blank">Linux下安装R语言</a>
<span class="text-muted">datageek</span>
<a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80+linux/1.htm">R语言 linux</a>
<div>命令如下：sudo gedit /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke</div>
</li>
<li><a href="/article/2617.htm"
title="如何修改mysql 并发数(连接数)最大值" target="_blank">如何修改mysql 并发数(连接数)最大值</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了
方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可
方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass</div>
</li>
<li><a href="/article/2744.htm"
title="单一功能原则" target="_blank">单一功能原则</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">面向对象的程序设计</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1/1.htm">软件设计</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%8E%9F%E5%88%99/1.htm">编程原则</a>
<div>单一功能原则[
编辑]
SOLID 原则
单一功能原则
开闭原则
Liskov代换原则
接口隔离原则
依赖反转原则
查
论
编
在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有</div>
</li>
<li><a href="/article/2871.htm"
title="POJO、VO和JavaBean区别和联系" target="_blank">POJO、VO和JavaBean区别和联系</a>
<span class="text-muted">fanmingxing</span>
<a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a>
<div>POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被</div>
</li>
<li><a href="/article/2998.htm"
title="SpringSecurity3.X--LDAP：AD配置" target="_blank">SpringSecurity3.X--LDAP：AD配置</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a>
<div>前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。
将配置文件中的如下部分删除：
<!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
</div>
</li>
<li><a href="/article/3125.htm"
title="mac mysql 修改密码" target="_blank">mac mysql 修改密码</a>
<span class="text-muted">IXHONG</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>$ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-</div>
</li>
<li><a href="/article/3252.htm"
title="设计模式--抽象工厂模式" target="_blank">设计模式--抽象工厂模式</a>
<span class="text-muted">kerryg</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>抽象工厂模式：
工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。
总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，</div>
</li>
<li><a href="/article/3379.htm"
title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a>
<span class="text-muted">nannan408</span>
<div> 首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。
孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军</div>
</li>
<li><a href="/article/3506.htm"
title="scala如何读取和写入文件内容？" target="_blank">scala如何读取和写入文件内容？</a>
<span class="text-muted">qindongliang1922</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>直接看如下代码：
package file
import java.io.RandomAccessFile
import java.nio.charset.Charset
import scala.io.Source
import scala.reflect.io.{File, Path}
/**
* Created by qindongliang on 2015/</div>
</li>
<li><a href="/article/3633.htm"
title="C语言算法之百元买百鸡" target="_blank">C语言算法之百元买百鸡</a>
<span class="text-muted">qiufeihu</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？
代码如下：
#include <stdio.h>
int main()
{
int cock,hen,chick; /*定义变量为基本整型*/
for(coc</div>
</li>
<li><a href="/article/3760.htm"
title="Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode" target="_blank">Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode</a>
<span class="text-muted">wyz2009107220</span>
<a class="tag" taget="_blank" href="/search/NameNode/1.htm">NameNode</a>
<div>正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。
1. Secondary NameNode
原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image
优点：Hadoop较早的版本都自带，</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<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>]]> |
