html之div和span
HTML只是賦予內容的手段,大部分HTML標籤都有其意義(標籤p
建立段落,h1
標籤建立標題等等)的,然而span
和div
標籤似乎沒有任何內容上的意義,聽起來就像一個泡沫做成的錘子一樣無用。但實際上,與CSS結合起來後,它們被用得十分廣泛。
它們被用來組合一大塊的HTML程式碼並賦予一定的資訊,大部分用類屬性class
和標識屬性id
與元素聯絡起來,見CSS中級指南的類和id選擇符。
span
和div
的不同之處在於span
是內聯的,用在一小塊的內聯HTML中,而div
(想想division是什麼意思)元素是塊級的(簡單地說,它等同於其前後有斷行),用於組合一大塊的程式碼。
<div id="scissors">
<p>This is <span class="paper">crazy</span></p>
</div>
在實踐中,div
,特別是span
不應該濫用,儘管有其他相左的意見。比如,你要強調單詞“crazy”和加粗類“paper”,可能會用這樣的程式碼:
<div id="scissors">
<p>This is <strong class="paper">crazy</strong></p>
</div>
這是做法比再加一個span
比較好。
對於類class和標識id沒有線索?別擔心,在CSS中級指南中會接觸到它們。你所需要記住的是,span
和div
是“無意義”的標籤。
相關文章
- HTML <span>標籤HTML
- 重學前端學習筆記(四)--div和span不是夠用嗎?前端筆記
- HTML <div>標籤HTML
- HTML中div巢狀div的margin不起作用HTML巢狀
- html中在span標籤裡面可以放那些標籤?HTML
- The Life of a Span
- html 子元素div影響父元素高度HTML
- div 裡套 span 會在同一行顯示。div 裡套 div 會分不同行顯示。這樣也能實現田字格佈局
- <span>不聽老人言,吃虧在眼前</span>
- <span>小程式授權登入彈框</span>
- 【譯】停止濫用div! HTML語義化介紹HTML
- 【譯】停止濫用div!HTML語義化介紹HTML
- 如果你的 HTML 裡全是 div,那就要小心了HTML
- CSS column-spanCSS
- <span>Vue中使用axios如何解決跨域問題</span>VueiOS跨域
- html標籤種類很多,為什麼不都用div?HTML
- HTML DOM之document物件的屬性和方法HTML物件
- 圖論之帶權圖「最小生成樹(Minimum Span Tree)」圖論
- C# Span 原始碼解讀和應用實踐C#原始碼
- html之iframe,aHTML
- 前端之HTML前端HTML
- 前端基礎知識之html和css全解前端HTMLCSS
- <span>得瑟的時候就是你要倒黴的時候。</span>
- html中p標籤內為何不能巢狀div標籤?HTML巢狀
- CSS之CSS和html整合方式及優先順序CSSHTML
- HTML和CSSHTMLCSS
- 好程式設計師web前端分享DIV+CSS3和html5+CSS3有什麼區別程式設計師Web前端CSSS3HTML
- <span>QQ線上時長對應等級以及圖示的演算法</span>演算法
- 前端面試之HTML前端面試HTML
- HTML之常用標籤HTML
- HTML之表格標籤HTML
- HTML之框架標籤HTML框架
- 前端筆記之HTML前端筆記HTML
- 前端Html5(1)之html語義化前端HTML
- 企業級資料大屏設計如何實現,div+html+echartsHTMLEcharts
- Python HTML和CSS 1:html文件結構和常用標籤PythonHTMLCSS
- webkit 瀏覽器內幕之HTML 直譯器和DOM 模型WebKit瀏覽器HTML模型
- JavaScript動態新增和刪除div元素JavaScript
- javascript隱藏和顯示div的方法JavaScript