Web 新手to 能手系列— HTML 排版 - Medium

相對於使用TABLE、FRAME 的方式，現在一般撰寫網頁時，更常可以看見的，是DIV 和SPAN。

. “Web 新手to 能手系列— HTML 排版” is published by WuFeng ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWriteWeb新手to能手系列—HTML排版相對於使用TABLE、FRAME的方式，現在一般撰寫網頁時，更常可以看見的，是DIV和SPAN。

DIV是division(區域)，而SPAN則直接當成是一個單字，有area、range的意思。

哦…好像有點像，不過division有"分開來"的意義，這決定了它們的不同。

先來看「沒有分開來」意義的SPAN元素：上圖中，我寫了兩個段落(paragraph)，一個使用了，另一個則否，但是顯示效果一模一樣。

是的，在顯示上的確如此，但是在「運用的靈活度」上就差很多。

舉例如下：這裡順便來介紹一下超級簡單的CSS。

所謂的CSS，在這兒指的是之間的描述。

其中，#greeting指的就是:id=”greeting”的元素。

這裡，針對id為greeting的早安，我給了「藍色」。

上例中，只有「早安」符合。

而.big指的是class=”big”的元素，我設定符合的元素將有28px大小的字體。

上例中，「早安」和「午安」都符合。

以上就是使用後，善用id和class兩個屬性值，而讓單純的文字顯示產生變化的方式。

而：讓CSS方便變化呈現方式、讓JavaScript可以對其進行操作，就是的存在意義！再來看DIV元素：上面的例子，純粹只是把SPAN元素，換成DIV和P元素。

兩者都會換行哩！但是P元素換行的空間比較大！這是"看圖說故事"的解釋。

其實也沒錯啦，但是更好的理解方式是：DIV和P之間的差異，在於「語意」。

P指的是段落，就像在Medium上寫文章，按下Enter後，下一行和上一行會相隔一個空行的間距。

而DIV只是強調：我自己包含的，是一個獨立的部分。

所以第一組的「早/午/晚安」只是被隔出不同行。

在運用上，DIV和SPAN一樣：基本上它們的出現，就是代表我們要用CSS/JavaScript操作它們。

如此而已。

這裡有一個觀念要刻意提及，像SPAN這種不會另外換一行的，叫「inline(行內)」元素；而DIV這種會自成格局的，叫「block(區塊)」元素。

有了以上的概念，我們就可以來理解上篇文章中，提到TABLE與FRAME元素淡出江湖後，取而引領風騷的新式排版方式。

(就是用CSS啦)class為header的元素因為沒有宣告float，所以預設就會獨佔一行；沒寫width就等於width=100%，所以header區自己獨佔一行，框線伸展到畫面最寬處。

clas為menu和main的元素，剛好一個是佔25%的寬度，另一個是75%，又都是用float來排版的，所以兩者正好併成一行(100%)。

如果把main類型的元素，寬度值設定成76%呢？由上可知，main類的“TheCity”因為要佔76%的寬度，但是menu那一行剩75%，所以"TheCity”就只好被擠下來了。

說起來，用word拉拉好簡單的表格，用CSS表達起來似乎好瑣碎？其實這是真的，但是，這代價的好處是：用CSS可以很大幅度的對整個呈現做改變，但是表格不行！靈活度是CSS的最大優點！(不信的話，用上例來試試表格變動時的調整，就知道有多麻煩)以上就是融合了CSS初階、HTML中的DIV與SPAN元素的說明。

--MorefromWuFengChiangFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedWuFengChiang224FollowersFollowMorefromMediumHennaSinghFlexbox:ExercisesJoosepPartsInsertandynamicHTMLsignaturetowebapplicationsShawnWerberHTMLBasics-StructureAdyashaPattanayakSASS→(SAssyCSS)HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable