1. HTML 表格
主要關鍵字：
- table：表格；
- table border 屬性：定義邊框 -- <table border="1">；
- caption：表名；
- th：表頭
- tr：行；
- td：行內數據定義；
- colspan 屬性：合並列（th、td 中使用）；
- rowspan 屬性：合並行（th、td 中使用）；
示例：
<table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th><> </tr> <tr> <td>Bill Gates</td> <td colspan="2">555 77 854 123456</td> </tr> <tr> <td>Liangyu</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
2. HTML 列表
無序列表 <ul>： 使用粗體圓點進行標記；
<ul> <li>Coffee</li> <li>Milk</li> </ul>
有序列表<ol>：列表項目使用數字進行標記；
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定義列表：
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
嵌套列表：
<h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
2. HTML 區塊
- HTML 區塊元素：通常會以新行開始 - <h1>（標題） <p>（段落） <ul>（無序列表） <table>（表格）；
- HTML 內聯元素：通常不會以新行開始 - <b> （粗體）<td>（表格內容） <a>（鏈接） <img>（圖像）；
<div>：塊級元素，用於組合其他元素的容器，與 css 配合使用，對大的內容快設置樣式。
<span>：內聯元素，用於文本的容器，與 css 配合使用，對部分文本單獨設置樣式；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <div id="container" style="width:500px"> <!-- 決定了整個大區塊的寬度為500像素 --> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的網頁標題</h1></div> <!-- 下外邊距為0，與下面的區塊緊密貼合 --> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <!-- 元素向左浮動 --> <b>菜單</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> <!-- 元素向左浮動 --> 內容在這里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版權 © runoob.com</div> </div> </body> </html>
還可以用表格來進行頁面布局，不贅述。
3. HTML 表單
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
表單使用表單標簽 <form> 來設置。
輸入框：
First Name:<input type="text" name="firstname"><br> Last Name: <input type="text" name="lastname"><br>
密碼輸入框：
Password: <input type="password" name="pwd"><br>
單選控件：
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> </form>
復選控件：
<form> <input type="checkbox" name="sex" value="male">Male<br> <input type="checkbox" name="sex" value="female">Female<br> </form>
提交數據至其他頁面：
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
下拉列表：
<form action="hello" method="get"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" seletet>Fiat</option> <!-- 預選 --> <option value="audi">Audi</option> </select> </form>
文本框：
<textarea rows="10" cols="30"> 我是一個文本框。 </textarea>
按鈕：
<form action=""> <input type="button" value="Hello world!"> </form>