JavaWeb學習之路(10)--HTML塊級元素div與行級元素span

2021-11-16 23:50:00

1. 塊級元素

上一篇我們講了<p>标簽，它表示一個段落，在該便簽後面會自動換行。

是以<p>标簽是一個塊級元素，它獨自形成一塊，跟後面的内容不會出現在同一行。

2. 行級元素

行級元素也可以稱之為内聯元素，就是在行的内部進行連接配接。是以行級元素是可以共同出現在同一行的，行級元素之後并不會換行。

3. div标簽

<div>标簽是一個标準的塊級元素，它的效果跟<p>标簽類似，都會将内容作為單獨的塊顯示。

如果說這兩個标簽有何差別的話，p标簽更多的表達了段落的意義。而如果寫的一段代碼想讓它成為單獨一塊，但是這一塊也不是一個段落，就可以采用div。

例如，一首詩歌，每一句要斷行，但是每一句其實不算是一個段落，此時可以用div标簽。

<body>

<div>春眠不覺曉</div>

<div>處處聞啼鳥</div>

<div>夜來風雨聲</div>

<div>花落知多少</div>

</body>

效果如下：

再多說一些的話，其實用p和div都行，一般來說div用的更多一點。

4. span标簽

span标簽是行級元素，它包裹的内容不會換行，如下代碼:

我是<span>中國</span>人

效果如下，可以發現span包裹的内容和前後的内容同處一行，而且效果上也沒啥差别。

那麼此時可能就會有疑問了，要span标簽有何用？就像《悟空》裡面唱的，我要這鐵棒有啥用捏？

設計了這個标簽，那必然是得有點用的。其實span包裹起來的部分，可以單獨為其設定效果。比如在後面我們學習了文字顔色設定之後，我們隻想把中國二字設為紅色，其餘字顔色不變。

那麼我們就需要span标簽将中國包起來，然後對該标簽應用特定的文字樣式。

這就是span存在的意義，它可以區分不同的内容，以便對不同的内容應用不同的樣式或者行為。

5. 小結

說了這麼多，其實隻需要掌握div換行、span不換行。

繼續閱讀