web前端html例項-div和span元素的用法簡單介紹

簡單介紹一下div元素和span元素的用法,這裡對於它們的細節不做介紹,這裡所要介紹的是在何種場合應該選擇何種元素,希望能夠對初學者有所幫助。
一.div元素:
首先它是一個塊級元素,當然也可以轉換為內聯元素。它所使用的場合一般是頁面的結構佈局,例如網頁左中右區域的劃分,或者新聞版塊的劃分等等,也就是說它一般使用在較"大"的層面上。
二.span元素:
它是一個內聯元素,當然也可以轉換為塊級元素,它通常不會用在結構佈局上,而是對細節的修飾,比如文字的顏色或者大小。
三.程式碼例項:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端學習扣qun:731771211每日分享技術,學術交流</title> <style type="text/css"> div{ width:200px; height:100px; float:left; margin-left:10px; background-color:#CCC; } div ul li span{color:blue} </style> </head> <body> <div id="left"> <ul> <li>認真學前1端<span>2019-1-15</span></li> <li>認真學前端2<span>2019-1-15</span></li> </ul> </div> <div id="right"></div> </body> </html>
以上程式碼簡單演示了div和span元素的用法。