div & span

• <div>容許你爲塊級內容建立邏輯劃分
• <span>元素則採用相似的方式創建內聯內容的邏輯分區

---

 1.計劃

將一個頁面劃分爲邏輯區。

邏輯區就是頁面上彼此相關的一組元素。

 

---

 

2.使用div

在屬於一個邏輯區的元素周圍放置<div>標記。

 

使用id屬性爲<div>提供一個惟一的標籤

 

 注：

• 實際上，一般把<div>描述爲「容器」，能夠至關於邏輯容器，用來將一堆相關的元素放在一塊兒
• 在對<div>指定樣式和定位時，還至關於圖形容器。

 

---

 

3.使用span

一個無序列表

1  <ul>
2       <li>Buddha Bar, Claude Challe</li>
3       <li>When It Falls, Zero 7</li>
4       <li>Earth 7, L.T.J. Bukem</li>
5       <li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
6       <li>Music for Airports, Brian Eno</li>
7  </ul>

 

增長span

1 <ul>
2       <li><span class="cd"> Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
3       <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
4       <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
5       <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
6       <li><span class="cd">Music for Airports</span>,<span class="artist"> Brian Eno</span></li>
7 </ul>

 

指定樣式

1 .cd{
2   font-style: italic;
3 }
4 
5 .artist{
6   font-weight: bold;
7 }

 

注：

• 若是要強調某些文字，能夠使用<em>
• 若是想強調某些重點，能夠使用<strong>
• 若是隻是想要改變某些文字的樣式，就應該使用<span>，並把<span>元素放在合適的類中並分組指定樣式