Int mian[]

前端（一）：HTML+CSS

参考课程：23最新版web前端开发_哔哩哔哩_bilibili

文档：GitHub - codeNiuMa/HTML-md-file: 学习HTML课程时的资料

目录

1 HTML

1.1 骨架

DOCTYPE

html标签

head标签

body标签

title标签

meta标签

1.2 标签标题h1

1.3 段落p

1.4 水平线

1.5 图片img

1.6 超链接

1.7 列表ul

有序

无序

1.8 table

合并

1.9 表单填写

文本框

密码框

按钮

1.10 块元素与行内元素

网站布局

2 CSS

1.1 引入方式

笨办法× （内联样式

内部样式×

外部样式（推荐）

1.2 选择器用法

全局选择器

元素选择器

类选择器

1.3 选择器

ID选择器

合并选择器

选择器的优先级

1.4 背景

background-color属性

background-image属性

background-repeat属性

background-size属性

background-position属性

1.5 文本属性

text-align

text-decoration

text-transform

text-indent

1.6 表格

表格边框

折叠边框

表格宽度和高度

表格文字对齐

表格填充

表格颜色

1.7 关系选择器

后代选择器

子代选择器

相邻兄弟选择器

通用兄弟选择器

1.8 CSS 盒子模型

1.9 弹性盒模型

父元素上的属性

display 属性

flex-direction属性

justify-content 属性

子元素上的属性

flex

1.10 文档流

脱离文档流

1.11 浮动*

浮动副作用

1.12 定位

Z-index

1.13 圆角

1.14 动画

@keyframes创建动画

animation执行动画

切换背景颜色

1.15 设置meta标签

1.16 雪碧图

1.17 字体图

1 HTML

1.1 骨架

  //html5版本标识

网页的根主体，有且仅有一个，HTML负责结构，无需关注表现，CSS负责表现

标签有两种表现形式：

双标签，例如：
单标签，例如：

  //html5版本标识

DOCTYPE

是document type (文档类型) 的缩写，是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。

html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

body标签

body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

title标签

  第一个页面

可定义网页的标题。
它显示在浏览器窗口的标题栏或状态栏上。
</code> 标签是 <code><head></code> 标签中唯一必须要求包含的东西，就是说写head一定要写title</p> </li> <li> <p><code><title></code>的增加有利于SEO优化（搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求）</p> </li> </ol> <h4 id="meta%E6%A0%87%E7%AD%BE">meta标签</h4> <p> meta标签用来描述一个HTML网页文档的属性，关键词等，例如：<code>charset="utf-8"</code>是说当前使用的是<code>utf-8</code>编码格式，在开发中我们经常会看到<code>utf-8</code>，或是<code>gbk</code>，这些都是编码格式，通常使用<code>utf-8</code>。</p> <pre><code class="language-html"><meta charset="UTF-8"></code></pre> <h3 id="1.2%20%E6%A0%87%E7%AD%BE%E6%A0%87%E9%A2%98h1">1.2 标签标题h1</h3> <p>标题（Heading）是通过 <code><h1> - <h6></code>标签进行定义的。</p> <p><code><h1></code>定义最大的标题 <code><h6></code>定义最小的标题</p> <pre><code class="language-html"><h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> </code></pre> <p>在标签中添加属性：<code>align="left | center | right"</code> 默认居左 </p> <blockquote> <p> 请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。正确使用标题有益于SEO</p> </blockquote> <h3 id="1.3%20%E6%AE%B5%E8%90%BDp">1.3 段落p</h3> <p>段落是通过<code><p></code>标签定义的</p> <pre><code class="language-html"><p>这是一个段落 </p> <p>这是另一个段落</p></code></pre> <p>如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <code><br></code></p> <pre><code class="language-html"><p>这个<br>段落<br>演示了分行的效果</p></code></pre> <p><a href="http://img.e-com-net.com/image/info8/a0db223f5a644855bbe6069eace4fe66.jpg" target="_blank"><img alt="" height="89" src="http://img.e-com-net.com/image/info8/a0db223f5a644855bbe6069eace4fe66.jpg" width="178"></a></p> <table style="width:500px;"> <thead> <tr> <th style="text-align:center;">标签</th> <th style="text-align:center;">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center;"><code><em></code></td> <td style="text-align:center;">定义着重文字</td> </tr> <tr> <td style="text-align:center;"><code><b></code></td> <td style="text-align:center;">定义粗体文本</td> </tr> <tr> <td style="text-align:center;"><code><i></code></td> <td style="text-align:center;">定义斜体字</td> </tr> <tr> <td style="text-align:center;"><code><strong></code></td> <td style="text-align:center;">定义加重语气</td> </tr> <tr> <td style="text-align:center;"><code><del></code></td> <td style="text-align:center;">定义删除字</td> </tr> <tr> <td style="text-align:center;"><code><span></code></td> <td style="text-align:center;">元素没有特定的含义</td> </tr> </tbody> </table> <h3 id="1.4%20%E6%B0%B4%E5%B9%B3%E7%BA%BF">1.4 水平线</h3> <p><code><hr/></code>标签在 HTML 页面中创建水平线</p> <pre><code class="language-html"><hr color="" width="" size="" align=""/> 1. color：设置水平线的颜色 2. width：设置水平线的宽度 3. size：设置水平线的高度 4. align：设置水平线的对齐方式（默认居中），可取值left|right</code></pre> <h3 id="1.5%20%E5%9B%BE%E7%89%87img">1.5 图片img</h3> <p><code><img></code> 标签定义 HTML 页面中的图像，<code><img></code>是单标签，不需要进行闭合操作</p> <pre><code class="language-html"><img src="" alt="" title="" width="" height=""> 1. src：路径（图片地址与名字） 2. alt：规定图像的替代文本 3. width：规定图像的宽度 4. height：规定图像的高度 5. title：鼠标悬停在图片上给予提示</code></pre> <h3 id="1.6%20%E8%B6%85%E9%93%BE%E6%8E%A5">1.6 超链接</h3> <p> HTML使用标签 <code><a></code>来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档</p> <pre><code class="language-html"><a href="url">链接文本</a></code></pre> <p>在标签<code><a></code>中使用了<code>href</code>属性来描述链接的地址</p> <p>默认情况下，链接将以，以下形式出现在浏览器中：</p> <ol> <li> <p>一个未访问过的链接显示为蓝色字体并带有下划线。</p> </li> <li> <p>访问过的链接显示为紫色并带有下划线。</p> </li> <li> <p>点击链接时，链接显示为红色并带有下划线。</p> </li> </ol> <blockquote> <p>后期会通过CSS样式修改掉这些效果</p> </blockquote> <h3 id="1.7%20%E5%88%97%E8%A1%A8ul">1.7 列表ul</h3> <h4 id="%E6%9C%89%E5%BA%8F">有序</h4> <p>有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<code><ol></code> 标签。每个列表项始于 <code><li></code>标签</p> <pre><code class="language-html"><ol> <li>坤坤</li> <li>姬霓太美</li> </ol> `<ol>`的属性type 拥有的选项 1. 1 表示列表项目用数字标号（1,2,3...） 2. a 表示列表项目用小写字母标号（a,b,c...） 3. A 表示列表项目用大写字母标号（A,B,C...） 4. i 表示列表项目用小写罗马数字标号（i,ii,iii...） 5. I 表示列表项目用大写罗马数字标号（I,II,III...）</code></pre> <p>列表是可以进行嵌套的</p> <pre><code class="language-html"><ol> <li>鸡</li> <li> <ol> <li>你</li> <li>太</li> </ol> </li> <li>美</li> </ol></code></pre> <p><a href="http://img.e-com-net.com/image/info8/d0e4ad645c34470c9740de07cce51f8a.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第1张图片" height="242" src="http://img.e-com-net.com/image/info8/d0e4ad645c34470c9740de07cce51f8a.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E6%97%A0%E5%BA%8F">无序</h4> <p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记</p> <p>无序列表始于 <code><ul></code> 标签。每个列表项始于<code><li></code> 标签。</p> <p><code><ul></code>的属性type 拥有的选项</p> <ul> <li> <p>disc 默认实心圆</p> </li> <li> <p>circle 空心圆</p> </li> <li> <p>square 小方块</p> </li> <li> <p>none 不显示</p> </li> </ul> <h3 id="1.8%20table">1.8 table</h3> <blockquote> <p>表格：<code><table></code></p> <p>行：<code><tr></code></p> <p>单元格(列)：<code><td></code></p> </blockquote> <pre><code class="language-html"><table> <tr> <td>尚学堂</td> <td>百战程序员</td> </tr> <tr> <td>阿里</td> <td>京东</td> </tr> </table> 1. border：设置表格的边框 2. width：设置表格的宽度 3. height：设置表格的高度</code></pre> <p><a href="http://img.e-com-net.com/image/info8/8ca2717614fe4c518bdf170aa4ecd559.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第2张图片" height="184" src="http://img.e-com-net.com/image/info8/8ca2717614fe4c518bdf170aa4ecd559.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E5%90%88%E5%B9%B6">合并</h4> <ul> <li> <p>水平合并：colspan，保留左边，删掉右边</p> </li> <li> <p>垂直合并：rowspan，保留上边，删除下边</p> </li> </ul> <pre><code class="language-html"> <table border="1" width="500px" height="200px"> <tr> <td colspan="3">单元格1单元格2单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td rowspan="2">单元格6-11</td> <td>单元格7</td> <td rowspan="3">单元格81318</td> <td colspan="2" rowspan="2">单元格9101415</td> </tr> <tr> <td>单元格12</td> </tr> <tr> <td>单元格16</td> <td>单元格17</td> <td>单元格19</td> <td>单元格20</td> </tr> </table></code></pre> <p><a href="http://img.e-com-net.com/image/info8/77fc35248bf54f17a1c532d3d031524a.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第3张图片" height="200" src="http://img.e-com-net.com/image/info8/77fc35248bf54f17a1c532d3d031524a.jpg" width="475" style="border:1px solid black;"></a>麻烦！</p> <h3 id="1.9%20%E8%A1%A8%E5%8D%95%E5%A1%AB%E5%86%99">1.9 表单填写</h3> <p>表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。</p> <p>所有的用户输入内容的地方都用表单来写，如登录注册、搜索框</p> <p></p> <p>表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框,按钮等</p> <ul> <li>这些输入框,按钮叫做控件</li> <li>表单就是容器,它能够容纳各种各样的控件</li> </ul> <pre><code class="language-html"><form action="url" method="get|post" name="myform"></form></code></pre> <p>一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮</p> <ol> <li> <p>表单标签</p> </li> <li> <p>表单域</p> </li> <li> <p>表单按钮 </p> </li> </ol> <p><a href="http://img.e-com-net.com/image/info8/6947c8952ba146029ec2685f6b0c7fd5.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第4张图片" height="217" src="http://img.e-com-net.com/image/info8/6947c8952ba146029ec2685f6b0c7fd5.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E6%96%87%E6%9C%AC%E6%A1%86">文本框</h4> <p>文本域通过<code><input type="text"></code> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域</p> <pre><code class="language-html"><form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form></code></pre> <p><a href="http://img.e-com-net.com/image/info8/305999e7ee9046888a480ebccaae59ea.jpg" target="_blank"><img alt="" height="70" src="http://img.e-com-net.com/image/info8/305999e7ee9046888a480ebccaae59ea.jpg" width="294"></a></p> <h4 id="%E5%AF%86%E7%A0%81%E6%A1%86">密码框</h4> <p>密码字段通过标签<code><input type="password"></code> 来定义</p> <pre><code class="language-html"><form> Password: <input type="password" name="pwd"> </form></code></pre> <p><a href="http://img.e-com-net.com/image/info8/ad686c9e9c9345169974e51c66e4ba10.jpg" target="_blank"><img alt="" height="46" src="http://img.e-com-net.com/image/info8/ad686c9e9c9345169974e51c66e4ba10.jpg" width="290"></a></p> <h4 id="%E6%8C%89%E9%92%AE">按钮</h4> <p>当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理</p> <pre><code class="language-html"><form name="input" action="https://www.baidu.com" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form></code></pre> <h3 id="1.10%20%E5%9D%97%E5%85%83%E7%B4%A0%E4%B8%8E%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0">1.10 块元素与行内元素</h3> <p> HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的</p> <p> 虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用</p> <table> <thead> <tr> <th style="text-align:center;">块级元素</th> <th style="text-align:center;">内联元素</th> </tr> </thead> <tbody> <tr> <td style="text-align:center;">块元素会在页面中独占一行（自上向下垂直排列）</td> <td style="text-align:center;">行内元素不会独占页面中的一行，只占自身的大小</td> </tr> <tr> <td style="text-align:center;">可以设置width，height属性</td> <td style="text-align:center;">行内元素设置width，height属性无效</td> </tr> <tr> <td style="text-align:center;">⼀般块级元素可以包含行内元素和其他块级元素</td> <td style="text-align:center;">⼀般内联元素包含内联元素不包含块级元素</td> </tr> </tbody> </table> <p>常见块级元素</p> <blockquote> <p>div、form、h1~h6、hr、p、table、ul、等</p> </blockquote> <p>常见内联元素(行内元素)</p> <blockquote> <p>a、b、em、i、span、strong等</p> </blockquote> <p>行内块级元素（特点：不换行、能够识别宽高）</p> <blockquote> <p>button、img、input等</p> </blockquote> <h3 id="%E7%BD%91%E7%AB%99%E5%B8%83%E5%B1%80">网站布局</h3> <p><code>div</code>容器元素，也是页面中见到的最多的元素</p> <p>div实现</p> <p><a href="http://img.e-com-net.com/image/info8/8fa273a3247e43d685a315c62e2f5894.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第5张图片" height="250" src="http://img.e-com-net.com/image/info8/8fa273a3247e43d685a315c62e2f5894.jpg" width="496" style="border:1px solid black;"></a></p> <p>H5新标签实现</p> <ol> <li> <p><code><header></header></code> 头部</p> </li> <li> <p><code><nav></nav></code> 导航</p> </li> <li> <p><code><section></section></code>定义文档中的节,比如章节、页眉、页脚</p> </li> <li> <p><code><aside></aside></code> 侧边栏</p> </li> <li> <p><code><footer></footer></code> 脚部</p> </li> <li> <p><code><article></article></code> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等</p> </li> </ol> <p><a href="http://img.e-com-net.com/image/info8/957f58bf81b3425f9e851ac96f7ef6a7.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第6张图片" height="257" src="http://img.e-com-net.com/image/info8/957f58bf81b3425f9e851ac96f7ef6a7.jpg" width="515" style="border:1px solid black;"></a></p> <p></p> <p></p> <p></p> <h2 id="2%20CSS">2 CSS</h2> <p>CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表</p> <p>CSS文件后缀名为<code>.css</code>，用于HTML文档中元素样式的定义</p> <p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）</p> <p><a href="http://img.e-com-net.com/image/info8/ad90503abc2e448c9c9350a6945207b4.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第7张图片" height="111" src="http://img.e-com-net.com/image/info8/ad90503abc2e448c9c9350a6945207b4.jpg" width="554" style="border:1px solid black;"></a></p> <ul> <li>选择器通常是您需要改变样式的 HTML 元素</li> <li>每条声明由一个属性和一个值组成：属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开</li> </ul> <pre><code class="language-html"><style> h1{ color: blue; font-size: 12px; } </style></code></pre> <h3 id="1.1%20%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">1.1 引入方式</h3> <h4 id="%E7%AC%A8%E5%8A%9E%E6%B3%95%C3%97%C2%A0%20%EF%BC%88%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F">笨办法× （内联样式</h4> <p>要使用内联样式，在相关的标签内使用样式（style）属性。Style 可以包含任何 CSS 属性</p> <pre><code class="language-html"><p style="background: orange; font-size: 24px;">CSS<p></code></pre> <p>缺乏整体性和规划性，不利于维护，维护成本高</p> <h4 id="%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%C3%97">内部样式×</h4> <p>当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <code><style></code> 标签在文档头部定义内部样式表</p> <pre><code class="language-html"><head> <style> h1 { background: red; } </style> </head></code></pre> <h4 id="%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89">外部样式（推荐）</h4> <p>当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <code><link></code> 标签链接到样式表。 <code><link></code> 标签在（文档的）头部</p> <pre><code class="language-html"><link rel="stylesheet" type="text/css" href="xxx.css"></code></pre> <h3 id="1.2%20%E9%80%89%E6%8B%A9%E5%99%A8%E7%94%A8%E6%B3%95">1.2 选择器用法</h3> <h4 id="%E5%85%A8%E5%B1%80%E9%80%89%E6%8B%A9%E5%99%A8">全局选择器</h4> <p>可以与任何元素匹配，优先级最低，一般做样式初始化</p> <pre><code class="language-css">*{ margin: 0; padding: 0; }</code></pre> <h4 id="%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8">元素选择器</h4> <p>HTML文档中的元素，<code>p、b、div、a、img、body</code>等。</p> <p>标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”</p> <pre><code class="language-css">p{ font-size:14px; }</code></pre> <h4 id="%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8">类选择器</h4> <p>规定用圆点 <code>.</code> 来定义，针对你想要的所有标签使用</p> <pre><code class="language-css"><h2 class="oneclass">你好</h2> /*定义类选择器*/ .oneclass{ width:800px; }</code></pre> <ol> <li> <p>类选择器可以被多种标签使用</p> </li> <li> <p>类名不能以数字开头</p> </li> <li> <p>同一个标签可以使用多个类选择器。用空格隔开</p> </li> </ol> <pre><code class="language-css"><h3 class="classone classtwo">我是一个h3啊</h3> <h3 class="classone" class="classtwo">我是一个h3啊</h3> // error</code></pre> <h3 id="1.3%20%E9%80%89%E6%8B%A9%E5%99%A8">1.3 选择器</h3> <h4 id="ID%E9%80%89%E6%8B%A9%E5%99%A8">ID选择器</h4> <p>针对某一个特定的标签来使用，只能使用一次。<code>css</code>中的<code>ID选择器</code>以 <code>#</code> 来定义</p> <ol> <li> <p>ID是<strong>唯一的</strong></p> </li> <li> <p>ID不能以数字开头</p> </li> </ol> <pre><code class="language-css"><h2 id="mytitle">你好</h2> #mytitle{ border:3px dashed green; }</code></pre> <h4 id="%E5%90%88%E5%B9%B6%E9%80%89%E6%8B%A9%E5%99%A8">合并选择器</h4> <p>语法：<code>选择器1,选择器2,...{ }</code></p> <p>作用：提取共同的样式，减少重复代码</p> <pre><code class="language-css">.header, .footer, .cxk{ height:300px; }</code></pre> <h4 id="%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7">选择器的优先级</h4> <p>CSS中,权重用数字衡量</p> <blockquote> <p>元素选择器的权重为: 1</p> <p>class选择器的权重为: 10</p> <p>id选择器的权重为: 100</p> <p>内联样式的权重为: 1000</p> <p>优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器</p> </blockquote> <h3 id="1.4%20%E8%83%8C%E6%99%AF">1.4 背景</h3> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>background-color</td> <td>设置背景颜色</td> </tr> <tr> <td>background-image</td> <td>设置背景图片</td> </tr> <tr> <td>background-position</td> <td>设置背景图片显示位置</td> </tr> <tr> <td>background-repeat</td> <td>设置背景图片如何填充</td> </tr> <tr> <td>background-size</td> <td>设置背景图片大小属性</td> </tr> </tbody> </table> <h4 id="background-color%E5%B1%9E%E6%80%A7">background-color属性</h4> <p>该属性设置背景颜色</p> <pre><div class="box"></div> .box{ width: 300px; height: 300px; background-color: palevioletred; }</pre> <p></p> <h4 id="background-image%E5%B1%9E%E6%80%A7">background-image属性</h4> <p>设置元素的背景图像</p> <p>元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分</p> <pre><div class="box"></div> .box{ width: 600px; height: 600px; background-image: url("images/img1.jpg"); }</pre> <p></p> <p></p> <h4 id="background-repeat%E5%B1%9E%E6%80%A7">background-repeat属性</h4> <p>该属性设置如何平铺背景图像</p> <table> <thead> <tr> <th>值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>repeat</td> <td>默认值</td> </tr> <tr> <td>repeat-x</td> <td>只向水平方向平铺</td> </tr> <tr> <td>repeat-y</td> <td>只向垂直方向平铺</td> </tr> <tr> <td>no-repeat</td> <td>不平铺</td> </tr> </tbody> </table> <pre>.box{ width: 600px; height: 600px; background-color: #fcc; background-image: url("images/img1.jpg"); background-repeat: no-repeat; }</pre> <p></p> <p></p> <h4 id="background-size%E5%B1%9E%E6%80%A7">background-size属性</h4> <p>该属性设置背景图像的大小</p> <table> <thead> <tr> <th>值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>length</td> <td>设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto</td> </tr> <tr> <td>percentage</td> <td>计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto</td> </tr> <tr> <td>cover</td> <td>保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小</td> </tr> <tr> <td>contain</td> <td>保持图片纵横比并将图像缩放成适合背景定位区域的最大大小</td> </tr> </tbody> </table> <pre>.box{ width: 600px; height: 600px; background-image: url("images/img1.jpg"); background-repeat: no-repeat; background-size: 100% 100%; }</pre> <p></p> <h4 id="background-position%E5%B1%9E%E6%80%A7">background-position属性</h4> <p>该属性设置背景图像的起始位置，其默认值是：0% 0%</p> <p></p> <h3 id="1.5%20%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7">1.5 文本属性</h3> <h4 id="text-align">text-align</h4> <p>指定元素文本的水平对齐方式</p> <table> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>left</td> <td>文本居左排列，默认值</td> </tr> <tr> <td>right</td> <td>把文本排列到右边</td> </tr> <tr> <td>center</td> <td>把文本排列到中间</td> </tr> </tbody> </table> <pre><code class="language-css">h1 {text-align:center} h2 {text-align:left} h3 {text-align:right}</code></pre> <h4 id="text-decoration">text-decoration</h4> <p>text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等</p> <table> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>underline</td> <td>定义下划线</td> </tr> <tr> <td>overline</td> <td>定义上划线</td> </tr> <tr> <td>line-through</td> <td>定义删除线</td> </tr> </tbody> </table> <pre><code class="language-css">h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline}</code></pre> <h4 id="text-transform">text-transform</h4> <p>text-transform 属性控制文本的大小写</p> <table> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>captialize</td> <td>定义每个单词开头大写</td> </tr> <tr> <td>uppercase</td> <td>定义全部大写字母</td> </tr> <tr> <td>lowercase</td> <td>定义全部小写字母</td> </tr> </tbody> </table> <pre><code class="language-css">h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;}</code></pre> <h4 id="text-indent">text-indent</h4> <p>text-indent 属性规定文本块中首行文本的缩进</p> <pre><code class="language-css">p{ text-indent:50px; }</code></pre> <blockquote> <p><strong>温馨提示</strong></p> <p>负值是允许的。如果值是负数，将第一行左缩进</p> </blockquote> <h3 id="1.6%20%E8%A1%A8%E6%A0%BC">1.6 表格</h3> <h4 id="%E8%A1%A8%E6%A0%BC%E8%BE%B9%E6%A1%86">表格边框</h4> <p>指定CSS表格边框，使用border属性</p> <pre>table, td { border: 1px solid black; } </pre> <h4 id="%E6%8A%98%E5%8F%A0%E8%BE%B9%E6%A1%86">折叠边框</h4> <p>border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开</p> <pre>table { border-collapse:collapse; } table,td { border: 1px solid black; }</pre> <p></p> <h4 id="%E8%A1%A8%E6%A0%BC%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6">表格宽度和高度</h4> <p>width和height属性定义表格的宽度和高度</p> <pre>table { width:100%; } td { height:50px; }</pre> <p></p> <h4 id="%E8%A1%A8%E6%A0%BC%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90">表格文字对齐</h4> <p>表格中的文本对齐和垂直对齐属性</p> <p>text-align属性设置水平对齐方式，向左，右，或中心</p> <pre>td { text-align:right; }</pre> <p>垂直对齐属性设置垂直对齐</p> <pre>td { height:50px; vertical-align:bottom; }</pre> <p></p> <h4 id="%E8%A1%A8%E6%A0%BC%E5%A1%AB%E5%85%85">表格填充</h4> <p>如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性</p> <pre>td { padding:15px; }</pre> <p></p> <h4 id="%E8%A1%A8%E6%A0%BC%E9%A2%9C%E8%89%B2">表格颜色</h4> <p>下面的例子指定边框的颜色，和th元素的文本和背景颜色</p> <pre>table, td, th { border:1px solid green; } td { background-color:green; color:white; }</pre> <h3 id="1.7%20%E5%85%B3%E7%B3%BB%E9%80%89%E6%8B%A9%E5%99%A8">1.7 关系选择器</h3> <h4 id="%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8">后代选择器</h4> <p>选择所有被E元素包含的F元素，中间用空格隔开</p> <p>语法：E F{ }</p> <pre><code class="language-css"><ul> <li>宝马</li> <li>奔驰</li> </ul> <ol> <li>奥迪</li> </ol> ul li{ color:green; }</code></pre> <h4 id="%E5%AD%90%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8">子代选择器</h4> <p><strong>定义</strong></p> <p>选择所有作为E元素的<strong>直接子元素</strong>F，对更深一层的元素不起作用，用>表示</p> <p>语法：E>F{ }</p> <pre><code class="language-css"><div> <a href="#">子元素1</a> <p> <a href="#">孙元素</a> </p> <a href="#">子元素2</a> </div> div>a{ color:red }</code></pre> <h4 id="%E7%9B%B8%E9%82%BB%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8">相邻兄弟选择器</h4> <p><strong>定义</strong></p> <p>选择<strong>紧跟</strong>E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择</p> <p>语法：E+F{ }</p> <pre><code class="language-css"><h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p> h1+p{ color:red; }</code></pre> <h4 id="%E9%80%9A%E7%94%A8%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8">通用兄弟选择器</h4> <p><strong>定义</strong></p> <p>选择E元素之后的所有<strong>同级兄弟元素</strong>F，作用于多个元素，用~隔开，只能向下选择</p> <p>E~F{ }</p> <pre><code class="language-css"><h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p> h1~p{ color:red; }</code></pre> <h3 id="1.8%C2%A0CSS%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B">1.8 CSS 盒子模型</h3> <p>所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用</p> <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：</p> <p>外边距（margin），边框（border），内边距（padding），和实际内容（content）</p> <p><a href="http://img.e-com-net.com/image/info8/9e229d0564d24cf1aa2f49b054fb040a.png" target="_blank"><img alt="前端（一）：HTML+CSS_第8张图片" height="302" src="http://img.e-com-net.com/image/info8/9e229d0564d24cf1aa2f49b054fb040a.png" width="379" style="border:1px solid black;"></a></p> <blockquote> <ol> <li> <p>Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）</p> </li> <li> <p>Border(边框) - 围绕在内边距和内容外的边框</p> </li> <li> <p>Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）</p> </li> <li> <p>Content(内容) - 盒子的内容，显示文本和图像</p> </li> </ol> </blockquote> <pre><code class="language-css">div{ width: 100px; height: 100px; padding: 10px; border: 2px solid red; margin: 10px; background: green; }</code></pre> <p><span style="color:#fe2c24;">人开始麻了</span></p> <h3 id="1.9%C2%A0%E5%BC%B9%E6%80%A7%E7%9B%92%E6%A8%A1%E5%9E%8B">1.9 弹性盒模型</h3> <p> CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间</p> <p>弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成</p> <p>弹性容器通过设置 <code>display</code>属性的值为 <code>flex</code>将其定义为弹性容器</p> <p><a href="http://img.e-com-net.com/image/info8/72723bb0a6ff41ca87ba375e55ff7507.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第9张图片" height="383" src="http://img.e-com-net.com/image/info8/72723bb0a6ff41ca87ba375e55ff7507.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E7%88%B6%E5%85%83%E7%B4%A0%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7">父元素上的属性</h4> <h5 id="display%20%E5%B1%9E%E6%80%A7"><strong>display 属性</strong></h5> <p><code>display:flex;</code>开启弹性盒，属性设置后子元素默认水平排列</p> <p></p> <h5 id="flex-direction%E5%B1%9E%E6%80%A7"><strong>flex-direction属性</strong></h5> <p><strong>定义</strong></p> <p>flex-direction 属性指定了弹性子元素在父容器中的位置</p> <pre><code class="language-css">flex-direction: row | row-reverse | column | column-reverse</code></pre> <h5 id="justify-content%20%E5%B1%9E%E6%80%A7">justify-content 属性</h5> <p><strong>定义</strong></p> <p>内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐</p> <pre><code class="language-css">justify-content: flex-start | flex-end | center </code></pre> <ol> <li> <p><code>flex-start</code> 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放</p> </li> <li> <p><code>flex-end</code> 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放</p> </li> <li> <p><code>center</code> 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）</p> </li> </ol> <h4 id="%E5%AD%90%E5%85%83%E7%B4%A0%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7"><strong>子元素上的属性</strong></h4> <h5 id="flex">flex</h5> <p><code>flex</code> 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间</p> <p>默认为0，即如果存在剩余空间，也不放大</p> <p>如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%</p> <h3 id="1.10%20%E6%96%87%E6%A1%A3%E6%B5%81">1.10 文档流</h3> <p>块元素自上而下摆放，内联元素，从左到右摆放</p> <ol> <li> <p>高矮不齐，底边对齐</p> </li> <li> <p>空白折叠现象</p> <ol> <li> <p>无论多少个空格、换行、tab，都会折叠为一个空格</p> </li> <li> <p>如果我们想让img标签之间没有空隙，必须紧密连接</p> </li> </ol></li> </ol> <p><a href="http://img.e-com-net.com/image/info8/c3485e9045434c35a633e8e10dbd3b49.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第10张图片" height="226" src="http://img.e-com-net.com/image/info8/c3485e9045434c35a633e8e10dbd3b49.jpg" width="361" style="border:1px solid black;"></a></p> <p>如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！</p> <h4 id="%E8%84%B1%E7%A6%BB%E6%96%87%E6%A1%A3%E6%B5%81">脱离文档流</h4> <p>使⼀个元素脱离标准文档流有三种方式</p> <ol> <li> <p>浮动</p> </li> <li> <p>绝对定位</p> </li> <li> <p>固定定位</p> </li> </ol> <h3 id="1.11%20%E6%B5%AE%E5%8A%A8*">1.11 浮动*</h3> <p><code>float</code>属性定义元素在哪个方向浮动，任何元素都可以浮动。</p> <table style="width:200px;"> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>left</td> <td>元素向左浮动</td> </tr> <tr> <td>right</td> <td>元素向右浮动</td> </tr> </tbody> </table> <p>脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象</p> <p>元素向左浮动</p> <pre><code class="language-css"><div class="box"></div> <div class="container"></div> .container{ width: 200px; height: 200px; background-color: #81c784; } .box{ width: 100px; height: 100px; background-color: #fff176; float: left; }</code></pre> <p><a href="http://img.e-com-net.com/image/info8/12393f8ffe5f4818be7d61cde7414b91.jpg" target="_blank"><img alt="前端（一）：HTML+CSS_第11张图片" height="339" src="http://img.e-com-net.com/image/info8/12393f8ffe5f4818be7d61cde7414b91.jpg" width="650" style="border:1px solid black;"></a></p> <p>元素向右浮动</p> <pre><code class="language-css"><div class="box"></div> <div class="container"></div> .container{ width: 200px; height: 200px; background-color: #81c784; } .box{ width: 100px; height: 100px; background-color: #fff176; float: right; }</code></pre> <p><a href="http://img.e-com-net.com/image/info8/f1162bc27b3e4fd4af367a8aa4183650.png" target="_blank"><img alt="前端（一）：HTML+CSS_第12张图片" height="415" src="http://img.e-com-net.com/image/info8/f1162bc27b3e4fd4af367a8aa4183650.png" width="820" style="border:1px solid black;"></a></p> <p>当所有元素同时浮动的时候，会变成水平摆放，向左或者向右</p> <p>当容器不足以横向摆放内容时候，会在下一行摆放</p> <h4 id="%E6%B5%AE%E5%8A%A8%E5%89%AF%E4%BD%9C%E7%94%A8">浮动副作用</h4> <p>当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，</p> <ol> <li> <p>浮动元素会造成父元素高度塌陷</p> </li> <li> <p>后续元素会受到影响</p> </li> </ol> <p>当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用</p> <p>解决方案有很多种</p> <p>1. 父元素设置高度<br> 2. 受影响的元素增加clear属性<br> 3. overflow清除浮动<br> 4. 伪对象方式</p> <h3 id="1.12%20%E5%AE%9A%E4%BD%8D">1.12 定位</h3> <table> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>relative</td> <td>相对定位</td> </tr> <tr> <td>absolute</td> <td>绝对定位</td> </tr> <tr> <td>fixed</td> <td>固定定位</td> </tr> </tbody> </table> <p>设置定位之后：可以使用四个方向值进行调整位置：<code>left、top、right、bottom</code></p> <pre><code class="language-css">.box{ width: 200px; height: 200px; background-color: red; position: relative; left: 100px; }</code></pre> <blockquote> <p>设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档</p> </blockquote> <h4 id="Z-index">Z-index</h4> <p><code>z-index</code>属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面</p> <h3 id="1.13%20%E5%9C%86%E8%A7%92">1.13 圆角</h3> <p>使用 CSS3 <code>border-radius</code> 属性，你可以给任何元素制作 "圆角"</p> <p><code>border-radius</code> 属性，可以使用以下规则：</p> <ol> <li> <p>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</p> </li> <li> <p>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</p> </li> <li> <p>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角</p> </li> <li> <p>一个值：四个圆角值相同</p> </li> </ol> <h3 id="1.14%20%E5%8A%A8%E7%94%BB">1.14 动画</h3> <p>动画是使元素从一种样式逐渐变化为另一种样式的效果</p> <p>您可以改变任意多的样式任意多的次数</p> <p>请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%</p> <p>0% 是动画的开始，100% 是动画的完成</p> <h4 id="%40keyframes%E5%88%9B%E5%BB%BA%E5%8A%A8%E7%94%BB">@keyframes创建动画</h4> <p>使用<code>@keyframes</code>规则，你可以创建动画</p> <pre><code class="language-css">@keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } } name：动画名称，开发人员自己命名； percent：为百分比值，可以添加多个百分比值；</code></pre> <h4 id="animation%E6%89%A7%E8%A1%8C%E5%8A%A8%E7%94%BB">animation执行动画</h4> <pre><code class="language-css">animation: name duration timing-function delay iteration-count direction;</code></pre> <table> <thead> <tr> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>设置动画的名称</td> </tr> <tr> <td>duration</td> <td>设置动画的持续时间</td> </tr> <tr> <td>timing-function</td> <td>设置动画效果的速率（如下）</td> </tr> <tr> <td>delay</td> <td>设置动画的开始时间（延时执行）</td> </tr> <tr> <td>iteration-count</td> <td>设置动画循环的次数，infinite为无限次数的循环</td> </tr> <tr> <td>direction</td> <td>设置动画播放的方向（如下）</td> </tr> <tr> <td>animation-play-state</td> <td>控制动画的播放状态：running代表播放，而paused代表停止播放</td> </tr> </tbody> </table> <table> <thead> <tr> <th>timing-function值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>ease</td> <td>逐渐变慢（默认）</td> </tr> <tr> <td>linear</td> <td>匀速</td> </tr> <tr> <td>ease-in</td> <td>加速</td> </tr> <tr> <td>ease-out</td> <td>减速</td> </tr> <tr> <td>ease-in-out</td> <td>先加速后减速</td> </tr> </tbody> </table> <table> <thead> <tr> <th>direction值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>normal</td> <td>默认值为normal表示向前播放</td> </tr> <tr> <td>alternate</td> <td>动画播放在第偶数次向前播放，第奇数次向反方向播放</td> </tr> </tbody> </table> <h4 id="%E5%88%87%E6%8D%A2%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2">切换背景颜色</h4> <pre><code class="language-css">.animation { width: 300px; height: 300px; background-color: red; animation: anima 5s linear 5s infinite; } .animation:hover { animation-play-state: paused; } @keyframes anima { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blueviolet; } }</code></pre> <p></p> <h3 id="1.15%C2%A0%E8%AE%BE%E7%BD%AEmeta%E6%A0%87%E7%AD%BE">1.15 设置meta标签</h3> <p>使用设备的宽度作为视图宽度并禁止初始的缩放。在<code><head></code>标签里加入这个meta标签</p> <pre><code class="language-css"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"></code></pre> <pre><code class="language-css">@media screen and (max-width: 768px) { /* 设备小于768px加载样式 */ body{ background-color: red; } } @media screen and (max-width: 992px) and (min-width: 768px) { /* 设备小于768px但小于992px加载样式 */ body{ background-color: pink; } } @media screen and (min-width: 992px) { /* 设备大于992px加载样式 */ body{ background-color: green; } }</code></pre> <h3 id="1.16%C2%A0%E9%9B%AA%E7%A2%A7%E5%9B%BE">1.16 雪碧图</h3> <p>CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去</p> <ol> <li> <p>减少图片的字节</p> </li> <li> <p>减少网页的http请求，从而大大的提高页面的性能</p> </li> </ol> <p>原理</p> <ol> <li> <p>通过background-image引入背景图片</p> </li> <li> <p>通过background-position把背景图片移动到自己需要的位置</p> </li> </ol> <p></p> <h3 id="1.17%C2%A0%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87">1.17 字体图标</h3> <p>我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题</p> <ol> <li> <p>轻量性：加载速度快，减少http请求</p> </li> <li> <p>灵活性：可以利用CSS设置大小颜色等</p> </li> <li> <p>兼容性：网页字体支持所有现代浏览器，包括IE低版本</p> </li> </ol> <p></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1735311172279787520"></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">  <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>  <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>  <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">你可能感兴趣的:(html5,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</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/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/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> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</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/%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>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835302949362954240.htm" title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a> <span class="text-muted">黑金IT</span> <a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</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/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835291483406692352.htm" title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a> <span class="text-muted">qq_35430208</span> <a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a> <div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> <span class="text-muted">rabbit_it</span> <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> <span class="text-muted">chouchengyin2080</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/59.htm" title="html" target="_blank">html</a> <span class="text-muted">周华华</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){ for(var y=x-1;y<arr.length;y++){ if(arr[x]<arr[y]){ &</div> </li> <li><a href="/article/186.htm" title="【Struts2 四】Struts2拦截器" target="_blank">【Struts2 四】Struts2拦截器</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。 Struts2中自定义拦截器的步骤是：</div> </li> <li><a href="/article/313.htm" title="make:cc 命令未找到解决方法" target="_blank">make:cc 命令未找到解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4%E6%9C%AA%E7%9F%A5/1.htm">命令未知</a><a class="tag" taget="_blank" href="/search/make+cc/1.htm">make cc</a> <div>安装rz sz程序时，报下面错误： [root@slave2 src]# make posix cc -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127 系统：centos 6.6 环境：虚拟机错误原因：系统未安装gcc，这个是由于在安</div> </li> <li><a href="/article/440.htm" title="Oracle之Job应用" target="_blank">Oracle之Job应用</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/oracle+job/1.htm">oracle job</a> <div> 最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。一：查看相关job信息 1、相关视图 dba_jobs all_jobs user_jobs dba_jobs_running 包含正在运行</div> </li> <li><a href="/article/567.htm" title="多线程机制" target="_blank">多线程机制</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a> <div>转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程：程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的</div> </li> <li><a href="/article/694.htm" title="web报表工具FineReport使用中遇到的常见报错及解决办法（一）" target="_blank">web报表工具FineReport使用中遇到的常见报错及解决办法（一）</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a> <div>FineReport使用中遇到的常见报错及解决办法（一）这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、address pool is full：含义：地址池满，连接数超过并发数上</div> </li> <li><a href="/article/821.htm" title="mysql rpm安装后没有my.cnf" target="_blank">mysql rpm安装后没有my.cnf</a> <span class="text-muted">林鹤霄</span> <a class="tag" taget="_blank" href="/search/%E6%B2%A1%E6%9C%89my.cnf/1.htm">没有my.cnf</a> <div>Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的，至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法，第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动，第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r</div> </li> <li><a href="/article/948.htm" title="Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题" target="_blank">Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/root/1.htm">root</a> <div>原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/ Step 4: Run ADB command from your PC On the PC, you need install Amazon Fire ADB driver and instal</div> </li> <li><a href="/article/1075.htm" title="javascript 中var提升的典型实例" target="_blank">javascript 中var提升的典型实例</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>// 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m</div> </li> <li><a href="/article/1202.htm" title="定时器和获取时间的使用" target="_blank">定时器和获取时间的使用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">时间的转换</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>定时器:定时创建任务在游戏设计的时候用的比较多 Timer();定时器 TImerTask();Timer的子类由 Timer 安排为一次执行或重复执行的任务。定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定</div> </li> <li><a href="/article/1329.htm" title="JDK1.5 Queue" target="_blank">JDK1.5 Queue</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Queue/1.htm">Queue</a> <div>JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方</div> </li> <li><a href="/article/1456.htm" title="http认证原理和https" target="_blank">http认证原理和https</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a> <div>一.基础介绍在URL前加https://前缀表明是用SSL加密的。你的电脑与服务器之间收发的信息传输将更加安全。 Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后</div> </li> <li><a href="/article/1583.htm" title="【Java范型五】范型继承" target="_blank">【Java范型五】范型继承</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2 package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T</div> </li> <li><a href="/article/1710.htm" title="【Nginx六】nginx.conf常用指令(Directive)" target="_blank">【Nginx六】nginx.conf常用指令(Directive)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Directive/1.htm">Directive</a> <div>1. worker_processes 8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行 nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process </div> </li> <li><a href="/article/1837.htm" title="lua 遍历Header头部" target="_blank">lua 遍历Header头部</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+header+%E9%81%8D%E5%8E%86%E3%80%80/1.htm">lua header 遍历　</a> <div> local headers = ngx.req.get_headers() ngx.say("headers begin", "<br/>") ngx.say("Host : ", he</div> </li> <li><a href="/article/1964.htm" title="java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。" target="_blank">java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3</div> </li> <li><a href="/article/2091.htm" title="redis" target="_blank">redis</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require</div> </li> <li><a href="/article/2218.htm" title="[JAVA图像与图形]现有的GPU架构支持JAVA语言吗？" target="_blank">[JAVA图像与图形]现有的GPU架构支持JAVA语言吗？</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/java%E8%AF%AD%E8%A8%80/1.htm">java语言</a> <div> 无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情 </div> </li> <li><a href="/article/2345.htm" title="安装ubuntu14.04登录后花屏了怎么办" target="_blank">安装ubuntu14.04登录后花屏了怎么办</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>这个情况，一般属于显卡驱动问题。可以先尝试安装显卡的官方闭源驱动。按键盘三个键：CTRL + ALT + F1 进入终端，输入用户名和密码登录终端：安装amd的显卡驱动 sudo apt-get install fglrx 安装nvidia显卡驱动 sudo ap</div> </li> <li><a href="/article/2472.htm" title="SSL 与数字证书的基本概念和工作原理" target="_blank">SSL 与数字证书的基本概念和工作原理</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6/1.htm">证书</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E9%92%A5/1.htm">密钥</a><a class="tag" taget="_blank" href="/search/%E7%AD%BE%E5%90%8D/1.htm">签名</a> <div>SSL 与数字证书的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher</div> </li> <li><a href="/article/2599.htm" title="Ubuntu设置ip的步骤" target="_blank">Ubuntu设置ip的步骤</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D</div> </li> <li><a href="/article/2726.htm" title="php包管理工具推荐" target="_blank">php包管理工具推荐</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Composer/1.htm">Composer</a> <div>http://www.phpcomposer.com/ Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。中文文档入门指南下载安装包列表 Composer 中国镜像 </div> </li> <li><a href="/article/2853.htm" title="Gson使用四（TypeAdapter）" target="_blank">Gson使用四（TypeAdapter）</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BD%AC%E6%8D%A2%E5%99%A8/1.htm">Gson自定义转换器</a><a class="tag" taget="_blank" href="/search/gsonTypeAdapter/1.htm">gsonTypeAdapter</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述 Gson的TypeAapter可以理解成自定义序列化和返序列化二、应用场景举例例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都</div> </li> <li><a href="/article/2980.htm" title="JQM控件之Navbar和Tabs" target="_blank">JQM控件之Navbar和Tabs</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>在JQM中使用导航栏Navbar是简单的。只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu</div> </li> <li><a href="/article/3107.htm" title="利用归并排序算法对大文件进行排序" target="_blank">利用归并排序算法对大文件进行排序</a> <span class="text-muted">iwindyforest</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F/1.htm">归并排序</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%96%87%E4%BB%B6/1.htm">大文件</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%B2%BB%E6%B3%95/1.htm">分治法</a><a class="tag" taget="_blank" href="/search/Merge+sort/1.htm">Merge sort</a> <div> 归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想：大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数低于限制行数的子文件直接排序两个排序好的子文件归并到父文件直到最后所有排序好的父文件归并到输入</div> </li> <li><a href="/article/3234.htm" title="iOS UIWebView URL拦截" target="_blank">iOS UIWebView URL拦截</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/UIWebView/1.htm">UIWebView</a> <div>本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有</div> </li> <li><a href="/article/3361.htm" title="索引的碎片整理SQL语句" target="_blank">索引的碎片整理SQL语句</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片</div> </li> <li><a href="/article/3488.htm" title="Angularjs同步操作http请求with $promise" target="_blank">Angularjs同步操作http请求with $promise</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>// Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) { </div> </li> <li><a href="/article/3615.htm" title="hibernate联合查询问题" target="_blank">hibernate联合查询问题</a> <span class="text-muted">sxj19881213</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/HQL/1.htm">HQL</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E5%90%88%E6%9F%A5%E8%AF%A2/1.htm">联合查询</a> <div>最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2） 1 几个常识：（1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。（2）hql的默认查询策略，在进行联合查询时，会产</div> </li> <li><a href="/article/3742.htm" title="struts2.xml" target="_blank">struts2.xml</a> <span class="text-muted">wuai</span> <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache</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.  </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>