CSS之div和span標籤

標籤：href   模式   圖片   padding   ref   nbsp   pac   add   order   

div和span是非常重要的標籤，div的語義是division“分割”； span的語義就是span“範圍、跨度”。

這兩個東西，都是最最重要的“盒子”。

 

1                <div> 2                         <h3>中國主要城市</h3> 3                         <ul> 4                                 <li>北京</li> 5                                 <li>上海</li> 6                                 <li>廣州</li> 7                         </ul> 8                </div> 9          10              <div> 11                       <h3>美國主要城市</h3> 12                       <ul> 13                               <li>紐約</li> 14                               <li>洛杉磯</li> 15                               <li>華盛頓</li> 16                               <li>西雅圖</li> 17                       </ul> 18              </div>

div在瀏覽器中，預設是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小地區。

div標籤是一個容器級標籤，裡面什麼都能放，甚至可以放div自己

 

span也是表達“小地區、小跨度”的標籤，但是是一個“文本級”的標籤。

就是說，span裡面只能放置文字、圖片、表單元素。 span裡面不能放p、h、ul、dl、ol、div。

span裡面是放置小元素的，div裡面放置大東西的：

1                                 <p> 2                                         簡介簡介簡介簡介簡介簡介簡介簡介 3                                         <span> 4                                                  <a href="">詳細資料</a> 5                                                  <a href="">購買</a> 6                                         </span> 7                                 </p>

div標籤是最最重要的布局標籤：

1                <div class="header"> 2                         <div class="logo"></div> 3                         <div class="nav"></div> 4                </div> 5                <div class="content"> 6                         <div class="guanggao"></div> 7                         <div class="dongxi"></div> 8                </div> 9                <div class="footer"></div>

所以，我們親切的稱呼這種模式叫做“div+css”。div標籤負責布局，負責結構，負責分塊。css負責樣式。

 

CSS之div和span標籤