总结最近看到的关于块级元素、居中的问题

(一)行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列,都是同一行的,水平方向排列

块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上

行内元素设置width无效,height无效(可以设置line-height)margin上下无效,padding上下无效

 

(二)行内元素转换为块级元素(重要标签 :下面详细)

display:block (字面意思表现形式设为块级)

 

(三)分类

块级元素列

定义地址

定义表格标题

定义列表中定义条目

定义文档中的分区或节

定义列表

定义列表中的项目

定义一个框架集

创建 HTML 表单

定义最大的标题

定义副标题

定义标题

定义标题

定义标题

定义最小的标题


创建一条水平线

元素为 fieldset 元素定义标题

  • 标签定义列表项目

    </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/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/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/1835005024372092928.htm" title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</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/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》自从半月前,通义灵码一运行就会报这个错尝试了以下方法,都无法解决:阿里云官方方法:删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div> </li> <li><a href="/article/1835004897926410240.htm" title="微信小程序生成小程序转发链接,携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接,携带参数跳转到另外一个页面</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><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%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%BE%AE%E4%BF%A1/1.htm">微信</a> <div>作者:coderYYY个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享欢迎和我一起交流!(评论和私信一般会回!!)个人专栏推荐:《前端项目教程以及代码》✨一、前言需求:在页面A生成分享链接(携带参数),分享到微信聊天后,好友点击链接可跳转到页面B,页面B可获取到参数二、具体实现pageA(生成链接页面):通过给button组件设置属性</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平,才能找到工作?" target="_blank">web前端达到什么水平,才能找到工作?</a> <span class="text-muted">cj瑾瑜</span> <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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>一、前端是什么?前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。(核心技术:HTML、CSS、JavaScript)核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义</div> </li> <li><a href="/article/1834624305535741952.htm" title="JavaScript 中 xml 的解析(dom4j 解析器),web前端开发规范手册" target="_blank">JavaScript 中 xml 的解析(dom4j 解析器),web前端开发规范手册</a> <span class="text-muted">2401_84094868</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>创建元素:Elementschool=DocumentHelper.createElement(“school”);创建文本:school.addText(“光明小学”);指定位置添加:list.add(1,school);回写xml:和在末尾添加一样7、获取属性值attributeValue():获取属性值publicstaticvoidmain(String[]args)throwsDocum</div> </li> <li><a href="/article/1834155529212096512.htm" title="【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!" target="_blank">【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!</a> <span class="text-muted">wcyd</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">Web前端技术</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>深入探索HTML5:标签全解析与案例演示!大家好!在上一篇文章中,我们对HTML5有了一个基本的了解。今天,我们将更深入地探索HTML5,全面介绍各种标签及其应用。从基础标签到新增标签,从文档结构到格式标签,我们将一一解析,并提供丰富的案例演示。准备好了吗?让我们开始吧!️HTML5基础结构首先,让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图,指导我们如何构建网页。下面</div> </li> <li><a href="/article/1833895593613815808.htm" title="479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js" target="_blank">479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js</a> <span class="text-muted">仙女网页制作</span> <a class="tag" taget="_blank" href="/search/Web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%AE%9E%E4%BE%8B/1.htm">Web网页设计实例</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%BC%AB/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> <div>目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!说起Web前端</div> </li> <li><a href="/article/1833525688494288896.htm" title="web前端基础——第八章" target="_blank">web前端基础——第八章</a> <span class="text-muted">ZiminLi</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域(Scope)全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一</div> </li> <li><a href="/article/1833472993293070336.htm" title="HTML 文本标签" target="_blank">HTML 文本标签</a> <span class="text-muted">一壶浊酒..</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于:是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光,疑是地上霜。举头望明月,低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价:6元现在:5</div> </li> <li><a href="/article/1833257537026224128.htm" title="利用PHP和Selenium自动化采集数据、实现爬虫抓取" target="_blank">利用PHP和Selenium自动化采集数据、实现爬虫抓取</a> <span class="text-muted">IT大数据小助手</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>随着互联网时代的到来,抓取互联网上的数据成为越来越重要的工作。在web前端开发领域,我们经常需要获取页面中的数据来完成一系列的交互操作,为了提高效率,我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具,主要用于自动化测试Web应用程序,可以模拟真实的用户行为,实现自动交互。使用S</div> </li> <li><a href="/article/1833132711049523200.htm" title="web前端,JavaScript字符串和数组,练习题:邮箱格式是否正确,登录名和密码格式是否正确" target="_blank">web前端,JavaScript字符串和数组,练习题:邮箱格式是否正确,登录名和密码格式是否正确</a> <span class="text-muted">奔向我</span> <div>length属性,返回的是字符串的长度indexOf()方法用于获取字符串中返回指定字符串第一次出现的位置(注意:索引从0开始,找不到返回-1)indexOf()方法是从数组中检查指定数据的位置(从后往前找第一个),不存在返回-1includes()方法,从数组中检查指定的数据是否存在,存在返回true,不存在返回falsepush()方法,向数组的末尾添加一个或更多的元素,并返回新的长度spli</div> </li> <li><a href="/article/1833077712646926336.htm" title="Web前端最全初识Sentry前端监控,浅谈前端消息机制原理" target="_blank">Web前端最全初识Sentry前端监控,浅谈前端消息机制原理</a> <span class="text-muted">2401_84433924</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/sentry/1.htm">sentry</a> <div>Vue编码基础2.1.1.组件规范2.1.2.模板中使用简单的表达式2.1.3指令都使用缩写形式2.1.4标签顺序保持一致2.1.5必须为v-for设置键值key2.1.6v-show与v-if选择2.1.7script标签内部结构顺序2.1.8VueRouter规范Vue项目目录规范2.2.1基础2.2.2使用Vue-cli脚手架2.2.3目录说明2.2.4注释说明2.2.5其他开源分享:【大厂</div> </li> <li><a href="/article/1833006486490542080.htm" title="web前端 ios性能问题" target="_blank">web前端 ios性能问题</a> <span class="text-muted">zhenryx</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.禁止用户拖拽标签-webkit-user-drag:none;2.禁止用户选择标签user-select:none;//-webkit-touch-callout:none;///*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/-moz-user-select:none;/*火</div> </li> <li><a href="/article/1832121609838751744.htm" title="html如何嵌套页面?<iframe>标签告诉你答案" target="_blank">html如何嵌套页面?<iframe>标签告诉你答案</a> <span class="text-muted">PHP9年架构师</span> <div>本篇文章主要为大家介绍了htmliframe标签的介绍,让大家知道怎么通过iframe标签来为网页嵌套页面,内容很简单,大家照着这上面的来,多实践几次就懂了。希望大家都能好好学习,现在让我们来看这篇文章吧。web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)在这里小编首先介绍的是HTML中iframe标签的用法:怎么在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定</div> </li> <li><a href="/article/1831717079955369984.htm" title="Web前端最新2024 用好这 8 个工具,提升前端工程师软技能(3),三面头条+四面阿里+五面腾讯拿offer分享面经总结" target="_blank">Web前端最新2024 用好这 8 个工具,提升前端工程师软技能(3),三面头条+四面阿里+五面腾讯拿offer分享面经总结</a> <span class="text-muted">2401_84433769</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。WINTERISCOMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自</div> </li> <li><a href="/article/1831717080584515584.htm" title="Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1),Web前端面试题初级" target="_blank">Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1),Web前端面试题初级</a> <span class="text-muted">2401_84433769</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>结尾正式学习前端大概3年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】取消盒子的</div> </li> <li><a href="/article/1831551939771461632.htm" title="linux的webkit桌面应用,使用node-webkit构建桌面应用程序" target="_blank">linux的webkit桌面应用,使用node-webkit构建桌面应用程序</a> <span class="text-muted">萌萌爱恋</span> <div>Web前端的现状目前的Web前端的现状较之5-6年前,简直不能同日而语:从所使用的技术、工具、框架到开发一个产品所需要付出的工作量,从前端开发从业人员的数量到Web应用的数量,从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报,一切都有了翻天覆地的变化。借助HTML5+CSS3的普及,加上一些开箱即用的CSS框架(如bootstrap,foundation等)支持,人们已经可以非常</div> </li> <li><a href="/article/1830276699439329280.htm" title="【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~" target="_blank">【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~</a> <span class="text-muted">南北极之间</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%89%B9%E6%95%88%E6%BA%90%E7%A0%81/1.htm">web前端特效源码</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/%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8/1.htm">编程入门</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8%E4%BB%A3%E7%A0%81/1.htm">网页设计编程入门代码</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bilibili在线视频演示地址:【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能!可动态好评+差评+留言功能!效果图:</div> </li> <li><a href="/article/1829526035885027328.htm" title="Web前端" target="_blank">Web前端</a> <span class="text-muted">2301_78085386</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>网页开发学习内容:htmlcssJavaScript两个框架:VUE.jsElementUIUI->userinterface用户界面html(HyperTextMarkupLanguage):超文本标记语言文本:文字字符超文本:网页内容标记:标签标识例如商品上的标签,介绍了商品的信息html语言就是一种标记语言,提供许多的标签,不同的标签功能不同,网页就是通过这些标签描述出来的,最终通过浏览器解</div> </li> <li><a href="/article/1829250106055028736.htm" title="【面试题】JavaScript 中 try" target="_blank">【面试题】JavaScript 中 try</a> <span class="text-muted">2401_84438488</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>地址:前端面试题库web前端面试题库VSjava后端面试题库大全作为一位Web前端工程师,JavaScript中的try...catch是我们常用的特性之一。try...catch可以捕获代码中的异常并防止应用程序崩溃。但是try...catch不仅仅是简单地捕获异常。本文我将分享10个有用的try...catch使用技巧,让你在处理异常时更加得心应手。1.捕获所有异常如果你想捕获代码中所有可能的</div> </li> <li><a href="/article/1828906454971674624.htm" title="新书速览|HTML5+CSS3 Web前端开发与实例教程:微课视频版" target="_blank">新书速览|HTML5+CSS3 Web前端开发与实例教程:微课视频版</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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>《HTML5+CSS3Web前端开发与实例教程:微课视频版》本书内容《HTML5+CSS3Web前端开发与实例教程:微课视频版》秉承“思政引领,立德树人”的教育理念,自然融入多维度、深层次的思政元素,全面对标企业和行业需求;引入现代Web前端开发的核心技术,如Flex布局、Grid布局,以及人工智能编程插件,同时融入企业开发实践,确保学习内容与实际工作紧密相关。全书以一个完整案例为主线,结合综合项</div> </li> <li><a href="/article/1828737254584053760.htm" title="王者荣耀官网首页(xd原文件)" target="_blank">王者荣耀官网首页(xd原文件)</a> <span class="text-muted">无名指的等待712</span> <a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/xd/1.htm">xd</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1web前端开发者链接:https://pan.baidu.com/s/1nl9XmiyWnMs9gPCP1sN-3w提取码:hhss本文件是王者荣耀官网首页的XD源文件,玩游戏不如自己创造一个游戏。本文件可以锻炼一下大家的HTML5和css3的基础功底。</div> </li> <li><a href="/article/1828515021135638528.htm" title="60 个前端 Web 开发流行语你都知道哪些?" target="_blank">60 个前端 Web 开发流行语你都知道哪些?</a> <span class="text-muted">web18224617243</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>??个人网站:【海拥】【摸鱼小游戏】??风趣幽默的前端学习课程:??28个案例趣学前端??想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】??免费且实用的计算机相关知识题库:??进来逛逛给大家安利一个免费且实用的前端刷题(面经大全)网站,??点击跳转到网站。不想在你朋友讨论Web前端开发时感到一头雾水?今天海海给大家带来了60个Web前端开发的术语,看看你知道的有多少。以下列表是按照字母顺序排</div> </li> <li><a href="/article/1827536338954579968.htm" title="html语言三要素是,Web前端开发的三要素是什么?" target="_blank">html语言三要素是,Web前端开发的三要素是什么?</a> <span class="text-muted">KNSTY</span> <a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80%E4%B8%89%E8%A6%81%E7%B4%A0%E6%98%AF/1.htm">html语言三要素是</a> <div>Web前端开发是由网页制作演变而来的,现在很多网站开发会用到web前端开发。Web前端开发主要包括三个要素分别是:HTML、CSS、JavaScript等,但是随着互联网时代的飞速发展,前端开发技术的三要素也演变成现今的HTML5、CSS3、jQuery,首先,第一要素为HTML5.HTML5是超文本标记语言的第五次重大修改,HTML5在HTML的基础上引进了新的功能,可以真正改变用户与文档的交互</div> </li> <li><a href="/article/1826966848713879552.htm" title="WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站" target="_blank">WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站</a> <span class="text-muted">html5网页设计</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/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%BD%9C%E4%B8%9A/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/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/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/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a> <div>精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业:【毕设项目精品实战案例(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码:【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南:【web前端零基础到高级学习视频教程120G干</div> </li> <li><a href="/article/1826892358063583232.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/javascript/1.htm">javascript</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/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a><a class="tag" taget="_blank" href="/search/web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web网页设计</a> <div>HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目购物商城美食7页含jQuery登录注册二、网站描述总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证</div> </li> <li><a href="/article/1826846473006968832.htm" title="应届生web前端面试题_史上最全前端面试题(含答案)" target="_blank">应届生web前端面试题_史上最全前端面试题(含答案)</a> <span class="text-muted">秦天生</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E5%B1%8A%E7%94%9Fweb%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">应届生web前端面试题</a> <div>2015-10-3006:30:03阅读(385)HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.xhtml</div> </li> <li><a href="/article/1826842440653434880.htm" title="搜集来的web前端面试题" target="_blank">搜集来的web前端面试题</a> <span class="text-muted">Mirana_77</span> <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/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a> <div>周五要面试web前端orz搜集下面试题1、什么是盒子模型?在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些?块级元素</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>&nbsp; &nbsp; &nbsp; &nbsp;断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章,这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难,但每一个屏障都会有解决方案,最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;看完整章内容,</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 单元测试 &nbsp; 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>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; RSS是 Really Simple Syndication的缩写(对rss2.0而言,是这三个词的缩写,对rss1.0而言则是RDF Site Summary的缩写,1.0与2.0走的是两个体系)。 &nbsp; 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 &nbsp; @Controller@RequestMapping(value=&quot;${adminPath}/statistick&quot;)public class StatistickController {&nbsp;&nbsp;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>&nbsp; 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>&nbsp; &nbsp;ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName)); &nbsp; &nbsp; &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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 工作中需要用到underscore.js,发现这是一个包括了很多基本功能函数的js库,里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 学</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.介绍 &nbsp; &nbsp; &nbsp; &nbsp; jstatd是一个基于RMI(Remove Method Invocation)的服务程序,它用于监控基于HotSpot的JVM中资源的创建及销毁,并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。 &nbsp; &nbsp; &nbsp; &nbsp; 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注解的定义: &nbsp; /* * 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:&nbsp;&nbsp; 3889836k total,&nbsp;&nbsp;3341868k&nbsp;used,&nbsp;&nbsp; 547968k free,&nbsp;&nbsp; 286044k buffers Swap:&nbsp; 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> &nbsp;&nbsp;&nbsp;&nbsp; 当我们的流程引擎进入IRC阶段的时候,当循环反馈模型出现之后,每次循环都会导致一大堆节点内存数据残留在系统内存中,循环的次数越多,这些残留数据将导致系统内存溢出,并使得引擎崩溃。。。。。。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 而解决办法就是利用汇编语言或者其它系统编程语言,在引擎运行时,把这些残留数据清除掉。</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&lt;VectorItem&gt; 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 &nbsp;/etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/&nbsp;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没关系,主要看系统和业务逻辑了 &nbsp; 方法一:进入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>单一功能原则[ 编辑] &nbsp; &nbsp; SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查 &nbsp; 论 &nbsp; 编 在面向对象编程领域中,单一功能原则(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进行身份验证【只对用户名和密码进行验证,权限依旧存储在本地数据库中】。 &nbsp; 将配置文件中的如下部分删除: &lt;!-- 认证管理器,使用自定义的UserDetailsService,并对密码采用md5加密--&gt; </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 &amp; //启动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>抽象工厂模式: &nbsp;&nbsp;&nbsp; 工厂模式有一个问题就是,类的创建依赖于工厂类,也就是说,如果想要拓展程序,必须对工厂类进行修改,这违背了闭包原则。我们采用抽象工厂模式,创建多个工厂类,这样一旦需要增加新的功能,直接增加新的工厂类就可以了,不需要修改之前的代码。 &nbsp;&nbsp;&nbsp; 总结:这个模式的好处就是,如果想增加一个功能,就需要做一个实现类,</div> </li> <li><a href="/article/3379.htm" title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a> <span class="text-muted">nannan408</span> <div>&nbsp;&nbsp; 首先,先抛出我的观点,各位看官少点砖头。那就是,中国的差异化教育必须做起来。 &nbsp;&nbsp; 孔圣人有云:有教无类。不同类型的人,都应该有对应的教育方法。目前中国的一体化教育,不知道已经扼杀了多少创造性人才。我们出不了爱迪生,出不了爱因斯坦,很大原因,是我们的培养思路错了,我们是第一要“顺从”。如果不顺从,我们的学校,就会用各种方法,罚站,罚写作业,各种罚。军</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 &lt;stdio.h&gt; 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>