Obcy

HTML+css入门——认识标签（1）

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。下面就是一个简单的网页。效果图如下：

我们来分析一下，这个网页由哪些html标签组成：

“勇气”是网页内容文章的标题，

就是标题标签，它在网页上的代码写成勇气。

“三年级时...我也没勇气参加。” 是网页中文章的段落，

是段落标签。它在网页上的代码写成 三年级时...我也没勇气参加。

网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成

1. 标签由英文尖括号<和>括起来，如就是一个标签。

2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

如：

（1）

（2）

（3）

3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

里嵌套

，那么

必须放在

的前面。如下图所示。

4. HTML标签不区分大小写，

和

是一样的，但建议小写，因为大部分程序员都以小写为准。

一个HTML文件是有自己固定的结构的。


    ...
    ...

代码讲解：

1. 称为根标签，所有的网页标签都在中。

2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有</code>、<code><script></code>、 <code><style></code>、<code><link></code>、 <code><meta></code>等标签，头部标签在下一小节中会有详细介绍。 3. 在<code><body></code>和<code></body></code>标签之间的内容是网页的主要内容，如<code><h1></code>、<code></code>、<code><a></code>、<code><img></code>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 <hr> 我们来了解一下<code><head></code>标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分： <pre class="has" style="margin-left:0px;"><code class="language-code"><head> <title>...

</code>标签：在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

 
  例如： 
  
    hello world
 
  </code>标签的内容“hello world”会在浏览器中的标题栏上显示出来，如下图所示：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/4ef2702cb4984797b4716a7dfb83b2d5.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第4张图片" class="has" height="215" src="http://img.e-com-net.com/image/info8/4ef2702cb4984797b4716a7dfb83b2d5.jpg" width="410" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <hr> 
  <h2 id="J_CodeLang">了解HTML的代码注释</h2> 
  <p>什么是<strong>代码注释</strong>？<strong>代码注释的作用</strong>是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。<strong>代码注释</strong>不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><strong><!--</strong><strong>注释文字 --></strong></code></p> 
  <hr> 
  <p>学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。</p> 
  <p><strong>标签的用途</strong>：我们学习网页制作时，常常会听到一个词，<strong>语义化</strong>。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的<strong>标题</strong>就可以用标题标签，网页上的各个栏目的<strong>栏目名称</strong>也可以使用标题标签。文章中内容的段落就得放在<strong>段落标签</strong>中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。</p> 
  <p>讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？</p> 
  <p>1. 更容易被搜索引擎收录。</p> 
  <p>2. 更容易让屏幕阅读器读出网页内容。</p> 
  <hr> 
  <p>在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/8a8848ebc554466ab0bd7bbce920232c.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第5张图片" class="has" height="334" src="http://img.e-com-net.com/image/info8/8a8848ebc554466ab0bd7bbce920232c.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>在浏览器中的显示效果：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/4ec4bad1010247c789d2adf6f53697e5.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第6张图片" class="has" src="http://img.e-com-net.com/image/info8/4ec4bad1010247c789d2adf6f53697e5.png" width="576" height="351" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <hr> 
  <p>如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。</p> 
  <p>语法：</p> 
  <p><code><p>段落文本</p></code></p> 
  <p> 注意一段文字一个<code><p></code>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到<strong>3</strong>个<code><p></code>标签中。如下图所示。</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/7ec4cddcb311414284bfcc09fda631d0.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第7张图片" class="has" height="211" src="http://img.e-com-net.com/image/info8/7ec4cddcb311414284bfcc09fda631d0.png" width="483" style="border:1px solid black;"></a></p> 
  <p> 在浏览器中显示的效果：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a7d86d383c94438aa460b38a7f2160c4.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第8张图片" class="has" src="http://img.e-com-net.com/image/info8/a7d86d383c94438aa460b38a7f2160c4.png" width="596" height="399" style="border:1px solid black;"></a></p> 
  <p><code><p></code>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。</p> 
  <hr> 
  <h2>了解<hx>标签，为你的网页添加标题</h2> 
  <p>文章的段落用<code><p></code>标签，那么文章的标题用什么标签呢？在本节我们将使用<code><hx></code>标签来制作<strong>文章的标题</strong>。<br> 标题标签一共有6个，<code>h1、h2、h3、h4、h5、h6</code>分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<code><h1></code>是最高的等级。<br><strong>语法：</strong><br><code><hx>标题文本</hx></code> (x为1-6)</p> 
  <p>注意：因为<code>h1</code>标签在网页中比较重要，所以一般<code>h1</code>标签被用在网站名称上。腾讯网站就是这样做的。如：<code><h1>腾讯网</h1></code></p> 
  <p><strong>h1-h6</strong><strong>标签的默认样式：</strong></p> 
  <p>标签代码：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/84e257b306b547d6a2246b15e9049b24.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第9张图片" class="has" src="http://img.e-com-net.com/image/info8/84e257b306b547d6a2246b15e9049b24.png" width="172" height="125" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p>在浏览器中显示的样式：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/a8dd472ed9264311a317427df6df3686.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第10张图片" class="has" height="399" src="http://img.e-com-net.com/image/info8/a8dd472ed9264311a317427df6df3686.jpg" width="596" style="border:1px solid black;"></a></p> 
  <p>从上面的图片可以看出标题标签的样式都会加粗，<code>h1</code>标签字号最大，<code>h2</code>标签字号相对h1要小，以此类推<code>h6</code>标签的字号最小。</p> 
  <hr> 
  <h2>加入强调语气，使用<strong>和<em>标签</h2> 
  <p>       有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。</p> 
  <p>       但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用<strong>斜体</strong>表示，<strong> 用<strong>粗体</strong>表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><em>需要强调的文本</em>  </code></p> 
  <p><code><strong>需要强调的文本</strong></code> </p> 
  <p>如，在网上商城中，某产品的打折后的价格是需要强调的。如下图。</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/0ec219cf30d44d8bbad0e9d55b6ef507.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第11张图片" class="has" height="271" src="http://img.e-com-net.com/image/info8/0ec219cf30d44d8bbad0e9d55b6ef507.jpg" width="172" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <hr> 
  <h2>使用<span>标签为文字设置单独样式</h2> 
  <p>这一小节讲解<span>标签，我们对<code><em></code>、<code><strong></code>、<code><span></code>这三个标签进行一下总结：</p> 
  <p>1. <code><em></code>和<code><strong></code>标签是为了<strong>强调</strong>一段话中的关键字时使用，它们的语义是<strong>强调。</strong></p> 
  <p>2. <span style="color:#f33b45;"><code><span></code>标签是没有语义的</span>，<span style="color:#f33b45;">它的作用就是为了设置单独的样式用的。</span></p> 
  <p>如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了<strong>强调</strong>“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。</p> 
  <p>如下面例子：</p> 
  <p><style></p> 
  <p>span{</p> 
  <p>color:blue;</p> 
  <p>}</p> 
  <p></style></p> 
  <pre class="has"><code class="language-html"><p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p></code></pre> 
  <p><strong>语法：</strong></p> 
  <p><code><span>文本</span></code></p> 
  <hr> 
  <h2><q>标签，短文本引用</h2> 
  <p>      想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<code><q></code>标签是你所需要的。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><q>引用文本</q></code></p> 
  <p>如下面例子：</p> 
  <pre class="has"><code class="language-html"><p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p></code></pre> 
  <p>1. “<strong>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</strong>” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字，所以需要使用<code><q></q></code>实现引用。</p> 
  <p>2. 注意要引用的文本不用加<strong>双引号</strong>，浏览器会对q标签自动添加双引号。</p> 
  <p>下图是代码显示结果：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/733ab646a9c3458cbd1b5978376144c9.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第12张图片" class="has" src="http://img.e-com-net.com/image/info8/733ab646a9c3458cbd1b5978376144c9.png" width="575" height="340" style="border:1px solid black;"></a></p> 
  <p>注意这里用<q>标签的真正关键点不是它的默认样式<strong>双引号</strong>（如果这样我们不如自己在键盘上输入双引号就行了），而是它的<strong>语义：引用别人的话</strong>。</p> 
  <hr> 
  <h2><blockquote>标签，长文本引用</h2> 
  <p>      <blockquote>的作用也是引用别人的文本。但它是对<strong>长文本</strong>的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。</p> 
  <p>      等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<code><q></code>标签是对<strong>简短文本</strong>的引用，比如说引用一句话就用到<code><q></code>标签。</p> 
  <p>      如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<code><strong><</strong>blockquote></code>。</p> 
  <p><strong>语法:</strong></p> 
  <p><code><strong><</strong>blockquote>引用文本</blockquote></code></p> 
  <p>如下面例子：</p> 
  <pre class="has"><code class="language-html"><blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote></code></pre> 
  <p>浏览器对<strong><</strong>blockquote>标签的解析是<strong>缩进样式。如下图所示：</strong></p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/f287d6914e854631b0adc759cfd17474.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第13张图片" class="has" height="264" src="http://img.e-com-net.com/image/info8/f287d6914e854631b0adc759cfd17474.jpg" width="552" style="border:1px solid black;"></a></p> 
  <h2>使用<br>标签分行显示文本</h2> 
  <p>对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果：</p> 
  <p><a href="http://img.e-com-net.com/image/info8/ef14517f2aa94b278affca3f8056ae2c.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第14张图片" class="has" src="http://img.e-com-net.com/image/info8/ef14517f2aa94b278affca3f8056ae2c.jpg" width="626" height="408" style="border:1px solid black;"></a></p> 
  <p>怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<code><br /></code>标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。</p> 
  <p>上节的代码改为：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/ac730fff8c5946d89a7a38491e4d0e1a.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第15张图片" class="has" src="http://img.e-com-net.com/image/info8/ac730fff8c5946d89a7a38491e4d0e1a.png" width="333" height="194" style="border:1px solid black;"></a></p> 
  <p><strong>语法：</strong></p> 
  <p><strong>xhtml1.0写法：</strong></p> 
  <p><code><br /></code></p> 
  <p><strong>html4.01写法：</strong></p> 
  <p><code><br></code></p> 
  <p>大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。</p> 
  <p>      与以前我们学过的标签不一样，<code><br /></code>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<code><br /></code>、<code><hr /></code>和<code><img /></code>。</p> 
  <p><strong>总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<code><br /></code>。</strong></p> 
  <hr> 
  <p>在上一节的例子，我们已经讲解过在html代码中输入<strong>空格</strong>、<strong>回车</strong>都是没有作用的。要想输入空格，必须写入<code> </code>。</p> 
  <p><strong>语法：</strong></p> 
  <p><code> </code></p> 
  <p>在html代码中输入空格是不起作用的。</p> 
  <p><strong>输入空格的正确方法：</strong></p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/cfdce82c945e4f8880b57b9245a2eae6.png" target="_blank"><img alt="HTML+css入门——认识标签（1）_第16张图片" class="has" src="http://img.e-com-net.com/image/info8/cfdce82c945e4f8880b57b9245a2eae6.png" width="494" height="133" style="border:1px solid black;"></a></p> 
  <h2>认识<hr>标签，添加水平横线</h2> 
  <p>在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。</p> 
  <p><strong>语法：</strong></p> 
  <p>html4.01版本<strong> </strong><code><hr></code></p> 
  <p>xhtml1.0版本 <code><hr /></code></p> 
  <p><strong>注意：</strong></p> 
  <p>1. <code><hr /></code>标签和<code><br /></code>标签一样也是一个<strong>空标签</strong>，所以只有一个开始标签，没有结束标签。</p> 
  <p>2. <code><hr /></code>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。</p> 
  <p>3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。</p> 
  <hr> 
  <h2><address>标签，为网页加入地址信息</h2> 
  <p>一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><address>联系地址信息</address></code></p> 
  <p>如：</p> 
  <p><code><address>文档编写：lilian 北京市西城区德外大街10号</address></code></p> 
  <pre class="has"><code class="language-html"><address>
本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>
</address></code></pre> 
  <p>      在浏览器上显示的样式为<strong>斜体</strong>，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<code><address></code>标签的默认样式。</p> 
  <hr> 
  <h2>想加入一行代码吗？使用<code>标签</h2> 
  <p>在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：</p> 
  <p><code><code>var i=i+300;</code></code></p> 
  <p>注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><code>代码语言</code></code></p> 
  <p>注：如果是多行代码，可以使用<pre>标签。</p> 
  <hr> 
  <h2>使用<pre>标签为你的网页加入大段代码</h2> 
  <p>加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：</p> 
  <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/673d208f5ba04a6d9e963859869879e2.jpg" target="_blank"><img alt="HTML+css入门——认识标签（1）_第17张图片" class="has" height="369" src="http://img.e-com-net.com/image/info8/673d208f5ba04a6d9e963859869879e2.jpg" width="471" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p>怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。</p> 
  <p><strong>语法：</strong></p> 
  <p><code><pre>语言代码段</pre></code></p> 
  <p><pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。</p> 
  <p>如下代码：</p> 
  <pre class="has"><code class="language-html"><pre>
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre></code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1187287360098902016"></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">你可能感兴趣的:(Web前端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1950144218282389504.htm"
                           title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a>
                        <span class="text-muted">web前端学习指南</span>

                        <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div>
                    </li>
                    <li><a href="/article/1950020001654173696.htm"
                           title="Web前端交互利用Python跟大模型操作" target="_blank">Web前端交互利用Python跟大模型操作</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/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行</div>
                    </li>
                    <li><a href="/article/1949861487262625792.htm"
                           title="Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验" target="_blank">Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验</a>
                        <span class="text-muted">掘金安东尼</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82/1.htm">字节</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C/1.htm">阿里</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/wasm/1.htm">wasm</a>
                        <div>如果你正在寻找一个能用Rust写前端、桌面应用、移动应用甚至WebAssembly的统一框架，Dioxus是目前生态中最具潜力的选择之一。为什么需要Dioxus？随着WebAssembly（WASM）与Rust的发展，越来越多开发者开始思考：Rust是否能做“全栈”？是否能有像React一样的组件模型？是否可以用Rust写桌面GUI，甚至Web前端？Dioxus正是这个愿景下的产物。它是一个受Re</div>
                    </li>
                    <li><a href="/article/1949767053955100672.htm"
                           title="web前端总复习（一）：http和https" target="_blank">web前端总复习（一）：http和https</a>
                        <span class="text-muted">做一个暴躁的开发</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%80%BB%E5%A4%8D%E4%B9%A0/1.htm">web前端总复习</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a>
                        <div>http和https的基本概念http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一种用于从服务器传输超文本到本地浏览器的传输协议。它可以使得浏览器更加高效，减少网络传输。https：是http的安全版。是一种以安全为目标的http通道。http和https的区别①http传输信息不加密，https传输信息加密。②端口不同，http为80端口，https为443端口。③https协议</div>
                    </li>
                    <li><a href="/article/1949397350233468928.htm"
                           title="前端“武林”争“盟主”？我有我的看法！" target="_blank">前端“武林”争“盟主”？我有我的看法！</a>
                        <span class="text-muted">秋风_bdfd</span>

                        <div>了解过web前端的都知道前端的三大框架，这也是前端攻城狮们向来争论的话题。下面就由小编来发表一下自己的一点小小的看法，如有别的看法，轻喷~前端这三大框架的争议那么大，就是因为使用的人太多了。对于小白来说，一开始接触前端，学习的都是HTML、CSS、JS。但是你学完这3样之后，你还得深入的往后期学，那么要学什么呢？当然就是我们今天所说的框架啦。因为在实际工作中，基本都是直接在框架上构建网站的，很少会</div>
                    </li>
                    <li><a href="/article/1949230177275932672.htm"
                           title="【自动化测试】web前端组件测试范围梳理" target="_blank">【自动化测试】web前端组件测试范围梳理</a>
                        <span class="text-muted">阿槿吃糖</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">前端自动化测试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>测试组件范围划分按钮文字链接单选框多选框输入框计数器选择器级联选择器开关日期选择器上传分页弹窗导航菜单表格富文本编辑器前端组件测试范围梳理-png</div>
                    </li>
                    <li><a href="/article/1949167129051852800.htm"
                           title="学习web前端开发的经验分享" target="_blank">学习web前端开发的经验分享</a>
                        <span class="text-muted">小猿圈加加</span>

                        <div>我们不管学习什么，必不可缺少的一定是恒心和毅力，学习web也一样，更需要不断地学习和练习，因为语言嘛，就是不断地练习才能说得更好，所以不要偷懒，偷懒一定学不会，这就是计算机语言，下面看一下小编的分享吧。感想：1.学习一个技术，不是一看见源代码就是copy，而是仔细阅读后，找到自己想要的，并且自己写出来，自己理解了，下次遇到同样的问题，自己才能解决。2.在电脑上学习的过程中，我总是先建立一个txt，</div>
                    </li>
                    <li><a href="/article/1949091974061551616.htm"
                           title="大学生HTML期末大作业——HTML+CSS+JavaScript音乐网站（爱莫）" target="_blank">大学生HTML期末大作业——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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/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/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a>
                        <div>HTML+CSS+JS【音乐网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目音乐网站7页含网页设计报告二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图</div>
                    </li>
                    <li><a href="/article/1948891766690213888.htm"
                           title="HTML5和SVG篝火动画实战：月亮下的野营炊烟效果" target="_blank">HTML5和SVG篝火动画实战：月亮下的野营炊烟效果</a>
                        <span class="text-muted">申增浩</span>

                        <div>本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML</div>
                    </li>
                    <li><a href="/article/1948219078472691712.htm"
                           title="网络安全基础作业三" target="_blank">网络安全基础作业三</a>
                        <span class="text-muted">Csxyzj</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>回顾web前端的代码用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}.login-container{background-color:white;padding</div>
                    </li>
                    <li><a href="/article/1948102027871580160.htm"
                           title="web前端进阶之Javascript设计模式面向对象篇" target="_blank">web前端进阶之Javascript设计模式面向对象篇</a>
                        <span class="text-muted">jia林</span>

                        <div>前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery</div>
                    </li>
                    <li><a href="/article/1948048756935028736.htm"
                           title="WEB前端登陆页面（复习）" target="_blank">WEB前端登陆页面（复习）</a>
                        <span class="text-muted">En¥</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>1.登陆界面显示2.代码登录界面/*重置所有元素的默认样式，让所有浏览器都从同一起点开始*/*{margin:0;padding:0;box-sizing:border-box;/*让元素的宽度和高度包含内边距和边框*/font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;/*设置默认字体*/}body{/*使用flex布局让登录框在页面中</div>
                    </li>
                    <li><a href="/article/1948044217209122816.htm"
                           title="Xss漏洞总结" target="_blank">Xss漏洞总结</a>
                        <span class="text-muted"></span>

                        <div>一、XSS漏洞简介XSS（Cross-SiteScripting，跨站脚本攻击）是一种常见的Web前端安全漏洞，其主要危害对象是网站的访问用户。攻击者通过在网页中注入恶意脚本代码（如JavaScript、Flash等），诱使用户访问后在其浏览器中执行这些代码，从而达到窃取数据、控制会话等攻击目的。二、XSS漏洞原理XSS的根本原因在于服务器未对用户提交的输入内容进行严格过滤和转义处理，导致用户提供</div>
                    </li>
                    <li><a href="/article/1948032365196537856.htm"
                           title="Python,C++,Go开发芯片电路设计APP" target="_blank">Python,C++,Go开发芯片电路设计APP</a>
                        <span class="text-muted">Geeker-2025</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a>
                        <div>#芯片电路设计APP-Python/C++/Go综合开发方案##系统架构设计```mermaidgraphTDA[Web前端]-->B(Python设计界面)B-->C(GoAPI网关)C-->D[C++核心引擎]D-->E[硬件加速]F[数据库]-->CG[EDA工具链]-->DH[云服务]-->C```##技术栈分工|技术|应用领域|优势||------|----------|------||</div>
                    </li>
                    <li><a href="/article/1947182339083792384.htm"
                           title="我在黑马程序员学web前端" target="_blank">我在黑马程序员学web前端</a>
                        <span class="text-muted">新手来了@click</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1网页由三部分组成1.、html负责网页的结构2.css、负责网页的美化，控制网页元素的样式3、js，负责网页交互html常见的标签：1、form表单input输入框select下拉菜单option下拉列表2、table表格thead表头ｔｂｏｄｙ是表体tr行th表头加粗ｔｄ是列ｂｒ是换行2/CＳＳ常见的三种引入方式行内样式、内部样式、外部样式用ｌｉｎｋ关键字常用的元素选择器：标签选择器、id选择</div>
                    </li>
                    <li><a href="/article/1946838386601947136.htm"
                           title="前端转后端学习路线整理" target="_blank">前端转后端学习路线整理</a>
                        <span class="text-muted"></span>

                        <div>一、背景本人是一名Web前端开发，技术栈是Vue和React，不会Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。因为在CMS部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发（而且在学校的时候基本没学习）来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现</div>
                    </li>
                    <li><a href="/article/1946830189489090560.htm"
                           title="web前端入门到实战：CSS实现8种炫酷按钮" target="_blank">web前端入门到实战：CSS实现8种炫酷按钮</a>
                        <span class="text-muted">大前端世界</span>

                        <div>今天给大家分享8种炫酷按钮的CSS实现。1.3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：3DButton1CSS:.button-3d-1{position:relative;background:orangered;bo</div>
                    </li>
                    <li><a href="/article/1946765248237203456.htm"
                           title="运维技术干货 — 不仅是 Linux 运维最佳实践" target="_blank">运维技术干货 — 不仅是 Linux 运维最佳实践</a>
                        <span class="text-muted">python算法小白</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a>
                        <div>附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ</div>
                    </li>
                    <li><a href="/article/1946744961370222592.htm"
                           title="web前端期末大作业实例 (1500套) 集合" target="_blank">web前端期末大作业实例 (1500套) 集合</a>
                        <span class="text-muted"></span>

                        <div>文章目录web前端期末大作业(1500套)集合一、网页介绍二、网页集合表白网页125套(集合)Echarts大屏数据展示150套(集合)一、基于HTML+Echarts技术制作二、基于VUE+Echarts技术制作更多源码web前端期末大作业(1500套)集合临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页</div>
                    </li>
                    <li><a href="/article/1943946255763828736.htm"
                           title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a>
                        <span class="text-muted"></span>

                        <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div>
                    </li>
                    <li><a href="/article/1943790915952898048.htm"
                           title="前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比" target="_blank">前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比</a>
                        <span class="text-muted"></span>

                        <div>前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指</div>
                    </li>
                    <li><a href="/article/1943173605189808128.htm"
                           title="使用ENO将您的JSON对象生成HTML显示" target="_blank">使用ENO将您的JSON对象生成HTML显示</a>
                        <span class="text-muted">土族程序员</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/eno/1.htm">eno</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请</div>
                    </li>
                    <li><a href="/article/1943151915655294976.htm"
                           title="Web 前端性能优化：从代码到加载速度的全面剖析" target="_blank">Web 前端性能优化：从代码到加载速度的全面剖析</a>
                        <span class="text-muted">码力无边-OEC</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
                        <div>Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指</div>
                    </li>
                    <li><a href="/article/1943104275487977472.htm"
                           title="Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总" target="_blank">Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总</a>
                        <span class="text-muted">代码背锅人日志</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/iphone/1.htm">iphone</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/webview/1.htm">webview</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a>
                        <div>在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本</div>
                    </li>
                    <li><a href="/article/1942692420139413504.htm"
                           title="大学生HTML期末大作业——HTML+CSS+JavaScript传统文化" target="_blank">大学生HTML期末大作业——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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/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/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E4%BD%9C%E4%B8%9A/1.htm">期末作业</a>
                        <div>HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目传统文化精美设计5页含注册登录二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮</div>
                    </li>
                    <li><a href="/article/1942564115193065472.htm"
                           title="大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站（英雄联盟）" target="_blank">大学生HTML期末大作业——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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%BE%8E%E9%A3%9F/1.htm">美食</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a>
                        <div>HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目游戏网站（英雄联盟）含注册登录13页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、</div>
                    </li>
                    <li><a href="/article/1942406664728670208.htm"
                           title="Web前端工程化" target="_blank">Web前端工程化</a>
                        <span class="text-muted"></span>

                        <div>Web前端工程化前端工程化是指将软件工程的方法和原则应用到前端开发中，以提高开发效率、保证代码质量、便于团队协作和项目维护的一套体系化实践。以下是前端工程化的主要内容和实践：核心组成部分1.模块化开发JavaScript模块化：CommonJS、AMD、ESModuleCSS模块化：CSSModules、CSS-in-JS组件化：Vue/React/Angular组件体系微前端：将大型应用拆分为多</div>
                    </li>
                    <li><a href="/article/1941934496525905920.htm"
                           title="Vue3 学习教程，从入门到精通，Vue3 简介知识点及案例代码（1）" target="_blank">Vue3 学习教程，从入门到精通，Vue3 简介知识点及案例代码（1）</a>
                        <span class="text-muted">知识分享小能手</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</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/%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/vue/1.htm">vue</a>
                        <div>Vue3简介知识点及案例代码一、Vue3简介Vue3是一款用于构建用户界面的渐进式JavaScript框架，采用MVVM模式，具有响应式、组件化等优点，可提高开发效率，优化应用性能。二、Web前端开发概述Web前端开发涉及HTML、CSS、JavaScript等技术，用于构建用户可直接交互的页面部分。随着技术发展，出现了多种前端框架，Vue3是其中的优秀代表，基于前后端分离模式，使前后端开发解耦，</div>
                    </li>
                    <li><a href="/article/1941727932401643520.htm"
                           title="WEB前端缓存解决方案" target="_blank">WEB前端缓存解决方案</a>
                        <span class="text-muted">qermeng</span>
<a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF/1.htm">WEB前端</a><a class="tag" taget="_blank" href="/search/SPA/1.htm">SPA</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98%E8%A7%A3%E5%86%B3/1.htm">WEB前端缓存解决</a>
                        <div>WEB前端缓存解决方案问题描述页面缓存js/css缓存问题描述使用angularjs(1.5.0)+gulp(3.9.0)做SPA开发时，修改js后，使用gulp-rev(6.0.1)对文件名进行了修改，但是刷新界面后修改的文件并没有加载，必须使用CRLT+F5深度刷新才可以。页面缓存页面缓存解决方案：js/css缓存通过gulp-rev在文件名增加哈希值来解决缓存问题gulp-rev:Stati</div>
                    </li>
                    <li><a href="/article/1941618973070127104.htm"
                           title="web前端基础知识:表单标签" target="_blank">web前端基础知识:表单标签</a>
                        <span class="text-muted">黄昏终结者</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>一.input系列标签语法:form表单用来收集用户信息的input输入type类型type属性值:text文本password密码框radio单选框checkbox多选框file选择文件submit提交按钮reset重置按钮button普通按钮1.input系列标签-text文本框属性:placeholder占位符文本输入框语法:昵称:2.input系列标签-password密码框属性:plac</div>
                    </li>
                                <li><a href="/article/24.htm"
                                       title="tomcat基础与部署发布" target="_blank">tomcat基础与部署发布</a>
                                    <span class="text-muted">暗黑小菠萝</span>
<a class="tag" taget="_blank" href="/search/Tomcat+java+web/1.htm">Tomcat java web</a>
                                    <div>从51cto搬家了，以后会更新在这里方便自己查看。 
做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 
Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 
一、Tomcat安装 
    安装方式：①运行.exe安装包 
     &n</div>
                                </li>
                                <li><a href="/article/151.htm"
                                       title="网站架构发展的过程" target="_blank">网站架构发展的过程</a>
                                    <span class="text-muted">ayaoxinchao</span>
<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/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a>
                                    <div>1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 
2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 
3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 
4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何</div>
                                </li>
                                <li><a href="/article/278.htm"
                                       title="[信息与安全]数据库的备份问题" target="_blank">[信息与安全]数据库的备份问题</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                                    <div> 
 
      如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题 
  
 如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 
 
   是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? 
 
 &n</div>
                                </li>
                                <li><a href="/article/405.htm"
                                       title="使用maven tomcat plugin插件debug关联源代码" target="_blank">使用maven tomcat plugin插件debug关联源代码</a>
                                    <span class="text-muted">商人shang</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/1.htm">查看源码</a><a class="tag" taget="_blank" href="/search/tomcat-plugin/1.htm">tomcat-plugin</a>
                                    <div>*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 
*配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的</div>
                                </li>
                                <li><a href="/article/532.htm"
                                       title="大访问量高并发" target="_blank">大访问量高并发</a>
                                    <span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AE%BF%E9%97%AE%E9%87%8F%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">大访问量高并发</a>
                                    <div>大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 
 
要列出几点解决方案： 
 
01、优化你的代码和查询语句，合理使用索引 
 
02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 
 
03、采用服务器集群、负载均衡分担大访问量高并发压力 
 
04、数据读写分离 
 
05、合理选用框架，合理架构(推荐分布式架构)。 
 </div>
                                </li>
                                <li><a href="/article/659.htm"
                                       title="cache 服务器" target="_blank">cache 服务器</a>
                                    <span class="text-muted">小猪猪08</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
                                    <div>Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 
　　1.Cache   是怎么样工作的? 
　　Cache   是分配在服务器上</div>
                                </li>
                                <li><a href="/article/786.htm"
                                       title="mysql存储过程" target="_blank">mysql存储过程</a>
                                    <span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>Description:插入大量测试数据 
 
use xmpl;

drop procedure if exists mockup_test_data_sp;

create procedure mockup_test_data_sp(
	in number_of_records int
)
begin
	declare cnt int;
	declare name varch</div>
                                </li>
                                <li><a href="/article/913.htm"
                                       title="CSS的class、id、css文件名的常用命名规则" target="_blank">CSS的class、id、css文件名的常用命名规则</a>
                                    <span class="text-muted">agevs</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>  CSS的class、id、css文件名的常用命名规则 
    (一)常用的CSS命名规则 
　　头：header 
　　内容：content/container 
　　尾：footer 
　　导航：nav 
　　侧栏：sidebar 
　　栏目：column 
　　页面外围控制整体布局宽度：wrapper 
　　左右中：left right </div>
                                </li>
                                <li><a href="/article/1040.htm"
                                       title="全局数据源" target="_blank">全局数据源</a>
                                    <span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a>
                                    <div>实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 
1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l</div>
                                </li>
                                <li><a href="/article/1167.htm"
                                       title="MYSQL的随机查询的实现方法" target="_blank">MYSQL的随机查询的实现方法</a>
                                    <span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，</div>
                                </li>
                                <li><a href="/article/1294.htm"
                                       title="JAVA的getBytes()方法" target="_blank">JAVA的getBytes()方法</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/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a>
                                    <div>    在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！  
    String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： 
    byte[] b_gbk = "</div>
                                </li>
                                <li><a href="/article/1421.htm"
                                       title="AngularJS中操作Cookies" target="_blank">AngularJS中操作Cookies</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Cookies/1.htm">Cookies</a>
                                    <div>        如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。 
        幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎</div>
                                </li>
                                <li><a href="/article/1548.htm"
                                       title="[Maven学习笔记五]Maven聚合和继承特性" target="_blank">[Maven学习笔记五]Maven聚合和继承特性</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>Maven聚合 
  
在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块：   
1. 模型和数据持久化层user-core, 
2. 业务逻辑层user-service以 
3. web展现层user-web， 
user-service依赖于user-core 
user-web依赖于user-core和use</div>
                                </li>
                                <li><a href="/article/1675.htm"
                                       title="【JVM七】JVM知识点总结" target="_blank">【JVM七】JVM知识点总结</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>  1. JVM运行模式 
1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 
1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler </div>
                                </li>
                                <li><a href="/article/1802.htm"
                                       title="linux下查看nginx、apache、mysql、php的编译参数" target="_blank">linux下查看nginx、apache、mysql、php的编译参数</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 
1、nginx 
[root@361way ~]# /App/nginx/sbin/nginx -V
nginx: nginx version: nginx/</div>
                                </li>
                                <li><a href="/article/1929.htm"
                                       title="unity中运用Resources.Load的方法？" target="_blank">unity中运用Resources.Load的方法？</a>
                                    <span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a>
                                    <div>问：unity中运用Resources.Load的方法？ 
答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 
1、unity实时替换的物体即是依据环境条件</div>
                                </li>
                                <li><a href="/article/2056.htm"
                                       title="线段树-入门" target="_blank">线段树-入门</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</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%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a>
                                    <div>


/**
 * 线段树入门
 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次
 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i]
 * 
 * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18
 * @author lijinna</div>
                                </li>
                                <li><a href="/article/2183.htm"
                                       title="全选与反选" target="_blank">全选与反选</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/%E5%85%A8%E9%80%89/1.htm">全选</a>
                                    <div>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
</div>
                                </li>
                                <li><a href="/article/2310.htm"
                                       title="vim一些简单记录" target="_blank">vim一些简单记录</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                                    <div>mac在/usr/share/vim/vimrc linux在/etc/vimrc 
  
1、问：后退键不能删除数据，不能往后退怎么办？ 
      答：在vimrc中加入set backspace=2 
  
2、问：如何控制tab键的缩进？ 
      答：在vimrc中加入set tabstop=4 (任何</div>
                                </li>
                                <li><a href="/article/2437.htm"
                                       title="Sublime Text 快捷键" target="_blank">Sublime Text 快捷键</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/sublime/1.htm">sublime</a>
                                    <div>[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：</div>
                                </li>
                                <li><a href="/article/2564.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>
                                    <div>在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容   复制代码代码如下:   
<?  
$a="ABC";  
$b =&$a;  
echo</div>
                                </li>
                                <li><a href="/article/2691.htm"
                                       title="SVN中trunk,branches,tags用法详解" target="_blank">SVN中trunk,branches,tags用法详解</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a>
                                    <div>Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。</div>
                                </li>
                                <li><a href="/article/2818.htm"
                                       title="对软件设计的思考" target="_blank">对软件设计的思考</a>
                                    <span class="text-muted">e200702084</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
                                    <div>软件设计的宏观与微观  
 
   软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传</div>
                                </li>
                                <li><a href="/article/2945.htm"
                                       title="同步、异步、阻塞、非阻塞" target="_blank">同步、异步、阻塞、非阻塞</a>
                                    <span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%98%BB%E5%A1%9E/1.htm">非阻塞</a>
                                    <div>同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。 
  
同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 
场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。 
  
异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 
实现：</div>
                                </li>
                                <li><a href="/article/3072.htm"
                                       title="Reverse SSH Tunnel 反向打洞實錄" target="_blank">Reverse SSH Tunnel 反向打洞實錄</a>
                                    <span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a>
                                    <div>實際的操作步驟：  
# 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port
ssh -NfR 12345:localhost:22 fred@myhost.com

# 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器
ssh localhost -p 1</div>
                                </li>
                                <li><a href="/article/3199.htm"
                                       title="Hibernate中的缓存" target="_blank">Hibernate中的缓存</a>
                                    <span class="text-muted">Josh_Persistence</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/Hiberante%E7%BC%93%E5%AD%98/1.htm">Hiberante缓存</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E7%BC%93%E5%AD%98/1.htm">查询缓存</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">二级缓存</a>
                                    <div>Hibernate中的缓存 
  
一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 
Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存</div>
                                </li>
                                <li><a href="/article/3326.htm"
                                       title="对象关系行为模式之延迟加载" target="_blank">对象关系行为模式之延迟加载</a>
                                    <span class="text-muted">home198979</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/1.htm">延迟加载</a>
                                    <div>形象化设计模式实战     HELLO!架构 
  
一、概念 
Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 
延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。 
  
  
二、实现延迟加载 
实现Lazy Load主要有四种方法：延迟初始化、虚</div>
                                </li>
                                <li><a href="/article/3453.htm"
                                       title="xml 验证" target="_blank">xml 验证</a>
                                    <span class="text-muted">pengfeicao521</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E8%A7%A3%E6%9E%90/1.htm">xml解析</a>
                                    <div>有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 
 
public static void testPattern() { 
 
 // 含有非法字符的串 
 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282</div>
                                </li>
                                <li><a href="/article/3580.htm"
                                       title="div设置半透明效果" target="_blank">div设置半透明效果</a>
                                    <span class="text-muted">spjich</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8D%8A%E9%80%8F%E6%98%8E/1.htm">半透明</a>
                                    <div>为div设置如下样式： 
  
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}  
  
  
  
 说明： 
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci</div>
                                </li>
                                <li><a href="/article/3707.htm"
                                       title="你真的了解单例模式么？" target="_blank">你真的了解单例模式么？</a>
                                    <span class="text-muted">w574240966</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>    单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。 
  
一，单例模式的5中写法。（回字的四种写法，哈哈。） 
    1，懒汉式 
          （1）线程不安全的懒汉式 
    public cla</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>