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/1773613272952537088.htm"
title="【Python】一文详细介绍 py格式 文件" target="_blank">【Python】一文详细介绍 py格式 文件</a>
<span class="text-muted">高斯小哥</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E3%80%90%E9%AB%98%E8%B4%A8%E9%87%8F%E5%90%88%E9%9B%86%E3%80%91/1.htm">Python基础【高质量合集】</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8/1.htm">新手入门</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py</div>
</li>
<li><a href="/article/1773605468367814656.htm"
title="数据结构奇妙旅程之深入解析快速排序" target="_blank">数据结构奇妙旅程之深入解析快速排序</a>
<span class="text-muted">山间漫步人生路</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%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>
<div>快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo</div>
</li>
<li><a href="/article/1773604712310964224.htm"
title="python抓包与解包_Python—网络抓包与解包（pcap、dpkt）" target="_blank">python抓包与解包_Python—网络抓包与解包（pcap、dpkt）</a>
<span class="text-muted">weixin_39691055</span>
<a class="tag" taget="_blank" href="/search/python%E6%8A%93%E5%8C%85%E4%B8%8E%E8%A7%A3%E5%8C%85/1.htm">python抓包与解包</a>
<div>pcap安装[root@localhost~]#pipinstallpypcap抓包与解包#-*-coding:utf-8-*-importpcap,dpktimportre,threading,requests__black_ip=['103.224.249.123','203.66.1.212']#抓包：param1eth_name网卡名，如：eth0,eth3。param2p_type日志捕</div>
</li>
<li><a href="/article/1773582305621770240.htm"
title="华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++）" target="_blank">华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++）</a>
<span class="text-muted">华为OD题库</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总</div>
</li>
<li><a href="/article/1773576128875790336.htm"
title="你之所以胖，可能是因为小时候发生这件事！还不赶快甩锅" target="_blank">你之所以胖，可能是因为小时候发生这件事！还不赶快甩锅</a>
<span class="text-muted">周围_5d19</span>
<div>通常，我们认为，“肥胖”主要是由于饮食不节制、不经常运动等等因素引起的。但最近，我国学者开展的一项针对6到18岁儿童青少年、随访长达十年的代谢综合征研究结果，在权威国际期刊发表。研究发现，儿童的肥胖和超重与睡眠密切相关，儿童、青少年时期睡眠不好，成人后也更容易患心血管疾病。那么，为什么儿童青少年睡眠不足会导致肥胖呢？今天就带大家一探究竟。儿童青少年肥胖的现状如何？近日，一项刊载在医学权威期刊《柳叶</div>
</li>
<li><a href="/article/1773571355124498432.htm"
title="python 推导式(派生、衍生)" target="_blank">python 推导式(派生、衍生)</a>
<span class="text-muted">sanduo112</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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</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推导式一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式，可以从一个数据序列构建另一个新的数据序列的结构体。2.列表(list)推导式3.字典(dict)推导式4.集合(set)推导式5.元组(tuple)推导式二、代码概述一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式，可以从一个数据序列构建另一个新的数据序列的结构体。Python支持各种数</div>
</li>
<li><a href="/article/1773569718641295360.htm"
title="uni-app实现 步骤条" target="_blank">uni-app实现 步骤条</a>
<span class="text-muted">夏夏的码农</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
<div>实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st</div>
</li>
<li><a href="/article/1773561914471809024.htm"
title="数据分析：低代码平台助力大数据时代的飞跃发展" target="_blank">数据分析：低代码平台助力大数据时代的飞跃发展</a>
<span class="text-muted">快乐非自愿</span>
<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/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>随着信息技术的突飞猛进，我们身处于一个数据量空前增长的时代——大数据时代。在这个时代背景下，数据分析已经成为企业决策、政策制定、科学研究等众多领域不可或缺的重要工具。然而，面对海量的数据和日益复杂多变的分析需求，传统的数据分析方法往往捉襟见肘，难以应对。幸运的是，低代码平台的兴起为大数据分析注入了新的活力，成为推动大数据时代发展的重要力量。低代码平台，顾名思义，是一种通过少量甚至无需编写代码，就能</div>
</li>
<li><a href="/article/1773549956938924032.htm"
title="数据挖掘|数据预处理|基于Python的数据标准化方法" target="_blank">数据挖掘|数据预处理|基于Python的数据标准化方法</a>
<span class="text-muted">皖山文武</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BB%BA%E6%A8%A1%E4%B8%8E%E5%88%86%E6%9E%90/1.htm">数据建模与分析</a><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%E6%8C%96%E6%8E%98/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>基于Python的数据标准化方法1.z-score方法2.极差标准化方法3.最大绝对值标准化方法在数据分析之前，通常需要先将数据标准化（Standardization），利用标准化后的数据进行数据分析，以避免属性之间不同度量和取值范围差异造成数据对分析结果的影响。1.z-score方法Z-score方法是基于原始数据的均值和标准差来进行数据标准化的，处理后的数据均值为0，方差为1，符合标准正态分布</div>
</li>
<li><a href="/article/1773546005334130688.htm"
title="夫子庙前的金子招牌" target="_blank">夫子庙前的金子招牌</a>
<span class="text-muted">光中的cici</span>
<div>古城都不乏老招牌，比如苏杭，比如南京。随便一个都有久远的年代。夫子庙前，乌衣巷口，店肆成市招牌林立繁华重归来。难为我一个外地人，究竟该喝谁家的那碗鸭血粉丝汤呢？在网上研究了半天，选了秦淮人家。只因为三点：一，临河就着秦淮河喝鸭血汤就着秦淮河喝鸭血汤二，装修较其他一溜大白墙的店算讲究的了，我特别吃环境，没办法～三，有鸭血汤鸭血汤倒是有，夹杂在一套所谓的套餐里，不允许单独点菜。我是为了这秦淮河买的单，</div>
</li>
<li><a href="/article/1773545802220765184.htm"
title="C++学习笔记（lambda函数）" target="_blank">C++学习笔记（lambda函数）</a>
<span class="text-muted">__TAT__</span>
<a class="tag" taget="_blank" href="/search/C%26amp%3BC%2B%2B/1.htm">C&C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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>C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下：[capture_clause](parameters)->return_type{function_body}capture_clause：需要捕获的变量，但要求该变量必须在这个作用域中。通常的捕获方式有以下几种：[]：不捕获任何变量[&]：按引用捕获变</div>
</li>
<li><a href="/article/1773540012541935616.htm"
title="CSV指南：Python程序获取大型CSV文件行数" target="_blank">CSV指南：Python程序获取大型CSV文件行数</a>
<span class="text-muted">孤独打铁匠Julian</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>本指南提供了几种使用Python来获取大型CSV文件行数的方法，并解释了每种方法的适用场景。方法1:使用csv.reader处理复杂CSV文件当你的CSV文件中包含多行字段（即某些字段的值中包含换行符）时，使用csv.reader是一个可靠的选择，因为它能够正确处理这些复杂情况。这个方法适用于大多数大小的CSV文件，但是对于非常大的文件，读取整个文件可能会占用较多的时间和内存。对于极大的文件，考虑</div>
</li>
<li><a href="/article/1773522308468637696.htm"
title="ChatGPT一路狂飙？" target="_blank">ChatGPT一路狂飙？</a>
<span class="text-muted">何鲸洛</span>
<div>2月2日。根据投行瑞银集团在周三发布的一份研究报告。爆红聊天机器人ChatGPT的月活跃用户在今年1月份预计达到了1亿，这距离它推出只有2个月时间，成为史上增长最快的消费者应用。①ChatGPT一路火花带闪电？▽2014年。OpenAI创始人SamAltman早年曾执掌著名的硅谷孵化器YCombinator。2015年。Altman联合马斯克、彼得·泰尔、AWS、印度Infosys和YC等作为出资</div>
</li>
<li><a href="/article/1773521928447918080.htm"
title="2019.11.28感恩日记" target="_blank">2019.11.28感恩日记</a>
<span class="text-muted">afab5b74f713</span>
<div>1.感谢真我守护，一觉到天明，谢谢谢谢谢谢！2.感谢一大早，橘子就甩来4800的大红包，谢谢谢谢谢谢！3.感谢今天代理宝宝们疯狂加单，钱宝宝流入小十万，太牛了你们，有你们真好，谢谢谢谢谢谢！4.感谢自己拥有钱宝宝，可以去群里给宝宝们发红包，表达我的爱，谢谢谢谢谢谢钱宝宝爱我！5.感谢自己的细胞宝宝们，让我保持健康与活力，可以自由活动，活力满满，谢谢谢谢谢谢！6.感谢芬姐甩来订单，谢谢谢谢谢谢钱宝宝</div>
</li>
<li><a href="/article/1773515880156692480.htm"
title="以高质量调查研究助力组织工作提质增效" target="_blank">以高质量调查研究助力组织工作提质增效</a>
<span class="text-muted">木同木同</span>
<div>近日，中共中央办公厅印发了《关于在全党大兴调查研究的工作方案》(后简称《方案》），要求各地区各部门结合实际认真贯彻落实。调查研究是我们党的传家宝，是谋事之基、成事之道。组织部门作为党管干部的核心部门，肩负着管党员、管干部、管人才的重要职责，调查研究更是把握组织工作规律、破解组织工作难题的重要办法。要用好调查研究这一法宝，把准政治方向，贯穿问题导向，坚持实事求是，以高质量调查研究助力组织工作提质增效</div>
</li>
<li><a href="/article/1773514366096834560.htm"
title="买莆田鞋的app软件，三大app莆田鞋平台推荐给大家" target="_blank">买莆田鞋的app软件，三大app莆田鞋平台推荐给大家</a>
<span class="text-muted">腕表鞋屋</span>
<div>买莆田鞋的app软件，三大app莆田鞋平台推荐给大家，如毒app、亚马逊、潮鞋之家、鞋子货源app、淘宝等app都非常的好用，还有更多的可以购买莆田鞋子，莆田鞋在哪个app买好用，下面一起看看。微信:pt188x(下单赠送精美礼品)买莆田鞋的三大app软件：一、淘宝app。买莆田鞋当然少不了淘宝，建议大家不要直接去搜索莆田鞋，那样给出的结果是很少的。大家看上哪款鞋子的型号直接去搜索就可以了，然后按</div>
</li>
<li><a href="/article/1773510457089392640.htm"
title="中国大学：你站起来！" target="_blank">中国大学：你站起来！</a>
<span class="text-muted">立恒语文</span>
<div>我们先来看看中国大学对外国留学生的“奇葩”待遇。近日，有网友曝出吉林大学有要求中国学生起床后须叫醒外国留学生的服务。看完之后，真是让人大跌眼镜。有网友就直接质问：吉大是大学，还是酒店？中国学生是学生，还是服务员？外国留学生是来求学的，还是享受的？这不仅让人联想到最近一段时间以来网上频频曝出的许多中国大学对外国留学生的一些“奇葩”待遇，这里举几个比较有名的事例，以飨读者。1.山东大学的“三陪”制度，</div>
</li>
<li><a href="/article/1773504513622212608.htm"
title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a>
<span class="text-muted">黑夜照亮前行的路</span>
<a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a>
<div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div>
</li>
<li><a href="/article/1773504261557125120.htm"
title="谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程" target="_blank">谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程</a>
<span class="text-muted">pigerr杨</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/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/drivers/1.htm">drivers</a>
<div>ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装</div>
</li>
<li><a href="/article/1773501994674225152.htm"
title="虚拟 DOM 的优缺点有哪些" target="_blank">虚拟 DOM 的优缺点有哪些</a>
<span class="text-muted">咕噜签名分发</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优</div>
</li>
<li><a href="/article/1773501759415713792.htm"
title="00后的我和你们" target="_blank">00后的我和你们</a>
<span class="text-muted">三七_f4f4</span>
<div>大部分人认为，这个社会压力最大的莫过于90后。可能上有老下有小，可以正在被催婚。工作压力大。可是也有大部分00后也步入了社会，比起90后，他们更是迷茫，不知所措。虽没有来自家庭的压力，没有来自催婚的烦劳。可迷茫真的很可怕，不知道一会该干嘛，该想那些方面发展。觉得自己以后就这样碌碌无为了吗？就这样过一辈子吗？又不甘。图片发自App前几天在抖音上看见一个视频，他说姚明在苦练篮球。谁谁在苦练什么。问，你</div>
</li>
<li><a href="/article/1773500735770656768.htm"
title="大创项目推荐 深度学习 opencv python 公式识别(图像识别 机器视觉)" target="_blank">大创项目推荐 深度学习 opencv python 公式识别(图像识别 机器视觉)</a>
<span class="text-muted">laafeer</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>文章目录0前言1课题说明2效果展示3具体实现4关键代码实现5算法综合效果6最后0前言优质竞赛项目系列，今天要分享的是基于深度学习的数学公式识别算法实现该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：4分创新点：4分更多资料,项目分享：https://gitee.com/dancheng-senior/postgraduate1课题</div>
</li>
<li><a href="/article/1773495574226599936.htm"
title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a>
<span class="text-muted">所谓远行Misnearch</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div>
</li>
<li><a href="/article/1773489025814953984.htm"
title="新注册的阿里云账号有哪些优惠？阿里云新用户必看优惠大合集" target="_blank">新注册的阿里云账号有哪些优惠？阿里云新用户必看优惠大合集</a>
<span class="text-muted">阿里云最新优惠和活动汇总</span>
<div>很多用户看到阿里云各种活动中的云服务器、云数据库、企业邮箱等云产品都仅限新用户购买之后，都纷纷直接注册了阿里云新账号之后购买，其实，阿里云新用户不仅可以优惠购买活动中的各种云产品，还有很多优惠，下面是“阿里云最新优惠和活动汇总”整理汇总的阿里云新用户必看优惠大合集。新注册的阿里云账号在购买活动中的云产品之前，还有免费领云产品通用代金券、抽取无门槛代金券、免费试用云服务器和正式购买云服务器等阿里云产</div>
</li>
<li><a href="/article/1773481083162132480.htm"
title="大伟荐语5.10" target="_blank">大伟荐语5.10</a>
<span class="text-muted">求索大伟</span>
<div>【大伟荐语】我未曾见过一个早起、勤奋、谨慎、诚实的人抱怨命运不好，良好的品格，优良的习惯，坚强的意志，是不会被假设所谓的命运打败的。——富兰克林遐思：外部再强大、再厉害的敌人，经过艰苦卓绝的斗争就能打败它；而内部的敌人——自己，实是自己最大的敌人，惟有战胜自我方能傲然屹立不倒。自己身上的懒惰、拖延、萎靡，则是阻碍自己前行最大的障碍，而一步一步地把自身的消极因素一个个祛除，树立一个积极、主动、勇敢的</div>
</li>
<li><a href="/article/1773477427016695808.htm"
title="【真诚子】通晓鬼谷第七篇读书日记。" target="_blank">【真诚子】通晓鬼谷第七篇读书日记。</a>
<span class="text-muted">真诚子l通晓鬼谷</span>
<div>今天把个人品牌，从193读到208页，书的内容质量出奇的高，尤其是这一段。对标学习法，找一个比自己强，或者你期望成为的人进行模仿性学习，对标学习，不是到处，去找人对标兵学习很多人的优点，或是学习自己认为好的方面，而是找准一个对标高手，然后全方位的学习这个人。我在做品牌咨询时就对标，学习了一个在国内很有名的行业顶尖大咖。我先找到他公司的方案，进行完全模仿，连PPT的排版都一样，而且我只参照他一个人的</div>
</li>
<li><a href="/article/1773475780618158080.htm"
title="2018-11-18成长小组学习笔记" target="_blank">2018-11-18成长小组学习笔记</a>
<span class="text-muted">实验中学45</span>
<div>因为嗓子“罢工”，我面对众人只能借“微笑”代言。在开始授课前，绣霞老师先反馈上次作业的情况，提到“接纳”需是真正发自内心的完全接纳，而不是口头上的接纳，内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”，夫妻间的问题不能影响到孩子，对孩子更好的爱不是你为他做的更多，而是给他自由、健康成长的空间。图片发自App一、孩子：家庭的一面镜子夫妻成了彼此的“投射”，婚姻便“吵的不可开交”，婚姻便成</div>
</li>
<li><a href="/article/1773475527634518016.htm"
title="石墨烯薄膜行业调研报告（一）" target="_blank">石墨烯薄膜行业调研报告（一）</a>
<span class="text-muted">方象知产研究院</span>
<div>01石墨烯类别（一）按厚度1.单碳层石墨烯（singlelayergraphene）：由单个碳原子层构成的大平面共轭结构材料，目前石墨烯的大多数奇特性质都是基于此材料2.多层石墨烯或少数碳层石墨烯（afewlayergraphene）：厚度在2~10碳层的石墨薄片材料，研究表明，其层内电子运动行为有别于石墨烯材料3.石墨烯微片（graphenenonaplatelets）：厚度在10~100纳米厚</div>
</li>
<li><a href="/article/1773471029155397632.htm"
title="网络安全（黑客）——自学2024" target="_blank">网络安全（黑客）——自学2024</a>
<span class="text-muted">小言同学喜欢挖漏洞</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</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%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a>
<div>01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一</div>
</li>
<li><a href="/article/1773470776930926592.htm"
title="黑客（网络安全）技术自学30天" target="_blank">黑客（网络安全）技术自学30天</a>
<span class="text-muted">一个迷人的黑客</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a>
<div>01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一</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>