HTML塊級元素css
HTML<div>元素html
<div>元素是塊級元素,它的做用是給文檔佈局,它可將文檔分割成獨立的、不一樣的部分。相似於IOS中的view。若是使用id或者class來標記<div>,相似於給view加tag值,這樣會使<div>標籤更加有效。佈局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> This is my HTML</title> </head > <body > <div style="color:#00FF00"> <h4>This is a header</h4> <p>This is a paragraph.</p> </div> </body> </html>
HTML<span>元素spa
<span>元素是內聯元素,與CSS一塊兒使用時,它用於爲文本設置樣式屬性。<span> 標籤被用來組合文檔中的行內元素。code
<div>例子htm
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> This is my HTML</title> <!-- 定義div樣式、顏色、大小等--> <style type="text/css"> div#container{background-color:#EEEEEE;width: 500px} div#header{background-color: #99bbbb;} div#menu{background-color: #ffff99;height: 200px;width: 150px;float: left;} div#content{background-color: #EEEEEE;height: 200px;width: 350px;float: left;} div#footer{background-color: #99bbbb;clear: both;;text-align: center;} h1 {margin-bottom:0;} li {list-style:none;} </style> </head > <body > <div id="container"> <div id="header"> <h1>Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>Objective-C</li> <li>Java</li> <li>PHP</li> </ul> </div> <div id="content"> 這是內容部分 </div> <div id="footer"> Copyright readygo.com </div> </div> </body> </html>