span跟section跟div差異

span跟div差異

span=同軸(同行文字用)
div=區塊
也就是說span是用來定義較小範圍，而div則是描述較大的區塊。
兩個span並列會顯示在同行，但兩個div並列則會自動換行
且div可以包含span，但是span不可以包div

section跟div差異

section=並不等於一般容器，section用於具有主題的群組內容，section代表的是章節、它可以代表的是一個欄位中不同的頁籤，或是一系列中帶有數字區分前後的區塊，像首頁被區分為介紹、最新消息聯絡資訊區塊等等。

div=(並不帶有多餘意義的)區塊

如果要用css來定義區塊視覺外觀，以撰寫div為優先(=不要把css寫在section上)

用純css編寫基礎的lightbox效果

晚點再打

圖片縮放與排列

每張圖片分隔成一個一個+

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>
CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

div與nav的差異

在寫自身網頁最上方橫幅產生的疑問，div元素跟nav是否能混用？如果不行的話那差異為？
google後得到答案如下。

解答來源：
http://stackoverflow.com/questions/18628097/whats-the-difference-between-using-nav-and-div-around-bootstrap-3-navbars

Q:In examples for the latest Bootstrap 3 navbars, I found various examples on the web where the outer navbar markup is
<div class="navbar navbar-default navbar-static-top">...</div>
and other examples are using
<nav class="navbar navbar-default" role="navigation">...</nav>
All the examples perform OK, and the documentation calls for NAV. Which leaves me wondering if a lot of examples on the web are version 2 leftovers that were not rewritten for version 3, or it is OK to use either surrounding markup.
A:
<nav> is the semantic HTML5 container element for you main navigation elements.
The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links.
from http://learn.shayhowe.com/html-css/elements-semantics
If you are using HTML5 then you should use nav.
-----------------------------------------------------------------------------------------------

nav是用來描述主要頁面導覽的html5區塊元素，並非所有連結都能放在nav中。

nav能放的：

1. 網頁最主要的頁面連結
2. 網頁目錄
3. 導覽路徑標示（Breadcrumbs）

如果在html5環境編寫，則應該使用在上述場合使用nav標籤，而div本身就沒有這些特殊意義，雖然使用div一樣也可以執行類似功能。

導覽路徑標示（Breadcrumbs）：
讓訪客清楚自己身在哪一個層級/頁面，以及要如何回到上層/依循原路回訪的標示。
以下是關於Breadcrumbs的訊息

• 放在網頁頂端

網頁導覽路徑標示放在網頁的頂端齊左，就像書本頁碼，導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移，就有可能和其他的導覽要素混淆。

• 用＞區分層級

經過trial and error顯示，最佳區隔符號是大於符號（＞）；雖然冒號（：）和斜撇（/）也都有人用，因為＞符號本身就有方向在。
Flickr用斜撇（/）來區分層級。字體則是藍字與紅色。

• 用較小字體

字體稍小，可以明確區分主從。

• 貼上" You are here"

大部分的使用者都知道導覽路徑標示是什麼，貼上" You are here"更直接。

• 最後一項字體加粗或變色

最後一項應該是所在網頁的網頁名稱，用粗體字，更明顯。
About.com是用黑體子標示You ar here:，用藍字顯示各層，以紅字標示現在所在。

• 不要用導覽路徑標示來取代網頁名稱

有些網站會把最後一項字體放大，同時充當網頁名稱。這種設計不見得好用，因為使用者通常會期待網頁名稱直接出現在網頁的中央或齊左。