Python开发学习笔记（14）———— html和css
1.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>
<p><code><div></code>标签 块元素，表示一块内容，没有具体的语义<br> <code><span></code>标签 行内元素，表示一行中的一小段内容，没有具体的语义<br> p段落标签有样式，行距等，div块标签没有样式。</p>
<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><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><code><a></code> 定义一个链接地址<br> 常用属性<br> <code>href</code>属性 定义跳转的地址<br> <code>title</code>属性 定义鼠标悬停时弹出的提示文字框<br> <code>target</code>属性 定义链接窗口打开的位置<br> <code>target=”self”</code> 缺省值，新页面替换原来的页面，在原来的位置打开<br> <code>target=”_blank”</code>新页面会在新开的一个浏览器窗口打开<br> 跳转到页面顶部</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>
<p><code><table></code>声明一个表格<br> 属性：<br> <code>border</code> 定义表格的边框，设置值是数值<br> <code>cellpadding</code> 定义单元格内容与边框的距离，设置值是数值<br> <code>cellspacing</code> 定义单元格与单元格之间的距离，设置值是数值<br> <code>align</code> 设置整体表格相对于浏览器窗口的水平对齐方式，设置值有left|center|right<br> <code><tr></code> 定义表格的一行<br> <code><td></code> 定义一行中的一个单元格，td代表普通单元格，th表示表头单元格。<br> 属性：<br> <code>align</code> 设置单元格中内容的水平对齐方式，设置值有left|center|right<br> <code>valign</code> 设置单元格中内容的垂直对齐方式 top|middle|bottom<br> <code>colspan</code> 设置单元格水平合并，设置值是数值<br> <code>rowspan</code> 设置单元格垂直合并，设置值是数值<br> 快捷操作：<code>table>(tr>td*5)*6</code> 创建6行5列的表格</p>
<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 }
</style>
</code></pre>
<h5>3>内联式</h5>
<p>通过标签的style属性，在标签上直接写样式</p>
<pre><code><div style=”width:100px; height:100px; color:red”>……</div>
</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>
<p>width：200px<br> height：200px</p>
<h4>3）设置边框</h4>
<p>border-top：10px solid #000； 设置顶边框10px粗，实线，黑色<br> border-left：10px dashed #000； 虚线<br> border-right：10px dotted #000；点线<br> border-bottom 底部边框<br> border：10px solid #000； 同时设置四个边</p>
<h4>4）内容和边框间距</h4>
<p>padding-top、padding-left、padding-right、padding-bottom<br> 修改之后整体盒子变大，width和height设置的是内容的宽高。<br> 可以使用padding直接设置，顺时针设置。<br> padding：20px 80px 100px；这是设置上边、左右、下边的距离<br> padding：20px；这是同时设置四条边的距离</p>
<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>
<p>margin：50px auto 100px<br> 左右边框会随着总界面大小的变化而变化。<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>.clearfix:after{
content:””;
display:table;
clear:both;
}
</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>
<p>background-color 设置背景颜色<br> background-image 设置背景图片地址<br> background-repeat 设置背景图片如何重复平铺<br> background-position 设置背景图片的位置，水平方向“left、center、right”，垂直方向“top、center、bottom”。<br> background-attachment 设置背景图片是固定还是随着页面滚动条滚动<br> position属性中，左右移动时，负值向左，正值向右。上下移动时，负值向上，正值向下。</p>
<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><label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><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="1620518666162438144"></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">你可能感兴趣的:(python学习过程,前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1950233451282100224.htm"
title="python 读excel每行替换_Python脚本操作Excel实现批量替换功能" target="_blank">python 读excel每行替换_Python脚本操作Excel实现批量替换功能</a>
<span class="text-muted">weixin_39646695</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%AF%BBexcel%E6%AF%8F%E8%A1%8C%E6%9B%BF%E6%8D%A2/1.htm">读excel每行替换</a>
<div>Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的</div>
</li>
<li><a href="/article/1950232190038110208.htm"
title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a>
<span class="text-muted">universe_01</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div>
</li>
<li><a href="/article/1950208107430866944.htm"
title="python笔记14介绍几个魔法方法" target="_blank">python笔记14介绍几个魔法方法</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笔记14介绍几个魔法方法先声明一下各位大佬，这是我的笔记。如有错误，恳请指正。另外，感谢您的观看，谢谢啦！(1).__doc__输出对应的函数，类的说明文档print(print.__doc__)print(value,...,sep='',end='\n',file=sys.stdout,flush=False)Printsthevaluestoastream,ortosys.std</div>
</li>
<li><a href="/article/1950204954295726080.htm"
title="Anaconda 和 Miniconda：功能详解与选择建议" target="_blank">Anaconda 和 Miniconda：功能详解与选择建议</a>
<span class="text-muted">古月฿</span>
<a class="tag" taget="_blank" href="/search/python%E5%85%A5%E9%97%A8/1.htm">python入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a>
<div>Anaconda和Miniconda详细介绍一、Anaconda的详细介绍1.什么是Anaconda？Anaconda是一个开源的包管理和环境管理工具，在数据科学、机器学习以及科学计算领域发挥着关键作用。它以Python和R语言为基础，为用户精心准备了大量预装库和工具，极大地缩短了搭建数据科学环境的时间。对于那些想要快速开展数据分析、模型训练等工作的人员来说，Anaconda就像是一个一站式的“数</div>
</li>
<li><a href="/article/1950204701714739200.htm"
title="环境搭建 | Python + Anaconda / Miniconda + PyCharm 的安装、配置与使用" target="_blank">环境搭建 | Python + Anaconda / Miniconda + PyCharm 的安装、配置与使用</a>
<span class="text-muted"></span>
<div>本文将分别介绍Python、Anaconda/Miniconda、PyCharm的安装、配置与使用，详细介绍Python环境搭建的全过程，涵盖Python、Pip、PythonLauncher、Anaconda、Miniconda、Pycharm等内容，以官方文档为参照，使用经验为补充，内容全面而详实。由于图片太多，就先贴一个无图简化版吧，详情请查看Python+Anaconda/Minicond</div>
</li>
<li><a href="/article/1950202938265759744.htm"
title="你竟然还在用克隆删除？Conda最新版rename命令全攻略！" target="_blank">你竟然还在用克隆删除？Conda最新版rename命令全攻略！</a>
<span class="text-muted">曦紫沐</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">Python基础知识</a><a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E7%AE%A1%E7%90%86/1.htm">虚拟环境管理</a>
<div>文章摘要Conda虚拟环境管理终于迎来革命性升级！本文揭秘Conda4.9+版本新增的rename黑科技，彻底告别传统“克隆+删除”的繁琐操作。从命令解析到实战案例，手把手教你如何安全高效地重命名Python虚拟环境，附带版本检测、环境迁移、故障排查等进阶技巧，助你提升开发效率10倍！一、颠覆认知：Conda居然自带重命名功能？很多开发者仍停留在“Conda无法直接重命名环境”的认知阶段，实际上自</div>
</li>
<li><a href="/article/1950202054706262016.htm"
title="centos7安装配置 Anaconda3" target="_blank">centos7安装配置 Anaconda3</a>
<span class="text-muted"></span>
<div>Anaconda是一个用于科学计算的Python发行版,Anaconda于Python，相当于centos于linux。下载[root@testsrc]#mwgethttps://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-5.2.0-Linux-x86_64.shBegintodownload:Anaconda3-5.2.0-L</div>
</li>
<li><a href="/article/1950202054219722752.htm"
title="Pandas：数据科学的超级瑞士军刀" target="_blank">Pandas：数据科学的超级瑞士军刀</a>
<span class="text-muted">科技林总</span>
<a class="tag" taget="_blank" href="/search/DeepSeek%E5%AD%A6AI/1.htm">DeepSeek学AI</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>**——从零基础到高效分析的进化指南**###**一、Pandas诞生：数据革命的救世主****2010年前的数据分析噩梦**：```python#传统Python处理表格数据data=[]forrowincsv_file:ifrow[3]>100androw[2]=="China":data.append(float(row[5])#代码冗长易错！```**核心痛点**：-Excel处理百万行崩</div>
</li>
<li><a href="/article/1950195876991397888.htm"
title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a>
<span class="text-muted">TIM老师</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a>
<div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div>
</li>
<li><a href="/article/1950195246893690880.htm"
title="30 岁转行编程来得及吗？这位宝妈的经历告诉你答案" target="_blank">30 岁转行编程来得及吗？这位宝妈的经历告诉你答案</a>
<span class="text-muted">大力出奇迹985</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
<div>30岁转行编程是否可行？本文通过一位宝妈的真实经历给出答案。这位宝妈在30岁时，因职业发展瓶颈和对编程的兴趣，毅然决定转行。她克服了学习中的诸多困难，平衡家庭与学习，最终成功入职科技公司。文章详细讲述了她的转行动机、学习过程、求职经历及收获，证明了只要有决心和正确方法，30岁转行编程完全来得及，为有类似想法的人提供了实用参考。正文一、转行的契机：职业瓶颈与心中热爱的碰撞30岁的林悦（化名）曾是一家</div>
</li>
<li><a href="/article/1950194363237724160.htm"
title="用 Python 开发小游戏：零基础也能做出《贪吃蛇》" target="_blank">用 Python 开发小游戏：零基础也能做出《贪吃蛇》</a>
<span class="text-muted"></span>
<div>本文专为零基础学习者打造，详细介绍如何用Python开发经典小游戏《贪吃蛇》。无需复杂编程知识，从环境搭建到代码编写、功能实现，逐步讲解核心逻辑与操作。涵盖Pygame库的基础运用、游戏界面设计、蛇的移动与食物生成规则等，让新手能按步骤完成开发，同时融入SEO优化要点，帮助读者轻松入门Python游戏开发，体验从0到1做出游戏的乐趣。一、为什么选择用Python开发《贪吃蛇》对于零基础学习者来说，</div>
</li>
<li><a href="/article/1950193733681082368.htm"
title="基于Python的AI健康助手：开发与部署全攻略" target="_blank">基于Python的AI健康助手：开发与部署全攻略</a>
<span class="text-muted">AI算力网络与通信</span>
<a class="tag" taget="_blank" href="/search/AI%E7%AE%97%E5%8A%9B%E7%BD%91%E7%BB%9C%E4%B8%8E%E9%80%9A%E4%BF%A1%E5%8E%9F%E7%90%86/1.htm">AI算力网络与通信原理</a><a class="tag" taget="_blank" href="/search/AI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%A4%A7%E6%95%B0%E6%8D%AE%E6%9E%B6%E6%9E%84/1.htm">AI人工智能大数据架构</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>基于Python的AI健康助手：开发与部署全攻略关键词：Python、AI健康助手、机器学习、自然语言处理、Flask、部署、健康管理摘要：本文将详细介绍如何使用Python开发一个AI健康助手，从需求分析、技术选型到核心功能实现，再到最终部署上线的完整过程。我们将使用自然语言处理技术理解用户健康咨询，通过机器学习模型提供个性化建议，并展示如何用Flask框架构建Web应用接口。文章包含大量实际代</div>
</li>
<li><a href="/article/1950192849786040320.htm"
title="AI人工智能中的数据挖掘：提升智能决策能力" target="_blank">AI人工智能中的数据挖掘：提升智能决策能力</a>
<span class="text-muted"></span>
<div>AI人工智能中的数据挖掘：提升智能决策能力关键词：数据挖掘、人工智能、机器学习、智能决策、数据分析、特征工程、模型优化摘要：本文深入探讨了数据挖掘在人工智能领域中的核心作用，重点分析了如何通过数据挖掘技术提升智能决策能力。文章从基础概念出发，详细介绍了数据挖掘的关键算法、数学模型和实际应用场景，并通过Python代码示例展示了数据挖掘的全流程。最后，文章展望了数据挖掘技术的未来发展趋势和面临的挑战</div>
</li>
<li><a href="/article/1950192217708621824.htm"
title="lesson20：Python函数的标注" target="_blank">lesson20：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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录引言：为什么函数标注是现代Python开发的必备技能一、函数标注的基础语法1.1参数与返回值标注1.2支持的标注类型1.3Python3.9+的重大改进：标准集合泛型二、高级标注技巧与最佳实践2.1复杂参数结构标注2.2函数类型与回调标注2.3变量注解与类型别名三、静态类型检查工具应用3.1mypy：最流行的类型检查器3.2Pyright与IDE集成3.3运行时类型验证四、函数标注的工程价值与</div>
</li>
<li><a href="/article/1950191208873652224.htm"
title="vue element 封装表单" target="_blank">vue element 封装表单</a>
<span class="text-muted">影子信息</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div>
</li>
<li><a href="/article/1950191165710069760.htm"
title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a>
<span class="text-muted">浪子神剑</span>
<div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div>
</li>
<li><a href="/article/1950190325960077312.htm"
title="Jupyter Notebook：数据科学的“瑞士军刀”" target="_blank">Jupyter Notebook：数据科学的“瑞士军刀”</a>
<span class="text-muted">a小胡哦</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/1.htm">机器学习基础</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
<div>在数据科学的世界里，JupyterNotebook是一个不可或缺的工具，它就像是数据科学家手中的“瑞士军刀”，功能强大且灵活多变。今天，就让我们一起深入了解这个神奇的工具。一、JupyterNotebook是什么？JupyterNotebook是一个开源的Web应用程序，它允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。它支持多种编程语言，其中Python是最常用的语言之一。Jupy</div>
</li>
<li><a href="/article/1950187554129113088.htm"
title="Django学习笔记（一）" target="_blank">Django学习笔记（一）</a>
<span class="text-muted"></span>
<div>学习视频为：pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注：一个project</div>
</li>
<li><a href="/article/1950185789447008256.htm"
title="Python 程序设计讲义（26）：字符串的用法——字符的编码" target="_blank">Python 程序设计讲义（26）：字符串的用法——字符的编码</a>
<span class="text-muted">睿思达DBA_WGX</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%AE%B2%E4%B9%89/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>Python程序设计讲义（26）：字符串的用法——字符的编码目录Python程序设计讲义（26）：字符串的用法——字符的编码一、字符的编码二、`ASCII`编码三、`Unicode`编码四、使用`ord()`函数查询一个字符对应的`Unicode`编码五、使用`chr()`函数查询一个`Unicode`编码对应的字符六、`Python`字符串的特征一、字符的编码计算机默认只能处理二进制数，而不能处</div>
</li>
<li><a href="/article/1950183898780594176.htm"
title="【Python】pypinyin-汉字拼音转换工具" target="_blank">【Python】pypinyin-汉字拼音转换工具</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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a>
<div>文章目录1.主要功能2.安装3.常用API3.1拼音风格3.2核心API3.2.1pypinyin.pinyin()3.2.2pypinyin.lazy_pinyin()3.2.3pypinyin.load_single_dict()3.2.4pypinyin.load_phrases_dict()3.2.5pypinyin.slug()3.3注册新的拼音风格4.基本用法4.1库导入4.2基本汉字</div>
</li>
<li><a href="/article/1950183268448006144.htm"
title="python编程第十四课：数据可视化" target="_blank">python编程第十四课：数据可视化</a>
<span class="text-muted">小小源助手</span>
<a class="tag" taget="_blank" href="/search/Python%E4%BB%A3%E7%A0%81%E5%AE%9E%E4%BE%8B/1.htm">Python代码实例</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/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>Python数据可视化：让数据“开口说话”在当今数据爆炸的时代，数据可视化已成为探索数据规律、传达数据信息的关键技术。Python凭借其丰富的第三方库，为数据可视化提供了强大而灵活的解决方案。本文将带你深入了解Matplotlib库的基础绘图、Seaborn库的高级可视化以及交互式可视化工具Plotly，帮助你通过图表清晰地展示数据背后的故事。一、Matplotlib库基础绘图Matplotlib</div>
</li>
<li><a href="/article/1950183016382918656.htm"
title="大学生入门：初识方法及其易踩坑的点" target="_blank">大学生入门：初识方法及其易踩坑的点</a>
<span class="text-muted"></span>
<div>在java学习过程中，我们不难发现有很多重复使用的功能代码块，每次使用如果都要重新写一遍，岂不是很麻烦，就算是“cv”大法，感觉也不是很方便，那么，有什么办法可以解决这个问题呢？方法！java中，一段可重用的，用于执行特定功能的代码块叫做方法，它可以接收参数、返回结果，并且可以被多次使用。一、方法的基本结构[修饰符]返回值类型方法名([参数列表])[throws异常类型]{//方法体}[throw</div>
</li>
<li><a href="/article/1950180118999658496.htm"
title="Python数据可视化：用代码绘制数据背后的故事" target="_blank">Python数据可视化：用代码绘制数据背后的故事</a>
<span class="text-muted">AAEllisonPang</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/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>引言：当数据会说话在数据爆炸的时代，可视化是解锁数据价值的金钥匙。Python凭借其丰富的可视化生态库，已成为数据科学家的首选工具。本文将带您从基础到高级，探索如何用Python将冰冷数字转化为引人入胜的视觉叙事。一、基础篇：二维可视化的艺术表达1.1Matplotlib：可视化领域的瑞士军刀importmatplotlib.pyplotaspltimportnumpyasnpx=np.linsp</div>
</li>
<li><a href="/article/1950179614320029696.htm"
title="python学习笔记（汇总）" target="_blank">python学习笔记（汇总）</a>
<span class="text-muted">朕的剑还未配妥</span>
<a class="tag" taget="_blank" href="/search/python%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E6%95%B4%E7%90%86/1.htm">python学习笔记整理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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中的数据类型三.运算符四.程序的控制结构五.列表六.字典七.元组八.集合九.字符串十.函数十一.解决bug一.基础知识print函数字符串要加引号，数字可不加引号，如print(123.4)print('小谢')print("洛天依")还可输入表达式，如print(1+3)如果使用三引号，print打印的内容可不在同一行print("line1line2line</div>
</li>
<li><a href="/article/1950178477592342528.htm"
title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a>
<span class="text-muted"></span>
<div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div>
</li>
<li><a href="/article/1950175199089455104.htm"
title="PDF转Markdown - Python 实现方案与代码" target="_blank">PDF转Markdown - Python 实现方案与代码</a>
<span class="text-muted">Eiceblue</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/PDF/1.htm">PDF</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</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><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a>
<div>PDF作为广泛使用的文档格式，转换为轻量级标记语言Markdown后，可无缝集成到技术文档、博客平台和版本控制系统中，提高内容的可编辑性和可访问性。本文将详细介绍如何使用国产Spire.PDFforPython库将PDF文档转换为Markdown格式。技术优势：精准保留原始文档结构（段落/列表/表格）完整提取文本和图像内容无需Adobe依赖的纯Python实现支持Linux/Windows/mac</div>
</li>
<li><a href="/article/1950174441992417280.htm"
title="使用Python和Gradio构建实时数据可视化工具" target="_blank">使用Python和Gradio构建实时数据可视化工具</a>
<span class="text-muted">PythonAI编程架构实战家</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/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><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>使用Python和Gradio构建实时数据可视化工具关键词：Python、Gradio、数据可视化、实时数据、Web应用、交互式界面、数据科学摘要：本文将详细介绍如何使用Python和Gradio框架构建一个实时数据可视化工具。我们将从基础概念开始，逐步深入到核心算法实现，包括数据处理、可视化技术以及Gradio的交互式界面设计。通过实际项目案例，读者将学习如何创建一个功能完整、响应迅速的实时数据</div>
</li>
<li><a href="/article/1950174315609649152.htm"
title="Python Gradio：实现交互式图像编辑" target="_blank">Python Gradio：实现交互式图像编辑</a>
<span class="text-muted">PythonAI编程架构实战家</span>
<a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/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><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>PythonGradio：实现交互式图像编辑关键词：Python,Gradio,交互式图像编辑,计算机视觉,深度学习,图像处理,Web应用摘要：本文将深入探讨如何使用Python的Gradio库构建交互式图像编辑应用。我们将从基础概念开始，逐步介绍Gradio的核心功能，并通过实际代码示例展示如何实现各种图像处理功能。文章将涵盖图像滤镜应用、对象检测、风格迁移等高级功能，同时提供完整的项目实战案例</div>
</li>
<li><a href="/article/1950174063116742656.htm"
title="数据可视化：数据世界的直观呈现" target="_blank">数据可视化：数据世界的直观呈现</a>
<span class="text-muted">卢政权1</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</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/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
<div>在当今数字化浪潮中，数据呈爆炸式增长。数据可视化作为一种强大的技术手段，能够将复杂的数据转化为直观的图形、图表等形式，让数据背后的信息一目了然。无论是在商业决策、科学研究还是日常数据分析中，数据可视化都发挥着极为重要的作用。它帮助我们快速理解数据的分布、趋势、关联等特征，从而为进一步的分析和行动提供有力支持。接下来，我们将深入探讨数据可视化的奥秘，并通过代码示例展示其实际应用。一、Python数据</div>
</li>
<li><a href="/article/1950172300749893632.htm"
title="Python 程序设计讲义（25）：循环结构——嵌套循环" target="_blank">Python 程序设计讲义（25）：循环结构——嵌套循环</a>
<span class="text-muted"></span>
<div>Python程序设计讲义（25）：循环结构——嵌套循环目录Python程序设计讲义（25）：循环结构——嵌套循环一、嵌套循环的执行流程二、嵌套循环对应的几种情况1、内循环和外循环互不影响2、外循环迭代影响内循环的条件3、外循环迭代影响内循环的循环体嵌套循环是指在一个循环体中嵌套另一个循环。while循环中可以嵌入另一个while循环或for循环。反之，也可以在for循环中嵌入另一个for循环或wh</div>
</li>
<li><a href="/article/80.htm"
title="java杨辉三角" target="_blank">java杨辉三角</a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a>
<div>
package com.algorithm;
/**
* @Description 杨辉三角
* @author FuJianyong
* 2015-1-22上午10:10:59
*/
public class YangHui {
public static void main(String[] args) {
//初始化二维数组长度
int[][] y</div>
</li>
<li><a href="/article/207.htm"
title="《大话重构》之大布局的辛酸历史" target="_blank">《大话重构》之大布局的辛酸历史</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a>
<div>《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。
背景
公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中</div>
</li>
<li><a href="/article/334.htm"
title="电驴链接在线视频播放源码" target="_blank">电驴链接在线视频播放源码</a>
<span class="text-muted">dubinwei</span>
<a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E9%A9%B4/1.htm">电驴</a><a class="tag" taget="_blank" href="/search/%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">播放器</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91/1.htm">视频</a><a class="tag" taget="_blank" href="/search/ed2k/1.htm">ed2k</a>
<div>本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网：
http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。
项目源码：
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。
项目源码依赖于两个库项目，库项目一链接：
http://git.oschina.</div>
</li>
<li><a href="/article/461.htm"
title="Javascript中函数的toString()方法" target="_blank">Javascript中函数的toString()方法</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/toString/1.htm">toString</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a><a class="tag" taget="_blank" href="/search/object/1.htm">object</a>
<div>简述
The toString() method returns a string representing the source code of the function.
简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。
句法
function.</div>
</li>
<li><a href="/article/588.htm"
title="struts处理自定义异常" target="_blank">struts处理自定义异常</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a>
<div>很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。
非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。
此处我们用的是非运行时异常，首先定义一个异常LoginException:
/**
* 类描述：登录相</div>
</li>
<li><a href="/article/715.htm"
title="Linux中find常见用法示例" target="_blank">Linux中find常见用法示例</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux中find常见用法示例
·find path -option [ -print ] [ -exec -ok command ] {} \;
find命令的参数；</div>
</li>
<li><a href="/article/842.htm"
title="SpringMVC的各种参数绑定方式" target="_blank">SpringMVC的各种参数绑定方式</a>
<span class="text-muted">Harry642</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a><a class="tag" taget="_blank" href="/search/%E7%BB%91%E5%AE%9A/1.htm">绑定</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95/1.htm">表单</a>
<div>1. 基本数据类型(以int为例，其他类似)：
Controller代码：
@RequestMapping("saysth.do")
public void test(int count) {
}
表单代码：
<form action="saysth.do" method="post&q</div>
</li>
<li><a href="/article/969.htm"
title="Java 获取Oracle ROWID" target="_blank">Java 获取Oracle ROWID</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row.
The oracle.sql.ROWID class i</div>
</li>
<li><a href="/article/1096.htm"
title="java获取方法的参数名" target="_blank">java获取方法的参数名</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/parameter/1.htm">parameter</a><a class="tag" taget="_blank" href="/search/method/1.htm">method</a><a class="tag" taget="_blank" href="/search/reflect/1.htm">reflect</a>
<div>reflect.ClassInformationUtil.java
package reflect;
import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt</div>
</li>
<li><a href="/article/1223.htm"
title="JAVA正则表达式匹配 查找 替换 提取操作" target="_blank">JAVA正则表达式匹配 查找 替换 提取操作</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a><a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8F%96/1.htm">提取</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE/1.htm">查找</a>
<div>正则表达式的查找;主要是用到String类中的split();
String str;
str.split();方法中传入按照什么规则截取,返回一个String数组
常见的截取规则:
str.split("\\.")按照.来截取
str.</div>
</li>
<li><a href="/article/1350.htm"
title="Java中equals()与hashCode()方法详解" target="_blank">Java中equals()与hashCode()方法详解</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/set/1.htm">set</a><a class="tag" taget="_blank" href="/search/equals%28%29/1.htm">equals()</a><a class="tag" taget="_blank" href="/search/hashCode%28%29/1.htm">hashCode()</a>
<div>一.equals()方法详解
equals()方法在object类中定义如下：
public boolean equals(Object obj) {
return (this == obj);
}
很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I</div>
</li>
<li><a href="/article/1477.htm"
title="精通Oracle10编程SQL(4)使用SQL语句" target="_blank">精通Oracle10编程SQL(4)使用SQL语句</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a>
<div>--工资级别表
create table SALGRADE
(
GRADE NUMBER(10),
LOSAL NUMBER(10,2),
HISAL NUMBER(10,2)
)
insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser</div>
</li>
<li><a href="/article/1604.htm"
title="【Nginx二】Nginx作为静态文件HTTP服务器" target="_blank">【Nginx二】Nginx作为静态文件HTTP服务器</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/HTTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">HTTP服务器</a>
<div> Nginx作为静态文件HTTP服务器
在本地系统中创建/data/www目录，存放html文件(包括index.html)
创建/data/images目录，存放imags图片
在主配置文件中添加http指令
http {
server {
listen 80;
server_name </div>
</li>
<li><a href="/article/1731.htm"
title="kafka获得最新partition offset" target="_blank">kafka获得最新partition offset</a>
<span class="text-muted">blackproof</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/partition/1.htm">partition</a><a class="tag" taget="_blank" href="/search/offset/1.htm">offset</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0/1.htm">最新</a>
<div>kafka获得partition下标，需要用到kafka的simpleconsumer
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.</div>
</li>
<li><a href="/article/1858.htm"
title="centos 7安装docker两种方式" target="_blank">centos 7安装docker两种方式</a>
<span class="text-muted">ronin47</span>
<div> 第一种是采用yum 方式
yum install -y docker
</div>
</li>
<li><a href="/article/1985.htm"
title="java-60-在O(1)时间删除链表结点" target="_blank">java-60-在O(1)时间删除链表结点</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class DeleteNode_O1_Time {
/**
* Q 60 在O(1)时间删除链表结点
* 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点
*
* Assume the list is:
* head->...->nodeToDelete->mNode->nNode->..</div>
</li>
<li><a href="/article/2112.htm"
title="nginx利用proxy_cache来缓存文件" target="_blank">nginx利用proxy_cache来缓存文件</a>
<span class="text-muted">cfyme</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
<div>user zhangy users;
worker_processes 10;
error_log /var/vlogs/nginx_error.log crit;
pid /var/vlogs/nginx.pid;
#Specifies the value for ma</div>
</li>
<li><a href="/article/2239.htm"
title="[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题" target="_blank">[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a>
<div>
假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：
string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"
定义一个0整数c,然后用这个整数c去</div>
</li>
<li><a href="/article/2366.htm"
title="如何集成支付宝官方文档" target="_blank">如何集成支付宝官方文档</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>官方文档下载地址
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash
集成的必要条件
1. 需要有自己的Server接收支付宝的消息
2. 需要先制作app，然后提交支付宝审核，通过后才能集成
调试的时候估计会真的扣款，请注意
</div>
</li>
<li><a href="/article/2493.htm"
title="应该在什么时候使用Hadoop" target="_blank">应该在什么时候使用Hadoop</a>
<span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
<div>原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html
存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。
--------------------------------------------万能的分割线--------------------------------
有人问我，“你在大数据和Hado</div>
</li>
<li><a href="/article/2620.htm"
title="在GridView中对于有外键的字段使用关联模型进行搜索和排序" target="_blank">在GridView中对于有外键的字段使用关联模型进行搜索和排序</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>在GridView中使用关联模型进行搜索和排序
首先我们有两个模型它们直接有关联:
class Author extends CActiveRecord {
...
}
class Post extends CActiveRecord {
...
function relations() {
return array(
'</div>
</li>
<li><a href="/article/2747.htm"
title="使用NSString 的格式化大全" target="_blank">使用NSString 的格式化大全</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
<div>格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c</div>
</li>
<li><a href="/article/2874.htm"
title="使用activeX插件对象object滚动有重影" target="_blank">使用activeX插件对象object滚动有重影</a>
<span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/activeX%E6%8F%92%E4%BB%B6/1.htm">activeX插件</a><a class="tag" taget="_blank" href="/search/%E6%BB%9A%E5%8A%A8%E6%9C%89%E9%87%8D%E5%BD%B1/1.htm">滚动有重影</a>
<div>
使用activeX插件对象object滚动有重影 <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#</div>
</li>
<li><a href="/article/3001.htm"
title="SpringMVC4零配置" target="_blank">SpringMVC4零配置</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a>
<div>基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。
项目说明如下：
1.db.sql是项目中用到的表，数据库使用的是oracle11g
2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动；
3.默认项目为零配置启动，如果需要更改启动方式，请</div>
</li>
<li><a href="/article/3128.htm"
title="《开源框架那点事儿16》：缓存相关代码的演变" target="_blank">《开源框架那点事儿16》：缓存相关代码的演变</a>
<span class="text-muted">j2eetop</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E6%A1%86%E6%9E%B6/1.htm">开源框架</a>
<div>问题引入
上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。
该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。
当然去看相关实现代代码的时候，大致是下面的样子。
[java]
view plain
copy
print
?
public vo</div>
</li>
<li><a href="/article/3255.htm"
title="AngularJS浅析" target="_blank">AngularJS浅析</a>
<span class="text-muted">kvhur</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>概念
AngularJS is a structural framework for dynamic web apps.
了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm
Directive
扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间</div>
</li>
<li><a href="/article/3382.htm"
title="架构师之jdk的bug排查(一)---------------split的点号陷阱" target="_blank">架构师之jdk的bug排查(一)---------------split的点号陷阱</a>
<span class="text-muted">nannan408</span>
<a class="tag" taget="_blank" href="/search/split/1.htm">split</a>
<div>1.前言.
jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug.
2.代码
String[] paths = "object.object2.prop11".split("'");
System.ou</div>
</li>
<li><a href="/article/3509.htm"
title="如何对10亿数据量级的mongoDB作高效的全表扫描" target="_blank">如何对10亿数据量级的mongoDB作高效的全表扫描</a>
<span class="text-muted">quentinXXZ</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div> 本文链接:
http://quentinXXZ.iteye.com/blog/2149440
一、正常情况下，不应该有这种需求
首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。
说一下，</div>
</li>
<li><a href="/article/3636.htm"
title="C语言算法之水仙花数" target="_blank">C语言算法之水仙花数</a>
<span class="text-muted">qiufeihu</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
int x,y,z;
for(x=1;x<=N;x++)
for(y=0;y<=N;y++)
for(z=0;z<=N;z++)
if(x*100+y*10+z == x*x*x</div>
</li>
<li><a href="/article/3763.htm"
title="JSP指令" target="_blank">JSP指令</a>
<span class="text-muted">wyzuomumu</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
<div>
jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %>
常用的三种指令： page,include,taglib
page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%>
include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include</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>