HTML區塊元素及內聯元素
阿新 • • 發佈：2019-02-11
HTML區塊分<div>/<span>有時候也可以用<table>來製作網頁，通常跟CSS聯合起來製作，也可以直接在HTML裡面設定屬性。
1.<div>：區級元素
<!DOCTYPE html> <html> <head> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFAAAA"> <h1 style="margin-bottom:0" align="center">Sweetga's Web Page</h1> /*margin-bottom 是外邊距底部，為0則緊靠下面的方塊*/ </div> <div id="menu" style="background-color:#FFF000;height:200px;width:100px;float:left;"> /*float 是浮動屬性，說明這個小區塊在大區塊浮動左邊*/ <b>Memu</b> <br/> HTML<br/> CSS<br/> JavaScript </div> <div id="content" style="background-color:#8899FF;height:200px;width:400px;float:left;"> /*float同理緊靠左邊，將上面memu的浮動改為right時為圖二情況*/ Welcome visit my blog! We could study HTML here together. </div> <div id="footer" style="background-color:#FFAAAA;clear:both;text-align:center;"> <i>http://blog.csdn.net/sweetga</i> </div> </div> </body> </html>
利用table 製作網頁：
<!DOCTYPE html> <html> <body> <table width="900px" border="0" align="center"> <tr> <td colspan="3" > <h3>Blog.csdn.net</h3> </td> </tr> <tr> <td colspan="3" style="background-color:#11AA55;text-align:center"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;;height:400px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#EEEEEE;width:700px;height:400px;"> Content goes here </td> <td style="background-color:#00AAAA;width:100px;height:400px;"> hello </td> </tr> <tr> <td colspan="3" style="background-color:#FFA500;text-align:center;"> http://blog.csdn.net/sweeyga</td> </tr> </table> </body> </html>
2.<span>:
<span>屬於內聯元素，內聯元素：在顯示時，通常不會以新行開始。
<span>可作為文字的容器，與CSS一同使用時，可作為部分文字設定樣式屬性。<!DOCTYPE html> <html> <body> <p>This is my blog. <span style="color:blue;font-weight:bold">http://</span> <span style="color:red;font-weight:bold">blog.csdn.net/sweetga</span> welcome to here!</p> </body> </html>
