今天就跟大家聊聊有關(guān)HTML中div與span有什么不同，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、臺(tái)前網(wǎng)絡(luò)推廣、微信小程序、臺(tái)前網(wǎng)絡(luò)營銷、臺(tái)前企業(yè)策劃、臺(tái)前品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供臺(tái)前建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.chinadenli.net

一、<p></p>和<span></span>

1.<p></p>標(biāo)簽

<p></p>標(biāo)簽可定義文檔中的分區(qū)或節(jié)（pision/section），從而把文檔分割為獨(dú)立的、不同的部分。<p></p>標(biāo)簽可以作為一種嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)，這其中包含一種HTML標(biāo)記和表現(xiàn)樣式相分離的思想。在實(shí)際工作中，我們通常為<p></p>標(biāo)簽指定 id 或 class 屬性，使該標(biāo)簽會(huì)變得更加有效。<p></p> 是一個(gè)塊級(jí)元素,這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行。并且實(shí)際上換行是 <p> 固有的唯一格式表現(xiàn)。

下面這段 HTML 模擬了新聞網(wǎng)站的結(jié)構(gòu)。其中的每對(duì)<p></p>標(biāo)簽 把每條新聞的標(biāo)題和摘要組合在一起，也就是說，<p></p> 為文檔添加了額外的結(jié)構(gòu)。同時(shí)，由于這些 <p></p> 屬于同一類元素，所以可以使用 class="news" 屬性對(duì)這些<p></p>標(biāo)簽進(jìn)行標(biāo)識(shí)，這么做不僅為 <p></p> 添加了合適的語義，而且便于進(jìn)一步使用樣式對(duì) <p></p> 進(jìn)行格式化。

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

2.<span></span>標(biāo)簽

<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素（inline elements）。

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

二、塊級(jí)元素和行內(nèi)元素

塊級(jí)元素（block element)和行內(nèi)元素/內(nèi)聯(lián)元素(inline element)是css中的概念，像<p></p>和<h2></h2>等元素常常被稱為塊級(jí)元素。這是因?yàn)檫@些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，<span></span> 和 <strong></strong> 等元素稱為“行內(nèi)元素”，這是因?yàn)樗鼈兊膬?nèi)容顯示在一行中，即“行內(nèi)框”。

塊級(jí)元素和行內(nèi)元素的概念并不是固定不變的，而是相對(duì)的。我們可以使用元素的 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級(jí)元素一樣；還可以通過把 display 設(shè)置為 inline 讓生成的元素成為行內(nèi)元素；甚至，我們可以把display屬性設(shè)置為 none ,使元素根本沒有框，這種情況，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。

 <p id="dv1" style="display: block">
         我是一個(gè)塊級(jí)元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一個(gè)行內(nèi)元素。
     </p>
     <p id="p3" style="display: none">
         我是不可見的
     </p>

三、<p></p>和<span></span>的比較

1.相同點(diǎn)：<p></p>標(biāo)簽和<span></span>標(biāo)簽都是用來劃分區(qū)間但是沒有實(shí)際語義的標(biāo)簽；兩者都是主要用于應(yīng)用樣式表。

2.不同點(diǎn)：<p></p>標(biāo)簽屬于塊級(jí)元素，瀏覽器在它的前后會(huì)自動(dòng)添加一個(gè)換行標(biāo)簽</br>；<span></span>標(biāo)簽屬于內(nèi)聯(lián)元素，它的前后不會(huì)自動(dòng)添加換行標(biāo)簽。

如果在網(wǎng)頁布局中要將某兩個(gè)內(nèi)容顯示在同一行內(nèi)，最簡單的方法就是將它們用<span></span>標(biāo)簽包裝起來。比如，一個(gè)頁面有相鄰的兩個(gè)元素，一個(gè)是<p></p>，另一個(gè)是<span></span>。要想將它們顯示在同一行，可以將這個(gè)<p></p>改為<span></span>。當(dāng)然，也可以通過css將<p></p>等標(biāo)簽的display屬性設(shè)置為 inline 來實(shí)現(xiàn)。

看完上述內(nèi)容，你們對(duì)HTML中div與span有什么不同有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁標(biāo)題：HTML中div與span有什么不同-創(chuàng)新互聯(lián)
文章出自：http://www.chinadenli.net/article26/degcjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、品牌網(wǎng)站制作、做網(wǎng)站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)