首頁  >  文章  >  web前端  >  總結div和span的差異與用法

總結div和span的差異與用法

伊谢尔伦
伊谢尔伦原創
2017-06-05 14:19:147018瀏覽

什麼是span標籤元素?

在html標籤元素中,span元素是一個in-line元素,也就是一個內嵌元素。它的特點是不會獨佔一行。它和區塊(block)級元素是相對的,區塊級元素是獨佔一行的。 span元素沒有實際意義,它的存在純粹是為了應用樣式,給一段內容加上 #記可以透過在span上定義樣式來設定其內容的樣式。

什麼是DIV標籤元素?

DIV可定義文件中的分區或節(division/section)。 DIV標籤可以把文件分割成獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。 如果用 id 或 class 來標記 DIV,那麼該標籤的作用會變得更有效。 div標籤也被用來在HTML檔案中建立邏輯部分。但與 span標籤不同, 工作於文字區塊一級,它在它所包含的HTML元素的前面及後面都引入了行分隔。

下面的文章中總結一下span標籤元素使用以及DIV和span的差異。

首先可以學習php中文網相關的免費課程

#1. 學習《HTML+CSS基礎入門教程》中的 HTML基礎教學之標籤 章節   

總結div和span的差異與用法

2. 觀看《黑馬程式設計師html影片教學》 中 文字DIV和span的標籤  影片課程

總結div和span的差異與用法


##span標籤元素內容

1. 關於HTML5中p與span標籤的介紹只有在目標元素非常獨特,絕不會對網站上其他地方使用這個名詞時,才會使用ID.換句話說,只有絕對確定這個元素只會出現一次的情況下,才應該使用ID.如果你認為以後可能需要相似的元素,就使用類別.元素的主要作用就是對行內的元素進行分組或標識.2. 定義span的最小高度沒有效果的解決#曾經有朋友問:為什麼給用css給span定義高度和寬度後,它的寬度和高度仍然沒有變化,好像失效了一樣? 其實這個問題很簡單-先要認清span的屬性,因為span屬於內聯元素,而內聯元素是忽略寬度和高度的,明白了這一點解決就很簡單了,解決的辦法就是利用css將span變成盒裝元素即可。 3. HTML 中的 span 標籤標準用途為何?

span裡面放文字還是放圖片還是放它東西才符合標準呢? 無語意行內元素。 在段內定義與該段樣式不同的內容的樣式。

同時滿足以下條件的內容你可以使用span標籤:1、行內元素(inline);2、無語意;

##3 、你需要為他加上特定樣式或做js鉤######子的時候。 ##################DIV標籤元素內容###################1. ###html中DIV標籤的使用方法#########

 使用CSS-DIV,主要依靠標籤來實現,當你把HTML內容放在

標籤裡時,可以稱它為:“DIV塊”, “DIV 元素”, “CSS-layer”,或者簡單的稱之為“layer”。

2. Html5實作如何在兩個DIV元素之間拖放圖像

呼叫preventDefault() 來避免瀏覽器對資料的預設處理(drop 事件的預設行為是以連結形式開啟)透過dataTransfer.getData("Text") 方法獲得被拖曳的資料。此方法將傳回在 setData() 方法中設定為相同類型的任何資料。被拖曳資料是被拖曳元素的id ("drag1")把被拖曳元素追加到放置元素(目標元素)中

3. CSS設定DIV元素的透明度

Opacity=開始的不透明度(100的話就不透明了) 
FinishOpacity=結束的不透明度(100的話就不透明了) 
#Style=樣式,從0開始,1.2 .3....有均勻透明啊,放射形透明啊... 
StartX=開始透明的X座標,基本上為圖片、層的左上角(0) 
StartY= 開始透明的Y座標,基本上也為圖片、圖層的左上角(0) 
FinishX=結束透明的X座標,基本上也圖片、圖層的右下(圖片、圖層的寬度) 
FinishY=結束透明的Y座標,基本上也是圖片、層的右下角(圖片、層的高度)

DIV和SPAN的差異與用法 

#1. HTML中DIV與span的差異說明

DIV標籤和SPAN標籤是將一些內容當成一個整體處理,例如,整體隱藏,整體移動。類似一個盒子一樣的東西。這樣做可以精簡程式碼,提高效率。

DIV是將內容放到一個長方形的區塊中,隨意移動會影響佈局。而span只是把內容定義成一個整體進行操作,不影響佈局和顯示。

2. DIV與span之間有什麼區別分析解釋

DIV和SPAN 元素最大的特點是預設都沒有對元素內的物件進行任何格式化渲染。主要用於套用樣式表。兩者最明顯的差異在於DIV是塊元素,而SPAN是行內元素(也譯作內嵌元素)。

3. 搞定CSS SPAN和DIV的區別

SPAN 和DIV 的區別在於,DIV(pision)是一個區塊級元素,可以包含段落、標題、表格,乃至諸如章節、摘要和備註等。而SPAN 是行內元素,SPAN 的前後是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用SPAN。

相關問答

1. 這種元素標籤的style,怎麼覆掉導入的css

2. 浮動對span高度的影響

#3. 多個span 元素怎麼在容器大小差不多總是會掉下來

#4. 如何實現滑鼠移上去的時候一個DIV元素模糊變清晰

#【相關推薦】

1. php中文網免費影片教學: 《2016年新課程體系html+css》

2. php中文網免費教學:《html 開發手冊》


以上是總結div和span的差異與用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn