<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>WJ's Blog</title><link href="http://cestlavi3.github.io/" rel="alternate"></link><link href="http://cestlavi3.github.io/feeds/all.atom.xml" rel="self"></link><id>http://cestlavi3.github.io/</id><updated>2015-12-02T17:41:00+08:00</updated><entry><title>frame与iframe的区别</title><link href="http://cestlavi3.github.io/frame%E4%B8%8Eiframe%E7%9A%84%E5%8C%BA%E5%88%AB.html" rel="alternate"></link><updated>2015-12-02T17:41:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-12-02:frame与iframe的区别.html</id><summary type="html">&lt;p&gt;在java中，frame是一种控件，可作为父窗体加载其他swing控件。那在html中&lt;code&gt;iframe&lt;/code&gt;元素会创建包含另外一个文档的内联框架（即行内框架）。&lt;code&gt;&amp;lt;frame&amp;gt;&lt;/code&gt;标签定义 frameset 中的一个特定的窗口（框架）。&lt;/p&gt;
&lt;p&gt;Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的&lt;code&gt;&amp;lt;Iframe&amp;gt;&amp;lt;/Iframe&amp;gt;&lt;/code&gt;所包含的内容与整个页面是一个整体，而&lt;code&gt;&amp;lt;Frame&amp;gt;&amp;lt;/Frame&amp;gt;&lt;/code&gt;所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。&lt;/p&gt;
&lt;p&gt;两者主要区别如下：
- &lt;strong&gt;frame不能脱离frameSet单独使用，iframe可以；&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;frame必须在frameset里，而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东东；&lt;/strong&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;iframme是活动帧,就像是浮动面板 ，而frame是非活动帧，iframe放在网页的什么地方都行，但是frame只能放到上下左右四个方向； &lt;/strong&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;frame不能放在body中&lt;/strong&gt; 
  如下：&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="c"&gt;&amp;lt;!--&amp;lt;body&amp;gt;--&amp;gt;&lt;/span&gt; 
&lt;span class="nt"&gt;&amp;lt;frameset&lt;/span&gt; &lt;span class="na"&gt;rows=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;50%,*&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt; 
   &lt;span class="nt"&gt;&amp;lt;frame&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;frame&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;/frameset&amp;gt;&lt;/span&gt; 
&lt;span class="c"&gt;&amp;lt;!--&amp;lt;body&amp;gt;--&amp;gt;&lt;/span&gt; 
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用&lt;/strong&gt;
如下：&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt; 
    &lt;span class="nt"&gt;&amp;lt;frameset&amp;gt;&lt;/span&gt;  
      &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
      &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
    &lt;span class="nt"&gt;&amp;lt;/frameset&amp;gt;&lt;/span&gt;  
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;div class="highlight"&gt;&lt;pre&gt;  //以下均可正常显示
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt; 
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt; 

  &lt;span class="c"&gt;&amp;lt;!--&amp;lt;body&amp;gt;--&amp;gt;&lt;/span&gt; 
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="c"&gt;&amp;lt;!--&amp;lt;/body&amp;gt;--&amp;gt;&lt;/span&gt; 
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;frame的高度只能通过frameSet控制，iframe可以自己控制，不能通过frameset控制&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="c"&gt;&amp;lt;!--&amp;lt;body&amp;gt;--&amp;gt;&lt;/span&gt; 
&lt;span class="nt"&gt;&amp;lt;frameset&lt;/span&gt; &lt;span class="na"&gt;rows=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;50%,*&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt; 
   &lt;span class="nt"&gt;&amp;lt;frame&lt;/span&gt;   &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt;   &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;frame&lt;/span&gt;   &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt;   &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;/frameset&amp;gt;&lt;/span&gt; 
&lt;span class="c"&gt;&amp;lt;!--&amp;lt;/body&amp;gt;--&amp;gt;&lt;/span&gt; 

&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt; 
&lt;span class="nt"&gt;&amp;lt;frameset&amp;gt;&lt;/span&gt; 
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;30%&amp;quot;&lt;/span&gt;  &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame1&amp;quot;&lt;/span&gt;   &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test1.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
   &lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;100&amp;quot;&lt;/span&gt;  &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;frame2&amp;quot;&lt;/span&gt;   &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;test2.htm&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;  
&lt;span class="nt"&gt;&amp;lt;/frameset&amp;gt;&lt;/span&gt; 
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt; 
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常&lt;/strong&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;iframe 可以放到表格里面。frame 则不行。 &lt;/strong&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;table&amp;gt;&lt;/span&gt; 
    &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt; 
        &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;&lt;/span&gt; 
    &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt; 
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt; 
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。 
frame是整个页面的框架，由多个并列的网页构成。而iframe是内嵌的网页元素，也可以说是内嵌的框架，是一个网页中的子框架，两网页间是父子关系。&lt;/p&gt;</summary><category term="Html"></category><category term="前端"></category></entry><entry><title>原生JS操作DOM对象</title><link href="http://cestlavi3.github.io/%E5%8E%9F%E7%94%9FJS%E6%93%8D%E4%BD%9CDOM%E5%AF%B9%E8%B1%A1.html" rel="alternate"></link><updated>2015-10-28T22:08:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-10-28:原生JS操作DOM对象.html</id><summary type="html">&lt;h2&gt;查看节点&lt;/h2&gt;
&lt;h3&gt;访问指定节点的方法：&lt;/h3&gt;
&lt;h4&gt;通过id&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;getElementById()&lt;/code&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;hei&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;嘿~&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;例如想获取这个div&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;hei&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;直接访问id就可以实现&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445947522480.png" /&gt;&lt;/p&gt;
&lt;h4&gt;通过name&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;getElementsByName()&lt;/code&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;hei&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;嘿~&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;还可以通过name获取&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementsByName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;hei&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445947769110.png" /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;还请注意这里由于获取的是name，所以是getElementsByName，因为id是唯一的，但name返回的是所有name为指定字符的数组。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4&gt;通过标签名&lt;/h4&gt;
&lt;p&gt;getElementsByTagName()&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;通过标签名获取与通过name一样，返回的是数组，是所有标签名为指定字符的元素。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;嘿~&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;这里不需要指定id或name&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementsByTagName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;div&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;直接获取网页上所有div&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445948194621.png" /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;实际开发中通常使用第一种直接通过id访问节点&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;查看/修改属性节点&lt;/h3&gt;
&lt;h4&gt;修改（设置）&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;setAttribute("属性名","属性值")&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;setAttribute的应用场景很多，可以根据需求来设置获取属性，也可以用属性来传递值。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setAttribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;new&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;yoho~&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445949295914.png" /&gt;&lt;/p&gt;
&lt;h4&gt;查看&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;getAttribute("属性名")&lt;/code&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getAttribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;new&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445950301439.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445950086915.png" /&gt;&lt;/p&gt;
&lt;h3&gt;根据层次查找节点&lt;/h3&gt;
&lt;p&gt;如果只希望访问父节点或子节点，又不知道它的id、name、tagname的时候，可以通过寻找层次关系查找节点。&lt;/p&gt;
&lt;h4&gt;孩子节点&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;childNodes&lt;/code&gt;
以ul为例&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;    &lt;span class="nt"&gt;&amp;lt;ul&lt;/span&gt; &lt;span class="na"&gt;id =&lt;/span&gt; &lt;span class="s"&gt;&amp;quot;u&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;fir&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;sec&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&lt;/span&gt;thir&lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;先获取ul节点，在通过它来访问他的孩子节点。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ul&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;u&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;liList&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;childNodes&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;liList&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;返回的是对象数组，即父亲节点下所有的孩子节点，可以用遍历数组的方式遍历它所有的孩子。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445951439038.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445951392338.png" /&gt;&lt;/p&gt;
&lt;h4&gt;父亲节点&lt;/h4&gt;
&lt;p&gt;&lt;code&gt;parentNode&lt;/code&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ul&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;u&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="c1"&gt;//liList[0]是指liList的第一个孩子&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;parent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;liList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;parentNode&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;parent&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;ul&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;ul是父亲节点&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;不是父亲节点&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445951497433.png" /&gt;&lt;/p&gt;
&lt;h2&gt;创建和增加节点&lt;/h2&gt;
&lt;h3&gt;创建节点&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;createElement("标签名")&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;增加节点&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;appendChild(变量名)&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;插入节点包括创建和增加两部分，先用creatElement创建出节点，再用appendChild插入到父亲节点下。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ul&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;u&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;four&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;li&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;four&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;我是创建出来滴~&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;four&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445952319491.png" /&gt;&lt;/p&gt;
&lt;h2&gt;删除节点&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;removeChild()&lt;/code&gt;
先找到要删除的节点和它的父节点，在父节点的角度删除子节点。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;        &lt;span class="nx"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;removeChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;liList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445952963663.png" /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;其中的text节点是空格，因为HTML格式如下：
&lt;img alt="Alt text" src="/images/1445952997789.png" /&gt;
浏览器会把空格识别成dom的文本对象&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;浏览器执行HTML代码创建节点的过程&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;浏览器在执行html代码的时候，首先将html代码解析成为一个DOM树&lt;/li&gt;
&lt;li&gt;浏览器会根据DOM树的结构创建相关的节点对象。每个节点对象都包含属性和接口。节点对象之间存在父子关系。&lt;/li&gt;
&lt;li&gt;浏览器会为DOM树创建一个根节点称作文档节点。文档节点可以访问整棵DOM树。&lt;/li&gt;
&lt;li&gt;浏览器通过DOM树的各个节点对象的属性来布局，这样才能显示出一个精美的html页面来。&lt;/li&gt;
&lt;li&gt;页面显示后，通过在页面上配置事件来执行对应的javascript函数，在javascript中调用文档树节点的API接口，来实现网页的动态效果。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;DOM 与 html DOM的关系&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;DOM 用于遍历或修改各种结构化的文档，html也是这种结构化的文档。&lt;/li&gt;
&lt;li&gt;各浏览器的供应商都遵循DOM的标准接口，提供API（例如增删改查html文档上的元素）&lt;/li&gt;
&lt;li&gt;但是DOM的标准接口应用在html上，不能全部满足开发者的需求，或使用起来不方便。因此各浏览器厂商又针对html的各个标签做了单独的封装，扩充了API，扩充的部分可以称为html dom 或DHTML。&lt;/li&gt;
&lt;li&gt;所以如果采用DOM接口进行开发，效率低，但是各浏览器兼容，使用html dom效率高，但是程序不兼容。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;html 遵照XML的编写格式，但是自身包含有语义的标签，不同标签有各自的使用场景，虽然使用DOM接口可以完成编程，但是增大了实现难度，于是w3c组织公布了HTML DOM 规范，该规范中明确了每一个html元素的接口和属性，浏览器厂商也都按照此规范进行浏览器的开发（基本上可以兼容），但该规范却不能应用于其他的xml文档解析。&lt;/p&gt;</summary><category term="前端"></category><category term="js"></category><category term="DOM"></category></entry><entry><title>MVVM架构初解读</title><link href="http://cestlavi3.github.io/MVVM%E6%9E%B6%E6%9E%84%E5%88%9D%E8%A7%A3%E8%AF%BB.html" rel="alternate"></link><updated>2015-10-08T20:41:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-10-08:MVVM架构初解读.html</id><summary type="html">&lt;p&gt;&lt;code&gt;MVVM&lt;/code&gt;，全称 &lt;code&gt;Model- View- ViewModel&lt;/code&gt; （对于这种缩写，从它的全称开始分部分了解可能更容易帮助理解）。这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出，它是MVC模式的衍生物（不要问MVC是什么，翻大学课本去），MVVM模式的关注点在能够支持事件驱动的UI开发平台。是前端的重要架构。
MVVM目前比较成熟的框架有&lt;code&gt;KnockoutJS&lt;/code&gt;,&lt;code&gt;Kendo MVVM&lt;/code&gt;和&lt;code&gt;Knockback.js&lt;/code&gt;，后续会有一些KnockoutJS的介绍。
&lt;code&gt;View&lt;/code&gt;层： View是指应用中和用户直接交互的部分，也就是页面元素的展示，在web开发中通常使用html+css+javascript实现。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445479329743.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;Model&lt;/code&gt;层：业务信息本身，与任何前段操作无关；不格式化数据或者影响数据在浏览器中的展现，往往是通过ajax从服务器端获取的数据。以view的展示图为例，本例的model为：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;    {
        userName:”wj”,
        password:”1234”，
        sex:”0”  //0男1女
        birthday: 1997-7-17
    }
&lt;/pre&gt;&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;model往往是服务器端直接读取的数据对象，该数据对象不经过加工，在非MVVM的框架中开发人员需要使用javascript并调用dom的方法将model的数据显示在view中。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;code&gt;View Model&lt;/code&gt;层：纯粹用于描述数据内容，页面操作的数据模型。
以性别为例，完成model到view数据的格式化。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;sexDescription&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sex&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
         &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;gender&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;男&amp;quot;&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;女&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;h2&gt;数据格式化&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;以KnockoutJS数据绑定实现MVVC开发模式的分层&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;KnockoutJS是一个轻量级的MVVM JavaScript实现框架，接下来就调用他的接口完成model-view层的数据绑定。
&lt;code&gt;view&lt;/code&gt;层：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;body&lt;/span&gt; &lt;span class="na"&gt;onload=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;init()&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;data-bind=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;value:userName()&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&amp;lt;br/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;data-bind=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;value:password()&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&amp;lt;br/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;data-bind=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;value:getSex(sex())&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&amp;lt;br/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;data-bind=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;value:getBirthday(birthday())&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;code&gt;model&lt;/code&gt;层：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfor&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="c1"&gt;//建立一个私有变量，使用ko来监控属性&lt;/span&gt;
        &lt;span class="c1"&gt;//ko.observable()函数返回的是一个函数，意义是通知ko来监视model层的某个属性&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ko&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ko&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ko&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;birthday&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ko&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userInfor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;birthday&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getSex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;0&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
                &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;男&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;女&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getBirthday&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;-&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;年&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;-&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;月&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;-&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;日&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;控制层:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;init&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="kr"&gt;debugger&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;u&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;//通知ko绑定viewmodel层&lt;/span&gt;
    &lt;span class="nx"&gt;ko&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;applyBindings&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;u&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="s2"&gt;&amp;quot;userName&amp;quot;&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;wj&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s2"&gt;&amp;quot;password&amp;quot;&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;123&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s2"&gt;&amp;quot;sex&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;1&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s2"&gt;&amp;quot;birthday&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;1994-07-17&amp;quot;&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;h3&gt;数据格式化场景&lt;/h3&gt;
&lt;p&gt;Model层的数据是没有经过加工的业务信息，但业务数据需要经过信息加工才能显示，例如如下场景，加工的过程其实就是在编写格式化数据。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445495099279.png" /&gt;
&lt;img alt="Alt text" src="/images/1445495232374.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;性别字段需要从0/1格式加工为男/女&lt;/li&gt;
&lt;li&gt;生日需要从yyyy-mm-dd格式加工为yyyy年mm月dd日，这种加工叫做数据的格式化。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;数据格式化方式&lt;/h3&gt;
&lt;p&gt;定义格式化函数
&lt;em&gt; 视图模型对象中可以直接定义格式化函数，并可带参数。
&lt;/em&gt; 格式化函数返回格式化输出的字符串。
语法：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;data-bind=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text:getBirthday(birthday)&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;br/&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;HTML元素显示格式化输出
&lt;em&gt; 元素绑定到视图模型的格式化函数，而不是它们的属性。
&lt;/em&gt; 可以将属性作为参数传递到格式化函数中。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;在大型软件、复杂的后台管理程序中，一个页面对应的程序很多，可以按照如下层次分层。
&lt;em&gt; 调度层：接受服务器返回参数，调度MV层完成业务逻辑展示
&lt;/em&gt; MV层：视图模型层，重构Model层数据、绑定view层关系、设定触发函数。
* View层：展示的html文件。&lt;/p&gt;
&lt;/blockquote&gt;</summary><category term="Html"></category><category term="前端，MVVM"></category></entry><entry><title>Photoshop快捷键及部分应用</title><link href="http://cestlavi3.github.io/Photoshop%E5%BF%AB%E6%8D%B7%E9%94%AE%E5%8F%8A%E9%83%A8%E5%88%86%E5%BA%94%E7%94%A8.html" rel="alternate"></link><updated>2015-09-04T15:52:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-09-04:Photoshop快捷键及部分应用.html</id><summary type="html">&lt;blockquote&gt;
&lt;p&gt;总结下快捷键以及切图 抠图 测量的小技巧，由于不是专业美工，所以了解甚少，所掌握的ps技能只是最基本仅够应付我大前端需求，有待提高。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;常用快捷键&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;新建画布：&lt;code&gt;ctrl+N&lt;/code&gt;
直接操作步骤：依次点击工具栏“文件”—“新建”&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445411650491.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;新建图层：&lt;code&gt;ctrl+shift+alt+N&lt;/code&gt;
直接操作步骤：依次点击工具栏“图层”—“新建”—“图层”（成功效果图如下）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445411793213.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;取消选区：&lt;code&gt;ctrl+D&lt;/code&gt;
直接操作步骤：在选取位置右击鼠标—“取消选择”（效果图如下）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445411846275.png" /&gt;
&lt;img alt="alt text" src="/images/1445411852935.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;利用选框工具画正圆，正方形：鼠标操作过程按住&lt;code&gt;ctrl+alt&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;填充背景色：&lt;code&gt;ctrl+Backspace&lt;/code&gt;
填充前景色：&lt;code&gt;alt+Backspace&lt;/code&gt;
直接操作步骤：（流程如下图）
在右图处选好颜色背景颜色后，按下图步骤操作&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445411977568.png" /&gt;
&lt;img alt="alt text" src="/images/1445411983258.png" /&gt;
&lt;img alt="alt text" src="/images/1445411986962.png" /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;注：以上两组快捷键应用于有选区的时候操作，无选区的时候在以上操作的基础上还要加上Shift键，Shift的作用是锁定空白像素。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;撤销一步&lt;code&gt;ctrl+Z&lt;/code&gt;
连续撤销:&lt;code&gt;ctrl+alt+Z&lt;/code&gt;
直接操作步骤：工具栏点击“编辑”中的相关操作&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;置入图片（拉取图片到画布后去掉操作框）：&lt;code&gt;ctrl+Enter&lt;/code&gt;
直接操作步骤：点击图片右击选择“置入”&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;结束字体编辑：&lt;code&gt;ctrl+Enter&lt;/code&gt;
调出文字编辑面板：&lt;code&gt;ctrl+T&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412098679.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;输出图层：选中图层后按&lt;code&gt;Delete&lt;/code&gt;键&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412120925.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;路径转换为选区：&lt;code&gt;ctrl+Enter&lt;/code&gt;
效果图如下所示:&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412161379.png" /&gt;
&lt;img alt="alt text" src="/images/1445412198934.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;辅助扣出的图：&lt;code&gt;ctrl+J&lt;/code&gt;（即上面右图中选区里面的图）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;调出或隐藏标尺：&lt;code&gt;ctrl+R&lt;/code&gt;
下图为标尺：&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412229630.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;调出参考线：&lt;code&gt;ctrl+;&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;调出网格线：&lt;code&gt;ctrl+"&lt;/code&gt;
下图为网格线&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412282244.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;调出首选项：&lt;code&gt;ctrl+K&lt;/code&gt;
直接操作步骤：可在工具栏“窗口”中找到&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412303718.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;放大：&lt;code&gt;ctrl+加号&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;缩小：&lt;code&gt;ctrl+减号&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;钢笔工具控制杠杆按住&lt;code&gt;alt&lt;/code&gt;键
移动锚点：按住&lt;code&gt;ctrl&lt;/code&gt;建&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;切出网页片段中的图片&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;将准备好的图片拖入PS中&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412471816.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;为方便切图，将图片放大，按&lt;code&gt;ctrl+加号&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;将待切部分移动到方便区域后选择“切片”工具&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412505996.png" /&gt;
&lt;img alt="alt text" src="/images/1445412510309.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;切图&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412542000.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;调整所切区域，使切线尽量靠近你想要切的区域的边缘部分&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412563712.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;切好后保存
点击工具栏“保存”—“”存储为web所用格式&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412594110.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;在下框中设置格式：选择图片类型（png,jpg等）和图片品质（1-100）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412609785.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;第一次存储选择其他选项，按下面3张图所示进行设置，最后点击保存。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412626249.png" /&gt;
&lt;img alt="alt text" src="/images/1445412630285.png" /&gt;
&lt;img alt="alt text" src="/images/1445412635895.png" /&gt;&lt;/p&gt;
&lt;h2&gt;测量两元素之间的距离&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;将准备好的图片拖入PS中&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412664568.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;同样，为方便操作放大图片&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;选择矩形选框&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412682725.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;按下图将矩形选框置于两者之间&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412699755.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;调出信息窗口，在信息窗口查看距离信息
点击工具栏“窗口”—“信息”&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="alt text" src="/images/1445412720533.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;查看元素大小和测量两元素距离步骤一样，将选框选中待测元素即可。&lt;/li&gt;
&lt;/ol&gt;</summary><category term="Photoshop"></category><category term="前端"></category><category term="工具"></category></entry><entry><title>表的连接</title><link href="http://cestlavi3.github.io/%E8%A1%A8%E7%9A%84%E8%BF%9E%E6%8E%A5.html" rel="alternate"></link><updated>2015-08-22T11:13:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-08-22:表的连接.html</id><summary type="html">&lt;blockquote&gt;
&lt;p&gt;查询两个或两个以上表的内容，这很重要，在真正的项目开发过程中会发现，都需要多张表联合查询取数据。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;如果数据被分散保存到数据库当中，这种数据格式是没问题的，对于数据库来说，提供了一些检索的方式。这些检索方式可以协助你将数据合理的整合在一起，查询出来供用户查看。
对于表来说，一般都是用来做查询，而不是做修改或删除的操作。&lt;/p&gt;
&lt;h2&gt;连接查询分类：&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;内连接查询&lt;/strong&gt;：自然连接、等值连接、不等值连接三种&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;自连接查询&lt;/strong&gt;：对同一个表进行连接操作&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;外连接查询&lt;/strong&gt;：左外连接、右外连接、全外连接三种&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;交叉连接查询&lt;/strong&gt;：也作无条件查询，cross join:产生笛卡尔积&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;复杂查询&lt;/strong&gt;：三个表以上的连接查询&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;个人认为，这些分类中主要搞定&lt;strong&gt;内连接&lt;/strong&gt;、&lt;strong&gt;外连接&lt;/strong&gt;、&lt;strong&gt;左连接&lt;/strong&gt;就足够了。&lt;/p&gt;
&lt;h2&gt;内连接&lt;/h2&gt;
&lt;p&gt;sys_book表如下：&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1441690099514.png" /&gt;&lt;/p&gt;
&lt;p&gt;sys_book_type表如下：&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1441690034401.png" /&gt;&lt;/p&gt;
&lt;p&gt;假设现在的需求是查询两张表全部的内容
内连接必须保证某一个字段相等，对于这两张表来说，它们是靠type_id联系在一起的。
&lt;strong&gt;sql语句如下：&lt;/strong&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="k"&gt;select&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sys_book_type&lt;/span&gt; &lt;span class="n"&gt;t&lt;/span&gt; &lt;span class="k"&gt;inner&lt;/span&gt; &lt;span class="k"&gt;join&lt;/span&gt; &lt;span class="n"&gt;sys_book&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;
&lt;span class="k"&gt;on&lt;/span&gt; &lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;type_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;type_id&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;查询的结果：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1441693035046.png" /&gt;&lt;/p&gt;
&lt;p&gt;它的底层靠笛卡尔积，从sys_book_type表的第一条数据开始，因为要做内连接，所以将数据取出后上sys_book做查找，反复进行对比，将数据取出。&lt;/p&gt;</summary><category term="MySQL"></category></entry><entry><title>html基本标签及常用方法</title><link href="http://cestlavi3.github.io/html%E5%9F%BA%E6%9C%AC%E6%A0%87%E7%AD%BE%E5%8F%8A%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95.html" rel="alternate"></link><updated>2015-08-17T19:37:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-08-17:html基本标签及常用方法.html</id><summary type="html">&lt;h2&gt;&lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;区域&lt;/h2&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;title&amp;gt;&lt;/code&gt;标题&lt;/h3&gt;
&lt;p&gt;在&lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;中，定义文档的标题，最终将显示在浏览器标题栏上。&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;定义页面元信息，主要包含了搜索信息。&lt;/li&gt;
&lt;li&gt;META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)&lt;/li&gt;
&lt;li&gt;HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容 ,响应报头信息，如页面编码、缓存模式等等。&lt;/li&gt;
&lt;li&gt;NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Content-Type&lt;/code&gt;和&lt;code&gt;Content-Language&lt;/code&gt; (显示字符集的设定) 。使用如下两行来解决html的乱码问题&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;Content-Type&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;text/html; Charset=gb2312&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;Content-Language&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;zh-CN&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;name属性用于描述页面内容，主要是向搜索引擎提供查询关键字等&lt;/li&gt;
&lt;li&gt;Keywords－关键字&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;“Keywords”&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;vacation,greece&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Description－简介&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;Description&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;你网页的简述&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Author－作者&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;Author&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;张三，abc@sina.com&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Copyright (版权)&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nt"&gt;&amp;lt;Meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;Copyright&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;Content=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;本页版权归Zerospace所有。All Rights Reserved&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;h2&gt;&lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;&lt;/h2&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;到&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;标题标签&lt;/h3&gt;
&lt;p&gt;标题标签是显示标题文字从h1到h6，从大到小的过程。SEO也按照标题标签的级别来选择信息，所以合理使用标题标签也能提高网页被爬取到的机率。&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;强调文本&lt;/h3&gt;
&lt;p&gt;Strong 标签用于强调文本，但它强调的程度更强一些。
&lt;em&gt; 浏览器通常会以加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。
&lt;/em&gt; 使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt;文本标签&lt;/h3&gt;
&lt;p&gt;Font标签规定文本的字体、字体尺寸、字体颜色（不建议使用）
&lt;em&gt; 字体尺寸
&lt;code&gt;&amp;lt;font  size=#&amp;gt; 文字&amp;lt;/font&amp;gt;&lt;/code&gt;  # =1，2，3，4，5，6
&lt;/em&gt; 字体颜色
&lt;code&gt;&amp;lt;font color=#&amp;gt; 文字 &amp;lt;/font&amp;gt;&lt;/code&gt;  # =“#rrggbb”
* 16 进制数码，或者是下列预定义色彩Black, Olive, Teal, Red, Blue
字体
&lt;code&gt;&amp;lt;font face="#, #, ..., #"&amp;gt;..&amp;lt;/font&amp;gt;&lt;/code&gt; #=客户端可获得的字体&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;链接标签&lt;/h3&gt;
&lt;p&gt;HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接src路径来访问其他网页资源。
属性：
&lt;code&gt;href&lt;/code&gt;：规定链接指向的页面的 UR
&lt;code&gt;target&lt;/code&gt;:规定在何处打开链接文档&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445405960294.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档&lt;/li&gt;
&lt;li&gt;_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。&lt;/li&gt;
&lt;li&gt;_self:这个目标的值对所有没有指定目标的 &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt;标签中的 target 属性一起使用。&lt;/li&gt;
&lt;li&gt;_top:这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;P&amp;gt;&lt;/code&gt;段落标签&lt;/h3&gt;
&lt;p&gt;元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定
&lt;code&gt;align&lt;/code&gt;居中显示
&lt;code&gt;&amp;lt;b&amp;gt;&lt;/code&gt;加粗
&lt;code&gt;&amp;lt;i&amp;gt;&lt;/code&gt;斜体&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;换行&lt;/h3&gt;
&lt;p&gt;呈现换行符效果
&lt;em&gt; &lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;可插入一个简单的换行符。
&lt;/em&gt; &lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;标签是空标签（意味着它没有结束标签，因此这是错误的：&lt;code&gt;&amp;lt;br&amp;gt;&amp;lt;/br&amp;gt;&lt;/code&gt;）。在 XHTML 中，把结束标签放在开始标签中，也就是 &lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;。
* 请注意，&lt;code&gt;&amp;lt;br/&amp;gt;&lt;/code&gt;标签只是简单地开始新的一行，而当浏览器遇到 &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;标签时，通常会在相邻的段落之间插入一些垂直的间距&lt;/p&gt;
&lt;h3&gt;列表标签&lt;/h3&gt;
&lt;h4&gt;定义列表&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;dl&amp;gt;&lt;/code&gt;：自定义列表&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;dt&amp;gt;&lt;/code&gt;：自定义标题&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;dd&amp;gt;&lt;/code&gt;：自定义内容&lt;blockquote&gt;
&lt;p&gt;dt在最左边 dd 也单独占一行但是有错位&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;code&gt;ol&lt;/code&gt;有序列表&lt;/h4&gt;
&lt;p&gt;type属性默认值为1 表示从哪里开始自动排列&lt;/p&gt;
&lt;h4&gt;&lt;code&gt;ul&lt;/code&gt;无序列表&lt;/h4&gt;
&lt;p&gt;type属性表示前面图案形状&lt;/p&gt;
&lt;h3&gt;内联元素 块级元素&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;div&lt;/code&gt;特点：高度可设，宽度可设，独立占用一行。
&lt;code&gt;span&lt;/code&gt;特点：不可设置宽度高度，不能设置margin，长度包裹内容。
span可以变成块状元素，设置display属性为block，相反的，把div变成内联，把display属性设置为inline即可。
文本框是内联块状 可以设置宽度和高度 display为inlineblock是内联块状元素
&lt;code&gt;内联块&lt;/code&gt;的特点：不独自占一行，宽度和高度可以设定。比如&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;本来是内联的，但好多时候做导航栏把它要设置为块。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;一般来说，不包含子元素的才是内联块&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;链接图象标签&lt;/h3&gt;
&lt;p&gt;默认相对路径跟当前html路径相同 &lt;code&gt;../&lt;/code&gt;表示往上移一级目录，网上的图片为绝对路径。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;alt&lt;/code&gt;表示默认提示值，应用场景为您所查看的图片已删除，一般来说加一个红色的边框border显示。&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;hr&amp;gt;&lt;/code&gt;水平线标签&lt;/h3&gt;
&lt;p&gt;默认贯穿全屏，可以设定宽度、高度，单位是像素px，可以改变颜色。个人经验来讲，其样式如下：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="c"&gt;/**&lt;/span&gt;
&lt;span class="c"&gt;宽度、高度、颜色可替换&lt;/span&gt;
&lt;span class="c"&gt;**/&lt;/span&gt;
&lt;span class="nt"&gt;width&lt;/span&gt;&lt;span class="nd"&gt;:500px&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nt"&gt;height&lt;/span&gt;&lt;span class="nd"&gt;:3px&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nt"&gt;border&lt;/span&gt;&lt;span class="nd"&gt;:none&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nt"&gt;background-color&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="nf"&gt;#cecece&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;h3&gt;&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;表格标签&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;表头 &lt;code&gt;&amp;lt;th&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;行&lt;code&gt;&amp;lt;tr&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;列&lt;code&gt;&amp;lt;td&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;border设定边框，可以改变高度宽度，高度改变行，宽度改变列。每个格内容长默认自动加长，通过&lt;code&gt;&amp;lt;tr&amp;gt;&lt;/code&gt;下的&lt;code&gt;&amp;lt;thead&amp;gt;&lt;/code&gt;可以实现表格内自动换行。可以设定背景颜色，背景图片，&lt;code&gt;cellpadding&lt;/code&gt;表格内间距，表格与外边框之间的距离，单位都是像素，表格的位置由align属性决定。&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt;表单标签&lt;/h3&gt;
&lt;p&gt;一类用于显示，一类用于输出。
* &lt;code&gt;form&lt;/code&gt;标签：表单，完成用户与服务器的交互。原则上讲所有的表单标签都应该放在form里。
readonly是HTML的一个bug，不管他等于什么值，只要他出现了，都只读。但javascript可以识别，解决这个缺陷就是使用javascript。disabled不可改变。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;select&amp;gt;&lt;/code&gt;下拉框
select与option元素合用。
length只能获取到option的数量，用于js。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;option&lt;/code&gt;：value属性设置option的提交值，如果value为空，则提交option标签之间的内容。
text也是在HTML中使用无效，要通过javascript实现，可以设定或获取到option标签之间的内容。
selectedindex：默认选中。
selected：设定选项被选中，多个被选中执行最后一个。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;textArea&amp;gt;&lt;/code&gt;文本域
多行文本输入框。value不能在HTML中使用，但可以在js当中使用，作为显示值和提交值。
row是页面显示的行数，col是页面显示的列数，因为数字字母文字宽度不等，所以列数要大概估计。
wrap，默认soft自动换行，off不自动换行。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;checkbox&lt;/code&gt;多选框
name value type check默认选中
要写好名字，因为后台是按名字分组提交的。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;radio&lt;/code&gt;单选按钮
要分组写好name check默认选中 与checkbox使用方式差不多。单选按钮的名称必须相同，否则不能控制单选checked。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;text&lt;/code&gt;文本框
size只限定输入字段宽度，maxlength设定最大输入长度。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;button&lt;/code&gt;按钮
只是页面显示按钮，想要提交必须通过js实现。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;file&lt;/code&gt;元素
在本地选择文件路径，普通表单信息是数值信息，文件是二进制信息，根据名字获取二进制代码，服务器根据二进制代码生成文件。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;reset&lt;/code&gt;重置按钮
Reset可以重置文本框里面的内容，并不是把所有信息清空，而是还原到刚加载页面状态。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;submit&lt;/code&gt;元素
提交表单，submit可以提交表单内容。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;frame框架&lt;/h3&gt;
&lt;p&gt;frame用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445403073946.png" /&gt;
&lt;img alt="Alt text" src="/images/1445403090231.png" /&gt;&lt;/p&gt;
&lt;h3&gt;&lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;标签&lt;/h3&gt;
&lt;p&gt;包含其他页面的页面信息，width最好用百分比，&lt;code&gt;height&lt;/code&gt;不支持百分比，只能用js判断页面高度 &lt;code&gt;scrolling&lt;/code&gt;显示滚动条。&lt;/p&gt;
&lt;h3&gt;特殊字符&lt;/h3&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445404012538.png" /&gt;&lt;/p&gt;</summary><category term="Html"></category><category term="前端"></category></entry><entry><title>Linux常识及基本指令</title><link href="http://cestlavi3.github.io/Linux%E5%B8%B8%E8%AF%86%E5%8F%8A%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4.html" rel="alternate"></link><updated>2015-07-30T16:25:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-07-30:Linux常识及基本指令.html</id><summary type="html">&lt;h2&gt;Linux的版本？内核版本号的组成？&lt;/h2&gt;
&lt;p&gt;内核版本、发行版本Linux的内核本号由3个数字组成：X.Y.Z。
&lt;em&gt; X：主版本号，通常在一段时间内比较稳定。
&lt;/em&gt; Y：次版本号，偶数代表正式版本，可公开发行；奇数代表测试版
* Z：表示修改次数号。如Red Hat AS 5 内核版本是 ：2.6.18&lt;/p&gt;
&lt;h2&gt;Linux基本思想与原则？&lt;/h2&gt;
&lt;p&gt;一切都是文件。K.I.S.S (Keep it Simple Stupid)保持简单傻瓜化。&lt;/p&gt;
&lt;h2&gt;block是不是越大越好？&lt;/h2&gt;
&lt;p&gt;不一定，根据实际需求。一个block只能存储一个文件，如果比较大会占用多个block。如果一个文件夹下一万个文件，占用一万个block，一个文件1k，一个block4k，十兆文件占四十兆空间。如果将block分成1K，节省空间，但是读取效率就低了。所以应该根据实际情况，如果是大量零碎文件存储、以及大量临时文件的读写，为了增加磁盘空间效率，可以缩小block，如果是大文件的数据存储，比如数据库应用，可以放大block来提高磁盘数据寻址效率。&lt;/p&gt;
&lt;h2&gt;Linux系统分区原则&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;严格限制大小的：/—根目录，1G。/swap—系统的交换分区，可以看作是虚拟内存的分区，类似windows当中的pagefiles.sys。，建议这个分区是物理内存的两倍。/boot—开机时会用到的文件，1G。&lt;/li&gt;
&lt;li&gt;灵活掌握大小的：/tmp—临时文件 /usr/local—系统管理员在本机安装自行下载软件的地方 /opt—第三方软件放置的地方&lt;/li&gt;
&lt;li&gt;尽量大点的：&lt;/li&gt;
&lt;li&gt;/home—存放用户的主目录。&lt;/li&gt;
&lt;li&gt;/usr—厂商提供的软件存放的地方，类似windows下的c:\program file\，这是linux系统中占用硬盘空间最大的目录。&lt;/li&gt;
&lt;li&gt;/var—可变信息区（file spool,logs,requests,mail,etc.)，存放可变信息、日志（这三个根据自己需要设置，最后把剩余空间都分配给var即可）。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;主分区、逻辑分区、扩展分区之间的联系与区别？&lt;/h2&gt;
&lt;p&gt;1-4块是预留给主分区和扩展分区的，除去主分区剩余全是扩展分区。逻辑分区从第5块开始，逻辑分区之和等于扩展分区，逻辑分区没有数量限制。
linux下用字符表示的文件类型：
&lt;em&gt; -：普通文件
&lt;/em&gt; d：目录文件
&lt;em&gt; l：链接文件
&lt;/em&gt; b：块设备文件
&lt;em&gt; c：字符设备文件
&lt;/em&gt; p：管道文件&lt;/p&gt;
&lt;h2&gt;su、su -、sudo的区别？&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;su - 获得本机最高的权限，同时环境也变成了超级用户的环境。&lt;/li&gt;
&lt;li&gt;su只获得了超级用户的权限，环境还是没变，最高权限不能使用，比如改变组的权限就不能用。&lt;/li&gt;
&lt;li&gt;sudo，是Ubuntu常用，可以使用户临时取得超级用户的权限，比如十个人要取得权限，如果把密码告诉十个人，那安全性就不能得以保证，用sudo就可以让他们临时取得权限。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;基本指令&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;pwd&lt;/code&gt; 查看当前主目录（root直接放在根目录 只有自己可以读）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445394966396.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;su 用户名&lt;/code&gt; 切换普通用户，超级用户的主目录是根目录的子目录，普通用户的主目录是根目录的孙子目录。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445394976798.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;su -&lt;/code&gt; 切换到超级用户&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395030046.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ls&lt;/code&gt; 查看文件（不包括隐藏文件）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395035023.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ls -a&lt;/code&gt; 列出全部（文件前带.的为隐藏文件）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395039941.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ls -l&lt;/code&gt; 长格式列出全部文件 等同于ll&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395048098.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cd 2&lt;/code&gt; 进入文件2中（等同cd ~/2）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395054489.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cd ..&lt;/code&gt;跳回上一级目录&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395058752.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cd /&lt;/code&gt; 切换到根目录&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395065895.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cd&lt;/code&gt;回到用户主目录&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395073471.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;touch 1&lt;/code&gt; 创建文件1&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395078758.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;mkdir 5&lt;/code&gt; 创建目录5&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395084467.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cp 1 3&lt;/code&gt; 拷贝1文件到3目录&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395091875.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;mv 1 2&lt;/code&gt; 剪切1文件到2目录：&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395096353.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;mv&lt;/code&gt;还可以用于重命名&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mv 1 aaa&lt;/code&gt; 把文件1改名为aaa&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395104223.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cp -r 2 3&lt;/code&gt; 把2目录复制到3目录里&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395109655.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;rm 1&lt;/code&gt; 删除文件1&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395116824.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;rmdir 1&lt;/code&gt; 删除空目录1 只能删除空目录（非空先rm再删除）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395122752.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;rm -r 4&lt;/code&gt; 逐层强制删除非空目录（询问）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395132102.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;rm –rf 2&lt;/code&gt; 强制删除非空目录不询问&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395139462.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;clear&lt;/code&gt; 清屏&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cal&lt;/code&gt; 当月日历&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395153120.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cal 2015&lt;/code&gt; 全年日历&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395159008.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;cal 5 2012&lt;/code&gt;  查看2012年五月&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395163196.png" /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Tab&lt;/code&gt; 按两下查看一共有所少命令&lt;/li&gt;
&lt;li&gt;&lt;code&gt;man ls&lt;/code&gt; 查看命令用法&lt;/li&gt;
&lt;li&gt;&lt;code&gt;date&lt;/code&gt; 当前日期&lt;/li&gt;
&lt;li&gt;&lt;code&gt;bc&lt;/code&gt;  计算器  quit退出&lt;/li&gt;
&lt;li&gt;&lt;code&gt;uname&lt;/code&gt;  显示当前操作系统&lt;/li&gt;
&lt;li&gt;&lt;code&gt;uname -a&lt;/code&gt; 内核版本&lt;/li&gt;
&lt;li&gt;&lt;code&gt;free&lt;/code&gt; 查看内存使用情况&lt;/li&gt;
&lt;li&gt;&lt;code&gt;top&lt;/code&gt; 打开任务管理器&lt;/li&gt;
&lt;li&gt;&lt;code&gt;kill 2342&lt;/code&gt; 结束2342进程&lt;/li&gt;
&lt;li&gt;&lt;code&gt;df&lt;/code&gt; 查看分区&lt;/li&gt;
&lt;li&gt;&lt;code&gt;du&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;last&lt;/code&gt; 最近用户登录情况&lt;/li&gt;
&lt;li&gt;&lt;code&gt;who&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;whoami&lt;/code&gt; 当前登录身份&lt;/li&gt;
&lt;li&gt;&lt;code&gt;lastlog&lt;/code&gt; 列出每个用户的最近登录情况&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ps&lt;/code&gt; 回车一瞬间活动的进程&lt;/li&gt;
&lt;li&gt;&lt;code&gt;shutdown -h now&lt;/code&gt; 立刻关机&lt;/li&gt;
&lt;li&gt;&lt;code&gt;init 0&lt;/code&gt; 立刻关机&lt;/li&gt;
&lt;li&gt;&lt;code&gt;halt&lt;/code&gt; 立刻关机&lt;/li&gt;
&lt;li&gt;&lt;code&gt;shutdown -r now&lt;/code&gt; 立刻重启&lt;/li&gt;
&lt;li&gt;&lt;code&gt;hostname&lt;/code&gt; 显示主机名&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cat&lt;/code&gt; 查看文件内容&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;cat /etc/passwd&lt;/code&gt;   查看用户&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查看用户：每一行代表一个用户，每个用户7列。用户名 密码（x 看不见） 用户ID 组ID 备注。
用户主目录所在路径 这个用户所有的shell用户ID&amp;gt;=500跟我们有关 &amp;lt;500不用看 最高值65534。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;cat /etc/group&lt;/code&gt;   查看组&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查看组:组名 组密码 组ID号
一个目录是一个用户 一个组可以存放多个用户，即多个目录 查看组内用户只能通过查看用户组ID。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;用户管理&lt;/h2&gt;
&lt;p&gt;创建组 &lt;code&gt;groupadd 组名&lt;/code&gt;
删除组  &lt;code&gt;groupdel 组名&lt;/code&gt;
&lt;code&gt;passwd 用户名&lt;/code&gt;     修改用户密码
&lt;code&gt;userdel  -r 用户名&lt;/code&gt;   删除用户
创建用户语法：&lt;code&gt;useradd   -d home 目录名 -g 组名  -s shell路径 用户名&lt;/code&gt;
例：&lt;code&gt;useradd -d /home/xmetc -g etc -s /bin/bash xmet&lt;/code&gt;
&lt;code&gt;usermod -g 组名 用户名&lt;/code&gt;   改变用户所属的组
&lt;code&gt;groupmod  -n 新组名 原组名&lt;/code&gt;  更改用户组名称
&lt;code&gt;chgrp –R root /tmp/&lt;/code&gt;      将tmp目录下所有子目录和文件的所有组全部设为root 改变文件或文件夹所属的用户
&lt;code&gt;chown user file1&lt;/code&gt;     将file1文件的所有者改为user
&lt;code&gt;chown -hR user file1&lt;/code&gt;    将file1下的所有文件所有者都改为 user&lt;/p&gt;
&lt;h2&gt;练习：&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;建立两个组（神仙、妖怪）&lt;/li&gt;
&lt;li&gt;建立四个用户（唐僧、悟空、八戒、沙僧）并给用户设置密码&lt;/li&gt;
&lt;li&gt;把悟空、八戒放入妖怪，唐僧、沙僧放入神仙&lt;/li&gt;
&lt;li&gt;用悟空建立一个文件（monkey.java文件中写入I  am  monkey）给八戒一个可以rw的权限&lt;/li&gt;
&lt;li&gt;八戒修改monkey.java加入一句话（I  am  pig）&lt;/li&gt;
&lt;li&gt;唐僧、沙僧对该文件没有权限&lt;/li&gt;
&lt;li&gt;把沙僧放入妖怪组&lt;/li&gt;
&lt;li&gt;让沙僧修改文件monkey.java加入一句话（我是沙僧，我是妖怪）&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;1.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;groupadd shenxian
groupadd yaoguai
cat /etc/group
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395177031.png" /&gt;
&lt;img alt="Alt text" src="/images/1445395180914.png" /&gt;&lt;/p&gt;
&lt;p&gt;2.3.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;useradd -d /home/tangseng -g shenxian -s /bin/bash tangseng
passwd tangseng
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395186268.png" /&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;useradd -d /home/shaseng -g shenxian -s /bin/bash shaseng
passwd shaseng
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395189050.png" /&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;useradd -d /home/wukong -g yaoguai -s /bin/bash wukong
passwd wukong
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395194190.png" /&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;useradd -d /home/bajie -g yaoguai -s /bin/bash bajie
passwd bajie
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395199818.png" /&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;cat /etc/passwd
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395204075.png" /&gt;
&lt;img alt="Alt text" src="/images/1445395211866.png" /&gt;&lt;/p&gt;
&lt;p&gt;4.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;su wukong
cd /tmp
touch monkey.java
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445395217416.png" /&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;vim monkey.java （写入I am monkey）
chmod 770 monkey.java(所有者与同组人可读可写可执行，其他人不可读不可写不可执行)
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;5.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;su bajie
cd /tmp
ll
vim monkey.java
写入I am pig
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;6.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;su shaseng
cd /tmp
vim monkey.java
没有权限！
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;7.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;登录超级用户
su -
usermod -g yaoguai shaseng
cat /etc/passwd
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;8.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;su shaseng
cd /tmp
vim monkey.java
写入我是沙僧，我是妖怪
&lt;/pre&gt;&lt;/div&gt;</summary><category term="Linux"></category></entry><entry><title>Linux环境下安装Eclipse开发环境</title><link href="http://cestlavi3.github.io/Linux%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85Eclipse%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83.html" rel="alternate"></link><updated>2015-07-25T10:03:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-07-25:Linux环境下安装Eclipse开发环境.html</id><summary type="html">&lt;h2&gt;JDK&lt;/h2&gt;
&lt;p&gt;先卸载
查 &lt;code&gt;rpm -qa |grep gcj&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435952197.png" /&gt;&lt;/p&gt;
&lt;p&gt;卸载 &lt;code&gt;yum -y remove java-1.4.2-gcj-compat-src-1.4.2.0-40jpp.115&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435955523.png" /&gt;&lt;/p&gt;
&lt;p&gt;查看&lt;code&gt;java –version&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435958879.png" /&gt;&lt;/p&gt;
&lt;p&gt;退出 用&lt;code&gt;root&lt;/code&gt;登录&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435963826.png" /&gt;
&lt;img alt="Alt text" src="/images/1445435966545.png" /&gt;
&lt;img alt="Alt text" src="/images/1445435970839.png" /&gt;&lt;/p&gt;
&lt;p&gt;进入Java文件夹下解压文件
&lt;code&gt;tar –zxvf jdk-7u9-linux-i586.tar.gz&lt;/code&gt;
解压完毕！&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435973601.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;vi ~/.bachrc&lt;/code&gt;
在文件中加入这三行&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="x"&gt;export JAVA_HOME=/usr/java/jdk1.7.0_09&lt;/span&gt;

&lt;span class="x"&gt;export PATH=&lt;/span&gt;&lt;span class="p"&gt;$&lt;/span&gt;&lt;span class="nv"&gt;JAVA_HOME&lt;/span&gt;&lt;span class="x"&gt;/bin:&lt;/span&gt;&lt;span class="p"&gt;$&lt;/span&gt;&lt;span class="nv"&gt;PATH&lt;/span&gt;&lt;span class="x"&gt;&lt;/span&gt;

&lt;span class="x"&gt;export CLASSPATH=.:&lt;/span&gt;&lt;span class="p"&gt;$&lt;/span&gt;&lt;span class="nv"&gt;JAVA_HOME&lt;/span&gt;&lt;span class="x"&gt;/lib/dt.jar:&lt;/span&gt;&lt;span class="p"&gt;$&lt;/span&gt;&lt;span class="nv"&gt;JAVA_HOME&lt;/span&gt;&lt;span class="x"&gt;/lib/tools.jar&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435982617.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;java –version&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435985676.png" /&gt;&lt;/p&gt;
&lt;p&gt;安装成功！&lt;/p&gt;
&lt;h2&gt;Tomcat&lt;/h2&gt;
&lt;p&gt;把tomcat的压缩包放在/usr/local下，解压。
&lt;code&gt;tar -zxvf apache-tomcat-8.0.23.tar.gz&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435992061.png" /&gt;&lt;/p&gt;
&lt;p&gt;键入命令:
&lt;code&gt;/usr/local/apache-tomcat-8.0.23/bin/startup.sh&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435997060.png" /&gt;&lt;/p&gt;
&lt;h2&gt;MySQL&lt;/h2&gt;
&lt;p&gt;把MySQL的安装包放在/usr下&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436000708.png" /&gt;&lt;/p&gt;
&lt;p&gt;进入MySQL，安装服务器
&lt;code&gt;rpm -ivh MySQL-server-5.5.19-1.linux2.6.x86.rpm&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436004666.png" /&gt;&lt;/p&gt;
&lt;p&gt;安装客户端
&lt;code&gt;rpm -ivh MySQL-client-5.5.19-1.linux2.6.x86.rpm&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436009611.png" /&gt;&lt;/p&gt;
&lt;p&gt;查看服务是否开启 &lt;code&gt;netstat  –nat&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436012153.png" /&gt;&lt;/p&gt;
&lt;p&gt;3306证明服务已开启。
进入mysql&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436015505.png" /&gt;&lt;/p&gt;
&lt;p&gt;退出 Ctrl+C&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436019274.png" /&gt;&lt;/p&gt;
&lt;h2&gt;Eclipse&lt;/h2&gt;
&lt;p&gt;在/usr下新建eclipse文件夹并把压缩包放进来。
进入文件夹&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436023562.png" /&gt;&lt;/p&gt;
&lt;p&gt;开始解压
&lt;code&gt;tar -zxvf eclipse-jee-luna-SR2-linux-gtk.tar.gz&lt;/code&gt;
解压完成后进入eclipse打开
./eclipse&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445436027592.png" /&gt;&lt;/p&gt;</summary><category term="Linux"></category><category term="环境配置"></category></entry><entry><title>RPM 五种基本的操作方式、磁盘分区、挂载、压缩与解压</title><link href="http://cestlavi3.github.io/RPM%20%E4%BA%94%E7%A7%8D%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%93%8D%E4%BD%9C%E6%96%B9%E5%BC%8F%E3%80%81%E7%A3%81%E7%9B%98%E5%88%86%E5%8C%BA%E3%80%81%E5%8E%8B%E7%BC%A9%E4%B8%8E%E8%A7%A3%E5%8E%8B.html" rel="alternate"></link><updated>2015-07-24T18:32:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-07-24:RPM 五种基本的操作方式、磁盘分区、压缩与解压.html</id><summary type="html">&lt;h2&gt;挂载&lt;/h2&gt;
&lt;h3&gt;光驱挂载&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;ll /dev/cd*&lt;/code&gt;（dev存放硬件设备）查看光驱，列出dev目录下所有以cd开头的文件&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435053111.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;cd /mnt&lt;/code&gt; 进入linux下规定的挂载点&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435058266.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;mkdir cdrom&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435063010.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;cd cdrom&lt;/code&gt;
&lt;code&gt;mount /dev/scd0 /mnt/cdrom&lt;/code&gt;  挂载 把&lt;code&gt;scd0&lt;/code&gt;挂载到cdrom&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435069393.png" /&gt;&lt;/p&gt;
&lt;p&gt;挂载成功显示提示，并且桌面弹出图标。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435071456.png" /&gt;&lt;/p&gt;
&lt;h3&gt;光驱卸载&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;cd ..&lt;/code&gt;返回&lt;code&gt;/mnt&lt;/code&gt;目录
卸载是容易报驱动器忙的错误的，是因为当前在cdrom下，所以卸载之前要先退出cdrom。
&lt;code&gt;umount /dev/hdc /mnt/cdrom&lt;/code&gt;卸载&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435076921.png" /&gt;&lt;/p&gt;
&lt;p&gt;同时桌面上光驱图标消失。
注意：卸载光驱后删除cdrom是个好习惯，所以建议每次卸载后及时删除cdrom。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435080877.png" /&gt;&lt;/p&gt;
&lt;h3&gt;U盘挂载&lt;/h3&gt;
&lt;p&gt;挂载U盘与挂载光盘不同，输入命令dev /dev/usb*就会发现，机器有几个USB口就会显示几个，所以不能这样查。
连接U盘，在虚拟机可移动设备选项中选择U盘连接。
打开终端，键入fdisk -l  显示U盘信息&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435086611.png" /&gt;
&lt;img alt="Alt text" src="/images/1445435088523.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;cd /mnt&lt;/code&gt; 进入&lt;code&gt;/mnt&lt;/code&gt;目录
&lt;code&gt;mkdir usb&lt;/code&gt; 创建usb路径
&lt;code&gt;mount /dev/sdb4 /mnt/usb&lt;/code&gt;挂载 第一个路径是上一步查到的 第二个路径是刚才创建的
&lt;code&gt;cd usb&lt;/code&gt; 进入U盘&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435094867.png" /&gt;&lt;/p&gt;
&lt;h3&gt;U盘卸载&lt;/h3&gt;
&lt;p&gt;和卸载光盘一样，先退出，再卸载，最后删除usb。
&lt;code&gt;cd ..&lt;/code&gt;
&lt;code&gt;umount /dev/sdb4 /mnt/usb&lt;/code&gt;
&lt;code&gt;rmdir usb&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435102236.png" /&gt;&lt;/p&gt;
&lt;h2&gt;RPM 五种基本的操作方式(不包括创建软件包)&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;安装, 卸载, 升级, 查询,和验证。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;安装RPM包&lt;/h3&gt;
&lt;p&gt;RPM 软件包通常具有类似zisofs-tools-1.0.6-3.2.2.i386.rpm 的文件名。其中包括软件包的名称(zisofs-tools)，版本号(1.0.6)，发行号(3.2.2)，和硬件平台(i386)。安装一个软件包只需简单的键入以下命令：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;rpm -ivh zisofs-tools-1.0.6-3.2.2.i386.rpm
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435108200.png" /&gt;&lt;/p&gt;
&lt;p&gt;RPM安装完毕后会打印出软件包的名字(并不一定与文件名相同)，而后打印一连串的#号以表示安装进度。虽然软件包的安装被设计的尽量简单易行，但还是可能会发生如下的错误：
1.  软件包已被安装
如果您的软件包已被安装, 将会出现以下信息：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;zisofs-tools-1.0.6-3.2.2 is already installed
error: zisofs-tools-1.0.6-3.2.2.i386.rpm cannot be installed
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;如果您仍旧要安装该软件包，可以在命令行上使用--replacepkgs 选项，RPM将忽略该错误信息强行安装。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;文件冲突
如果您要安装的软件包中有一个文件已在安装其它软件包时安装，会出现以下错误信息：&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;zisofs-tools /usr/bin/zisofs-tools conflicts with file from bar-1.0.6-3.2.2
error: zisofs-tools-1.0.6-3.2.2.i386.rpm cannot be installed
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;要想让RPM 忽略该错误信息， 请使用--replacefiles 命令行选项。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;未解决依赖关系
RPM软件包可能依赖于其它软件包，也就是说要求在安装了特定的软件包之后才能安装该软件包。如果在您安装某个软件包时存在这种未解决的依赖关系。会产生以下信息：&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;failed dependencies: zisofs-tools is needed by bar-1.0.6-3.2.2
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;您必须安装完所依赖的软件包，才能解决这个问题。如果您想强制安装(这是个坏主意，因为安装后的软件包未必能正常运行)，请使用--nodeps 命令行选项。&lt;/p&gt;
&lt;h3&gt;查询已安装的软件包&lt;/h3&gt;
&lt;p&gt;使用命令rpm -q来查询已安装软件包的数据库。简单的使用命令 rpm -q foo 会打印出foo软件包 的包名，版本号，和发行号：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;rpm –q zisofs-tools
zisofs-tools-1.0.6-3.2.2
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435124945.png" /&gt;&lt;/p&gt;
&lt;p&gt;除了指定软件包名以外，您还可以使用以下选项来指明要查询哪些软件包的信息。这些选项被称之为 “软件包指定选项“。
&lt;em&gt; -a 查询所有已安装的软件包
&lt;/em&gt; -f 将查询包含有文件. 的软件包
&lt;em&gt; -p 查询软件包文件名为的软件包
还可以指定查询软件包时所显示的信息。它们被称作信息选择选项：
&lt;/em&gt; -i 显示软件包信息，如描述, 发行号, 尺寸, 构建日期, 安装日期, 平台, 以及其它一些各类信息。
&lt;em&gt; -l 显示软件包中的文件列表。
&lt;/em&gt; -s 显示软件包中所有文件的状态。
&lt;em&gt; -d 显示被标注为文档的文件列表(man 手册, info 手册, README's, etc)。
&lt;/em&gt; -c 显示被标注为配置文件的文件列表。这些是您要在安装完毕以后加以定制的文件(sendmail.cf, passwd, inittab, etc)。
对于那些要显示文件列表的文件, 您可以增加-v 命令行选项以获得如同 ls -l 格式的输出。&lt;/p&gt;
&lt;h3&gt;升级RPM包&lt;/h3&gt;
&lt;p&gt;升级软件包和安装软件包十分类似：.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;rpm -Uvh foo-2.0-1.i386.rpm
foo &lt;span class="c"&gt;####################################&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;RPM将自动卸载已安装的老板本的foo 软件包，您不会看到有关信息。事实上您可能总是使用 -U 来安装软件包，因为即便以往未安装过该软件包，也能正常运行。因为RPM
执行智能化的软件包升级，自动处理配置文件，您将会看到如下信息：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;saving /etc/foo.conf as /etc/foo.conf.rpmsave
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;这表示您对配置文件的修改不一定能向上兼容。 因此，RPM 会先备份老文件再安装新文件。您应当尽快解决这两个配置文件的不同之处，以使系统能持续正常运行。
因为升级实际包括软件包的卸载与安装两个过程，所以您可能会碰到由这两个操作引起的错误。另一个你可能碰到的问题是：当您使用旧版本的软件包来升级新版本的软件时，RPM会产生以下错误信息：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;rpm -Uvh foo-1.0-1.i386.rpm
foo package foo-2.0-1 &lt;span class="o"&gt;(&lt;/span&gt;which is newer&lt;span class="o"&gt;)&lt;/span&gt; is already installed
error: foo-1.0-1.i386.rpm cannot be installed
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;如果你确有需要将该软件包”降级，加入 &lt;code&gt;--oldpackage&lt;/code&gt; 命令选项就可以了。&lt;/p&gt;
&lt;h3&gt;卸载RPM包&lt;/h3&gt;
&lt;p&gt;卸载软件包就象安装软件包时一样简单：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;rpm -e zisofs-tools
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;注意这里使用软件包的名字&lt;code&gt;zisofs-tools&lt;/code&gt;，而不是软件包文件的名字&lt;code&gt;zisofs-tools-1.0.6-3.2.2.i386.rpm&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435135370.png" /&gt;&lt;/p&gt;
&lt;p&gt;如果其它软件包依赖于您要卸载的软件包，卸载时则会产生错误信息。如：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;removing these packages would &lt;span class="nb"&gt;break &lt;/span&gt;dependencies:foo is needed by bar-1.0-1
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;若让RPM忽略这个错误继续卸载(这可不是一个好主意，因为依赖于该软件包的程序可能无法运行)，请使用&lt;code&gt;--nodeps&lt;/code&gt; 命令行选项。&lt;/p&gt;
&lt;h3&gt;验证软件包&lt;/h3&gt;
&lt;p&gt;验证软件包是通过比较已安装的文件和软件包中的原始文件信息来进行的。验证主要是比较文件的尺寸, MD5 校验码,
文件权限, 类型, 属主和用户组等。
&lt;code&gt;rpm-V&lt;/code&gt;命令用来验证一个软件包。您可以使用任何包选择选项来查询您要验证的软件包。命令&lt;code&gt;rpm -V foo&lt;/code&gt;将用来验证foo软件包。又如：
&lt;em&gt; 验证包含特定文件的软件包：
&lt;code&gt;rpm -Vf /bin/vi&lt;/code&gt;
&lt;/em&gt; 验证所有已安装的软件包：
&lt;code&gt;rpm -Va&lt;/code&gt;
* 根据一个RPM包来验证：
&lt;code&gt;rpm -Vp foo-1.0-1.i386.rpm&lt;/code&gt;
如果您担心你的RPM数据库已被破坏，就可以使用这种方式。
如果一切均校验正常将不会产生任何输出。如果有不一致的地方，就会显示出来。输出格式是8位长字符串, &lt;code&gt;c'' 用以指配置文件, 接着是文件名.
8位字符的每一个 用以表示文件与RPM数据库中一种属性的比较结果 。&lt;/code&gt;.'' (点) 表示测试通过。.下面的字符表示对RPM软件包进行的某种测试失败：
|显示字符|错误源|
|:--:|:--:|
|5 |MD5 校验码|
|S |文件尺寸|
|L |符号连接|
|T |文件修改日期|
|D |设备|
|U |用户|
|G |用户组|
|M |模式e (包括权限和文件类型)|
如果有错误信息输出, 您应当认真加以考虑，是通过删除还是重新安装来解决出现的问题。&lt;/p&gt;
&lt;h3&gt;教你一招&lt;/h3&gt;
&lt;p&gt;RPM不仅是安装/卸载程序的工具，它还是系统维护和诊断的一把好手。看过下面几个例子你就会领教它的厉害了。
&lt;em&gt; 如果您误删了一些文件, 但您不能肯定到底都删除了那些文件，怎么办？您可以键入：
&lt;code&gt;rpm -Va&lt;/code&gt;
rpm会在屏幕上显示出文件删除的情况。若你发现一些文件丢失了或已被损坏, 您就可以重新安装或先卸载再安装该软件包。
&lt;/em&gt; 如果您碰到了一个自己不认识的文件，要想查处它属于哪个软件包，您可以输入以下命令
&lt;code&gt;rpm -qf /usr/X11R6/bin/xjewel&lt;/code&gt;
输出的结果会是：
&lt;code&gt;xjewel-1.6-1&lt;/code&gt;
&lt;em&gt; 如果发生综合以上两个例子的情况，如文件/usr/bin/paste出了问题。您想知道哪个软件包中包含该文件，您这时可以简单的键入：
&lt;code&gt;rpm -Vf /usr/bin/paste&lt;/code&gt;
&lt;/em&gt; 如果您想了解正在使用的程序的详细信息, 您可以键入如下命令来获得软件包中关于该程序的文档信息：
&lt;code&gt;rpm -qdf /usr/bin/ispell&lt;/code&gt;
输出结果为:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;/usr/man/man4/ispell.4
/usr/man/man4/english.4
/usr/man/man1/unsq.1
/usr/man/man1/tryaffix.1
/usr/man/man1/sq.1
/usr/man/man1/munchlist.1
/usr/man/man1/ispell.1
/usr/man/man1/findaffix.1
/usr/man/man1/buildhash.1
/usr/info/ispell.info.gz
/usr/doc/ispell-3.1.18-1/README
&lt;/pre&gt;&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;您发现了一个新的koules RPM，但您不知道它是做什么的，您可以键入如下命令：
rpm -qip koules-1.2-2.i386.rpm&lt;/li&gt;
&lt;li&gt;现在您想了解koules的 RPM包在系统里安装了哪些文件，您可以键入：
rpm -qlp koules-1.2-2.i386.rpm输出结果为：&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;/usr/man/man6/koules.6
/usr/lib/games/kouleslib/start.raw
/usr/lib/games/kouleslib/end.raw
/usr/lib/games/kouleslib/destroy2.raw
/usr/lib/games/kouleslib/destroy1.raw
/usr/lib/games/kouleslib/creator2.raw
/usr/lib/games/kouleslib/creator1.raw
/usr/lib/games/kouleslib/colize.raw
/usr/lib/games/kouleslib
/usr/games/koules
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;以上只是几个常见例子。随着您进一步的使用RPM，您会发现它的各种功能选项组合可以实现更为强大的RPM包管理功能。&lt;/p&gt;
&lt;h2&gt;磁盘分区&lt;/h2&gt;
&lt;h3&gt;分区前&lt;/h3&gt;
&lt;p&gt;磁盘分区命令&lt;code&gt;fdisk –l&lt;/code&gt;
进入磁盘分区下可键入p查看当前分区状况，键入m查看指令帮助，键入d删除相应分区，键入n新建分区，在新建分区下键入p新建主分区，键入e新建扩展分区&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435150941.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;fdisk /dev/sda&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435154309.png" /&gt;&lt;/p&gt;
&lt;p&gt;先删除磁盘现有分区&lt;/p&gt;
&lt;p&gt;依次删除&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435161027.png" /&gt;&lt;/p&gt;
&lt;p&gt;全部删除后&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435163940.png" /&gt;&lt;/p&gt;
&lt;h3&gt;开始分区&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;主分区&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435168033.png" /&gt;&lt;/p&gt;
&lt;p&gt;先分主分区。n新建分区，选择p新建主分区，从第1簇开始，注意，+5000M是分配的内存大小，也可以直接选择分配多少簇。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435172233.png" /&gt;&lt;/p&gt;
&lt;p&gt;第二块主分区分配完毕。
2. 扩展分区&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435176761.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;逻辑分区&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435179355.png" /&gt;&lt;/p&gt;
&lt;p&gt;注意：逻辑分区从第5块开始。&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435184927.png" /&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;修改分区ID，使分区在window下能看到&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435188365.png" /&gt;&lt;/p&gt;
&lt;p&gt;键入t改变分区的系统标识，选择要改变的分区ID&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435192349.png" /&gt;&lt;/p&gt;
&lt;h2&gt;压缩与解压缩&lt;/h2&gt;
&lt;h3&gt;压缩文件&lt;/h3&gt;
&lt;p&gt;第一种
&lt;code&gt;gzip -9 -c 原文件名&amp;gt;压缩后的文件名.gz&lt;/code&gt;（写全后缀名） （9最大压缩率 c参数输出）&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435199053.png" /&gt;&lt;/p&gt;
&lt;p&gt;第二种
&lt;code&gt;bzip2 -9 -c 原文件名&amp;gt;压缩包名.bz2&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435202871.png" /&gt;&lt;/p&gt;
&lt;h3&gt;解压文件&lt;/h3&gt;
&lt;p&gt;第一种
&lt;code&gt;gunzip -c 文件名&amp;gt;解压后的文件名&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435207057.png" /&gt;&lt;/p&gt;
&lt;p&gt;第二种
&lt;code&gt;bzip2 -kd 压缩包名&lt;/code&gt; （k保留原文件）&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435210263.png" /&gt;&lt;/p&gt;
&lt;h3&gt;压缩文件夹&lt;/h3&gt;
&lt;p&gt;文件夹需要打包才能进行压缩 打包命令tar只可以打包不能压缩 使用下面命令可以打包压缩
第一种
&lt;code&gt;tar -zcvf压缩后的文件名.tar.zg 文件名&lt;/code&gt;（z压缩c可视化vf文件系统）&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435224967.png" /&gt;&lt;/p&gt;
&lt;p&gt;第二种
&lt;code&gt;tar -jcvf 压缩后的文件名.tar.bz2 原文件名&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435231290.png" /&gt;&lt;/p&gt;
&lt;h3&gt;解压文件夹&lt;/h3&gt;
&lt;p&gt;第一种&lt;/p&gt;
&lt;p&gt;&lt;code&gt;tar -zxvf 压缩包的名字&lt;/code&gt;
 &lt;img alt="Alt text" src="/images/1445435237037.png" /&gt;&lt;/p&gt;
&lt;p&gt;第二种
&lt;code&gt;tar -jxvf 压缩包的名字&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435240934.png" /&gt;&lt;/p&gt;
&lt;h3&gt;别名&lt;/h3&gt;
&lt;p&gt;复杂的指令那么多，难免会记不住，有一种方法能够把复杂的命令变简单。
&lt;code&gt;vim ~/.bashrc&lt;/code&gt;（配置文件 修改后重启才能生效）&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435247267.png" /&gt;
&lt;img alt="Alt text" src="/images/1445435250388.png" /&gt;
&lt;img alt="Alt text" src="/images/1445435253402.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;source .bashrc&lt;/code&gt;让配置文件不重启就能生效 但不等于重启命令！&lt;/p&gt;
&lt;p&gt;&lt;img alt="Alt text" src="/images/1445435257680.png" /&gt;&lt;/p&gt;</summary><category term="Linux"></category><category term="RPM"></category></entry><entry><title>Red hat安装与使用</title><link href="http://cestlavi3.github.io/Red%20hat%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.html" rel="alternate"></link><updated>2015-07-22T22:55:00+08:00</updated><author><name>CestLaVi3</name></author><id>tag:cestlavi3.github.io,2015-07-22:Red hat安装与使用.html</id><summary type="html">&lt;h2&gt;新建虚拟机&lt;/h2&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221542124.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221631619.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221657861.png" /&gt;&lt;/p&gt;
&lt;p&gt;名称可以随便写，位置选择比较大的盘尽量在30GB以上&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221717391.png" /&gt;&lt;/p&gt;
&lt;p&gt;最少选择25个GB，这里选择45GB&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221737258.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221756270.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221818721.png" /&gt;&lt;/p&gt;
&lt;p&gt;浏览选择光盘镜像RHEL_5.5 i386 DV.iso &lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221840987.png" /&gt;&lt;/p&gt;
&lt;h2&gt;安装配置&lt;/h2&gt;
&lt;p&gt;点击确定后，打开虚拟机，出现此界面敲击回车安装&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722221917614.png" /&gt;&lt;/p&gt;
&lt;p&gt;安装过程&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222023431.png" /&gt;&lt;/p&gt;
&lt;p&gt;点击Skip安装&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222047503.png" /&gt;&lt;/p&gt;
&lt;p&gt;点击Next&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222111196.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择中文后点击Next（英文好可选英文）&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222144223.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择美国英语式键盘，点击下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222224877.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择跳过安装号码，确定&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222252813.png" /&gt;&lt;/p&gt;
&lt;p&gt;跳过&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222313557.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择检验和修改分区方案，下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222337511.png" /&gt;&lt;/p&gt;
&lt;p&gt;删除所有的LVM卷组和磁盘驱动器&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222356940.png" /&gt;&lt;/p&gt;
&lt;p&gt;删除后&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222426009.png" /&gt;&lt;/p&gt;
&lt;p&gt;这步之后开始分区，分区很重要，Linux系统分区的原则如下：
1. 严格限制大小的：/—根目录，1G。/swap—系统的交换分区，可以看作是虚拟内存的分区，类似windows当中的pagefiles.sys。，建议这个分区是物理内存的两倍。/boot—开机时会用到的文件，1G。
2. 灵活掌握大小的：/tmp—临时文件 /usr/local—系统管理员在本机安装自行下载软件的地方 /opt—第三方软件放置的地方
3. 尽量大点的：/home—存放用户的主目录。/usr—厂商提供的软件存放的地方，类似windows下的c:\program file\，这是linux系统中占用硬盘空间最大的目录。/var—可变信息区（file spool,logs,requests,mail,etc.)，存放可变信息、日志（这三个根据自己需要设置，最后把剩余空间都分配给var即可）。&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722222449004.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223057321.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223105530.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223113565.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224429549.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223128196.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223137342.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223145573.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223153138.png" /&gt;&lt;/p&gt;
&lt;p&gt;点击‘新建’，
无需改动下一步 &lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223316503.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择亚洲上海，取消系统时钟使用UTC（S）,点下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223327555.png" /&gt;&lt;/p&gt;
&lt;p&gt;输入密码下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223454010.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择现在定制，后点击下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223355949.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择开发、java、可选包全部勾选&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223514214.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择开发、老的软件开发、可选包全部勾选&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223524868.png" /&gt;&lt;/p&gt;
&lt;p&gt;选择后关闭，点击下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223545611.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223757084.png" /&gt;&lt;/p&gt;
&lt;p&gt;下一步&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223814170.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223851847.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223858350.png" /&gt;&lt;/p&gt;
&lt;p&gt;重新引导&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223921492.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223933234.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223944844.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722223954159.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224002184.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224008463.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224023744.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224034159.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224043258.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224051264.png" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="这里写图片描述" src="/images/20150722224105050.png" /&gt;&lt;/p&gt;</summary><category term="Linux"></category></entry></feed>