Python/Spring Cloud Alibaba开发--前端复习笔记(1)———— html5和css3.html基础

Python/Spring Cloud Alibaba开发–前端复习笔记(1)———— html5和css3.html基础

1)概述和基本结构

超文本标记语言。超文本指超链接,标记指的是标签。
基本结构:

   文档声明
   定义网页的语言 en为英文,zh-CN为中文   

	
网页标题</tiltle>
</head>
<body>
	你好!欢迎访问我的个人网页!
</body>
</html>
</code></pre> 
  <h4>2)html分类</h4> 
  <p>xhtml1.0文档类型<br> 文档声明、编码声明、网页语言声明长。<br> 区别:a。文档声明和编码声明 b。html5新增了标签元素以及元素属性</p> 
  <h4>3)注释</h4> 
  <pre><code><!--这是注释-->  两个横杆
</code></pre> 
  <h4>4)标题标签</h4> 
  <p><code><h1><h2><h3><h4><h5><h6></code><br> 可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。</p> 
  <h4>5)段落标签</h4> 
  <pre><code><p>文字</p>
</code></pre> 
  <p>段落标签中,开头处不识别空格,内容中只识别一个空格。<br> 识别符: ;为空格 <;为小于号< >;为大于号><br> 换行</p> 
  <h4>6)块标签、含样式的标签</h4> 
  <h5>1>块标签</h5> 
  <div>
    标签 块元素,表示一块内容,没有具体的语义 标签 行内元素,表示一行中的一小段内容,没有具体的语义 p段落标签有样式,行距等,div块标签没有样式。 
  </div> 
  <h5>2>含样式和语义的标签</h5> 
  <p><code><em></code>标签,表示语气中的强调词,斜体<br> <code><i></code>标签,表示专业词汇,斜体<br> <code><b></code>标签,表示文档中的关键字或者产品名,加粗<br> <code><strong></code>标签,表示非常重要的内容,加粗</p> 
  <h5>3>语义化标签</h5> 
  <p>h1 标题;p 段落;ul、li 列表;a 链接;dl、dt、dd 定义列表</p> 
  <h4>7)图像标签、绝对路径和相对路径</h4> 
  <h5>1>图像标签</h5> 
  <pre><code class="prism language-css"><img src=”images/001.jpg” alt=”产品图片” />
</code></pre> 
  <p>src属性 定义图片的引用地址<br> alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。</p> 
  <h5>2>绝对路径和相对路径</h5> 
  <p>绝对路径:相对于磁盘的位置去定位 文件的位置<br> 相对路径:相对于当前文件的位置去定位文件的位置<br> ./ 表示当前目录,可以省略<br> …/ 表示上一层目录</p> 
  <h4>8)链接标签</h4> 
  <p> 定义一个链接地址 常用属性 href属性 定义跳转的地址 title属性 定义鼠标悬停时弹出的提示文字框 target属性 定义链接窗口打开的位置 target=”self” 缺省值,新页面替换原来的页面,在原来的位置打开 target=”_blank”新页面会在新开的一个浏览器窗口打开 跳转到页面顶部</p> 
  <h4>9)列表标签</h4> 
  <p>有序列表<br> 会自动给内容加序号<br> 可以使用<code><ol>, <li></code>配合使用来实现。</p> 
  <pre><code><ol>
	<li>listcontent1</li>
	<li>listcontent2</li>
	<li>listcontent3</li>
</ol>
</code></pre> 
  <p>快捷键定义: <code>ol>li*3</code> 然后按tab键<br> 无序列表<br> 可以用来做新闻标题等<br> 可以使用<code><ul>, <li></code>配合使用来实现。<br> 在css中使用List-style:none 去掉列表前的点。</p> 
  <pre><code><ul>
	<li><a href=”#”>news1</a></li>
	<li><a href=”#”>news2</a></li>
	<li><a  href=”#”>news3</a></li>
</ul>
</code></pre> 
  <p>快捷键定义:<code>ul>(li>a{新闻标题})*3</code> 然后按tab键<br> 定义列表<br> <code><dl></code>标签表示列表的整体,<code><dt></code>标签定义术语的题目,<code><dd></code>标签是术语的解释。</p> 
  <h3>2.表格标签和传统布局</h3> 
  <h4>1)html表格</h4> 声明一个表格 属性: border 定义表格的边框,设置值是数值 cellpadding 定义单元格内容与边框的距离,设置值是数值 cellspacing 定义单元格与单元格之间的距离,设置值是数值 align 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有left|center|right 定义表格的一行 
  <table> 
   <tbody> 
    <tr> 
     <td> 定义一行中的一个单元格,td代表普通单元格,th表示表头单元格。 属性: align 设置单元格中内容的水平对齐方式,设置值有left|center|right valign 设置单元格中内容的垂直对齐方式 top|middle|bottom colspan 设置单元格水平合并,设置值是数值 rowspan 设置单元格垂直合并,设置值是数值 快捷操作:table>(tr>td*5)*6 创建6行5列的表格 </td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>2)页面布局</h4> 
  <p>一般分为两种:</p> 
  <h5>1>table布局</h5> 
  <p>即传统布局,将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格的边框,从而实现布局。目前主要应用在EDM(广告邮件中的页面)中。<br> 布局复杂时,在table中嵌套表格</p> 
  <h5>2>html+css布局(DIV+CSS)</h5> 
  <p>通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局,比传统布局更复杂,目前是主流。</p> 
  <h3>3.html表单</h3> 
  <p>表单用于搜集不同类型的用户输入,表单由不同类型的标签组成。</p> 
  <h5>1><code><form></code>标签</h5> 
  <p>定义整体的表单区域<br> action属性 定义表单数据提交地址<br> method属性 定义表单提交的方式,一般有“get”方式和“post”方式</p> 
  <h5>2> <code><label></code></h5> 
  <p>表单元素定义文字标注</p> 
  <h5>3> <code><input></code></h5> 
  <p>定义通用的表单元素<br> type属性:“text”定义单行文本输入框;“password”定义密码输入框;“radio”定义单选框;“checkbox“定义复选框;”file“定义上传文件;”submit“定义提交按钮;”reset“定义重置按钮;”image“定义图片作为提交按钮,用src属性定义图片地址;”hidden“定义一个隐藏的表单域,用来存储值,select属性定义复选框option定义选项。<br> value属性 定义表单元素的值<br> name属性 定义表单元素的名称,此名称是提交数据时的键名</p> 
  <h3>4.CSS基本语法</h3> 
  <p>层叠样式表,html只负责文档的结构和内容,表现形式完全交给CSS。<br> css的定义方法:<br> 选择器 {属性:值;属性:值 }</p> 
  <pre><code>div{
	font-size:16px;
color:ed;
}
</code></pre> 
  <p>css页面引入方法:</p> 
  <h5>1>外联式</h5> 
  <p>在html文件的<code><head></code>中加入<br> <code><link rel=”stylesheet” type=”text/css” href=”./css/main.css”></code> href为css文件地址</p> 
  <h5>2>嵌入式</h5> 
  <p>通过style标签,在网页上创建嵌入的样式表</p> 
  <pre><code><style type=”text/css”>
div{ width:100px; height:100px; color:red }
</code></pre> 
  <h5>3>内联式</h5> 
  <p>通过标签的style属性,在标签上直接写样式</p> 
  <pre><code><div style=”width:100px; height:100px; color:red”>……</div>
1
</code></pre> 
  <h3>5.CSS常用文本样式</h3> 
  <p>字号 font-size;颜色 color;字体 font-family;斜体 font-style;加粗 font-weight;行高 line-height<br> 可以使用<code><span></code>标签,进行特定的样式设置</p> 
  <h3>6.CSS样式选择器</h3> 
  <p>css颜色值表示方法:<br> 1>颜色名表示,如 red gold<br> 2>rgb表示 如 rgb(255,0,0)红色<br> 3>16进制数值表示,#ff0000 表示红色,可以简写为#f00</p> 
  <h4>1)标签选择器</h4> 
  <p>尽量应用在层级选择器中。<br> <code>*</code> 所有标签</p> 
  <h4>2)id选择器</h4> 
  <p>通过id名来选择元素,元素的id名称不能重复。但id名一般给程序使用,所以不推荐使用id作为选择器。<br> 例如:<br> <code><div id=“div1”>第一个div</div></code> 设置id<br> 在<code><head></code>的<code><style></code>中设置样式<br> #div1{}中设置样式</p> 
  <h4>3)类选择器</h4> 
  <p>通过类名来选择元素,一个类可以应用于多个元素,一个元素也可以使用多个类,应用最多的一种选择器。<br> 设置类选择器</p> 
  <pre><code>.green{color:green;}

<div class=“green”>`这是第一个div`</div>
</code></pre> 
  <h4>4)层级选择器</h4> 
  <p>主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。</p> 
  <h4>5)组选择器</h4> 
  <p>类选择器中相同的样式可以用组选择器共同定义,类名用逗号隔开</p> 
  <h4>6)伪类及伪元素选择器</h4> 
  <p>常用的伪类选择器由hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。<br> 类名后加冒号定义<br> <code>.box: hover{color:red}</code> 鼠标悬停在元素上时,元素变为红色<br> <code>.box: before{content: “dd”}</code> 在标签元素前面增加文字 dd<br> after可以在元素后面增加文字</p> 
  <h3>7.盒子模型</h3> 
  <h4>1)模型理解</h4> 
  <p>元素在也页面中显示成一个方块,把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。<br> 定义一个类选择器,在选择器中定义属性</p> 
  <h4>2)设置宽高</h4> 
  <pre><code>width:200px
height:200px
</code></pre> 
  <h4>3)设置边框</h4> 
  <pre><code class="prism language-css">border-top:10px solid #000; 设置顶边框10px粗,实线,黑色
border-left:10px dashed #000; 虚线
border-right:10px dotted #000;点线
border-bottom 底部边框
border:10px solid #000; 同时设置四个边
</code></pre> 
  <h4>4)内容和边框间距</h4> 
  <p>padding-top、padding-left、padding-right、padding-bottom<br> 修改之后整体盒子变大,width和height设置的是内容的宽高。<br> 可以使用padding直接设置,顺时针设置。</p> 
  <pre><code class="prism language-css">padding:20px 80px 100px;这是设置上边、左右、下边的距离
padding:20px;这是同时设置四条边的距离
</code></pre> 
  <h4>5)设置外间距margin</h4> 
  <p>margin-top、margin-left 盒子与外界的距离</p> 
  <h4>6)盒子真实尺寸</h4> 
  <p>宽度 width+左右paddingwidth+左右borderwidth<br> 高度:height+上下paddingheight+上下borderheight<br> line-height text-indent 行高和首行缩进可以避免盒子尺寸发生变化。</p> 
  <h3>8.margin和overflow属性</h3> 
  <h4>1)margin使用技巧</h4> 
  <pre><code class="prism language-css">margin:50px auto 100px
</code></pre> 
  <p>左右边框会随着总界面大小的变化而变化。<br> 1>margin:x auto 设置元素水平居中<br> 2>margin负值让元素位移及边框合并</p> 
  <h4>2)外边距合并</h4> 
  <p>外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法:<br> 1>使用这种特性<br> 2>设置一边的外边距,一般设置margin-top<br> 3>将元素浮动或者定位</p> 
  <h4>3)margin-top 塌陷</h4> 
  <p>在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法:<br> 1>外部盒子设置一个边框<br> 2>外部盒子设置overflow:hidden<br> 3>使用伪元素类</p> 
  <pre><code>.clearfix: before{
	content:””;
	display:table;
}
</code></pre> 
  <h4>4)css元素溢出</h4> 
  <p>当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。<br> overflow的设置项:<br> 1>visible默认值,内容不会被修剪,会呈现在元素框之外。<br> 2>hidden内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。<br> 3>scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。<br> 4>auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。<br> 5>inherit规定应该从父元素继承overflow属性的值</p> 
  <h3>9.display属性</h3> 
  <h4>1)块元素</h4> 
  <p>也称为行元素,常用标签如:div, p, ul, li, h1~h6, dl, dt, dd等都是块元素,它在布局中的行为:<br> a 支持全部的样式<br> b 如果没有设置宽度,默认的宽度为父级宽度100%<br> c 盒子占据一行,即使设置了宽度</p> 
  <h4>2)内联元素</h4> 
  <p>也称为行内元素,布局中常用的标签如:a, span, em, b, strong, i等都是内联元素,它们在布局中的行为:<br> a 支持部分样式(不支持宽、高、margin上下、padding上下)<br> b 宽高由内容决定<br> c 盒子并在一行<br> d 代码换行,盒子之间会产生间距<br> e 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式<br> 解决内联元素间隙的方法:<br> a 去掉内联元素之间的换行<br> b 将内联元素的父级设置font-size为0,内联元素自身再设置font-size</p> 
  <h4>3)内联块元素</h4> 
  <p>也称为行内块元素,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素,在布局中的行为:<br> a 支持全部样式<br> b 如果没有设置宽高,宽高由内容决定<br> c 盒子并在一行<br> d 代码换行,盒子会产生间距<br> e 子元素是内联块元素,父元素可以通过text-align属性设置子元素水平对齐方式</p> 
  <h4>4)display属性</h4> 
  <p>none 元素隐藏且不占位置<br> block 元素以块元素显示<br> inline 元素以内联元素显示<br> inline-block 元素以内联块元素显示</p> 
  <h3>10.浮动</h3> 
  <p>父级盒子不给高度,子集盒子浮动,子集盒子“撑不开”父级盒子,父级盒子需要清除浮动<br> 特性<br> 1>浮动元素有左浮动(float:left)和右浮动(float:right)两种<br> 2>浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来<br> 3>相邻浮动的块元素可以并在一行,超出父级宽度就换行<br> 4>浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)<br> 5>浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字绕图的效果<br> 6>父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素,父元素需要清除浮动<br> 7>浮动元素之间没有垂直margin的合并</p> 
  <h4>清除浮动:</h4> 
  <p>1>父级上增加属性overflow:hidden<br> 2>在最后一个子元素的后面加一个空的div,给它样式属性clear:both(不推荐)<br> 3>使用成熟的清浮动样式类,clearfix</p> 
  <pre><code class="prism language-css"><span class="token selector">.clearfix:after</span><span class="token punctuation">{</span>
	<span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
	<span class="token property">display</span><span class="token punctuation">:</span>table<span class="token punctuation">;</span>
	<span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
</code></pre> 
  <p>将上面的类选择器加到父类class中。同时这个类可以与clearfix:before搭配使用,合成一个组选择器,解决margin-top塌陷的问题。</p> 
  <pre><code>.clearfix{ zoom:1 }
</code></pre> 
  <p>IE浏览器专用,兼容。</p> 
  <h3>11定位</h3> 
  <p>文档流:盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子占据自己的位置。</p> 
  <h4>1)关于定位</h4> 
  <p>使用css的position属性来设置元素的定位类型,position设置如下:<br> 1>relative生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位进行偏移<br> 2>absolute 生成绝对定位元素,不占据文档流位置,定位时,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。<br> 3>fixed生成固定定位元素,脱离文档流,相对于浏览器窗口定位<br> 4>static默认值,没有定位,出现在正常的文档流中<br> 5>inherit 从父元素继承position属性的值</p> 
  <h4>2)定位元素的偏移</h4> 
  <p>使用right、left、top、bottom来设置相对于参考元素的偏移值。</p> 
  <h3>12.background属性</h3> 
  <h4>1)设置项:</h4> 
  <pre><code class="prism language-css">background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置,水平方向“left、center、right”,垂直方向“top、center、bottom”。
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
position属性中,左右移动时,负值向左,正值向右。上下移动时,负值向上,正值向下。
</code></pre> 
  <h4>2)雪碧图</h4> 
  <p>ps制作雪碧图<br> 1.使用photoshop新建一张背景透明的图片<br> 2.将小图片复制到此图片中,排列好每个图像的位置,图片幅面不够可以用画布大小调整大小<br> 3.按照所有小图片的范围裁剪图片,存为透明背景的png图片<br> 13.前端页面开发流程<br> 1)创建页面项目目录<br> 2)使用photoshop对效果图切图,切出网页制作中需要的小图片<br> 3)将装饰类图像合并,制作成雪碧图<br> 4)结合photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面。</p> 
  <h3>14.html5与CSS3</h3> 
  <h4>1)css权重</h4> 
  <p>权重高的样式对元素起作用。<br> 权重等级:<br> 1> !important 加载样式属性值后,权重值为10000<br> 2>内联样式,如:style=“”,权重值为1000<br> 3>ID选择器,如:#content,权重值为100<br> 4>类、伪类和属性选择器,如:content、:hover权重值为10<br> 5>标签选择器和伪元素选择器,如:div、p、:before权重值为1<br> 6>通用选择器(<code>*</code>)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0</p> 
  <h4>2)css新增选择器</h4> 
  <h5>1>E:nth-child(n)</h5> 
  <p>匹配元素类型为E且是父元素的第n个子元素</p> 
  <h5>2>E:first-child</h5> 
  <p>匹配元素类型为E且是父元素的第一个子元素</p> 
  <h5>3>E:last-child</h5> 
  <p>匹配元素类型为E且是父元素的最后一个子元素</p> 
  <h5>4>E>F</h5> 
  <p>E元素下面第一层子元素</p> 
  <h5>5>E~F</h5> 
  <p>E元素后面的兄弟元素</p> 
  <h5>6>E+F</h5> 
  <p>紧挨着的后面的兄弟元素<br> 属性选择器:<br> 1>E[attr]含有attr属性的元素<br> 2>E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”<br> 3>E[attr^=‘ok’] 含有attr属性的元素且它的值开头含有“ok”<br> 4>E[attr$=‘ok’] 含有attr属性的元素且它的值结尾含有“ok”<br> 5>E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”</p> 
  <h4>3)css3 圆角、rgba</h4> 
  <h5>1>圆角</h5> 
  <p>设置某一个角的圆角,比如设置左上角的圆角:<br> border-top-left-radius:30px 60px;<br> 同时设置四个角:<br> border-radius:30px 60px 120px 150px;<br> 顺序为顺时针</p> 
  <h5>2>rgba</h5> 
  <p>a 盒子透明度表示法</p> 
  <pre><code>.box
{
	opacity:0.1;
filter:alpha(opacity=10);  兼容IE
}
</code></pre> 
  <p>b rgba(0,0,0,0.1)前三个数值表示颜色,第四个数值表示颜色的透明度</p> 
  <h4>4)css3 transition动画</h4> 
  <p>1>transition-property设置过渡的属性,如,width height background-color<br> 2>transition-duration 设置过渡的时间,如:1s 500ms<br> 3>transition-timing-function 设置过渡的运动方式,常用linear匀速 ease缓冲<br> 4>transition-delay设置动画的延迟<br> 5>transition: property duration timing-function delay 同时设置四个属性</p> 
  <h4>5)css3 transform变换 翻面</h4> 
  <p>1>translate(x, y) 设置盒子位移<br> 2>scale(x, y) 设置盒子缩放<br> 3>rotate(deg) 设置盒子旋转<br> 4>skew(x-angle, y-angle) 设置盒子斜切<br> 5>perspective 设置透视距离<br> 6>transform-style flat|preserve-3d 设置盒子是否按3d空间显示<br> 7>translateX、translateY, translate 设置三维移动<br> 8>rotateX, rotateY, rotateZ 设置三维旋转<br> 9>scaleX, scaleY, scaleZ 设置三维缩放<br> 10>transform-origin 设置变形的中心点<br> 11>backface-visibility 设置盒子背面是否可见</p> 
  <h4>6)css3 animation动画</h4> 
  <p>1>@keyframes 定义关键帧动画<br> 2>animation-name 动画名称<br> 3>animation-duration 动画时间<br> 4>animation-timing-function 动画曲线 linear匀速,ease缓冲,steps步数<br> 5>animation-delay 动画延迟<br> 6>animation-iteration-count 动画播放次数 n|infinite<br> 7>animation-direction 动画结束后是否反向还原 normal|alternate<br> 8>animation-play-state 动画状态 paused(停止)|running(运动)<br> 9>animation-fill-mode 动画前后的状态 none|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)<br> 10>animation:name duration timing-function delay iteration-count direction; 同时设置多个属性。</p> 
  <h4>7)css3浏览器前缀</h4> 
  <h5>1>浏览器样式前缀</h5> 
  <p>为了让css3样式兼容,需要将某些样式加上浏览器前缀:<br> -ms- 兼容ie浏览器<br> -moz- 兼容firefox<br> -o- 兼容opera<br> -webkit- 兼容chrome和safari</p> 
  <h5>2>自动添加浏览器前缀</h5> 
  <p>交给插件,如,安装autoprefixer</p> 
  <h4>8)html5新增标签</h4> 
  <p>新增语义标签<br> <code><header></code> 页面头部、页眉<br> <code><nav></code> 页面导航<br> <code><article></code> 一篇文章<br> <code><section></code> 文章中的章节<br> <code><aside></code> 侧边栏<br> <code><footer></code> 页面底部,页脚<br> 音频视频</p> 
  <pre><code><audio>

<video>
</code></pre> 
  <h4>9)html5新增表单控件</h4> 
  <p>网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索</p> 
  <pre><code class="prism language-css"><label><span class="token property">网址</span><span class="token punctuation">:</span></label><input type=<span class="token string">"url"</span> name=<span class="token string">""</span> required><br><br> 
<label><span class="token property">邮箱</span><span class="token punctuation">:</span></label><input type=<span class="token string">"email"</span> name=<span class="token string">""</span> required><br><br> 
<label><span class="token property">日期</span><span class="token punctuation">:</span></label><input type=<span class="token string">"date"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">时间</span><span class="token punctuation">:</span></label><input type=<span class="token string">"time"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">星期</span><span class="token punctuation">:</span></label><input type=<span class="token string">"week"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">数量</span><span class="token punctuation">:</span></label><input type=<span class="token string">"number"</span> name=<span class="token string">""</span>> <br><br>
<label><span class="token property">范围</span><span class="token punctuation">:</span></label><input type=<span class="token string">"range"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">电话</span><span class="token punctuation">:</span></label><input type=<span class="token string">"tel"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">颜色</span><span class="token punctuation">:</span></label><input type=<span class="token string">"color"</span> name=<span class="token string">""</span>><br><br> 
<label><span class="token property">搜索</span><span class="token punctuation">:</span></label><input type=<span class="token string">"search"</span> name=<span class="token string">""</span>><br><br>
</code></pre> 
  <p>新增常用表单控件属性:<br> 1>placeholder 设置文本框默认提示文字<br> 2>autofocus 自动获得焦点<br> 3>autocomplete 联想关键词</p> 
  <h3>15.移动端页面开发</h3> 
  <h4>1)移动端与pc端页面布局区别</h4> 
  <h5>1>视口</h5> 
  <p>将pc端页面缩放到移动端窗口的大小。<br> 使用meta标签,name=”viewport”来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。<br> 快捷键:meta:vp+tab</p> 
  <h5>2>视网膜屏幕(retina屏幕)清晰度解决方案</h5> 
  <p>视网膜屏幕:屏幕的物理像素密度更高的屏幕。物理像素点比一般屏幕的多。<br> 图像在视网膜屏幕和一般屏幕上显示的一样大,但视网膜屏幕的物理像素点比一般屏幕的小,图像在上面好像是被放大了,图像会变得模糊。为了解决这一问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小。<br> background新属性<br> background-size:<br> length:用长度值指定背景图像大小。不允许负值。<br> percentage:用百分比指定背景图像大小。不允许负值。<br> auto:背景图像的真实大小。<br> cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。<br> contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。</p> 
  <h4>2)适配布局类型</h4> 
  <h5>1>pc及移动端页面适配方法</h5> 
  <p>a 全适配:响应式布局+流体布局<br> b 移动端适配:流体布局+少量响应式布局 / 基于rem的布局</p> 
  <h5>2>流体布局</h5> 
  <p>使用百分比来设置元素的宽度,元素的高度按实际高度写固定值。可以使用样式中的计算函数calc()来设置宽度,或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。</p> 
  <pre><code>calc()
</code></pre> 
  <p>通过计算的方式给元素加尺寸</p> 
  <pre><code>box-sizing
</code></pre> 
  <p>content-box 默认的盒子尺寸计算方式<br> border-box 设置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内</p> 
  <h5>3>响应式布局</h5> 
  <p>使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。</p> 
  <h5>4>基于rem的布局</h5> 
  <p>em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html的大小,就会改变所有元素用rem设置的尺寸大小。<br> cssrm插件可以动态地将px尺寸换算成rem尺寸。</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1693393660571365376"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端开发,编程语言学习笔记,国际化大系统重构研究,前端,html,python,html5,CSS3,原生开发)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1940537046984617984.htm"
                           title="Kafka 核心机制面试题--自问自答" target="_blank">Kafka 核心机制面试题--自问自答</a>
                        <span class="text-muted">亲爱的非洲野猪</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a>
                        <div>基础篇Q1:Kafka为什么能这么快?A:Kafka的高性能主要来自三大核心技术:零拷贝(Zero-Copy):通过sendfile()系统调用,数据直接从磁盘到网卡,避免了内核态和用户态之间的多次拷贝页缓存(PageCache):消息直接写入操作系统页缓存而非JVM内存,减少GC影响并利用OS缓存机制内存映射(mmap):索引文件通过内存映射实现,操作内存即操作文件Q2:Kafka的存储结构是怎</div>
                    </li>
                    <li><a href="/article/1940535913058725888.htm"
                           title="python类的定义与使用" target="_blank">python类的定义与使用</a>
                        <span class="text-muted">菜鸟驿站2020</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>class01.py代码如下classTicket():#类的名称首字母大写#在类里定义的变量称为属性,第一个属性必须是selfdef__init__(self,checi,fstation,tstation,fdate,ftime,ttime,notes):self.checi=checiself.fstation=fstationself.tstation=tstationself.fdate</div>
                    </li>
                    <li><a href="/article/1940535913545265152.htm"
                           title="Python爬虫设置代理IP" target="_blank">Python爬虫设置代理IP</a>
                        <span class="text-muted">菜鸟驿站2020</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>配置代理ipfrombs4importBeautifulSoupimportrequestsimportrandom#从ip代理网站获取ip列表defget_ip_list(url,headers):web_data=requests.get(url,headers=headers)soup=BeautifulSoup(web_data.text,'lxml')ips=soup.find_all(</div>
                    </li>
                    <li><a href="/article/1940535533528739840.htm"
                           title="Tensorflow 回归模型 FLASK + DOCKER 部署 至 Ubuntu 虚拟机" target="_blank">Tensorflow 回归模型 FLASK + DOCKER 部署 至 Ubuntu 虚拟机</a>
                        <span class="text-muted"></span>

                        <div>准备工作:安装虚拟机,安装ubuntu,安装python3.x、pip和对应版本的tensorflow和其他库文件,安装docker。注意事项:1.windows系统运行的模型文件不能直接运行到虚拟机上,需在虚拟机上重新运行并生成模型文件2.虚拟机网络状态改为桥接Flask代码如下:fromflaskimportFlask,request,jsonifyimportpickleimportnump</div>
                    </li>
                    <li><a href="/article/1940534524928651264.htm"
                           title="AI Agent开发第81课-企业AI落地15大陷阱与破局之道" target="_blank">AI Agent开发第81课-企业AI落地15大陷阱与破局之道</a>
                        <span class="text-muted">TGITCIC</span>
<a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/Agent%E5%BC%80%E5%8F%91%E5%A4%A7%E5%85%A8/1.htm">Agent开发大全</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%E8%90%BD%E5%9C%B0/1.htm">AI落地</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9AAI%E8%90%BD%E5%9C%B0/1.htm">企业AI落地</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E8%90%BD%E5%9C%B0/1.htm">大模型落地</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%A4%A7%E6%A8%A1%E5%9E%8B%E8%90%BD%E5%9C%B0/1.htm">企业大模型落地</a>
                        <div>1.技术至上:忽视业务融合1.1业务需求驱动的本质AI项目的核心价值在于解决业务痛点,而非技术炫技。某银行通过成熟的人脸识别技术将坏账率降低15%,其成功源于对业务场景的精准把握。技术选择必须基于业务需求的优先级排序,而非单纯追求算法复杂度。当零售企业用AI优化供应链时,其目标是提升库存周转率0.5个百分点,而非发表顶会论文。1.2技术与业务的错位某科技公司投入千万研发智能客服系统,最终因响应准确</div>
                    </li>
                    <li><a href="/article/1940526965727490048.htm"
                           title="[转载] [Mark]分布式存储必读论文" target="_blank">[转载] [Mark]分布式存储必读论文</a>
                        <span class="text-muted">weixin_30945039</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>原文:http://50vip.com/423.html分布式存储泛指存储存储和管理数据的系统,与无状态的应用服务器不同,如何处理各种故障以保证数据一致,数据不丢,数据持续可用,是分布式存储系统的核心问题,也是极具挑战的问题。本文总结了分布式存储领域的经典论文,供大家参考。TheGoogleFileSystem.SanjayGhemawat,HowardGobioff,andShun-TakLeu</div>
                    </li>
                    <li><a href="/article/1940524070437187584.htm"
                           title="大模型-FlashAttention 算法分析" target="_blank">大模型-FlashAttention 算法分析</a>
                        <span class="text-muted">清风lsq</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E6%8E%A8%E7%90%86/1.htm">大模型推理</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E6%8E%A8%E7%90%86/1.htm">大模型推理</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/flashattention/1.htm">flashattention</a>
                        <div>一、FlashAttention的概述FlashAttention是一种IO感知精确注意力算法。通过感知显存读取/写入,FlashAttention的运行速度比PyTorch标准Attention快了2-4倍,所需内存也仅是其5%-20%。随着Transformer变得越来越大、越来越深,但它在长序列上仍然处理的很慢、且耗费内存。(自注意力时间和显存复杂度与序列长度成二次方),现有近似注意力方法,</div>
                    </li>
                    <li><a href="/article/1940523566659334144.htm"
                           title="可编程电子安全相关系统_编程中的安全生态系统概述" target="_blank">可编程电子安全相关系统_编程中的安全生态系统概述</a>
                        <span class="text-muted">danpu0978</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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/linux/1.htm">linux</a>
                        <div>可编程电子安全相关系统就像近年来的情况一样,安全漏洞已越来越被接受。仅以最近的Equifax违规为例。无论我们在哪里看,似乎总有人会遭受某种形式的恶意攻击或其他形式的攻击。尽管我们最近想到了最近的漏洞,但我还是想花一点时间来概述有关软件开发的安全生态系统。我将从建设性和积极的角度介绍您可以做的一些关键事情,以提高您的应用程序的安全性,以应对安全漏洞。为此,我将研究四个关键领域。他们将主要讨论具体的</div>
                    </li>
                    <li><a href="/article/1940522684303601664.htm"
                           title="Red Bull红牛携手Fortinet,全球能量饮料巨头筑牢网安防线" target="_blank">Red Bull红牛携手Fortinet,全球能量饮料巨头筑牢网安防线</a>
                        <span class="text-muted">Fortinet_CHINA</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a>
                        <div>作为全球知名的能量饮料品牌,在网络安全威胁日趋严峻的当下,RedBull(红牛)面临着诸多网络安全挑战。为应对这些挑战,RedBull选择了Fortinet的网络安全解决方案,通过部署FortiEDR和FortiGuardMDR服务等,成功提升了公司的安全防护能力。客户简介全球能量饮料领军者RedBull作为全球能量饮料领域的巨头,其品牌影响力遍及五大洲,产品畅销175个国家和地区。RedBull</div>
                    </li>
                    <li><a href="/article/1940522054478524416.htm"
                           title="10个可以快速用Python进行数据分析的小技巧_python 通径分析" target="_blank">10个可以快速用Python进行数据分析的小技巧_python 通径分析</a>
                        <span class="text-muted">2401_86043917</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>df.iplot()![](https://img-blog.csdnimg.cn/img_convert/f3c1ad79e3c29ed0231d72af2988f6f9.jpeg)![](https://img-blog.csdnimg.cn/img_convert/dd456c392a2ddd14c649270707520e48.jpeg)df.iplot()vsdf.plot()右侧的可视</div>
                    </li>
                    <li><a href="/article/1940521298090323968.htm"
                           title="用Rust写平衡三进制除法器" target="_blank">用Rust写平衡三进制除法器</a>
                        <span class="text-muted">qq_39858654</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%89%E8%BF%9B%E5%88%B6/1.htm">三进制</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E8%A1%A1%E4%B8%89%E8%BF%9B%E5%88%B6/1.htm">平衡三进制</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E8%BF%9B%E5%88%B6/1.htm">三进制</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>1、除法的本质除法的本质是减法,也就是一个大的数减去一个小的数,比如:10/2,也就是10-2-2-2-2-2=0,所以商5余0,10/3,也就是10-3-3-3=1,所以商3余1,这也是很常见的方法,但如果引入负数,情况又会有些变化,分成4种总结为2种:10/2=10-(2*1)-2-2-2-2=0商5余0,-10/-2=-10-(-2*1)+2+2+2+2=0商5余0,10/-2=10-(-2</div>
                    </li>
                    <li><a href="/article/1940520416632172544.htm"
                           title="【Python多线程】" target="_blank">【Python多线程】</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>
                        <div>文章目录前言一、Python等待event.set二、pythonracecondition和lock使用使用锁(Lock)三.pythonDeadLock使用等综合运用总结前言这篇技术文章讨论了多线程编程中的几个重要概念。它首先介绍了等待事件的使用,并强调了避免使用“ForLoop&Sleep”进行等待的重要性。接着,文档解释了竞态条件,并提供了处理共享资源的建议,即在使用共享资源时进行加锁和解</div>
                    </li>
                    <li><a href="/article/1940520164529336320.htm"
                           title="【pycharm专业版】【如何远程配置Python解释器】【SSH】" target="_blank">【pycharm专业版】【如何远程配置Python解释器】【SSH】</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/pycharm/1.htm">pycharm</a>
                        <div>Wejustlookedatconfiguringalocalinterpreter.Butwedon’talwayshavea“local”environment.Sometimes–andincreasinglyoften–ourenvironmentisoverthere.我们刚刚看了配置本地解释器。但我们并不总是有一个“本地”的环境。有时候–而且越来越多的时候–我们的环境就在那里。Let’</div>
                    </li>
                    <li><a href="/article/1940519030880268288.htm"
                           title="python线程同步锁_python的Lock锁,线程同步" target="_blank">python线程同步锁_python的Lock锁,线程同步</a>
                        <span class="text-muted">weixin_39649660</span>
<a class="tag" taget="_blank" href="/search/python%E7%BA%BF%E7%A8%8B%E5%90%8C%E6%AD%A5%E9%94%81/1.htm">python线程同步锁</a>
                        <div>一、Lock锁凡是存在共享资源争抢的地方都可以使用锁,从而保证只有一个使用者可以完全使用这个资源一旦线程获得锁,其他试图获取锁的线程将被阻塞acquire(blocking=True,timeout=-1):默认阻塞,阻塞可以设置超时时间,非阻塞时,timeout禁止设置,成功获取锁,返回True,否则返回Falsereleas():释放锁,可以从任何线程调用释放,已上锁的锁,会被重置为unloc</div>
                    </li>
                    <li><a href="/article/1940518651190898688.htm"
                           title="并发与并行:python多线程详解" target="_blank">并发与并行:python多线程详解</a>
                        <span class="text-muted">m_merlon</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6%E6%95%99%E7%A8%8B/1.htm">Python进阶教程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>简介多进程和多线程都可以执行多个任务,线程是进程的一部分。线程的特点是线程之间可以共享内存和变量,资源消耗少,缺点是线程之间的同步和加锁比较麻烦。在cpython中,截止到3.12为止依然存在全局解释器锁(GIL),不能发挥多核的优势,因此python多线程更适合IO密集型任务并发提高效率,CPU密集型任务推荐使用多进程并行解决。注:此说法仅适用于python(如:c++的多线程可以利用到多核并行</div>
                    </li>
                    <li><a href="/article/1940518271757381632.htm"
                           title="python多线程:生产者与消费者,高级锁定Condition、queue队列使用案例与注意事项" target="_blank">python多线程:生产者与消费者,高级锁定Condition、queue队列使用案例与注意事项</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
                        <div>高级锁定这是python中的另一种中锁定,就像是它的名字一样是可以有条件的condition,首先程序使用acquire进入锁定状态,如果需要符合一定的条件才处理数据,此时可以调用wait,让自己进入睡眠状态,程序设计时候需要用notify通知其他线程,然后放弃锁定release此时其他再等待的线程因为受到通知notify,这时候被激活了,就开始运作。生产者与消费者的设计程序用producer方法</div>
                    </li>
                    <li><a href="/article/1940518272541716480.htm"
                           title="python协程与异步并发,同步与阻塞,异步与非阻塞,Python异步IO、协程与同步原语介绍,协程的优势和劣势" target="_blank">python协程与异步并发,同步与阻塞,异步与非阻塞,Python异步IO、协程与同步原语介绍,协程的优势和劣势</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/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>协程与异步软件系统的并发使用异步IO,无非是我们提的软件系统的并发,这个软件系统,可以是网络爬虫,也可以是web服务等并发的方式有多种,多线程,多进程,异步IO等多线程和多进程更多应用于CPU密集型的场景,比如科学计算的事件都消耗在CPU上面,利用多核CPU来分担计算任务多线程和多进程之间的场景切换和通讯代价很高,不适合IO密集型的场景,而异步IO就是非常适合IO密集型的场景,例如网络爬虫和web</div>
                    </li>
                    <li><a href="/article/1940517767467823104.htm"
                           title="使用Python和FFmpeg实现RGB到YUV444的转换" target="_blank">使用Python和FFmpeg实现RGB到YUV444的转换</a>
                        <span class="text-muted">追逐程序梦想者</span>
<a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</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>使用Python和FFmpeg实现RGB到YUV444的转换如果你需要将RGB图像转换为YUV444格式的图像,那么本文将为你提供一个简单且可靠的方法。我们将使用Python和FFmpeg来完成这个任务。首先,让我们了解一下什么是RGB和YUV。RGB表示红、绿、蓝三种颜色的组合,是最常见的图像格式之一。另一方面,YUV是一种亮度-色度编码,用于视频压缩和传输,它将图像分成明亮度(Y)和色度(U和</div>
                    </li>
                    <li><a href="/article/1940517641093443584.htm"
                           title="如何利用ssh使得pycharm连接服务器的docker容器内部环境" target="_blank">如何利用ssh使得pycharm连接服务器的docker容器内部环境</a>
                        <span class="text-muted">SoulMatter</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a>
                        <div>如题,想要配置服务器的python编译器环境,来查看容器内部环境安装的包的情况。首先,需要确定容器的状态,使用dockerps查看,只有ports那一栏有内容才证明容器暴露了端口出来。如果没有暴露,就需要将容器打包成镜像,然后将镜像再启动一个容器才可以。步骤如下:如何打包镜像:(里面包括了将镜像从A服务器远程传输到B服务器后使用的方法,如果是在本服务器自己使用,那么忽略远程传输的步骤)#创建一个基</div>
                    </li>
                    <li><a href="/article/1940517514920390656.htm"
                           title="python多线程高级锁知识:Semaphore信号量、Barrier栅栏在线程中的使用、高级event事件" target="_blank">python多线程高级锁知识:Semaphore信号量、Barrier栅栏在线程中的使用、高级event事件</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>Semaphore信号量Semaphore信号量可以翻译为信号量,这个信号量代表了最多允许线程访问的数量,可以使用Semaphore(n)设定,n是信号数量,这是一个更高级的锁机制,Semaphore管理一个计数器,每次使用acquire计数器将会减一,表示可以允许线程访问的数量少了一个,使用release计数器加1,表示可允许线程访问的数量多了一个,只有占用信号量的线程数量超过信号量时候才会阻塞</div>
                    </li>
                    <li><a href="/article/1940515751102312448.htm"
                           title="大数据项目-Django基于大数据技术实现的农产品销售系统" target="_blank">大数据项目-Django基于大数据技术实现的农产品销售系统</a>
                        <span class="text-muted">IT实战课堂-玲琳娜</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">计算机毕业设计</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>《[含文档+PPT+源码等]Django基于大数据技术实现的农产品销售系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利!数据库管理工具:phpstudy/Navicat或者phpstudy/sqlyog后台管理系统涉及技术:后台使用框架:Django前端使用技术:Vue,HTML5,CSS3、JavaScrip</div>
                    </li>
                    <li><a href="/article/1940515752528375808.htm"
                           title="LangChain4j在Java企业应用中的实战指南-2" target="_blank">LangChain4j在Java企业应用中的实战指南-2</a>
                        <span class="text-muted">在未来等你</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">大模型应用开发</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/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/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a>
                        <div>LangChain4j在Java企业应用中的实战指南文章标签langchain4j,JavaAI,RAG系统,智能应用开发,LangChain4j实战,企业级AI应用,Java微服务,检索增强生成文章简述随着大语言模型(LLM)的广泛应用,企业对智能应用的需求日益增长。LangChain4j作为一款专为Java生态打造的LLM集成框架,正在成为构建RAG(检索增强生成)系统和智能应用的重要工具。本</div>
                    </li>
                    <li><a href="/article/1940511713472344064.htm"
                           title="axios的使用以及封装" target="_blank">axios的使用以及封装</a>
                        <span class="text-muted">whhhhhhhhhw</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a>
                        <div>前言:在现代前端开发中,网络请求是不可避免的核心功能之一。无论是获取后端数据、提交表单信息,还是与第三方API交互,高效且可靠的HTTP请求库至关重要。axios作为一款基于Promise的HTTP客户端,凭借其简洁的API设计、强大的拦截器机制以及广泛的浏览器和Node.js兼容性,成为开发者首选的工具之一。axios不仅提供了基础的GET、POST等请求方法,还支持请求和响应的拦截、取消请求、</div>
                    </li>
                    <li><a href="/article/1940511460534841344.htm"
                           title="JavaScript数组方法" target="_blank">JavaScript数组方法</a>
                        <span class="text-muted">whhhhhhhhhw</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><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>
                        <div>前言:JavaScript这门强大而灵活的编程语言中,数组(Array)无疑是最基础且使用最频繁的数据结构之一。它允许我们以有序的方式存储多个值,并提供了丰富的内置方法来操作这些值,包括但不限于添加、删除、搜索、遍历等。掌握JavaScript数组的方法,不仅能够提高我们的编程效率,还能让我们在处理复杂数据结构时更加得心应手。本文将全面解析JavaScript数组的各种常用方法,并通过实战示例展示</div>
                    </li>
                    <li><a href="/article/1940510956454998016.htm"
                           title="嵌入式AI模型压缩技术:让大模型变小" target="_blank">嵌入式AI模型压缩技术:让大模型变小</a>
                        <span class="text-muted">AI智能探索者</span>
<a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BD%93%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/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/ai/1.htm">ai</a>
                        <div>嵌入式AI模型压缩技术:让大模型变小关键词:嵌入式AI、模型压缩、剪枝、量化、知识蒸馏、轻量化网络、端侧部署摘要:当我们用手机拍照时,AI能瞬间识别出“这是一只猫”;智能摄像头能在0.1秒内检测到“有人闯入”。这些“快如闪电”的AI功能背后,藏着一项关键技术——嵌入式AI模型压缩。本文将用“给盆栽修剪枝叶”“用简笔画代替油画”等生活类比,带您一步步理解模型压缩的核心技术(剪枝、量化、知识蒸馏、轻量</div>
                    </li>
                    <li><a href="/article/1940510954764693504.htm"
                           title="python:assert和raise区别" target="_blank">python:assert和raise区别</a>
                        <span class="text-muted">Covirtue</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>assert和raise是在错误处理方面的两个不同的用法。assert是一种断言语句,用于在代码中检查一个条件是否为True。如果条件为False,它会引发一个AssertionError异常。assert主要用于调试目的,以确保代码的正确性。当代码被优化时,assert语句可能会被自动忽略。例如:```pythonx=5assertx>0,"x必须大于0"```如果x不大于0,将引发Assert</div>
                    </li>
                    <li><a href="/article/1940510955280592896.htm"
                           title="Python读取红外图像 - 实现红外图像的读取和处理" target="_blank">Python读取红外图像 - 实现红外图像的读取和处理</a>
                        <span class="text-muted">程序员杨弋</span>
<a class="tag" taget="_blank" href="/search/Python%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">Python全栈工程师学习指南</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a>
                        <div>在许多工业、安防等领域中,红外图像无疑是一种不可或缺的重要资源,因此,能够快速、准确地读取和处理红外图像,对于工程师和科学家来说非常必要。Python作为一种强大的编程语言,提供了丰富的图像处理库,允许我们轻松地读取和处理红外图像,本文将介绍如何使用Python读取红外图像,并对其进行简单的处理。首先需要准备一个目标红外图像文件,这里我们以bmp格式的文件为例:importcv2img=cv2.i</div>
                    </li>
                    <li><a href="/article/1940508940257259520.htm"
                           title="python raise和assert的区别" target="_blank">python raise和assert的区别</a>
                        <span class="text-muted">40kuai</span>

                        <div>python中raise和assert的区别一、使用raise抛出异常python可以自动触发异常,raise(内置函数)的定义为显示的抛出异常,用户可以使用raise进行判断,显式的引发异常,raise执行后程序将不再向下执行。式例:#!/usr/bin/envpython#-*-coding:utf-8-*-__author__='40kuai'books_dict={'name':'pyth</div>
                    </li>
                    <li><a href="/article/1940508310075666432.htm"
                           title="Android学习笔记" target="_blank">Android学习笔记</a>
                        <span class="text-muted">LXR小朋友</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>一、Android四大组件精要1.Activity生命周期:onCreate()→onStart()→onResume()→onPause()→onStop()→onDestroy()重点场景:屏幕旋转:onSaveInstanceState()保存临时数据返回栈管理:launchMode(standard/singleTop/singleTask/singleInstance)页面跳转:Inte</div>
                    </li>
                    <li><a href="/article/1940508055905038336.htm"
                           title="python解析风云4B生成真彩云图" target="_blank">python解析风云4B生成真彩云图</a>
                        <span class="text-muted">小天丶1</span>
<a class="tag" taget="_blank" href="/search/%E6%B0%94%E8%B1%A1%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">气象数据处理</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>文章目录概要话不多数开整小结概要真彩色云图需要根据通道Channel01,通道Channel02,通道Channel03进行通道融合处理,大致思路:三个通道对于RGB三个颜色管道,然后合并成一个三通道图像,其余云图在历史文档里有python解析风云4B,生成红外云图、可见光云图、水汽云图https://blog.csdn.net/qq_38197010/article/details/146549</div>
                    </li>
                                <li><a href="/article/112.htm"
                                       title="HQL之投影查询" target="_blank">HQL之投影查询</a>
                                    <span class="text-muted">归来朝歌</span>
<a class="tag" taget="_blank" href="/search/HQL/1.htm">HQL</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E8%AF%AD%E5%8F%A5/1.htm">查询语句</a><a class="tag" taget="_blank" href="/search/%E6%8A%95%E5%BD%B1%E6%9F%A5%E8%AF%A2/1.htm">投影查询</a>
                                    <div>        在HQL查询中,常常面临这样一个场景,对于多表查询,是要将一个表的对象查出来还是要只需要每个表中的几个字段,最后放在一起显示? 
针对上面的场景,如果需要将一个对象查出来: 
HQL语句写“from 对象”即可 
Session session = HibernateUtil.openSession();
		</div>
                                </li>
                                <li><a href="/article/239.htm"
                                       title="Spring整合redis" target="_blank">Spring整合redis</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
                                    <div>pom.xml 
 

<dependencies>
		<!-- Spring Data - Redis Library -->
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-redi</div>
                                </li>
                                <li><a href="/article/366.htm"
                                       title="org.hibernate.NonUniqueResultException: query did not return a unique result: 2" target="_blank">org.hibernate.NonUniqueResultException: query did not return a unique result: 2</a>
                                    <span class="text-muted">0624chenhong</span>
<a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>参考:http://blog.csdn.net/qingfeilee/article/details/7052736 
org.hibernate.NonUniqueResultException: query did not return a unique result: 2 
        在项目中出现了org.hiber</div>
                                </li>
                                <li><a href="/article/493.htm"
                                       title="android动画效果" target="_blank">android动画效果</a>
                                    <span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/android%E5%8A%A8%E7%94%BB/1.htm">android动画</a>
                                    <div>前几天弄alertdialog和popupwindow的时候,用到了android的动画效果,今天专门研究了一下关于android的动画效果,列出来,方便以后使用。 
 
Android 平台提供了两类动画。 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。 
第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似。 
 
</div>
                                </li>
                                <li><a href="/article/620.htm"
                                       title="js delete 删除机理以及它的内存泄露问题的解决方案" target="_blank">js delete 删除机理以及它的内存泄露问题的解决方案</a>
                                    <span class="text-muted">换个号韩国红果果</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>delete删除属性时只是解除了属性与对象的绑定,故当属性值为一个对象时,删除时会造成内存泄露  (其实还未删除) 
举例: 

var person={name:{firstname:'bob'}}
var p=person.name
delete person.name
p.firstname  -->'bob'
// 依然可以访问p.firstname,存在内存泄露</div>
                                </li>
                                <li><a href="/article/747.htm"
                                       title="Oracle将零干预分析加入网络即服务计划" target="_blank">Oracle将零干预分析加入网络即服务计划</a>
                                    <span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是,Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务(NaaS)平台,帮助企业以更灵活和更适合云的方式实现通信服务提供商(CSP)的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计</div>
                                </li>
                                <li><a href="/article/874.htm"
                                       title="spring学习——springmvc(二)" target="_blank">spring学习——springmvc(二)</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
                                    <div>Spring MVC提供了非常方便的文件上传功能。 
1,配置Spring支持文件上传: 
DispatcherServlet本身并不知道如何处理multipart的表单数据,需要一个multipart解析器把POST请求的multipart数据中抽取出来,这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器,需要声明一个实现了Mul</div>
                                </li>
                                <li><a href="/article/1001.htm"
                                       title="POJ-2828-Buy Tickets" target="_blank">POJ-2828-Buy Tickets</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/ACM_POJ/1.htm">ACM_POJ</a>
                                    <div>POJ-2828-Buy Tickets 
http://poj.org/problem?id=2828 
线段树,逆序插入 
 
#include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct</div>
                                </li>
                                <li><a href="/article/1128.htm"
                                       title="Java Ant build.xml详解" target="_blank">Java Ant build.xml详解</a>
                                    <span class="text-muted">asia007</span>
<a class="tag" taget="_blank" href="/search/build.xml/1.htm">build.xml</a>
                                    <div>1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的,所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多,可能你用了很久,你仍然不知道它能有</div>
                                </li>
                                <li><a href="/article/1255.htm"
                                       title="android按钮监听器的四种技术" target="_blank">android按钮监听器的四种技术</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/xml%E9%85%8D%E7%BD%AE/1.htm">xml配置</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">实现接口</a>
                                    <div>android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;  
  
1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似 
  
创建监听器的实例 
myLis lis = new myLis(); 
  
使用add方法给按钮添加监听器 
 </div>
                                </li>
                                <li><a href="/article/1382.htm"
                                       title="软件架构师不等同于资深程序员" target="_blank">软件架构师不等同于资深程序员</a>
                                    <span class="text-muted">bijian1013</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/%E6%9E%B6%E6%9E%84%E5%B8%88/1.htm">架构师</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a>
                                    <div>        本文的作者Armel Nene是ETAPIX Global公司的首席架构师,他居住在伦敦,他参与过的开源项目包括 Apache Lucene,,Apache Nutch, Liferay 和 Pentaho等。 
        如今很多的公司</div>
                                </li>
                                <li><a href="/article/1509.htm"
                                       title="TeamForge Wiki Syntax & CollabNet User Information Center" target="_blank">TeamForge Wiki Syntax & CollabNet User Information Center</a>
                                    <span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/TeamForge/1.htm">TeamForge</a><a class="tag" taget="_blank" href="/search/How+do/1.htm">How do</a><a class="tag" taget="_blank" href="/search/Attachement/1.htm">Attachement</a><a class="tag" taget="_blank" href="/search/Anchor/1.htm">Anchor</a><a class="tag" taget="_blank" href="/search/Wiki+Syntax/1.htm">Wiki Syntax</a>
                                    <div>the CollabNet user information center http://help.collab.net/ 
  
How do I create a new Wiki page? 
A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and</div>
                                </li>
                                <li><a href="/article/1636.htm"
                                       title="【Redis四】Redis数据类型" target="_blank">【Redis四】Redis数据类型</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
                                    <div>概述 
Redis是一个高性能的数据结构服务器,称之为数据结构服务器的原因是,它提供了丰富的数据类型以满足不同的应用场景,本文对Redis的数据类型以及对这些类型可能的操作进行总结。 
Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统,这里的数据类型指的是value的类型,而不是key的类型,key的类型只有一种即string</div>
                                </li>
                                <li><a href="/article/1763.htm"
                                       title="SSH2整合-附源码" target="_blank">SSH2整合-附源码</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a>
                                    <div>今天用eclipse终于整合出了struts2+hibernate+spring框架。 
我创建的是tomcat项目,需要有tomcat插件。导入项目以后,鼠标右键选择属性,然后再找到“tomcat”项,勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片,sql也在源码里。 
  
  
补充1:项目中部分jar包不是最新版的,可能导</div>
                                </li>
                                <li><a href="/article/1890.htm"
                                       title="[转]开源项目代码的学习方法" target="_blank">[转]开源项目代码的学习方法</a>
                                    <span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a>
                                    <div>转自: 
http://blog.sina.com.cn/s/blog_693458530100lk5m.html 
http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html 
  
1)阅读features。以此来搞清楚该项目有哪些特性2)思考。想想如果自己来做有这些features的项目该如何构架3)下载并安装d</div>
                                </li>
                                <li><a href="/article/2017.htm"
                                       title="编程之美-子数组的最大和(二维)" target="_blank">编程之美-子数组的最大和(二维)</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
                                    <div>package beautyOfCoding;

import java.util.Arrays;
import java.util.Random;

public class MaxSubArraySum2 {

	/**
	 * 编程之美 子数组之和的最大值(二维)
	 */
	private static final int ROW = 5;
	private stat</div>
                                </li>
                                <li><a href="/article/2144.htm"
                                       title="读书笔记-3" target="_blank">读书笔记-3</a>
                                    <span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/jquery%E7%AC%94%E8%AE%B0/1.htm">jquery笔记</a><a class="tag" taget="_blank" href="/search/resultMap%E9%85%8D%E7%BD%AE/1.htm">resultMap配置</a><a class="tag" taget="_blank" href="/search/ibatis%E4%B8%80%E5%AF%B9%E5%A4%9A%E9%85%8D%E7%BD%AE/1.htm">ibatis一对多配置</a>
                                    <div>1、resultMap配置 
2、ibatis一对多配置 
3、jquery笔记 
 
1、resultMap配置
当<select resultMap="topic_data">
<resultMap id="topic_data">必须一一对应。
(1)<resultMap class="tblTopic&q</div>
                                </li>
                                <li><a href="/article/2271.htm"
                                       title="[物理与天文]物理学新进展" target="_blank">[物理与天文]物理学新进展</a>
                                    <span class="text-muted">comsci</span>

                                    <div> 
 
      如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境 
 
      怎么办呢? 
 
 </div>
                                </li>
                                <li><a href="/article/2398.htm"
                                       title="Oracle 11g新特性:Automatic Diagnostic Repository" target="_blank">Oracle 11g新特性:Automatic Diagnostic Repository</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/ADR/1.htm">ADR</a>
                                    <div>Oracle Database 11g的FDI(Fault Diagnosability Infrastructure)是自动化诊断方面的又一增强。 
FDI的一个关键组件是自动诊断库(Automatic Diagnostic Repository-ADR)。 
 
在oracle 11g中,alert文件的信息是以xml的文件格式存在的,另外提供了普通文本格式的alert文件。 
这两份log文</div>
                                </li>
                                <li><a href="/article/2525.htm"
                                       title="简单排序:选择排序" target="_blank">简单排序:选择排序</a>
                                    <span class="text-muted">dieslrae</span>
<a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F/1.htm">选择排序</a>
                                    <div>
    public void selectSort(int[] array){
        int select;
        
        for(int i=0;i<array.length;i++){
            select = i;
            
            for(int k=i+1;k<array.leng</div>
                                </li>
                                <li><a href="/article/2652.htm"
                                       title="C语言学习六指针的经典程序,互换两个数字" target="_blank">C语言学习六指针的经典程序,互换两个数字</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                                    <div>示例程序,swap_1和swap_2都是错误的,推理从1开始推到2,2没完成,推到3就完成了 
# include <stdio.h>

void swap_1(int, int);
void swap_2(int *, int *);
void swap_3(int *, int *);

int main(void)
{
	int a = 3;
	int b = </div>
                                </li>
                                <li><a href="/article/2779.htm"
                                       title="php 5.4中php-fpm 的重启、终止操作命令" target="_blank">php 5.4中php-fpm 的重启、终止操作命令</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>php 5.4中php-fpm 的重启、终止操作命令: 
查看php运行目录命令:which php/usr/bin/php 
查看php-fpm进程数:ps aux | grep -c php-fpm 
查看运行内存/usr/bin/php  -i|grep mem 
重启php-fpm/etc/init.d/php-fpm restart 
在phpinfo()输出内容可以看到php</div>
                                </li>
                                <li><a href="/article/2906.htm"
                                       title="线程同步工具类" target="_blank">线程同步工具类</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8C%E6%AD%A5%E5%B7%A5%E5%85%B7%E7%B1%BB/1.htm">同步工具类</a>
                                    <div>同步工具类包括信号量(Semaphore)、栅栏(barrier)、闭锁(CountDownLatch) 
  
闭锁(CountDownLatch) 
public class RunMain {
	public long timeTasks(int nThreads, final Runnable task) throws InterruptedException {
		fin</div>
                                </li>
                                <li><a href="/article/3033.htm"
                                       title="bleeding edge是什么意思" target="_blank">bleeding edge是什么意思</a>
                                    <span class="text-muted">haojinghua</span>
<a class="tag" taget="_blank" href="/search/DI/1.htm">DI</a>
                                    <div>不止一次,看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件,上了wiki。  
我再一次感到,没有辞典能像WiKi一样,给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱,只好在此一一中英对照,给大家上次课。 
  
In computer science, bleeding edge is a term that </div>
                                </li>
                                <li><a href="/article/3160.htm"
                                       title="c中实现utf8和gbk的互转" target="_blank">c中实现utf8和gbk的互转</a>
                                    <span class="text-muted">jimmee</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/iconv/1.htm">iconv</a><a class="tag" taget="_blank" href="/search/utf8%26gbk%E7%BC%96%E7%A0%81/1.htm">utf8&gbk编码</a>
                                    <div>#include <iconv.h>
#include <stdlib.h>
#include <stdio.h>
#include <unistd.h>
#include <fcntl.h>
#include <string.h>
#include <sys/stat.h>

int code_c</div>
                                </li>
                                <li><a href="/article/3287.htm"
                                       title="大型分布式网站架构设计与实践" target="_blank">大型分布式网站架构设计与实践</a>
                                    <span class="text-muted">lilin530</span>
<a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a>
                                    <div>1.大型网站软件系统的特点? 
a.高并发,大流量。 
b.高可用。 
c.海量数据。 
d.用户分布广泛,网络情况复杂。 
e.安全环境恶劣。 
f.需求快速变更,发布频繁。 
g.渐进式发展。 
 
2.大型网站架构演化发展历程? 
a.初始阶段的网站架构。 
应用程序,数据库,文件等所有的资源都在一台服务器上。 
b.应用服务器和数据服务器分离。 
c.使用缓存改善网站性能。 
d.使用应用</div>
                                </li>
                                <li><a href="/article/3414.htm"
                                       title="在代码中获取Android theme中的attr属性值" target="_blank">在代码中获取Android theme中的attr属性值</a>
                                    <span class="text-muted">OliveExcel</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/theme/1.htm">theme</a>
                                    <div>Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西. 
  
在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: 
int defaultColor = 0xFF000000;
int[] attrsArray = { andorid.r.</div>
                                </li>
                                <li><a href="/article/3541.htm"
                                       title="基于Zookeeper的分布式共享锁" target="_blank">基于Zookeeper的分布式共享锁</a>
                                    <span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E5%85%B1%E4%BA%AB%E9%94%81/1.htm">共享锁</a>
                                    <div>首先,说说我们的场景,订单服务是做成集群的,当两个以上结点同时收到一个相同订单的创建指令,这时并发就产生了,系统就会重复创建订单。等等......场景。这时,分布式共享锁就闪亮登场了。 
  
共享锁在同一个进程中是很容易实现的,但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译,这里就不在赘述了。 
  
官</div>
                                </li>
                                <li><a href="/article/3668.htm"
                                       title="两个容易被忽略的MySQL知识" target="_blank">两个容易被忽略的MySQL知识</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>1、varchar(5)可以存储多少个汉字,多少个字母数字?     相信有好多人应该跟我一样,对这个已经很熟悉了,根据经验我们能很快的做出决定,比如说用varchar(200)去存储url等等,但是,即使你用了很多次也很熟悉了,也有可能对上面的问题做出错误的回答。     这个问题我查了好多资料,有的人说是可以存储5个字符,2.5个汉字(每个汉字占用两个字节的话),有的人说这个要区分版本,5.0</div>
                                </li>
                                <li><a href="/article/3795.htm"
                                       title="zoj 3827 Information Entropy(水题)" target="_blank">zoj 3827 Information Entropy(水题)</a>
                                    <span class="text-muted">阿尔萨斯</span>
<a class="tag" taget="_blank" href="/search/format/1.htm">format</a>
                                    <div> 题目链接:zoj 3827 Information Entropy 
 题目大意:三种底,计算和。 
 解题思路:调用库函数就可以直接算了,不过要注意Pi = 0的时候,不过它题目里居然也讲了。。。limp→0+plogb(p)=0,因为p是logp的高阶。 
#include <cstdio>
#include <cstring>
#include <cmath&</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>