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
是“無意義”的標籤。
相關文章
- div和span的使用原則
- div和span元素的用法簡單介紹
- HTML <span>標籤HTML
- HTML5中div、p、ol、li、ul、dl、dd、form、span的使用案例HTMLORM
- 重學前端學習筆記(四)--div和span不是夠用嗎?前端筆記
- CSS基礎知識-ID/Class/Div/Span/SelectorCSS
- css html span塊狀不換行CSSHTML
- HTML使用div和table進行佈局HTML
- HTML <div>標籤HTML
- html5之div,article,section區別與應用HTML
- HTML中div巢狀div的margin不起作用HTML巢狀
- html之如何讓多個並列的div居中顯示HTML
- HTML span標籤:用來組合文件中的行內元素HTML
- div 裡套 span 會在同一行顯示。div 裡套 div 會分不同行顯示。這樣也能實現田字格佈局
- <span>小程式授權登入彈框</span>
- html 子元素div影響父元素高度HTML
- 如何設定span元素的寬度和高度
- CSS column-spanCSS
- Span 的學習
- padding和margin在span中不好用padding
- 前端入門篇之div前端
- 【譯】停止濫用div!HTML語義化介紹HTML
- 【譯】停止濫用div! HTML語義化介紹HTML
- 如果你的 HTML 裡全是 div,那就要小心了HTML
- <span>Vue中使用axios如何解決跨域問題</span>VueiOS跨域
- C# Span 原始碼解讀和應用實踐C#原始碼
- span元素設定margin和padding不好用padding
- HTML4和HTML5之間的10個主要不同HTML
- html標籤種類很多,為什麼不都用div?HTML
- 圖論之帶權圖「最小生成樹(Minimum Span Tree)」圖論
- HTML DOM之document物件的屬性和方法HTML物件
- 將span元素設定為固定寬度和高度程式碼
- 前端之HTML前端HTML
- html之iframe,aHTML
- HTML5中div常用屬性設定(外鏈式)HTML
- 【HTML】有利於SEO的DIV+CSS的命名規則HTMLCSS
- <span>QQ線上時長對應等級以及圖示的演算法</span>演算法
- 前端基礎知識之html和css全解前端HTMLCSS