块元素和行内元素比较

一.常见的块元素和行内元素

• 常见的块元素

 >//定义地址
 >//定义表格标题
 
    //定义列表中定义条目
 <div>     //定义文档中的分区或节
 
    //定义列表
 
     //定义列表中的项目
 
 //定义一个框架集
 
 //创建 HTML 表单
 
    //定义最大的标题
 
    // 定义副标题
 
     //定义标题
 
     //定义标题
 
     //定义标题
 
     //定义最小的标题
 
     //创建一条水平线
 
    //元素为 fieldset 元素定义标题
 
     //标签定义列表项目
    <span class="hljs-comment"> //为那些不支持框架的浏览器显示文本，于 frameset 元素内部</span>
 <noscript>   <span class="hljs-comment"> //定义在脚本未被执行时的替代内容</span>
 <ol>    <span class="hljs-comment"> //定义有序列表</span>
 <ul>   <span class="hljs-comment"> //定义无序列表</span>
 <p>    <span class="hljs-comment"> //标签定义段落</span>
 <pre>    <span class="hljs-comment"> //定义预格式化的文本</span>
 <table>    <span class="hljs-comment"> //标签定义 HTML 表格</span>
 <tbody>    <span class="hljs-comment"> //标签表格主体（正文）</span>
 <td>   <span class="hljs-comment"> //表格中的标准单元格</span>
 <tfoot>    <span class="hljs-comment"> //定义表格的页脚（脚注或表注）</span>
 <th>   <span class="hljs-comment"> //定义表头单元格</span>
 <thead>   <span class="hljs-comment"> //标签定义表格的表头</span>
 <tr>    <span class="hljs-comment"> //定义表格中的行</span></code></pre> 
  <ul> 
   <li>常见的行内元素</li> 
  </ul> 
  <pre class="prettyprint"><code class=" hljs oxygene"> <a>     <span class="hljs-comment">//标签可定义锚</span>
 <abbr>     <span class="hljs-comment">//表示一个缩写形式</span>
 <acronym>     <span class="hljs-comment">//定义只取首字母缩写</span>
 <b>     <span class="hljs-comment">//字体加粗</span>
 <bdo>     <span class="hljs-comment">//可覆盖默认的文本方向</span>
 <big>     <span class="hljs-comment">//大号字体加粗</span>
 <br>     <span class="hljs-comment">//换行</span>
 <cite>     <span class="hljs-comment">//引用进行定义</span>
 <code>    <span class="hljs-comment">// 定义计算机代码文本</span>
 <dfn>     <span class="hljs-comment">//定义一个定义项目</span>
 <em>     <span class="hljs-comment">//定义为强调的内容</span>
 <i>     <span class="hljs-comment">//斜体文本效果</span>
 <img>     <span class="hljs-comment">//向网页中嵌入一幅图像</span>
 <input>     <span class="hljs-comment">//输入框</span>
 <kbd>     <span class="hljs-comment">//定义键盘文本</span>
 <label>     <span class="hljs-comment">//标签为 input 元素定义标注（标记）</span>
 <q>     <span class="hljs-comment">//定义短的引用</span>
 <samp>     <span class="hljs-comment">//定义样本文本</span>
 <<span class="hljs-keyword">select</span>> <span class="hljs-comment">// 创建单选或多选菜单</span>
 <small>     <span class="hljs-comment">//呈现小号字体效果</span>
 <span>     <span class="hljs-comment">//组合文档中的行内元素</span>
 <<span class="hljs-keyword">strong</span>> <span class="hljs-comment">//加粗</span>
 <sub>     <span class="hljs-comment">//定义下标文本</span>
 <sup>     <span class="hljs-comment">//定义上标文本</span>
 <textarea>     <span class="hljs-comment">//多行的文本输入控件</span>
 <tt>     <span class="hljs-comment">//打字机或者等宽的文本效果</span>
 <<span class="hljs-keyword">var</span>>    <span class="hljs-comment">// 定义变量</span></code></pre> 
  <ul> 
   <li>可变元素</li> 
  </ul> 
  <pre class="prettyprint"><code class=" hljs xml"> <span class="hljs-tag"><<span class="hljs-title">button</span>></span>     //按钮
 <span class="hljs-tag"><<span class="hljs-title">del</span>></span>    // 定义文档中已被删除的文本
 <span class="hljs-tag"><<span class="hljs-title">iframe</span>></span>     //创建包含另外一个文档的内联框架（即行内框架）
 <span class="hljs-tag"><<span class="hljs-title">ins</span>></span>     //标签定义已经被插入文档中的文本
 <span class="hljs-tag"><<span class="hljs-title">map</span>></span>     //客户端图像映射（即热区）
 <span class="hljs-tag"><<span class="hljs-title">object</span>></span>     //object对象
 <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">     <span class="hljs-comment">//客户端脚本</span></span></code></pre> 
  <h3 id="二块元素和行内元素的特点与区别">二.块元素和行内元素的特点与区别</h3> 
  <p>1.块元素的特点:块元素独占一行，垂直排列，可以包含行内元素和块元素,可以设置盒子模型的所有属性。</p> 
  <p>2.行内元素的特点:行内元素水平排列开来，宽高都是auto，宽高设置无效，设置的padding,border都能正常显示，但是在布局上只有水平方向的有作用，垂直方向设置的盒子属性值无效，margin也是如此。</p> 
  <p>如图，在行内元素设置padding,border,margin后，看p标签，紧挨着行内元素的content部分，说明margin-top,border-top,padding-top在它面前无作用，然后看222，设置的padding-right,border-right,margin-right都起了作用，经过测试padding-left,border-left,margin-left也有作用，黑色的部分也紧挨着行内元素的content部分，说明了margin-bottom,border-bottom,padding-bottom也没作用，<strong>总结起来就是：margin,padding,border都是水平有效，垂直无效。</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/84524e4d95e14a20a2369d5eba6ff849.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/84524e4d95e14a20a2369d5eba6ff849.png" alt="块元素和行内元素比较_第1张图片" title="" width="541" height="241" style="border:1px solid black;"></a></p> 
  <p>3.补充:并非所有的行内元素不能设置宽高，这就要说到替换元素和非替换元素。</p> 
  <p><strong>替换元素</strong>：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有width和height，可以设定，替换元素是其内容不受CSS视觉格式化模型控制的元素。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。比如常见的替换元素有:</p> 
  <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">img</span>></span>、<span class="hljs-tag"><<span class="hljs-title">input</span>></span>、<span class="hljs-tag"><<span class="hljs-title">textarea</span>></span>、<span class="hljs-tag"><<span class="hljs-title">select</span>></span>、<span class="hljs-tag"><<span class="hljs-title">object</span>></span></code></pre> 
  <p><strong>非替换元素</strong>:HTML 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来，CSS渲染模型不考虑替换元素内容的渲染</p> 
  <p><strong>代码如下:</strong></p> 
  <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>块元素和行内元素<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span>></span><span class="css">

        *<span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;

        <span class="hljs-rule">}</span></span>
        <span class="hljs-tag">body</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#d447b4</span></span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">26</span>px</span></span>;
        <span class="hljs-rule">}</span></span>


        <span class="hljs-class">.a1</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">100</span>px</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">20</span>px</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> blue</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px solid red</span></span>;

        <span class="hljs-rule">}</span></span>

        <span class="hljs-class">.div1</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> black</span></span>;
        <span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-comment"><!--块元素时正常的盒子模型，行内元素则不同，行内元素不能设置宽高（宽为auto,高为auto），
    可以设置padding，但是在换行后-元素是顶着上一行行内元素的content排列，
    没把padding-bottom计算上，设置的margin-bottom也没用，水平的padding和margin有用,border也是如此--></span>

    <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"position: relative;z-index: 11;"</span>></span>helloooooooooooo2<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    111<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span><span class="hljs-value">class="a1"</span>></span>行内元素1<span class="hljs-tag"></<span class="hljs-title">a</span>></span>222
   <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"div1"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>


<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code></pre> 
  <h3 id="三块元素和行内元素特性转换">三.块元素和行内元素特性转换</h3> 
  <p>说的转换其实就是块元素能并排排列，行内元素能拥有块元素的特点(很大一部分就是设置宽高)</p> 
  <ol> 
   <li>块元素转换:display：inline-block,float(脱离文档流，当然就没有了独占整行的特性了)</li> 
   <li>行内元素转换:display: block（占据整行），inline-block(同时拥有行内元素和块元素特点)</li> 
  </ol> 
  <p>最后说一句，博客难免有疏漏之处，望各位大神多多指教。</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1292657925692661760"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1892453179853959168.htm"
                           title="微信支付-扫码支付全流程" target="_blank">微信支付-扫码支付全流程</a>
                        <span class="text-muted">自娱自乐22</span>
<a class="tag" taget="_blank" href="/search/thinkphp/1.htm">thinkphp</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E6%89%AB%E7%A0%81%E6%94%AF%E4%BB%98/1.htm">微信扫码支付</a>
                        <div>微信支付官方文档：`https://pay.weixin.qq.com/wiki/doc/api/index.html`微信支付分为2种模式：【模式一】：商户后台系统根据微信支付规则链接生成二维码，链接中带固定参数productid（可定义为产品标识或订单号）。用户扫码后，微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL)，商户后台系统根据pr</div>
                    </li>
                    <li><a href="/article/1892453053508939776.htm"
                           title="mac+php5.3的docker-compose.yml分享" target="_blank">mac+php5.3的docker-compose.yml分享</a>
                        <span class="text-muted">自娱自乐22</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a>
                        <div>version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp</div>
                    </li>
                    <li><a href="/article/1892449143461310464.htm"
                           title="Python+Playwright常用元素定位方法" target="_blank">Python+Playwright常用元素定位方法</a>
                        <span class="text-muted">HAMYHF</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a>
                        <div>CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ</div>
                    </li>
                    <li><a href="/article/1892446115870076928.htm"
                           title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
                    </li>
                    <li><a href="/article/1892421248793767936.htm"
                           title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
                        <span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a>
                        <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
                    </li>
                    <li><a href="/article/1892421249762652160.htm"
                           title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
                        <span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a>
                        <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
                    </li>
                    <li><a href="/article/1892413304811352064.htm"
                           title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
                        <span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
                        <div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
                    </li>
                    <li><a href="/article/1892412800781840384.htm"
                           title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
                        <span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
                        <div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
                    </li>
                    <li><a href="/article/1892412295414345728.htm"
                           title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a>
                        <span class="text-muted">vvv666s</span>

                        <div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div>
                    </li>
                    <li><a href="/article/1892410530585440256.htm"
                           title="EDA事件驱动架构 领域事件 Event Sourcing" target="_blank">EDA事件驱动架构 领域事件 Event Sourcing</a>
                        <span class="text-muted">talentluke</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a>
                        <div>摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心，与SOA以服务为核心有本质区别，是状态模式的延伸到架构上，事件是触发状态变化的根源，事件是介于业务和技术两者之间的概念，用户界面是事件主要发生来源，事件也可以来源其他系统或模块，通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用，事件也可以用于</div>
                    </li>
                    <li><a href="/article/1892407376435277824.htm"
                           title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a>
                        <span class="text-muted">方向感超强的</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
                    </li>
                    <li><a href="/article/1892395273758502912.htm"
                           title="【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
                        <span class="text-muted">网安詹姆斯</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                        <div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S</div>
                    </li>
                    <li><a href="/article/1892390738520502272.htm"
                           title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
                        <div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
                    </li>
                    <li><a href="/article/1892389477767245824.htm"
                           title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a>
                        <span class="text-muted">Ama_tor</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div>
                    </li>
                    <li><a href="/article/1892375095628853248.htm"
                           title="MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源" target="_blank">MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源</a>
                        <span class="text-muted">希希分享</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E5%B8%8C%E7%BD%9158soho_cn/1.htm">软希网58soho_cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%B5%84%E6%BA%90/1.htm">源码资源</a><a class="tag" taget="_blank" href="/search/%E4%BB%BF%E6%AF%92%E8%88%8C%E8%87%AA%E9%80%82%E5%BA%94%E4%B8%BB%E9%A2%98%2F/1.htm">仿毒舌自适应主题/</a>
                        <div>基于MxonePro二开的主题，全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明：1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台，然后再进入后台设置4、主题后台地址：MXTUMAX图图主题,/admin.php/admin/m</div>
                    </li>
                    <li><a href="/article/1892366015967326208.htm"
                           title="使用Python获取在线股票交易网站的实时交易数据" target="_blank">使用Python获取在线股票交易网站的实时交易数据</a>
                        <span class="text-muted">嵌入式开发项目</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E7%B2%BE%E9%80%9A%E4%B8%93%E6%A0%8F/1.htm">2025年爬虫精通专栏</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，</div>
                    </li>
                    <li><a href="/article/1892361849689665536.htm"
                           title="【FastAPI 】FastAPI 模板：提供静态文件" target="_blank">【FastAPI 】FastAPI 模板：提供静态文件</a>
                        <span class="text-muted">iFakeCoder</span>
<a class="tag" taget="_blank" href="/search/Flask/1.htm">Flask</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样</div>
                    </li>
                    <li><a href="/article/1892358824027811840.htm"
                           title="vue制作导航栏html,Vue实现导航栏菜单" target="_blank">vue制作导航栏html,Vue实现导航栏菜单</a>
                        <span class="text-muted">DataQueen</span>
<a class="tag" taget="_blank" href="/search/vue%E5%88%B6%E4%BD%9C%E5%AF%BC%E8%88%AA%E6%A0%8Fhtml/1.htm">vue制作导航栏html</a>
                        <div>本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内</div>
                    </li>
                    <li><a href="/article/1892308146966294528.htm"
                           title="css给网页添加 黑白滤镜" target="_blank">css给网页添加 黑白滤镜</a>
                        <span class="text-muted">nqxcwl</span>
<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/%E7%BB%99%E7%BD%91%E9%A1%B5%E6%B7%BB%E5%8A%A0%E9%BB%91%E7%99%BD%E6%BB%A4%E9%95%9C/1.htm">给网页添加黑白滤镜</a>
                        <div>/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}</div>
                    </li>
                    <li><a href="/article/1892303334145060864.htm"
                           title="Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程" target="_blank">Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程</a>
                        <span class="text-muted">java_lilin</span>
<a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a><a class="tag" taget="_blank" href="/search/pjsua2/1.htm">pjsua2</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a>
                        <div>1.安装swigwin-4.0.1下载地址http://www.swig.org/download.html注意是swigwinWindowsusersshoulddownloadswigwin-4.0.1whichincludesaprebuiltexecutable.配置目录到winpath2.下载pjproject-2.10.zip(如果有python错误请安装py2.7及环境path配置)</div>
                    </li>
                    <li><a href="/article/1892296529092341760.htm"
                           title="前端面试题（HTML篇）" target="_blank">前端面试题（HTML篇）</a>
                        <span class="text-muted">每天一点点~</span>
<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>
                        <div>1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严</div>
                    </li>
                    <li><a href="/article/1892277235986001920.htm"
                           title="个人简历html网页模板，科技感炫酷html简历模板" target="_blank">个人简历html网页模板，科技感炫酷html简历模板</a>
                        <span class="text-muted">孤客网络科技工作室</span>
<a class="tag" taget="_blank" href="/search/html%2Bcss%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">html+css网页开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>炫酷动效登录页引言在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效果，新颖有创意，希望大家能够喜欢。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创</div>
                    </li>
                    <li><a href="/article/1892267654920597504.htm"
                           title="Electron学习" target="_blank">Electron学习</a>
                        <span class="text-muted">星空0107</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>Electron的简介Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序Electron的安装运行cmd,输入npminit，然后一直按enter换行即可输入cnpmielectron-S（如果电脑没有安装cnpm会报错，需要安装</div>
                    </li>
                    <li><a href="/article/1892267275638075392.htm"
                           title="electron学习笔记" target="_blank">electron学习笔记</a>
                        <span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div>
                    </li>
                    <li><a href="/article/1892263746714267648.htm"
                           title="HTML之JavaScript对象" target="_blank">HTML之JavaScript对象</a>
                        <span class="text-muted">录大大i</span>
<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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>HTML之JavaScript对象Document/*参考文档地址：https://www.runoob.com/js/js-obj-intro.htmljsonjava数据类型变量数据类型变量运算符运算符流程控制流程控制函数方法对象面向对象常见对象*Java常用类(类库)1.数组1.数组创建方式2.数组API*/vararr=newArray();//类似于object集合vararr1=new</div>
                    </li>
                    <li><a href="/article/1892256681367236608.htm"
                           title="虚拟DOM和真实DOM的区别" target="_blank">虚拟DOM和真实DOM的区别</a>
                        <span class="text-muted">水煮庄周鱼鱼</span>
<a class="tag" taget="_blank" href="/search/%E6%A6%82%E5%BF%B5/1.htm">概念</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种</div>
                    </li>
                    <li><a href="/article/1892214288949506048.htm"
                           title="写轮眼按钮特效：打造炫酷网页按钮" target="_blank">写轮眼按钮特效：打造炫酷网页按钮</a>
                        <span class="text-muted">孤客网络科技工作室</span>
<a class="tag" taget="_blank" href="/search/html%2Bcss%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">html+css网页开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>写轮眼按钮特效：打造炫酷网页按钮引言在网页设计中，按钮是用户交互的重要元素之一。一个炫酷的按钮特效不仅能提升用户体验，还能为网页增添独特的视觉吸引力。今天，我们将通过CSS和JavaScript来实现一个“写轮眼”按钮特效，灵感来源于《火影忍者》中的经典元素——写轮眼。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创建一个简单的HTML结构</div>
                    </li>
                    <li><a href="/article/1892211766507663360.htm"
                           title="AngularJS中文手册前半部分学习" target="_blank">AngularJS中文手册前半部分学习</a>
                        <span class="text-muted">CV战士plus</span>
<a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>AngularJS简介AngularJS的中文参考手册AngularJS的使用AngularJS是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：SinglePageApplications）可以通过script标签添加到网页中(建议把脚本放在元素的底部。这会提高网页加载速度，因为HTML加载不受制于脚本加载。</div>
                    </li>
                    <li><a href="/article/1892208743769239552.htm"
                           title="后台管理系统的开发" target="_blank">后台管理系统的开发</a>
                        <span class="text-muted">ILL11IIL</span>
<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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>代码HTML部分：后台管理系统首页OPENLAB管理系统管理员：杰斯首页系统设置用户管理店铺管理订单管理积分管理安全退出收起菜单OPENLAB管理系统管理员：杰斯用户信息管理妖娆的分隔线账号：邮箱：搜索妖娆的分隔线ID账号密码头像邮箱状态操作001光头强******gtq@openlab.com启用编辑禁用删除002熊大******xd@openlab.com启用编辑禁用删除003熊二******</div>
                    </li>
                    <li><a href="/article/1892201180927422464.htm"
                           title="今日-Vue框架" target="_blank">今日-Vue框架</a>
                        <span class="text-muted">幼儿园口算大王</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.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/java/1.htm">java</a>
                        <div>什么是VUE框架？Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。Vue的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue也被称为</div>
                    </li>
                                <li><a href="/article/18.htm"
                                       title="jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque" target="_blank">jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque</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/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a><a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a>
                                    <div>XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
</div>
                                </li>
                                <li><a href="/article/145.htm"
                                       title="mysql 分区查询优化" target="_blank">mysql 分区查询优化</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%8C%BA/1.htm">分区</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>


分区查询优化

  引入分区可以给查询带来一定的优势，但同时也会引入一些bug.
  
  分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。
  所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。
  
  可以通过查看explain执行计划，是否携带 partitions</div>
                                </li>
                                <li><a href="/article/272.htm"
                                       title="MYSQL存储过程中使用游标" target="_blank">MYSQL存储过程中使用游标</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/Mysql%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">Mysql存储过程</a>
                                    <div>DELIMITER $$ 
DROP PROCEDURE IF EXISTS getUserInfo $$ 
CREATE PROCEDURE getUserInfo(in date_day datetime)--&nbsp;-- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--&nbsp;&nbsp;&nbsp; BEGINdecla</div>
                                </li>
                                <li><a href="/article/399.htm"
                                       title="mysql 和 sqlite 区别" target="_blank">mysql 和 sqlite 区别</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a>
                                    <div>转载： 
http://www.cnblogs.com/ygm900/p/3460663.html 
 
mysql 和 sqlite 区别 
 
SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 
MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 
 
MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq</div>
                                </li>
                                <li><a href="/article/526.htm"
                                       title="pinyin4j使用" target="_blank">pinyin4j使用</a>
                                    <span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/pinyin4j/1.htm">pinyin4j</a>
                                    <div>首先需要pinyin4j的jar包支持；jar包已上传至附件内 
 
方法一:把汉字转换为拼音；例如：编程转换后则为biancheng 
&nbsp;&nbsp;&nbsp;&nbsp; 
 
/**
     * 将汉字转换为全拼
     * @param src 你的需要转换的汉字
     * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal</div>
                                </li>
                                <li><a href="/article/653.htm"
                                       title="微博发送私信" target="_blank">微博发送私信</a>
                                    <span class="text-muted">随意而生</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E5%8D%9A/1.htm">微博</a>
                                    <div>在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 
http://weibo.com/message/history?uid=****&amp;name=**** 
可以发现其发送提交的Post请求和其中的数据， 
让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。 </div>
                                </li>
                                <li><a href="/article/780.htm"
                                       title="jsp" target="_blank">jsp</a>
                                    <span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>JSP初始化 
&nbsp;&nbsp;&nbsp; 容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 
 
 
JSP执行 
&nbsp;&nbsp;&nbsp; 这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。 
&nbsp;&nbsp;&nbsp; 当JSP网页完成初始化后</div>
                                </li>
                                <li><a href="/article/907.htm"
                                       title="在 Windows 上安装 SVN Subversion 服务端" target="_blank">在 Windows 上安装 SVN Subversion 服务端</a>
                                    <span class="text-muted">AdyZhang</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a>
                                    <div>在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号 
&nbsp; 
最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx 
&nbsp; 
现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使</div>
                                </li>
                                <li><a href="/article/1034.htm"
                                       title="android开发中如何使用 alertDialog从listView中删除数据？" target="_blank">android开发中如何使用 alertDialog从listView中删除数据？</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter&nbsp;，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick&nbsp;方法中 参数 arg2&nbsp; 是选中的序号，但是我不知道如何继续处理下去        1   2   3   </div>
                                </li>
                                <li><a href="/article/1161.htm"
                                       title="jdk-6u26-linux-x64.bin 安装" target="_blank">jdk-6u26-linux-x64.bin 安装</a>
                                    <span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1.上传安装文件(jdk-6u26-linux-x64.bin) 
2.修改权限 
[root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 
3.执行安装文件 
[root@localhost ~]# cd /usr/local 
[root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs</div>
                                </li>
                                <li><a href="/article/1288.htm"
                                       title="MongoDB经典面试题集锦" target="_blank">MongoDB经典面试题集锦</a>
                                    <span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ 
NoSQL是非关系型数据库，NoSQL = Not Only SQL。 
关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 
在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 
在考虑数据库的成熟</div>
                                </li>
                                <li><a href="/article/1415.htm"
                                       title="JavaScript异步编程Promise模式的6个特性" target="_blank">JavaScript异步编程Promise模式的6个特性</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/Promise/1.htm">Promise</a>
                                    <div>&nbsp; &nbsp; &nbsp; &nbsp; Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。 
&nbsp; &nbsp; &nbsp; &nbsp; 在我们开始正式介绍之前，我们想看看Javascript Promise的样子： 
var p = new Promise(function(r</div>
                                </li>
                                <li><a href="/article/1542.htm"
                                       title="[Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager" target="_blank">[Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>ClientWatchManager接口 
//接口的唯一方法materialize用于确定那些Watcher需要被通知
//确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path
public interface ClientWatchManager {
    /**
     * Return a set of watchers that should</div>
                                </li>
                                <li><a href="/article/1669.htm"
                                       title="【Scala十五】Scala核心九：隐式转换之二" target="_blank">【Scala十五】Scala核心九：隐式转换之二</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
                                    <div>隐式转换存在的必要性， 
&nbsp; 
在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下： 
&nbsp; 
val button = new JButton
button.addActionListener(
    new ActionListener {
        def actionPerformed(event: ActionEvent) {
 </div>
                                </li>
                                <li><a href="/article/1796.htm"
                                       title="Android JSON数据的解析与封装小Demo" target="_blank">Android JSON数据的解析与封装小Demo</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>转自：http://www.open-open.com/lib/view/open1420529336406.html 
package com.example.jsondemo; 
import org.json.JSONArray; 
import org.json.JSONException; 
import org.json.JSONObject; 
&nbsp;&nbsp; 
impor</div>
                                </li>
                                <li><a href="/article/1923.htm"
                                       title="[设计]字体创意设计方法谈" target="_blank">[设计]字体创意设计方法谈</a>
                                    <span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a>
                                    <div>&nbsp; 
从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 
如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔</div>
                                </li>
                                <li><a href="/article/2050.htm"
                                       title="单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值" target="_blank">单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值</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/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a>
                                    <div>import java.util.LinkedList;

/*

单调队列 滑动窗口
单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减

题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k.

要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1

问题的另一种描述就</div>
                                </li>
                                <li><a href="/article/2177.htm"
                                       title="struts2处理一个form多个submit" target="_blank">struts2处理一个form多个submit</a>
                                    <span class="text-muted">chiangfai</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a>
                                    <div>web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： 
&lt;s:form action=&quot;submit&quot; method=&quot;post&quot; namespace=&quot;/my&quot;&gt;
&lt;s:textfield name=&quot;msg&quot; label=&quot;叙述：&quot;&gt;</div>
                                </li>
                                <li><a href="/article/2304.htm"
                                       title="shell查找上个月，陷阱及野路子" target="_blank">shell查找上个月，陷阱及野路子</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
                                    <div>date -d &quot;-1 month&quot; +%F 
&nbsp;&nbsp;&nbsp; 以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。 
&nbsp;&nbsp;&nbsp; 野路子解决：假设当天日期大于15号</div>
                                </li>
                                <li><a href="/article/2431.htm"
                                       title="mysql导出数据中文乱码问题" target="_blank">mysql导出数据中文乱码问题</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E6%95%B0%E6%8D%AE/1.htm">导数据</a>
                                    <div>解决mysql导入导出数据乱码问题方法： 
 
１、进入mysql，通过如下命令查看数据库编码方式： 
 
mysql&gt;&nbsp; show variables like 'character_set_%'; 
+--------------------------+----------------------------------------+ 
| Variable_name&nbs</div>
                                </li>
                                <li><a href="/article/2558.htm"
                                       title="SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write" target="_blank">SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write</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/smarty/1.htm">smarty</a><a class="tag" taget="_blank" href="/search/sae/1.htm">sae</a>
                                    <div>&nbsp; 
对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 
官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&amp;catId=11#show_213 
解决方案为： 
&nbsp;       
01  
$path&nbsp;</div>
                                </li>
                                <li><a href="/article/2685.htm"
                                       title="《教父》系列台词" target="_blank">《教父》系列台词</a>
                                    <span class="text-muted">dcj3sjt126com</span>

                                    <div>Your love is also your weak point. 
你的所爱同时也是你的弱点。 
&nbsp; 
If anything in this life is certain, if history has taught us anything, it is 
that you can kill anyone. 
&nbsp; 
不顾家的人永远不可能成为一个真正的男人。&nbsp;&</div>
                                </li>
                                <li><a href="/article/2812.htm"
                                       title="mongodb安装与使用" target="_blank">mongodb安装与使用</a>
                                    <span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a>
                                    <div>一.MongoDB安装和启动,widndows和linux基本相同 
1.下载数据库, 
&nbsp;&nbsp;&nbsp;&nbsp;linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 
2.解压文件,并且放置到合适的位置 
&nbsp;&nbsp;&nbsp;&nbsp;tar -vxf&nbsp;mongodb-linux-x86_64-ubun</div>
                                </li>
                                <li><a href="/article/2939.htm"
                                       title="Git排除目录" target="_blank">Git排除目录</a>
                                    <span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
                                    <div>在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。 
&nbsp; 
有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 
1. &nbsp;针对单一工程排除文件 
这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一</div>
                                </li>
                                <li><a href="/article/3066.htm"
                                       title="Ubuntu 创建开机自启动脚本的方法" target="_blank">Ubuntu 创建开机自启动脚本的方法</a>
                                    <span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a>
                                    <div>转载自：&nbsp;http://rongjih.blog.163.com/blog/static/33574461201111504843245/ 
Ubuntu 创建开机自启动脚本的步骤如下：  
1) 将你的启动脚本复制到&nbsp;/etc/init.d目录下   以下假设你的脚本文件名为 test。   &nbsp;   
2) 设置脚本文件的权限    $ sudo chmod 755</div>
                                </li>
                                <li><a href="/article/3193.htm"
                                       title="第八章 流量复制/AB测试/协程" target="_blank">第八章 流量复制/AB测试/协程</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a><a class="tag" taget="_blank" href="/search/coroutine/1.htm">coroutine</a>
                                    <div>流量复制 
在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发</div>
                                </li>
                                <li><a href="/article/3320.htm"
                                       title="电商系统商品表设计" target="_blank">电商系统商品表设计</a>
                                    <span class="text-muted">lkl</span>

                                    <div>DROP TABLE IF EXISTS `category`; -- 类目表
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `category` (
  `id` int(11) NOT NUL</div>
                                </li>
                                <li><a href="/article/3447.htm"
                                       title="修改phpMyAdmin导入SQL文件的大小限制" target="_blank">修改phpMyAdmin导入SQL文件的大小限制</a>
                                    <span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>　用phpMyAdmin导入mysql数据库时，我的10M的 
数据库不能导入，提示mysql数据库最大只能导入2M。   　　 
phpMyAdmin数据库导入出错：   　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.  </div>
                                </li>
                                <li><a href="/article/3574.htm"
                                       title="Tomcat性能调优方案" target="_blank">Tomcat性能调优方案</a>
                                    <span class="text-muted">Sobfist</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</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>
                                    <div>一、操作系统调优 
 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 
 【适用场景】 任何项目。 
 二、Java虚拟机调优 
 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 
 J</div>
                                </li>
                                <li><a href="/article/3701.htm"
                                       title="SQLServer学习笔记" target="_blank">SQLServer学习笔记</a>
                                    <span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>1、create database school 创建数据库school 
 
2、drop database school 删除数据库school 
 
3、use school 连接到school数据库，使其成为当前数据库 
 
4、create table class(classID int primary key identity not null) 
 创建一个名为class的表，其有一</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>