Board logo

標題: HTML語法基礎 [打印本頁]

作者: tonyh    時間: 2014-2-11 19:26     標題: HTML語法基礎

本帖最後由 tonyh 於 2014-2-11 19:29 編輯

基本架構
  1. <html>
  2.   <head>
  3.     <title>我的第一個HTML網頁</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.   </head>
  6.   <body>
  7.     大家好!
  8.   </body>
  9. </html>
複製代碼
置中
  1. <center>大家好!</center>
複製代碼
標題
  1. <h1>大家好!</h1>
  2. <h2>大家好!</h2>
  3. <h3>大家好!</h3>
  4. <h4>大家好!</h4>
  5. <h5>大家好!</h5>
  6. <h6>大家好!</h6>
複製代碼
字型
  1. <font size="7" color="red">大家好</font>
  2. <font face="標楷體" size="5" color="#000000">大家好</font>
複製代碼
換行 與 段落
  1. 山不在高,<br/>
  2. 有仙則名;<p/>
  3. 水不在深,<br/>
  4. 有龍則靈。<p/>
複製代碼
斜體, 粗體, 底限, 刪除線, 上標, 與 下標
  1. <i>斜體</i>
  2. <b>粗體</b>
  3. <u>底線</u>
  4. <s>刪除線</s>
  5. <sup>上標</sup>
  6. <sub>下標</sub>
複製代碼
無序號項目清單
  1. <ul>
  2.   <li>螢幕</li>
  3.   <li>主機</li>
  4.   <li>鍵盤</li>
  5.   <li>滑鼠</li>
  6. </ul>

  7. <ul type=disc><li>實心圓點</li></ul>
  8. <ul type=circle><li>空心圓點</li></ul>
  9. <ul type=square><li>實心方塊</li></ul>
複製代碼
有序號項目清單
  1. <ol>
  2.   <li>螢幕</li>
  3.   <li>主機</li>
  4.   <li>鍵盤</li>
  5.   <li>滑鼠</li>
  6. </ol>

  7. <ol type=A><li>ABC</li></ol>
  8. <ol type=a><li>abc</li></ol>
  9. <ol type=I><li>I II III</li></ol>
  10. <ol type=i><li>i ii iii</li></ol>
複製代碼
表格
  1. <table width="50%" height="200" border="3" bordercolor="red">
  2.   <caption>標題</caption>
  3.   <tr><td>列一行一</td><td>列一行二</td></tr>
  4.   <tr><td>列二行一</td><td>列二行二</td></tr>
  5. </table>
複製代碼
表格欄位對齊
  1. <table width="100" height="200">
  2.   <caption>標題</caption>
  3.   <tr align="center" valign="middle"><td>列一行一</td><td>列一行二</td></tr>
  4.   <tr align="left" valign="top"><td>列二行一</td><td>列二行二</td></tr>
  5.   <tr align="right" valign="bottom"><td>列三行一</td><td>列三行二</td></tr>
  6. </table>
複製代碼
表格欄位合併
  1. <td colspan="2"></td>
  2. <td rowspan="3"></td>
複製代碼
分隔橫線
  1. <hr />
  2. <hr color="blue" size="3" align="center" />
複製代碼
超連結
  1. <a href="../index.html">相對路徑</a>
  2. <a href="2.html">相對路徑</a>
  3. <a href="http://tw.yahoo.com/">絕對路徑</a>
  4. <a href="http://google.com" target=_blank>於新視窗開啟</a>
複製代碼
圖片
  1. <img src="image/cute01.jpg" width="600" height="450" />
  2. <img src="http://www.wallpaper-box.com/other/16801050/images/other3.jpg" border="0" width="30%" height="30%" />
複製代碼
背景顏色 與 背景圖案
  1. <body bgcolor="pink">背景顏色</body>
  2. <body background="../image/15.gif">背景圖案</body>
複製代碼





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2