首頁 > 文章 > web前端 > HTML中div與span對比

HTML中div與span對比

墨辰丷原創: 2018-06-04 15:10:191833瀏覽

這篇文章主要介紹了HTML中div與span對比，分別介紹了p和span的用法和比較，有興趣的可以了解一下

一、8d5359d7acd57fbd757004226d27415d和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114

1.e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤

#e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤可定義文件中的分區或節（pision/section），從而將文件分割為獨立的、不同的部分。 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤可以作為嚴格的組織工具，並且不使用任何格式與其關聯，這其中包含一種HTML標記和表現樣式相分離的想法。在實際工作中，我們通常會為e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤指定 id 或 class 屬性，使該標籤會變得更有效。 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 是一個區塊級元素,這意味著它的內容自動地開始一個新行。並且實際上換行是 e388a4556c0f65e1904146cc1a846bee 固有的唯一格式表現。

下面這段 HTML 模擬了新聞網站的結構。其中的每對e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤把每條新聞的標題和摘要組合在一起，也就是說，e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 為文檔添加了額外的結構。同時，由於這些e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 屬於同一類元素，所以可以使用class="news" 屬性對這些e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤進行標識，這麼做不僅為e388a4556c0f65e1904146cc1a846bee 94b3e26ee717c64999d7867364b1b4a3 增加了合適的語義，而且便於進一步使用樣式對e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 進行格式化。

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2.45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114標籤

45a2772a6b6107b401db3c9b82c049c2 標籤被用來組合文件中的行內元素（inline elements）。

  <span style="color: Red">注意：</span>

二、區塊級元素與行內元素

#區塊級元素（block element)與行內元素/內聯元素(inline element )是css中的概念，像e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3和4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a等元素常稱為區塊級元素。這是因為這些元素顯示為一塊內容，即「塊框」。與之相反，45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 和 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 等元素稱為“行內元素”，這是因為它們的內容顯示在一行中，即“行內框”。

塊級元素和行內元素的概念並不是固定不變的，而是相對的。我們可以使用元素的 display 屬性來改變產生的框的類型。這意味著，透過將display 屬性設為block，可以讓行內元素（例如3499910bf9dac5ae3c52d5ede7383485 元素）表現得像區塊級元素一樣；還可以透過將display 設定為inline 讓產生的元素成為行內元素；甚至，我們可以把display屬性設定為none ,使元素根本沒有框，這種情況，該框及其所有內容就不再顯示，不佔用文件中的空間。

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

三、e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114的比較

##1.相同點：e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114標籤都是用來劃分區間但是沒有實際語義的標籤；兩者都是主要用於應用樣式表。

2.不同點：e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3標籤屬於區塊級元素，瀏覽器在它的前後會自動加上換行標籤0b9f73f8e206867bd1f5dc5957dbcb38;45a2772a6b6107b401db3c9b82c049c2494c0df226525cc046cf4930a65bbd6f標籤屬於內嵌元素，它的前後不會自動加上換行標籤。

如果在網頁佈局中要將某兩個內容顯示在同一行內，最簡單的方法就是將它們用45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114標籤包裝起來。例如，一個頁面有相鄰的兩個元素，一個是e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3，另一個是45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114。要將它們顯示在同一行，可以將這個e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3改為45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114。當然，也可以透過css將e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3等標籤的display屬性設定為 inline 來實現。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

HTML中div與span對比

相關文章