html+css知识点总结

html部分

html头部声明

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
         标签</span> </div> <blockquote> <div> title就是说这个网页是干什么的,公司名、产品名、功能名等等,全是给浏览器,以方便用户能快速准确得了解到这个网页要介绍的内容。 </div> <div> title的特点: </div> </blockquote> <blockquote> <blockquote> title标签只能在head标签内出现; </blockquote> <blockquote> <div> 标签内的内容通常在浏览器的标题栏中显示; </div> <div> 浏览器中收藏夹内书签的名称是title的内容; </div> <div> title的内容可以方便搜索引擎索引页面; </div> <div> 从搜索引擎搜索到的内容的标题往往是网页title的内容; </div> <div> title通常体现了网页的主题内容,所以记得一定要加上。 </div> </blockquote> <span style="color:#800080;"><meta>标签</span> </blockquote> <blockquote> <blockquote> <meta>元素可提供有关页面的原信息(meta-information),比如针对搜索引擎和更新频率的描述和关键词。位于head标签内,单独出现,必须被正确地关闭<meta name=" " content="" />meta属性主要非为两组: </blockquote> <blockquote> 1)name属性与content属性 </blockquote> <blockquote> name属性的值所描述的内容(值)通过content属性表示,便于爬虫查找、分类。其中最重要的是description、keywords和robots。 </blockquote> <blockquote> 2)http-equiv属性和content属性 </blockquote> </blockquote> <p><span style="color:#ff0000;">HTML标签的规范</span></p> <blockquote> 1、所有标签都必须要有相应的结束标签; </blockquote> <blockquote> 2、标签与标签的属性都必须使用小写; </blockquote> <blockquote> 3、所有标签都必须合理嵌套; </blockquote> <blockquote> 4、<img>标签的alt属性:搜索引擎会比较重视,要充分利用它来放置关键词。它的好处包括: </blockquote> <blockquote> <blockquote> 1)获取或设置在图像不可用或当前正在下载且尚未完成的情况下浏览器显示的替换标题; </blockquote> <blockquote> 2)搜索引擎把alt属性里的内容当了那个图片的关键词,关键词写得好,图片被搜索到的几率也是非常大的。 </blockquote> 5、HTML转义字符。 </blockquote> <p> <span style="color:#ff0000;">HTML常用标签</span></p> <blockquote> <span style="color:#800080;">块属性标签(块元素)</span> </blockquote> <blockquote> <blockquote> <div> <div></div>可以把文档分割为独立的、不同的部分 </div> <div> <h1></h1>…<h6></h6>可定义标题。<h1>定义最大的标题,<h6>定义最小的标题 </div> <div> <ol></ol>定义有序列表,必须嵌套<li> </div> <div> <ul></ul>定义无序列表,必须嵌套<li> </div> <div> <li></li>定义列表项目,是有序列表和无序列表的子标签 </div> <div> <dl></dl>定义自定义列表 </div> <div> <dt></dt>一般用于定义列表标题 </div> <div> <dd></dd>定义自定义列表内容 </div> <div> <table></table>定义表格 </div> </blockquote> </blockquote> <blockquote> <blockquote> <tr></tr>定义表格行 </blockquote> <blockquote> <th></th>定义表头 </blockquote>           <td></td>定义表格单元 <blockquote> <p></p>定义段落 </blockquote> <blockquote> <br/>换行符 </blockquote> <blockquote> <from></from>用于为用户输入创建HTML表单 </blockquote> <span style="color:#800080;">行内属性标签(内联元素)</span> </blockquote> <p>                      <span></span>被用来组合文档中的行内元素</p> <blockquote> <blockquote> <div>  <var></var>定义变量,在浏览器中一般会斜体显示 </div> <div>  <em></em>把文本定义为强调内容,浏览器一般以斜体显示 </div> <div>  <a></a>锚文本,最重要的属性是href,指定连接的目标 </div> <div>  <img/>是单标签,链接图片,有src和alt属性   </div> <div>  <textarea></textarea>定义多行文本输入控件,可通过cols和rows属性来规定textarea的尺寸,y也可以用css的                        </div> </blockquote> </blockquote> <blockquote>              width和height属性来控制。 </blockquote> <blockquote> <blockquote> <div>   <select></select>可创建单选或多选菜单 ,子标签是select </div> <div>   <option></option>定义下拉列表中的一个选项,位于select元素内部    </div> <div>   <input>用于搜集用户信息。根据不同的tpye属性值,输入字段拥有很多种形式。输入字段可以是文本字段text,复选框   checkbox,掩码后的文本控件,单选按钮radio,按钮button,submit提交,重置reset,空白hidden等等 </div> <div>   <strong></strong>把文本定义为更强的强调的内容 </div> </blockquote> </blockquote> <blockquote> <blockquote> <span style="color:#800080;">块属性标签特点:</span>      标签默认撑满整行,总是在新的一行开始; </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> 高度、行高以及顶底边距都可控制; </blockquote> </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> 未设定宽度时,宽度为容器的100%; </blockquote> </blockquote> </blockquote> </blockquote> <blockquote> <span style="color:#800080;">行内属性标签特点</span> </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> 行内属性标签可在一行显示; </blockquote> </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> 宽高即顶底边距不可控制; </blockquote> </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> 内容撑开宽高; </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <div>   </div> <div>   </div> <p> <strong>CSS部分</strong></p> <div> <span style="color:#ff0000;">css引入方式:</span> </div> <blockquote> <div> 1、外部引入:在HTML的head部分<link rel="stylesheet" type="text/css" href="http://blog.163.com/html5_12/所需的CSS文件路径">,引入外部的CSS文件;(优缺点:使用最广泛,一个css文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护。) </div> <div> 2、头部引入:在head部分加入<style type="text/css"></style>标签,CSS代码就写在标签内(style是表明引入文件类型的标签;type是表明文件类型;(优缺点:使用也比较多,加载速度快,一般用于访问量较大的网站或首页,但是整站代码较多,不利于维护) </div> <div> 3、在标签内直接写CSS:直接把css标签写在页面标签里;(优缺点:用得比较少,权重最高,代码多,加载慢,不利于维护) </div> <div> 4、使用@import引入css(优缺点:适合大型网站css架构) </div> </blockquote> <p> <span style="color:#ff0000;">CSS选择器</span></p> <blockquote> <div> <span style="color:#800080;">1、标签名选择器:</span>如:p{},即直接使用HTML标签作为选择器,在实际的应用中,我们习惯用它设置标签的一些默认属性或者和后代选择器一起使用; </div> <div> <span style="color:#800080;">2、类选择器:</span>如  .polaris();前端开发者最常用。 </div> </blockquote> <blockquote> <blockquote> <div> 特点:(1)可以给不同标签设置同一个类,从而用一条CSS命令控制几个标签,减少代码量,使页面修改简单,易维护、易改版。(2)后台工作人员几乎不会用到有关class的相关设置,不需要跟后台人员之间进行交互;(3)可以通过js等动态改变标签的classname,从而改变整个标签的样式,使前端动态效果实现起来更为容易。 </div> <div> 命名规范:第一个字符不能使用数字,在Mozilla或firefox中不起作用。 </div> </blockquote> <span style="color:#800080;">3、ID选择器:</span> 如:#polaris();在同一个HTML文档中不能出现两个相同的ID名称,也就是说ID具有唯一性。 </blockquote> <blockquote> <span style="color:#800080;">4、后代选择器:</span>如 .polaris  span  img{},后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。     </blockquote> <blockquote> <span style="color:#800080;">5、群组选择器:</span>.polaris , span , img{},实际上是对CSS的一种简化写法,是把具有相同CSS样式的不同选择器放在一起,减少代码量。 </blockquote> <blockquote> <span style="color:#800080;">CSS选择器中的属性顺序</span> </blockquote> <blockquote> <blockquote></blockquote> </blockquote> <blockquote> <blockquote> 显示属性:display, list-style, position, float, clear </blockquote> <blockquote> 自身属性:width, height, margin, padding,border,background </blockquote> <blockquote> 文本属性:color, font, text-decoration, text-align,vertical-align, white-space, content  </blockquote> <blockquote>  符合浏览器的渲染顺序,最终达到提高执行效率目的  </blockquote> </blockquote> <p> <span style="color:#ff0000;">CSS优先级</span></p> <blockquote> <div> 所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 </div> <div> (1) CSS不同引入方式的优先级:标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。 </div> <div> (2) CSS选择器的优先级:id > class > tagname. </div> <div> (3) 多个选择器混用时的优先级:例子.a  .b  c{}和.a  c{},它们指向的目标都是c,但是前者的优先级高于后者。 </div> <div>      注:当指向同一目标选择器的优先级相同时,后面的优先级大于前面的优先级;当同一个标签中定义有多个class名时,各个类选择器之间的优先级与html中的class名排列无关,而是与css文件中各个类选择器的排列有关。 </div> </blockquote> <blockquote> <blockquote> <table> <tbody> <tr> <td> <p>选择器</p> </td> <td> <p>特殊性 (a,b,c,d)</p> </td> </tr> <tr> <td> <p>Style= ””</p> </td> <td> <p>1,0,0,0</p> </td> </tr> <tr> <td> <p>#wrapper #content {}</p> </td> <td> <p>0,2,0,0</p> </td> </tr> <tr> <td> <p>#content .datePosted {}</p> </td> <td> <p>0,1,1,0</p> </td> </tr> <tr> <td> <p>div#content {}</p> </td> <td> <p>0,1,0,1</p> </td> </tr> <tr> <td> <p>#content p {}</p> </td> <td> <p>0,1,0,1</p> </td> </tr> <tr> <td> <p>#content {}</p> </td> <td> <p>0,1,0,0</p> </td> </tr> <tr> <td> <p>p.comment .dateposted {}</p> </td> <td> <p>0,0,2,1</p> </td> </tr> <tr> <td> <p>div.comment p {}</p> </td> <td> <p>0,0,1,2</p> </td> </tr> <tr> <td> <p>.comment p {}</p> </td> <td> <p>0,0,1,1</p> </td> </tr> <tr> <td> <p>p.comment {}</p> </td> <td> <p>0,0,1,1</p> </td> </tr> <tr> <td> <p>.comment {}</p> </td> <td> <p>0,0,1,0</p> </td> </tr> <tr> <td> <p>div p {}</p> </td> <td> <p>0,0,0,2</p> </td> </tr> <tr> <td> <p>p {}</p> </td> <td> <p>0,0,0,1</p> </td> </tr> </tbody> </table> </blockquote> </blockquote> <blockquote> <div> 4、利用!important提升优先级:通过在css属性后面标明!important的方法提升该条属性的优先级。被!important注明的css属性具有最高的优先级,是不能被覆盖的。在IE6中!important具有一个BUG,就是同一组CSS属性中,!important是没有作用的。 </div> <div> 例如: .outer{ </div> <div>     color:blue  !important;  color:red; </div> <div> } </div> <div> 在IE6下文字的最终显示效果为红色,!important没有起作用。 </div> <div>   </div> </blockquote> <p> <span style="color:#ff0000;">字体设置</span></p> <blockquote> <div> 语法: </div> <div> <span style="color:#800080;">font-family</span>:宋体,Arail,Tabhoma,sans-serif; </div> <div> <span style="color:#800080;">font-size </span>: px | baifenshu | em;  (em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是16像素,所以1em的默认尺寸是16像素,可以通过公式将像素转换为em:px/16=em) </div> <div> <span style="color:#800080;">font-style</span>: normal  |   italic(斜体)   |   oblique(倾斜),通常情况下italic和oblique文本在web浏览器中看上去完全一样。 </div> <div> <span style="color:#800080;">font-weight</span> : normal  |  bold  |  bolder  |  lighter  | number;(后两种不常用,只做了解) </div> <div> 缩写:font  :  font-style  |  font-variant  |  font-weight  |  font-size  |  font-family  ; 一般情况下我们不采用简写的形式。 </div> <div> <span style="color:#800080;">color</span>: red  |  #fff ; </div> <div> <span style="color:#800080;">text-decoration</span>:none  |  underline  |  overline  |  line-though  |  blink  |  inherit  ; </div> <div> <span style="color:#800080;">line-height</span> : normal  |  length ; </div> <div>   </div> </blockquote> <p> <span style="color:#ff0000;">文本设置</span></p> <blockquote> <div> 语法: </div> <div> <span style="color:#800080;">text-indent</span> :  px  |  em ; </div> <div> <span style="color:#800080;">text-align</span>  :  left  |  right  |  center  |  justify(两端对齐)  ; </div> <div> <span style="color:#800080;">vertical-align</span>  :  top  | bottom  |  middle ; </div> <div> <span style="color:#800080;">word-spacing</span>:px;(改变词之间的距离); </div> <div> <span style="color:#800080;">letter-spacing</span>:px;(改变字母之间的距离); </div> </blockquote> <p> <span style="color:#ff0000;">背景设置</span></p> <blockquote> <div> <span style="color:#800080;">background-color</span>:red  |  #fff; </div> <div> <span style="color:#800080;">background-img</span>:none  |  url( ) ; </div> <div> <span style="color:#800080;">background-repeat</span> : repeat  |  no-repeat  |  repeat-x  |  repeat-y  ; </div> <div> <span style="color:#800080;">background-position</span> : x轴坐标值  y轴坐标值; </div> <div> <span style="color:#800080;">background-attachment</span>:scroll  |  fixed  ; </div> <div> 简写:background:color  url()  position  repeat ; </div> <div>   </div> </blockquote> <p> <span style="color:#ff0000;">盒模型</span></p> <blockquote> <div> 完整的盒模型是由content(内容)、border(边框)、padding(内边距)、margin(外边距)四部分组成。 </div> <div> <span style="color:#800080;">margin属性:</span> </div> <div> 语法: </div> <div> margin-Top | right | bottom | left : px或em ; </div> <div> margin的几种不同写法: </div> </blockquote> <blockquote> <blockquote> (1) .main{margin:10px 20px 10px 20px;} </blockquote> <blockquote> (2) .main{margin:10px 20px ;}这两个值分别设定类名为main的模块的上下、左右的外边距值; </blockquote> <blockquote> (3) .main{margin:10px 20px 10px ;}第一个值设定上外边距,第二个值设定左右外边距,第三个值设定下外边距; </blockquote> <blockquote> (4) .main{margin:10px;}如果就一个值的话,就设定了四个方向的外边距都10px。 </blockquote> <blockquote> (5) .main{20px   auto;}上下两个方位的外边距为20px;左右两个方位的外边距自动适应居中。 </blockquote> </blockquote> <blockquote> <span style="color:#800080;">margin的使用事项及bug:</span> </blockquote> <blockquote> <blockquote> <div> 竖向margin的叠加: </div> 如果两块都有margin,margin横向上是加法,但是竖向上会产生叠加现象。上下间距两者之间取其大者生效。但是这仅针对未浮动的元素,如果是浮动元素,上下键的margin仍然会采取加法而不是取其大者。 </blockquote> <blockquote> <div> IE6下的横向双倍margin bug: </div>     在特定条件下,IE6浏览器中,横向margin值变成双倍。4个特定条件:(1)元素浮动;(2)元素有横向的margin;(3)元素为块状元素;(4)浏览器为IE6。解决这个问题的办法就是为这个元素定义的CSS最后加上display:inline;行内元素在使用了display:block;使行元素变成块元素,也会触发这个bug。 </blockquote> <div> <span style="color:#800080;">padding属性:</span> </div> </blockquote> <blockquote> <div> 语法: </div> <div> padding-top  |  left  |  bottom  |  right:  px |  em  |百分比; </div> <div> padding的几种写法: </div> </blockquote> <blockquote> <blockquote> (1)padding:10px 20px 20px 5px; </blockquote> <blockquote> (2)padding:10px  5px  6px; </blockquote> <blockquote> (3)padding:10px  5px; </blockquote> <blockquote> (4)padding:10px; </blockquote> </blockquote> <blockquote> padding不能用负值,padding-top和padding-bottom不会改变标签的高度。 </blockquote> <p> <span style="color:#ff0000;">border属性:</span></p> <blockquote> <div> 语法: </div> <div> border-top  |  left  |  bottom  |  right ; </div> <div> border-top:border-top-width  |  border-top-style |  border-top-color;  例如:border-top:1px solid red; </div> <div> border-left:border-top-width  |  border-top-style |  border-top-color; </div> <div> border-bottom:border-top-width  |  border-top-style |  border-top-color; </div> <div> border-right:border-top-width  |  border-top-style |  border-top-color; </div> <div> border-style:solid(实线) |  dotted(点化线) |  dashed(虚线) |  none; </div> <div> border-width:px   </div> </blockquote> <blockquote> <blockquote> <div> border-top-width: </div> <div> border-bottom-width: </div> <div> border-left-width: </div> <div> border-right-width: </div> </blockquote> border-color:rgb值或颜色名称; </blockquote> <blockquote> <blockquote> border-top-color: </blockquote> <blockquote> border-right-color: </blockquote> <blockquote> border-bottom-color: </blockquote> <blockquote> border-left-color: </blockquote> </blockquote> <p> <span style="color:#ff0000;">css布局</span></p> <div>     页面布局时主要采用:浮动(float)和定位(position),还有就是不浮动也不定位的正常文档流结构。 <br> <blockquote> <div> <span style="color:#800080;">float属性:</span> </div> <div> 语法:   float:left  |  right  |  none; </div> <div> 任何浮动元素自动被设置为一个“块级元素”,这表示它可以设置宽高; </div> <div> <span style="color:#800080;">float对标签的影响:</span> </div> </blockquote> </div> <blockquote> <blockquote> <div> (1) float对行内属性标签的影响:span、var、em、strong等行内标签默认是不支持宽高设置的,靠内容撑开大小。在float后都能很好的支持width和height属性的设置; </div> <div> (2)float对块属性标签的影响:默认占满行的块属性标签在没有宽高的情况下设置浮动后变成内容撑开宽度,但是同样支持宽高设置。 </div> <div> (3)float能很好的解决浏览器之间解析标签时,enter键(标签换行)造成的显示间隙问题。 </div> <div> (4)具有float属性的对象在父标签中是不占有空间的,浏览器在解析时这个位置就是空的,下面的内容就会移动到浮动过的对象下面。 </div> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> 解决这个兼容性问题的方法有四种: </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <div> 第一  给父标签这是高度; </div> <div> 第二  给父标签页设置高度,但是这种方法只适用于高度固定的情况; </div> <div> 第三  在父标签的关标签前清除浮动; </div> <div> 第四  直接给父标签设置一个“overflow:hidden”,具有清除内部浮动的作用。 </div> </blockquote> </blockquote> </blockquote> <div> <span style="color:#800080;"> 清浮动的方法:</span> </div> </blockquote> <blockquote> <blockquote> 选择清浮动位置时应注意以下:1、清浮动一定要在浮动标签完成浮动布局以后添加,否则会影响到浮动标签布局;2、清除浮动必须与前面的标签属于同级关系。 </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> ①clear属性定义了元素某个方向上不允许出现浮动元素:none(允许两边都可以有浮动对象)/left(…)/right(不允许右边有浮动对象)/both(不允许有浮动对象); </blockquote> </blockquote> <blockquote> <blockquote> ②空标签清除浮动:在HTML页面中加入一个空标签用来清除浮动。 </blockquote> </blockquote> <blockquote> <blockquote> HTML:<div class="clear"> </div> </blockquote> </blockquote> <blockquote> <blockquote> CSS:.clear{clear:both;hegiht:0;overflow:hidden;} </blockquote> </blockquote> <blockquote> <blockquote> clear:both;是清除所有浮动;height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。 </blockquote> </blockquote> <blockquote> <blockquote> 但是空标签清浮动会增加多余的代码。 </blockquote> </blockquote> <blockquote> <blockquote> ③overflow:在需要清除浮动的腹肌标签中加入overflow即可,在IE6中不认识此属性则加入zoom:1;或者height:1%;css样式改为:.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时,IE6/7、遨游则以下拉框形式出现,而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。 </blockquote> </blockquote> <blockquote> <blockquote> overflow:visible属性只能对IE6/7、遨游起作用,对火狐、谷歌、欧鹏、IE8无清浮作用。 </blockquote> </blockquote> <blockquote> <blockquote> overflow:visible(不剪切内容也不添加滚动条)/auto(是body对象和textarea的默认值,在需要时剪切内容并添加滚动条)/hidden(超出部分隐藏)/scroll(总是显示滚动条); </blockquote> </blockquote> <blockquote> <blockquote> ④after清浮动:css样式为:.out{zoom:1;}/*==for IE6/7 Maxthon2==*/ </blockquote> </blockquote> <blockquote> <blockquote>                           .outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/   </blockquote> </blockquote> <blockquote> <blockquote> 其中clear:both;只清除所有浮动;content:"";display:block;对于FF/chrome/opera/IE8不能缺少,content()可以取空值。 </blockquote> </blockquote> <blockquote> <blockquote> ⑤子标签浮动时,给父标签浮动 </blockquote> </blockquote> <blockquote> <blockquote> ⑥下一标签直接清浮动:兄弟标签浮动时,下一标签直接写入清除clear:both;就可以。 </blockquote> </blockquote> <blockquote> <blockquote> ⑦使用position:absolute;清除浮动。 </blockquote> </blockquote> </blockquote> <blockquote> <div> <span style="color:#800080;">clear属性</span> </div> <div> 语法:clear: none | left | right |both ; </div> <div> none:允许两边都可以有浮动对象; </div> <div> both:不允许有浮动对象; </div> <div> left:不允许左边有浮动对象; </div> <div> right :不允许右边有浮动对象; </div> <div>   </div> </blockquote> <div> <blockquote> <div> <span style="color:#800080;">overflow属性</span>:规定了当内容溢出元素框时的样式。 </div> <div> 语法:overflow:visible  |  auto  |  hidden  |  scroll ; </div> <div> visible:不见且内容也不添加滚动条; </div> <div> auto:是body和textarea的默认值,在需要时剪切内容并添加滚动条; </div> <div> hidden:超出部分隐藏; </div> <div> scroll:总是显示滚动条。 </div> <div> 相关属性:overflow-x:visble   |  auto  |  hidden  |  scroll ; </div> <div>                   overflow-x:visble   |  auto  |  hidden  |  scroll ; </div> <div> <span style="color:#800080;">display属性</span>:  display:block  |  none  |  inline  |table ; </div> </blockquote> </div> <blockquote> <blockquote> <div> display:该元素以块属性显示; </div> <div> none:此元素不会被显示; </div> <div> inline:以行内属性显示; </div> <div> table:此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。 </div> </blockquote> <span style="color:#800080;">visibility</span>:属性规定元素是否可见。 </blockquote> <blockquote> <blockquote> 语法:visibility:inherit  |  visible  |  hidden  ; </blockquote> <blockquote> <blockquote> inherit:继承上一个父标签的可见性; </blockquote> </blockquote> <blockquote> <blockquote> visible:对象可见; </blockquote> </blockquote> <blockquote> <blockquote> hidden:对象隐藏; </blockquote> </blockquote> <blockquote> visibility:hidden与display:none </blockquote> <blockquote> visibility:hidden在隐藏的时候元素不可见也会占据页面上的空间; </blockquote> <blockquote> display:none使内容消失且不占据页面空间。 </blockquote> </blockquote> <p> <span style="color:#ff0000;">A标签的4个伪类</span></p> <blockquote> <div> A标签4个伪类的意义及排序 </div> <div> a:link  |  a:visited  |  a:hover  |  a:active  ; </div> <div> a:link   未被访问前的样式表属性,未被访问的链接默认样式是蓝色字体并且带有下划线。 </div> <div> a:visited  链接地址已被访问过的样式表属性,被访问过的字体默认样式是紫色字体并且带有下划线。 </div> <div> a:hover  鼠标悬停时的样式表属性。 </div> <div> a:active  用户激活(在鼠标点击未释放时发生的事件)时的样式表属性。 </div> <div> 除了a标签以外的其他标签也都具备伪类,需要注意的是IE6.0不支持a标签以外的标签伪类,所以用伪类的时候尽可能避免使用a标签以外的标签伪类,以便导致不必要的兼容问题。 </div> </blockquote> <p> <span style="color:#ff0000;">position属性</span></p> <blockquote> <div> position:规定元素的定位类型,所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。 </div> <div> 语法:position:static | relative | absolute | fixed | inherit ; </div> <div> 定位相关的部分属性: z-index:number | auto ; left:length | auto ;right:length | auto ;top:length | auto ;bottom:length | auto ; </div> <div> 在实际使用中往往会在定位后面加:left | top  | bottom | right,来对他们进行精确的定位控制。 </div> <div> static:该值为position的默认值,可以省略不写(static元素会忽略任何top、bottom、left或right声明)。 </div> <div> relative:相对定位,对象不可层叠,依据left、right、top、botttom等属性在正常文档流中偏移位置,其主要作用就是作为绝对定位的父级属性来用,一般不单独使用。 </div> <div> absolute:绝对定位,对象从文档流中拖出,使用left、right、bottom、top等属性进行绝对定位。而其层叠通过z-index属性定义。 </div> <div> fixed:可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过left、top、right、bottom属性来规定。不论窗口是否滚动,元素都会留在那个位置。此标签兼容性不好,可以用absolute来取代,实现同样的效果。 </div> <div> 在position中relative和absolute一般是配合使用的,如果对父标签设置了relative属性的话,那么absolute则会以其父标签左上角作为起始位置进行定位。如果父标签没有定义relative属性,那么子标签absolute则会以body左上角作为起始位置进行定位。 </div> <div> z-index:设置元素的堆叠顺序, 值可以为负。拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面,仅能在定位元素上奏效。并且只能针对同级的标签有效,也就是说子标签的z-index值对父标签是无效的,因为两者的级别不同,z-index是无法比较的。 </div> </blockquote> <p> <span style="color:#800080;">opacity属性:</span>定义元素的不透明度。</p> <blockquote> 语法:filter:alpha(opacity=80);/*IE支持该属性*/ </blockquote> <blockquote> <blockquote> <div> opacity:0.8;/*非IE浏览器*/ </div> <div> opacity是css3.0支持的属性,filter是ie所特有的滤镜,在css样式中都定义出来是为了浏览器兼容,实现八大浏览器完全兼容。 </div> </blockquote> </blockquote> <p> <span style="color:#800080;">常见浏览器兼容问题:</span></p> <blockquote> <div> 1.  li在IE中底部3像素的BUG  </div> <div> 解决方案:在<li>上加float:left;即可解决 </div> <div>   </div> <div> 2.  IE6中奇数宽高的BUG。 </div> <div> 解决方案:就是将外部相对定位的div宽度改成偶数。高度也是一样的。 </div> <div>   </div> <div> 3.  IE6文字溢出BUG    </div> <div> 引发这种BUG有几个条件 </div> <div> 1.是注释引起的,删除所有注释即可. </div> <div> 2.hidden的input直接放在form下. </div> <div> 3.display为none的div也有可能引发此bug. </div> <div> 4.可以通过外面再包一次DIV解决 </div> <div> 由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。 </div> <div> 解决办法: </div> <div> 1、不放置注释。最简单、最快捷的解决方法; </div> <div> 2、注释不要放置于2个浮动的区块之间; </div> <div> 3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>; </div> <div> 4、去除文字区块的固定宽度,与3有相似之处; </div> <div> 5、在后面加一个<br />或者空格;(不推荐) </div> <div> 6、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–> </div> <div> 7、给盒子加position:relative;属性 </div> <div>   </div> <div> 4. 样式中文注释后引发失效。 </div> <div> 满足下面条件就会引起 注释下面的样式不起作用: </div> <div> 1. css有中文注释 </div> <div> 2. css为ANSI编码 </div> <div> 3. html为utf-8编码 </div> <div> 解决方法: </div> <div> 1. 去掉中文注释,用英文注释 </div> <div> 2. 统一css 和 html 的编码 </div> <div> 建议采用第二种解决方法 </div> <div> ps: css为uft-8  html 为ANSI 不会出现失效的情况。 </div> <div>   </div> <div> 5. li在IE中底部空行的BUG。 </div> <div> IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。 </div> <div> 解决方法: </div> <div> 1. 在li a 样式中加入zoom:1; </div> <div> 2. 在li 样式中加入display:inline ; </div> <div> 3. 将<li>标签写成一行; </div> <div> 4. 在li a 样式中加入width:100%或者一个宽度值; </div> <div> 建议采用第4二种解决方法 </div> <div>   </div> <div> 7. 父级使用padding后子元素绝对定位的BUG。 </div> <div> 在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。 </div> <div> 解决方法: </div> <div> 给外层加宽度或zoom:1 </div> <div>   </div> <div> 8. display:none引起的3像素的BUG </div> <div> 解决方案1: </div> <div> 将最后一个div加一个margin-right:-3px。 </div> <div> 如:<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div> </div> <div> 解决方案2: </div> <div> 将display: none的div换一个形式隐藏。 </div> <div> 如:<divstyle="position:absolute; visibility: hidden "></div> </div> <div>   </div> <div> 9. IE6的图片3px问题 </div> <div> IE 6 中 ,DIV 使用背景图片(或直接插入图片在DIV中)的时候,在图片的下端会出现一条空白间隔,经测量,刚好是 3px . </div> <div> 解决: </div> <div> IE6默认字号是12pt,默认行高是normal。 </div> <div> 1. 给DIV加上:font-size: 0px; </div> <div> 2. 设置img为“display:block;”。 </div> <div> 3. 即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。 </div> <div> 4.设置图片的浮动属性,“#sub img {float:left;}”。 </div> <div> 5.取消图片标签和其父对象的最后一个结束标签之间的空格,这种方法适用范围比较窄,只限于父对象中只包含一个图片对象,而且和父对象的结束标签之间不能有任何空隙。 </div> <div>   </div> <div> 10. IE6双倍浮动BUG </div> <div> 解决: </div> <div> 解决办法是加上display:inline; </div> <div>   </div> <div> 11 .IE6的著名3px BUG(断头台bug): </div> <div> 两个层,一个浮动,一个不浮动,把浮动的一个放在不浮动层中,你会发现两个之间有点间隙,宽度为3px。这个问题是最让人头疼的问题了。 </div> <div> 解决方法: </div> <div> 1、所有的层都浮动 把右边那个层也设置成浮动层就可以消除这可恶的3px间隔 </div> <div> 2、给左边的层,应用margin-right:-3px;,同样可解决IE 3px bug。 </div> <div>   </div> <div> 12. Ie6图片导致行距无效 </div> <div> 解决方法:对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身高度)/2px 0) </div> <div>   </div> <div> 13. IE6使用滤镜使PNG图片透明后,容器内链接失效的问题。 </div> <div> 解决方法是为链接定义一个相对定位属性。position:relative </div> </blockquote> <p>存在兼容性问题的css属性设置</p> <blockquote> <p><span style="font-family:'Microsoft Yahei';">1)、body,div,....{margin:0;padding:0;}</span></p> <p><span style="font-family:'Microsoft Yahei';">2)、ul,ol,li{list-style-type:none;}</span></p> <p><span style="font-family:'Microsoft Yahei';">3)、clear{clear:both;height:0;overflow:hidden;}</span></p> <p><span style="font-family:'Microsoft Yahei';">4)、filter:alpha(opacity = 50);滤镜设置透明度</span></p> <p><span style="font-family:'Microsoft Yahei';">5)、a{text-decoration:none;border:none;}  </span></p> <p><span style="font-family:'Microsoft Yahei';">6)、有float,有横向margin时,ie双倍间距,设置display:inline;</span></p> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">hack技术</span></p> <blockquote> <p><span style="font-family:'Microsoft Yahei';">* 针对IE6/7。_针对IE6。 +针对IE7。\9针对IE6/7/8。缺点:hack会让代码可读性大大下降,从而降低可维护性。此外hack本身就不存在可扩展性,只是在解决某些棘手问题时的一个快速解决办法。优秀的css不应存在hack。此外使用hack会无形中增加代码的大小。</span></p> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">input</span></p> <blockquote> <div> <span style="font-family:'Microsoft Yahei';">第一种:type="text"</span> </div> <div> <span style="font-family:'Microsoft Yahei';"><input  type="text" name="aaa"/></span> </div> <div> <span style="font-family:'Microsoft Yahei';">这是input的所有类型中最常用的type。也就是文本输入框,在注册信息,填写登录用户名等场景用到。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第二种:type="password"</span> </div> <div> <span style="font-family:'Microsoft Yahei';">这种类型使用方法与type=”text“一样,与text的不同是在输入文字的时候显示出来的是圆点。在我们输入用户密码的时候就是用的这种类型。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第三种:type=”checkbox“</span> </div> <div> <span style="font-family:'Microsoft Yahei';">checkbox是复选框,在相同name的选项中,可以选择多个,各个浏览器对checkbox的样式属性不能很好地兼容。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第四种:type=”redio“</span> </div> <div> <span style="font-family:'Microsoft Yahei';">radio是单选,各个浏览器支持大同小异。在相同name的radio中,只能选一个。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第五种:type=”button“</span> </div> <div> <span style="font-family:'Microsoft Yahei';">button:按钮,现在大部分已经使用a标签通过css控制样式来做更漂亮的按钮。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第六种:type=”submit“和type=”reset“</span> </div> <div> <span style="font-family:'Microsoft Yahei';">submit是用来提交form表单的,reset是用来重置表单的,现在很多时候我们都是用Ajax提交,所以它的用武之地也越来越少。和button一样是按钮的样子,值得注意的是:submit再不设置value的时候,各个浏览器会有一个默认的value值,为了容易效果,只要设置一个value就可以。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">第七种:type=”hidden“</span> </div> <div> <span style="font-family:'Microsoft Yahei';">是一个隐藏的input,使用的情况较少,通常在比较复杂的js例用来暂存数据。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">input所有的类型都支持disabled属性,即不可修改。</span> </div> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">表格的设置</span></p> <blockquote> <div> <span style="font-family:'Microsoft Yahei';">border-collapse:separate  | collapse | inherit ;</span> </div> <div> <span style="font-family:'Microsoft Yahei';">separate:默认值,边框会被分开,不会忽略border-spacing和empty-cells属性;</span> </div> <div> <span style="font-family:'Microsoft Yahei';">collapse:边框会合并为一个单一的边框;</span> </div> <div> <span style="font-family:'Microsoft Yahei';">inherit:规定应该从父元素继承border-collapse属性的值。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">border-spacing:length  length  | inherit ;控制表格边框之间的距离。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">如果定义一个length参数,那么定义的是水平和垂直间距;如果定义两个length参数,那么第一个设置水平间距,第二个设置垂直间距。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">inherit:规定应该从父元素继承border-spacing属性。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">border-collapse:可以消除边框间隙,同时合并内外边框。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">border-spacing:可以消除边框间隙,不能合并内外边框。</span> </div> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">rowspan | colspan</span></p> <blockquote> <div> <span style="font-family:'Microsoft Yahei';">rowspan作用:设置或返回单元格横跨的行数。这一属性可以纵向合并表格单元。</span> </div> <div> <span style="font-family:'Microsoft Yahei';">colspan作用:规定单元格可横跨的列数。可以横向合并单元格。</span> </div> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">table的使用要点</span></p> <blockquote> <div> <span style="font-family:'Microsoft Yahei';">list-style-type:value;</span> </div> <div> <span style="font-family:'Microsoft Yahei';">value:none无标记;</span> </div> </blockquote> <blockquote> <blockquote> <span style="color:#808080;font-family:'Microsoft Yahei';">  disc默认,标记是实心圆;</span> </blockquote> <span style="color:#808080;">             square实心方块;</span> </blockquote> <blockquote> <blockquote> <span style="color:#808080;">  decimal数字;</span> </blockquote> <blockquote> <span style="color:#808080;">  decimal-leading-zero 0开头的数字标记(如01、02等);</span> </blockquote> <blockquote> <span style="color:#808080;">  low-latin小写拉丁字母(如: a、b等)</span> </blockquote> list-style-image:url(图片路径); </blockquote> <blockquote> <blockquote>   使用一幅图像来替换列表项的标记。 </blockquote> list-style-position:value;放置在列表中的列表项标记。 </blockquote> <blockquote> <blockquote> <span style="font-family:'Microsoft Yahei';">  value:inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。</span> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <span style="font-family:'Microsoft Yahei';">     outside默认,保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。</span> </blockquote> <span style="font-family:'Microsoft Yahei';"><br></span> </blockquote> <span style="font-family:'Microsoft Yahei';">list-style:list-style-type | list-style-image | list-style-position;用于在一个声明中设置一个列表的所有属性的简写属性。</span> </blockquote> <p> <span style="color:#800080;font-family:'Microsoft Yahei';">列表(ol/ul)使用要点</span></p> <blockquote> <div> <span style="font-family:'Microsoft Yahei';">在ie6和ie7中,如果li内部存在设置float属性的标签并且li设置了宽或者高的情况下会出现这种情况:除了第一个li之外,其他li下面都有级像素的间距,为了兼容性考虑,我们要避免这种情况的发生,办法就是让这些条件中有一个不满足即可;</span> </div> <div> <span style="font-family:'Microsoft Yahei';">另外还可以对li设置float,不过对于li设置float之后,如果ol或者ul没有设置高度,则会出现margin-bottom不一致现象,解决方法就是对ul、ol设置高度,或者不用margin-bottom,或者利用hack技术解决,但是不建议。</span> </div> </blockquote> <blockquote> http://blog.163.com/html5_12/blog/static/21278902620121025868126/ </blockquote> </div> <p>转载于:https://www.cnblogs.com/coolid/p/3975013.html</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1305999348697436160"></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">你可能感兴趣的:(前端,xhtml,人工智能)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1947407865555775488.htm" title="SpringBoot单元测试全攻略:MockMVC+Testcontainers+覆盖率分析" target="_blank">SpringBoot单元测试全攻略:MockMVC+Testcontainers+覆盖率分析</a> <span class="text-muted">fanxbl957</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>博主介绍:Java、Python、js全栈开发“多面手”,精通多种编程语言和技术,痴迷于人工智能领域。秉持着对技术的热爱与执着,持续探索创新,愿在此分享交流和学习,与大家共进步。DeepSeek-行业融合之万象视界(附实战案例详解100+)全栈开发环境搭建运行攻略:多语言一站式指南(环境搭建+运行+调试+发布+保姆级详解)感兴趣的可以先收藏起来,希望帮助更多的人SpringBoot单元测试全攻略:</div> </li> <li><a href="/article/1947405094739832832.htm" title="AI作画:AI人工智能激发艺术创作灵感" target="_blank">AI作画:AI人工智能激发艺术创作灵感</a> <span class="text-muted">AGI大模型与大数据研究院</span> <a class="tag" taget="_blank" href="/search/AI%E4%BD%9C%E7%94%BB/1.htm">AI作画</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>AI作画:AI人工智能激发艺术创作灵感关键词:AI作画、生成艺术、深度学习、神经网络、艺术创作、人工智能、创意工具摘要:本文深入探讨AI作画技术如何激发艺术创作灵感。我们将从基础概念出发,解释AI如何"学习"艺术风格并生成新作品,分析核心技术原理,提供实际应用案例,并展望这一领域的未来发展趋势。通过通俗易懂的讲解和实际代码示例,帮助读者理解这项融合科技与艺术的创新技术。背景介绍目的和范围本文旨在向</div> </li> <li><a href="/article/1947384798041403392.htm" title="python pywebview + vue3 做桌面端" target="_blank">python pywebview + vue3 做桌面端</a> <span class="text-muted">妃衣</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>pythonpywebview+vue3做桌面端Api.py#传给前端的api对象,定义了一个可以通过js调用退出当前应用的函数classApi:def__init__(self)->None:self._window=None#java运行的线程self.process=Nonedefset_process(self,_process):self.process=_processdefset_w</div> </li> <li><a href="/article/1947377238957682688.htm" title="ReactJS与Node.js:前后端整合之道" target="_blank">ReactJS与Node.js:前后端整合之道</a> <span class="text-muted"></span> <div>背景简介在当前的Web开发领域中,ReactJS作为前端框架的佼佼者,其组件化和声明式的编程方式广受开发者喜爱。而Node.js作为后端技术的热门选择,也因其实时、非阻塞I/O的特性而大放异彩。当ReactJS与Node.js结合时,我们可以构建出全栈的应用程序,实现从前端到后端的无缝对接。本文将从ReactJS与FacebookAPI的集成讲起,逐步过渡到使用Node.js来构建React应用的</div> </li> <li><a href="/article/1947376607916257280.htm" title="从文本到语音:使用 ElevenLabs 和 FFmpeg 实现语音合成与播放" target="_blank">从文本到语音:使用 ElevenLabs 和 FFmpeg 实现语音合成与播放</a> <span class="text-muted">曦紫沐</span> <a class="tag" taget="_blank" href="/search/%E8%AF%AD%E9%9F%B3%E6%A8%A1%E5%9E%8B/1.htm">语音模型</a><a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a><a class="tag" taget="_blank" href="/search/ElevenLabs/1.htm">ElevenLabs</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E9%9F%B3%E5%90%88%E6%88%90/1.htm">语音合成</a> <div>摘要在当今的人工智能时代,语音合成技术正变得越来越普及。ElevenLabs是一个强大的语音合成平台,能够生成高质量的语音音频。本文将详细介绍如何结合Python、ElevenLabsAPI和FFmpeg工具集,实现从文本到语音的转换,并通过ffplay播放生成的音频文件。同时,我们将解决常见的问题,如ffplay未找到或音频无法播放等。1.引言随着人工智能技术的发展,语音合成(Text-to-S</div> </li> <li><a href="/article/1947375977206181888.htm" title="[架构之美]手动搭建Vue3 前端项目框架" target="_blank">[架构之美]手动搭建Vue3 前端项目框架</a> <span class="text-muted">曼岛_</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF%E4%B9%8B%E8%B7%AF/1.htm">成长之路</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>[架构之美]手动搭建Vue3前端项目框架我们将手动创建一个完整的Vue前端项目,包含基础结构、路由、状态管理和UI组件。下面是实现方案:一.项目结构设计1.1项目架构设计my-vue-project/├──public/│├──index.html│└──favicon.ico├──src/│├──assets/││└──logo.png││├──main.css│├──components/││</div> </li> <li><a href="/article/1947375320717914112.htm" title="DK遇见未来:机器人" target="_blank">DK遇见未来:机器人</a> <span class="text-muted">祖爸</span> <div>人工智能、AI、机械设计、BigData……这些听起来就很高端的专业究竟是什么?这些前沿学科相遇又会碰撞出什么?机器人,将这些前沿领域结合在一起越来越多的融入到我们的工作与生活中可问题来了机器人究竟是什么呢?又该如何给孩子讲机器人呢?这本《DK遇见未来:机器人》完美解决您的烦恼最新数据、系统知识、精美插图可以说这是一本儿童机器人大百科让孩子在这里遇见未来在讲读版视频中与您共同思考未来社会中机器人与</div> </li> <li><a href="/article/1947374840763707392.htm" title="ORACLE 11g 使用ROWNUM完美解决ORA-00600 内部错误代码" target="_blank">ORACLE 11g 使用ROWNUM完美解决ORA-00600 内部错误代码</a> <span class="text-muted">有点智慧</span> <div>分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!1,ORA-00600:内部错误代码Oracle从11.2.0.1升级到11.2.0.4,开发人员报告说一个job运行失败,调试有报错信息,ORA-00600:内部错误代码,参数:[rwoirw:checkret</div> </li> <li><a href="/article/1947374841183137792.htm" title="Kimi-Audio:最佳音LLM, 如何免费使用 Kimi-Audio AI 模型?" target="_blank">Kimi-Audio:最佳音LLM, 如何免费使用 Kimi-Audio AI 模型?</a> <span class="text-muted">知识大胖</span> <a class="tag" taget="_blank" href="/search/NVIDIA/1.htm">NVIDIA</a><a class="tag" taget="_blank" href="/search/GPU%E5%92%8C%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B%E5%BC%80%E5%8F%91%E6%95%99%E7%A8%8B/1.htm">GPU和大语言模型开发教程</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/kimi/1.htm">kimi</a> <div>简介继DeepSeek之后,字节跳动(现名MoonShotAI,又名Kimi)也在生成式人工智能领域加速发展,并发布了自己的音频模型Kimi-Audio,据说是迄今为止最好的音频模型。推荐文章《NvidiaGPU入门教程之02ubuntu安装A100显卡驱动(含8步快速浓缩教程)》权重2,安装A100显卡驱动《本地大模型知识库OpenWebUI系列之如何解决知识库上传文件故障Extractedco</div> </li> <li><a href="/article/1947373274044362752.htm" title="Python就业薪资好不好,学Python工作机会多吗?" target="_blank">Python就业薪资好不好,学Python工作机会多吗?</a> <span class="text-muted">Python小辰</span> <div>Python就业薪资好不好?学Python工作机会多吗?人工智能时代的来临让Python崭露头角,各大企业纷纷加大对相关人才的招聘力度吸引了很多人入行学习Python。近年来Python开发发展迅猛,吸引了很多科技公司入驻,且看小编的分析。Python薪资好不好?数据是最有力的答案。职友集统计数据显示,全国Python工程师的平均月资达19160,其中20-30K的工程师数量超过了四成。来自智联招</div> </li> <li><a href="/article/1947372821663510528.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/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>目录HTML简介HTML基本框架JavaScript内嵌JavaScript外引JavaScriptCSS内部样式外部样式HTML简介HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是</div> </li> <li><a href="/article/1947366264842285056.htm" title="TypeScript 完全指南:实战与前沿技术深度解析" target="_blank">TypeScript 完全指南:实战与前沿技术深度解析</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/typescript/1.htm">typescript</a><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> <div>一、企业级项目架构1.微前端架构的类型治理随着微前端架构在大型项目中普及,多团队协作开发的类型统一成为难题。想象一个电商平台,购物车、商品详情等模块由不同团队开发,若类型不一致,数据交互时极易出错。通过共享d.ts声明文件,定义全局类型,如User接口、Product类型,各子应用引用统一的类型定义,确保数据格式一致。此外,借助模块联邦技术,在子应用间安全传递类型化数据,例如://主应用定义全局类</div> </li> <li><a href="/article/1947351767473778688.htm" title="AI驱动的电路仿真革命:从物理模型到智能学习的范式转移" target="_blank">AI驱动的电路仿真革命:从物理模型到智能学习的范式转移</a> <span class="text-muted"></span> <div>AI驱动的电路仿真革命:从物理模型到智能学习的范式转移人工智能正颠覆传统电路仿真方法,本文将深入解析AI在电路建模、优化与故障诊断中的前沿应用,揭示智能仿真如何提升10倍效率并突破物理限制。一、AI电路仿真的数学基础1.1图神经网络建模电路拓扑电路可抽象为图结构G=(V,E)G=(V,E)G=(V,E):VVV:节点(电子元件)EEE:边(连接关系)图卷积网络(GCN)更新公式:H(l+1)=σ(</div> </li> <li><a href="/article/1947351514829877248.htm" title="MCP协议技术解析:AI时代的通信基础设施革命" target="_blank">MCP协议技术解析:AI时代的通信基础设施革命</a> <span class="text-muted"></span> <div>MCP协议技术解析:AI时代的通信基础设施革命在AI从工具演变为协作伙伴的进程中,MCP协议正在成为连接智能体与现实世界的“数字神经系统”。当前人工智能技术正经历从孤立模型向生态系统协作的关键转型,而通信协议作为AI能力的“连接器”,其设计直接决定了智能系统的边界与效率。MCP协议(ModelContextProtocol)作为新一代AI通信基础设施,正在开发者社区引发一场静默革命。本文将从技术原</div> </li> <li><a href="/article/1947339673194000384.htm" title="GENERALIST REWARD MODELS: FOUND INSIDE LARGELANGUAGE MODELS" target="_blank">GENERALIST REWARD MODELS: FOUND INSIDE LARGELANGUAGE MODELS</a> <span class="text-muted">樱花的浪漫</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%B8%8E%E6%99%BA%E8%83%BD%E4%BD%93/1.htm">大模型与智能体</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E6%8A%97%E7%94%9F%E6%88%90%E7%BD%91%E7%BB%9C%E4%B8%8E%E5%8A%A8%E4%BD%9C%E8%AF%86%E5%88%AB/1.htm">对抗生成网络与动作识别</a><a class="tag" taget="_blank" href="/search/%E5%BC%BA%E5%8C%96%E5%AD%A6%E4%B9%A0/1.htm">强化学习</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a> <div>GeneralistRewardModels:FoundInsideLargeLanguageModelshttps://arxiv.org/pdf/2506.232351.概述将大型语言模型(LLMs)与复杂的人类价值观(如乐于助人和诚实)对齐,仍然是人工智能发展中的一个核心挑战。这项任务的主要范式是来自人类反馈的强化学习(RLHF)[Christianoetal.,2017;Baietal.,</div> </li> <li><a href="/article/1947334505060691968.htm" title="初探机器学习与力学研究的交叉领域" target="_blank">初探机器学习与力学研究的交叉领域</a> <span class="text-muted">faderbic</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>目录关于如何踏入机器学习领域机器学习与力学研究的交叉方向1.使用机器学习加速有限元求解2.结合有限元计算和机器学习预测复杂材料结构与力学性能的关系3.结构健康检测4.疲劳寿命预测总结关于如何踏入机器学习领域因为我本科的专业是力学,所以当我开始关注机器学习领域时,首先考虑的是机器学习和力学的交叉领域。对于很多对人工智能感兴趣的朋友,想加入人工智能的潮流却不知道从何学起,我提供一个思路,我认为将自己学</div> </li> <li><a href="/article/1947328704577335296.htm" title="[NIPST AI]对抗性机器学习攻击和缓解的分类和术语" target="_blank">[NIPST AI]对抗性机器学习攻击和缓解的分类和术语</a> <span class="text-muted">Anooyman</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">大语言模型</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>原文link:https://nvlpubs.nist.gov/nistpubs/ai/NIST.AI.100-2e2025.pdfIntroduction人工智能(AI)系统在过去几年中持续全球扩展。这些系统正在被众多国家开发并广泛部署于各自的经济体系中,人们在生活的许多领域都获得了更多使用AI系统的机会。本报告区分了两大类AI系统:预测型AI(PredictiveAI,PredAI)和生成型A</div> </li> <li><a href="/article/1947313951305953280.htm" title="B/S架构系统角色与对应协议详解" target="_blank">B/S架构系统角色与对应协议详解</a> <span class="text-muted">步行cgn</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>B/S架构系统角色与对应协议详解一、核心角色及协议映射系统角色主要职责关键协议协议作用说明浏览器用户交互界面HTTP/HTTPS应用层通信基础(Browser)发送请求/渲染响应WebSocket全双工实时通信执行前端逻辑WebRTC点对点音视频传输DNS域名解析--------------------------------------------------------------------</div> </li> <li><a href="/article/1947309024844247040.htm" title="骗子太猖獗了,打着摩根士丹利何晓斌名义带股民进入虚假宝丰能源节能减排碳交易市场,大量股民被骗真相曝光" target="_blank">骗子太猖獗了,打着摩根士丹利何晓斌名义带股民进入虚假宝丰能源节能减排碳交易市场,大量股民被骗真相曝光</a> <span class="text-muted">墨守成法</span> <div>为什么明明跟老师对过视频,确认是本人,怎么还会被骗了?你有没有想过一个名人大咖怎么会有时间给你们一对一视频,其次我来给大家揭露一下,这个套路AI换脸骗局是一种利用人工智能技术,通过替换视频中的人脸来伪造身份或进行诈骗的行为。你的账户“余额”是真的吗?为什么不能提现呢?其实都是骗子给你的一串数字而已!这些新平台打着“低风险”、“高收益”、“慈善公益投票”等噱头先让投资人尝到甜头再通过恶意操作将投资人</div> </li> <li><a href="/article/1947299837074534400.htm" title="springboot+vue生态系统的气象数据可视化平台Java+python-计算机毕业设计" target="_blank">springboot+vue生态系统的气象数据可视化平台Java+python-计算机毕业设计</a> <span class="text-muted"></span> <div>目录功能和技术介绍具体实现截图开发核心技术:开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问,采用springboot集成快速开发框架,前端使用vue方式,基于es5的语法,开发工具IntelliJIDEAx64,因为该开发工具,内嵌了Tomcat服务运行机制,可不用单独下载Tomcatserver服务器。由于考虑到</div> </li> <li><a href="/article/1947298598446231552.htm" title="2019-05-16" target="_blank">2019-05-16</a> <span class="text-muted">海牙kyogre</span> <div>前端优化动画性能之requestAnimationFrame@(技术分享)在前端做动画很多人第一人的反应是用定时器,比如setInterval、setTimeout,除此之外css3可以使用transition和animation来实现。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔还要足够长,这样才能确保浏览器有</div> </li> <li><a href="/article/1947295428160581632.htm" title="如何使用爬虫简单的爬取一个网页的静态前端代码" target="_blank">如何使用爬虫简单的爬取一个网页的静态前端代码</a> <span class="text-muted"></span> <div>什么是爬虫?Python爬虫是一种使用Python语言编写的程序,用于自动访问网页并提取所需信息。它通常用于网络数据抓取、数据挖掘和信息收集。Python爬虫可以模拟浏览器行为,向服务器发送请求并接收响应数据,然后解析这些数据以获取有用的信息。爬虫的基本原理(流程)发送请求:爬虫向目标网站的服务器发送HTTP请求(通常是GET请求)。获取响应:服务器返回网页的HTML内容。解析内容:爬虫解析HTM</div> </li> <li><a href="/article/1947294797018492928.htm" title="[Python] -项目实战8- 构建一个简单的 Todo List Web 应用(Flask)" target="_blank">[Python] -项目实战8- 构建一个简单的 Todo List Web 应用(Flask)</a> <span class="text-muted">踏雪无痕老爷子</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、为什么选Flask?轻量上手快:仅需几行代码就能跑一个可用的Web应用。灵活扩展:可接入数据库、身份认证、前端框架等。教育性强:涵盖前后端交互基础,适合入门全栈开发。二、项目结构建议flask_todo/├──app.py├──templates/│└──index.html├──static/│└──style.css├──todo.db└──requirements.txtapp.py:后</div> </li> <li><a href="/article/1947294797924462592.htm" title="B/S 架构通信原理详解" target="_blank">B/S 架构通信原理详解</a> <span class="text-muted">步行cgn</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>B/S架构通信原理详解一、核心架构Browser/Server(浏览器/服务器)模型:前端:浏览器作为统一客户端(Chrome/Firefox/Edge等)后端:服务器处理业务逻辑+数据存储(Nginx/Apache/Tomcat等)通信协议:基于HTTP/HTTPS的请求-响应模型二、完整通信流程sequenceDiagramparticipant用户participant浏览器particip</div> </li> <li><a href="/article/1947274630708391936.htm" title="推客系统小程序开发实战:2025年技术架构与实现细节" target="_blank">推客系统小程序开发实战:2025年技术架构与实现细节</a> <span class="text-muted">wx_qutudy</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/1.htm">推客小程序开发</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F/1.htm">推客系统</a> <div>引言在电商生态竞争日益激烈的2025年,推客系统作为私域流量运营的核心工具,其技术实现效率与合规性已成为企业增长的关键指标。本文基于实际开发经验,深度解析推客系统小程序的技术选型、架构设计与核心功能实现,旨在为开发者提供可复用的技术方案。一、技术选型:多端统一开发框架的深度实践1.1前端框架选型对比在2025年主流框架对比中,Taro3.6.31展现出显著优势:跨平台能力:支持微信/支付宝/百度小</div> </li> <li><a href="/article/1947270347761971200.htm" title="智慧水库信息化系统建设产品需求文档V2.0" target="_blank">智慧水库信息化系统建设产品需求文档V2.0</a> <span class="text-muted">小赖同学啊</span> <a class="tag" taget="_blank" href="/search/test/1.htm">test</a><a class="tag" taget="_blank" href="/search/Technology/1.htm">Technology</a><a class="tag" taget="_blank" href="/search/Precious/1.htm">Precious</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a> <div>智慧水库信息化系统建设产品需求文档1.引言1.1文档目的本文档旨在明确智慧水库信息化系统的建设需求,为系统设计、开发和实施提供全面依据,确保系统功能满足水库管理业务需求,提升水库管理的智能化水平和决策效率。1.2背景介绍传统水库管理面临数据采集不及时、分析手段有限、决策依赖经验等问题,难以应对复杂多变的水文情势和日益增长的管理需求。随着物联网、大数据、人工智能等技术的发展,智慧水库建设成为必然趋势</div> </li> <li><a href="/article/1947266815931510784.htm" title="IM即时通讯源码/im源码基于uniapp框架从0开始设计搭建在线聊天系统" target="_blank">IM即时通讯源码/im源码基于uniapp框架从0开始设计搭建在线聊天系统</a> <span class="text-muted">宠友信息</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>文章目录前言一、确定技术栈二、数据库设计:1.引入库2.使用SpringBoot创建后端项目3.实现WebSocket通信:3.1创建WebSocket配置类:3.2创建ChatWebSocketHandler类:3.3前端WebSocket连接与通信:总结前言随着人社交产品的不断发展,即时通讯聊天这门技术也越来越重要,很多人都开启了学习通讯技术,本文就介绍了即时通讯的基础内容。一、确定技术栈在开</div> </li> <li><a href="/article/1947266689762652160.htm" title="用项目说话:我的React博客构建成果与经验复盘" target="_blank">用项目说话:我的React博客构建成果与经验复盘</a> <span class="text-muted">Pan Zonghui</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E7%AB%AF/1.htm">移动端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/1.htm">项目总结</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>这是一个基于React19+TypeScript+Vite构建的现代化博客系统,采用了最新的前端技术栈和工程化实践。项目不仅实现了完整的博客功能,更在架构设计、性能优化、开发体验等方面体现了企业级应用的标准。成品展示个人博客链接地址:https://pzhdv.cnpc端页面展示首页分类页面关于我文章详情页面移动端技术栈选择与分层设计技术栈选择核心框架与工具React19.1.0:最新版本的Rea</div> </li> <li><a href="/article/1947262022399881216.htm" title="黄仁勋链博会演讲实录:脱掉皮衣,穿上唐装,中文开场" target="_blank">黄仁勋链博会演讲实录:脱掉皮衣,穿上唐装,中文开场</a> <span class="text-muted"></span> <div>黄仁勋一度尝试用中文开场,他说,“我在美国长大,学到了很多汉语。”他表示,像DeepSeek、阿里巴巴、MiniMax、百度,他们开发的产品都是世界级的,推动了全球人工智能的发展。中国的开源AI是全球进步的催化剂,以至于全世界各个行业都有机会加入到AI革命当中。7月16日,黄仁勋身着唐装出席了第三届链博会,在此之前,他身着标志性皮衣出席多个场合活动。在此之前,英伟达官宣获得H20芯片对华的出口许可</div> </li> <li><a href="/article/1947258114214522880.htm" title="从零开发推客小程序系统:完整技术方案与实战经验" target="_blank">从零开发推客小程序系统:完整技术方案与实战经验</a> <span class="text-muted">wx_ywyy6798</span> <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/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/1.htm">推客小程序开发</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/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/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">推客小程序</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F/1.htm">推客系统</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%88%86%E9%94%80%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">推客分销系统开发</a> <div>一、推客小程序的市场价值社交电商爆发式增长背景推客模式的优势:低成本获客、用户裂变小程序作为推客系统载体的天然优势二、技术架构设计text1.前端技术栈:-微信小程序原生开发/uni-app跨平台方案-自定义分享组件开发-可视化数据看板实现2.后端技术选型:-Node.js/PHP/JavaSpringBoot等后端框架对比-高性能分销关系链存储方案-佣金结算系统的设计要点3.数据库设计:-用户层</div> </li> <li><a href="/article/57.htm" title="多线程编程之join()方法" target="_blank">多线程编程之join()方法</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/JOIN/1.htm">JOIN</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>现实生活中,有些工作是需要团队中成员依次完成的,这就涉及到了一个顺序问题。现在有T1、T2、T3三个工人,如何保证T2在T1执行完后执行,T3在T2执行完后执行?问题分析:首先问题中有三个实体,T1、T2、T3, 因为是多线程编程,所以都要设计成线程类。关键是怎么保证线程能依次执行完呢?   Java实现过程如下: public class T1 implements Runnabl</div> </li> <li><a href="/article/184.htm" title="java中switch的使用" target="_blank">java中switch的使用</a> <span class="text-muted">bingyingao</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/break/1.htm">break</a><a class="tag" taget="_blank" href="/search/continue/1.htm">continue</a> <div>java中的switch仅支持case条件仅支持int、enum两种类型。 用enum的时候,不能直接写下列形式。 switch (timeType) { case ProdtransTimeTypeEnum.DAILY: break; default: br</div> </li> <li><a href="/article/311.htm" title="hive having count 不能去重" target="_blank">hive having count 不能去重</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E5%8E%BB%E9%87%8D/1.htm">去重</a><a class="tag" taget="_blank" href="/search/having+count/1.htm">having count</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E6%95%B0/1.htm">计数</a> <div>hive在使用having count()是,不支持去重计数   hive (default)> select imei from t_test_phonenum where ds=20150701 group by imei having count(distinct phone_num)>1 limit 10;  FAILED: SemanticExcep</div> </li> <li><a href="/article/438.htm" title="WebSphere对JSP的缓存" target="_blank">WebSphere对JSP的缓存</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/WAS+JSP+%E7%BC%93%E5%AD%98/1.htm">WAS JSP 缓存</a> <div>      对于线网上的工程,更新JSP到WebSphere后,有时会出现修改的jsp没有起作用,特别是改变了某jsp的样式后,在页面中没看到效果,这主要就是由于websphere中缓存的缘故,这就要清除WebSphere中jsp缓存。要清除WebSphere中JSP的缓存,就要找到WAS安装后的根目录。        现服务</div> </li> <li><a href="/article/565.htm" title="设计模式总结" target="_blank">设计模式总结</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>1.工厂模式   1.1 工厂方法模式 (由一个工厂类管理构造方法)      1.1.1普通工厂模式(一个工厂类中只有一个方法)      1.1.2多工厂模式(一个工厂类中有多个方法)      1.1.3静态工厂模式(将工厂类中的方法变成静态方法) &n</div> </li> <li><a href="/article/692.htm" title="实例:供应商管理报表需求调研报告" target="_blank">实例:供应商管理报表需求调研报告</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E7%B3%BB%E7%BB%9F/1.htm">报表系统</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96%E9%80%89%E5%9E%8B/1.htm">信息化选型</a> <div>引言 随着企业集团的生产规模扩张,为支撑全球供应链管理,对于供应商的管理和采购过程的监控已经不局限于简单的交付以及价格的管理,目前采购及供应商管理各个环节的操作分别在不同的系统下进行,而各个数据源都独立存在,无法提供统一的数据支持;因此,为了实现对于数据分析以提供采购决策,建立报表体系成为必须。 业务目标 1、通过报表为采购决策提供数据分析与支撑 2、对供应商进行综合评估以及管理,合理管理和</div> </li> <li><a href="/article/819.htm" title="mysql" target="_blank">mysql</a> <span class="text-muted">林鹤霄</span> <div>转载源:http://blog.sina.com.cn/s/blog_4f925fc30100rx5l.html mysql -uroot -p ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)   [root@centos var]# service mysql</div> </li> <li><a href="/article/946.htm" title="Linux下多线程堆栈查看工具(pstree、ps、pstack)" target="_blank">Linux下多线程堆栈查看工具(pstree、ps、pstack)</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>原文:http://blog.csdn.net/yfkiss/article/details/6729364   1. pstree pstree以树结构显示进程$ pstree -p work | grep adsshd(22669)---bash(22670)---ad_preprocess(4551)-+-{ad_preprocess}(4552)  &n</div> </li> <li><a href="/article/1073.htm" title="html input与textarea 值改变事件" target="_blank">html input与textarea 值改变事件</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>// 文本输入框(input) 文本域(textarea)值改变事件 // onpropertychange(IE) oninput(w3c) $('input,textarea').on('propertychange input', function(event) {      console.log($(this).val()) });   </div> </li> <li><a href="/article/1200.htm" title="String类的基本用法" target="_blank">String类的基本用法</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/String/1.htm">String</a> <div>  字符串的用法;     // 根据字节数组创建字符串 byte[] by = { 'a', 'b', 'c', 'd' }; String newByteString = new String(by);         1,length()  获取字符串的长度     &nbs</div> </li> <li><a href="/article/1327.htm" title="JDK1.5 Semaphore实例" target="_blank">JDK1.5 Semaphore实例</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/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Semaphore/1.htm">Semaphore</a> <div>Semaphore类        一个计数信号量。从概念上讲,信号量维护了一个许可集合。如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可。每个 release() 添加一个许可,从而可能释放一个正在阻塞的获取者。但是,不使用实际的许可对象,Semaphore 只对可用许可的号码进行计数,并采取相应的行动。 S</div> </li> <li><a href="/article/1454.htm" title="使用GZip来压缩传输量" target="_blank">使用GZip来压缩传输量</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/GZip/1.htm">GZip</a> <div>        启动GZip压缩要用到一个开源的Filter:PJL Compressing Filter。这个Filter自1.5.0开始该工程开始构建于JDK5.0,因此在JDK1.4环境下只能使用1.4.6。         PJL Compressi</div> </li> <li><a href="/article/1581.htm" title="【Java范型三】Java范型详解之范型类型通配符" target="_blank">【Java范型三】Java范型详解之范型类型通配符</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>    定义如下一个简单的范型类,   package com.tom.lang.generics; public class Generics<T> { private T value; public Generics(T value) { this.value = value; } } </div> </li> <li><a href="/article/1708.htm" title="【Hadoop十二】HDFS常用命令" target="_blank">【Hadoop十二】HDFS常用命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. 修改日志文件查看器   hdfs oev -i edits_0000000000000000081-0000000000000000089 -o edits.xml cat edits.xml   修改日志文件转储为xml格式的edits.xml文件,其中每条RECORD就是一个操作事务日志   2. fsimage查看HDFS中的块信息等 &nb</div> </li> <li><a href="/article/1835.htm" title="怎样区别nginx中rewrite时break和last" target="_blank">怎样区别nginx中rewrite时break和last</a> <span class="text-muted">ronin47</span> <div>在使用nginx配置rewrite中经常会遇到有的地方用last并不能工作,换成break就可以,其中的原理是对于根目录的理解有所区别,按我的测试结果大致是这样的。 location /    {         proxy_pass http://test; </div> </li> <li><a href="/article/1962.htm" title="java-21.中兴面试题 输入两个整数 n 和 m ,从数列 1 , 2 , 3.......n 中随意取几个数 , 使其和等于 m" target="_blank">java-21.中兴面试题 输入两个整数 n 和 m ,从数列 1 , 2 , 3.......n 中随意取几个数 , 使其和等于 m</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.List; import java.util.Stack; public class CombinationToSum { /* 第21 题 2010 年中兴面试题 编程求解: 输入两个整数 n 和 m ,从数列 1 , 2 , 3.......n 中随意取几个数 , 使其和等</div> </li> <li><a href="/article/2089.htm" title="eclipse svn 帐号密码修改问题" target="_blank">eclipse svn 帐号密码修改问题</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/svn%E5%B8%90%E5%8F%B7%E5%AF%86%E7%A0%81%E4%BF%AE%E6%94%B9/1.htm">svn帐号密码修改</a> <div>问题描述:      Eclipse的SVN插件Subclipse做得很好,在svn操作方面提供了很强大丰富的功能。但到目前为止,该插件对svn用户的概念极为淡薄,不但不能方便地切换用户,而且一旦用户的帐号、密码保存之后,就无法再变更了。 解决思路:      删除subclipse记录的帐号、密码信息,重新输入</div> </li> <li><a href="/article/2216.htm" title="[电子商务]传统商务活动与互联网的结合" target="_blank">[电子商务]传统商务活动与互联网的结合</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>       某一个传统名牌产品,过去销售的地点就在某些特定的地区和阶层,现在进入互联网之后,用户的数量群突然扩大了无数倍,但是,这种产品潜在的劣势也被放大了无数倍,这种销售利润与经营风险同步放大的效应,在最近几年将会频繁出现。。。。        如何避免销售量和利润率增加的</div> </li> <li><a href="/article/2343.htm" title="java 解析 properties-使用 Properties-可以指定配置文件路径" target="_blank">java 解析 properties-使用 Properties-可以指定配置文件路径</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/properties/1.htm">properties</a> <div>#mq xdr.mq.url=tcp://192.168.100.15:61618; import java.io.IOException; import java.util.Properties; public class Test { String conf = "log4j.properties"; private static final</div> </li> <li><a href="/article/2470.htm" title="Java核心问题集锦" target="_blank">Java核心问题集锦</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a><a class="tag" taget="_blank" href="/search/%E6%A0%B8%E5%BF%83/1.htm">核心</a><a class="tag" taget="_blank" href="/search/%E9%9A%BE%E7%82%B9/1.htm">难点</a> <div>注意,这里的参考文章基本来自Effective Java和jdk源码 1)ConcurrentModificationException 当你用for each遍历一个list时,如果你在循环主体代码中修改list中的元素,将会得到这个Exception,解决的办法是: 1)用listIterator, 它支持在遍历的过程中修改元素, 2)不用listIterator, new一个</div> </li> <li><a href="/article/2724.htm" title="1分钟学会Markdown语法" target="_blank">1分钟学会Markdown语法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/markdown/1.htm">markdown</a> <div>markdown 简明语法 基本符号 *,-,+ 3个符号效果都一样,这3个符号被称为 Markdown符号 空白行表示另起一个段落 `是表示inline代码,tab是用来标记 代码段,分别对应html的code,pre标签 换行 单一段落( <p>) 用一个空白行 连续两个空格 会变成一个 <br> 连续3个符号,然后是空行</div> </li> <li><a href="/article/2851.htm" title="Gson使用二(GsonBuilder)" target="_blank">Gson使用二(GsonBuilder)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/GsonBuilder/1.htm">GsonBuilder</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2175473 一.概述     GsonBuilder用来定制java跟json之间的转换格式   二.基本使用 实体测试类: 温馨提示:默认情况下@Expose注解是不起作用的,除非你用GsonBuilder创建Gson的时候调用了GsonBuilder.excludeField</div> </li> <li><a href="/article/2978.htm" title="报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList" target="_blank">报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>有一个工程,本来运行是正常的,我想把它移植到另一台PC上,结果报: java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.mobovip.bgr/com.mobovip.bgr.MainActivity}: java.lang.ClassNotFoundException: Didn't f</div> </li> <li><a href="/article/3105.htm" title="JavaWeb之JSP指令" target="_blank">JavaWeb之JSP指令</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div>  要点   JSP指令简介  page指令  include指令    JSP指令简介    JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分。 JSP指令的基本语法格式: <%@ 指令 属性名="</div> </li> <li><a href="/article/3232.htm" title="mac上编译FFmpeg跑ios" target="_blank">mac上编译FFmpeg跑ios</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a> <div>1、下载文件:https://github.com/libav/gas-preprocessor, 复制gas-preprocessor.pl到/usr/local/bin/下, 修改文件权限:chmod 777 /usr/local/bin/gas-preprocessor.pl 2、安装yasm-1.2.0 curl http://www.tortall.net/projects/yasm</div> </li> <li><a href="/article/3359.htm" title="sql mysql oracle中字符串连接" target="_blank">sql mysql oracle中字符串连接</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>有的时候,我们有需要将由不同栏位获得的资料串连在一起。每一种资料库都有提供方法来达到这个目的: MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + CONCAT() 的语法如下: Mysql 中 CONCAT(字串1, 字串2, 字串3, ...): 将字串1、字串2、字串3,等字串连在一起。 请注意,Oracle的CON</div> </li> <li><a href="/article/3486.htm" title="Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate" target="_blank">Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>// 报错如下: $ git pull origin master fatal: unable to access 'https://git.xxx.com/': SSL certificate problem: unable to get local issuer ce rtificate   // 原因: 由于git最新版默认使用ssl安全验证,但是我们是使用的git未设</div> </li> <li><a href="/article/3613.htm" title="windows命令行设置wifi" target="_blank">windows命令行设置wifi</a> <span class="text-muted">surfingll</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/wifi/1.htm">wifi</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%ACwifi/1.htm">笔记本wifi</a> <div>还没有讨厌无线wifi的无尽广告么,还在耐心等待它慢慢启动么 教你命令行设置 笔记本电脑wifi: 1、开启wifi命令 netsh wlan set hostednetwork mode=allow ssid=surf8 key=bb123456 netsh wlan start hostednetwork pause 其中pause是等待输入,可以去掉 2、</div> </li> <li><a href="/article/3740.htm" title="Linux(Ubuntu)下安装sysv-rc-conf" target="_blank">Linux(Ubuntu)下安装sysv-rc-conf</a> <span class="text-muted">wmlJava</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/sysv-rc-conf/1.htm">sysv-rc-conf</a> <div>安装:sudo apt-get install sysv-rc-conf 使用:sudo sysv-rc-conf 操作界面十分简洁,你可以用鼠标点击,也可以用键盘方向键定位,用空格键选择,用Ctrl+N翻下一页,用Ctrl+P翻上一页,用Q退出。     背景知识 sysv-rc-conf是一个强大的服务管理程序,群众的意见是sysv-rc-conf比chkconf</div> </li> <li><a href="/article/3867.htm" title="svn切换环境,重发布应用多了javaee标签前缀" target="_blank">svn切换环境,重发布应用多了javaee标签前缀</a> <span class="text-muted">zengshaotao</span> <a class="tag" taget="_blank" href="/search/javaee/1.htm">javaee</a> <div>更换了开发环境,从杭州,改变到了上海。svn的地址肯定要切换的,切换之前需要将原svn自带的.svn文件信息删除,可手动删除,也可通过废弃原来的svn位置提示删除.svn时删除。   然后就是按照最新的svn地址和规范建立相关的目录信息,再将原来的纯代码信息上传到新的环境。然后再重新检出,这样每次修改后就可以看到哪些文件被修改过,这对于增量发布的规范特别有用。   检出</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>