1、解決HTML中的編碼問題 2、列表的使用 3、HTML中的表格標記 4、表單標記 ...
1、解決HTML中的編碼問題
<html> <head> <title>HelloHtml</title> <!--告知瀏覽器用UTF-8編碼打開--> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <marquee>hello java</marquee> </body> </html>
2、列表的使用
<html> <head> <title>列表標記</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!--有序列表：ol； 屬性： type：預設值是1，可選值：AaIi start:開始的序號 --> <ol type="1" start="10"> <li>星期日</li> <li>星期一</li> <li>星期二</li> </ol> <hr/> <!--無序列表：ul 屬性： type：預設值是disc，可選值：circle square --> <ul type="square"> <li>張三</li> <li>李四</li> <li>王五</li> </ul> <!--自定義列表 dt:定義標題 dd：定義內容 --> <dl> <dt>title</dt> <dd>content</dd> </dl> <hr/> <dl> <dt>title</dt> <dd>content</dd> </dl> <hr/> <dl> <dt>title</dt> <dd>content</dd> </dl> </body> </html>
3、HTML中的表格標記
<html> <head> <title>表格標記</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!-- tr:表示表中的行 td:表示行中的列。內容要在td中 colspan:當前列占用的幾列的寬度 rowspan：當前列占用的行數 th:表示行中的列。內容會被自動居中和加粗。作為表頭使用 cellspacing:單元格之間的距離。取值是像素值. 外補丁 cellpadding：單元格中的內容和邊線的距離。取值是像素值 內補丁 --> <table border="1" width="60%" align="center"> <tr> <th>姓名</th> <th>性別</th> <th>籍貫</th> </tr> <tr> <td>張三</td> <td>男</td> <td>山東</td> </tr> <tr> <td> 李四</td> <td>女</td> <td>山東</td> </tr> </table> <hr/> <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5"> <tr> <th>姓名</th> <th>性別</th> <th>籍貫</th> </tr> <tr> <td>張三</td> <td>男</td> <td>山東</td> </tr> <tr> <td>李四</td> <td>女</td> <td>山東</td> </tr> </table> <hr/> <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5"> <tr> <td align="center" colspan="3"> 學員信息列表 </td> </tr> <tr> <th>姓名</th> <th>性別</th> <th>籍貫</th> </tr> <tr> <td>張三</td> <td>男</td> <td>山東</td> </tr> <tr> <td>李四</td> <td>女</td> <td>山東</td> </tr> </table> <hr/> <table align="center" border="1" width="60%" cellspacing="0" cellpadding="5"> <caption>表格的標題</caption> <tr> <th>年度</th> <th>班級</th> </tr> <tr> <td rowspan="3">2014</td> <td>JavaEE12</td> </tr> <tr> <td>JavaEE13</td> </tr> <tr> <td>JavaEE14</td> </tr> <tr> <td rowspan="3">2015</td> <td>JavaEE15</td> </tr> <tr> <td>JavaEE16</td> </tr> <tr> <td>JavaEE17</td> </tr> </table> </body> </html>
4、表單標記
<html> <head> <title>表單標記</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!--表單有關的標記放在form中 form：代表一個表單 屬性： action:是一個地址，接收數據的地址 method:預設值是get。建議使用post 重點：get和post的區別（暫時記住） get：(預設值)01html.html?username=abc&password=123 保密性查，容易被旁邊的人看到，不安全。 長度有限制：<1kb post：建議使用的 保密性好。長度沒有限制 username=abc&password=123 input:輸入標記 屬性： type:輸入域的類型。text(預設值)|password(暗文) |radio(單選)|checkbox(覆選)|file(上傳) |reset（重置）|submit（提交）|button（按鈕，結合js使用） |image(指定src用圖片代替按鈕) |hidden隱藏域，向伺服器傳遞信息 name：給該輸入域取一個名字。 maxlength:限制輸入的內容的最大長度 select:下拉選擇 textarea:文本區域 --> <form action="01html.html" method="get"> <input type="hidden" name="id" value="123"/> 用戶名：<input type="text" name="username" value="" maxlength="5"/><br/> 密碼：<input type="password" name="password"/><br/> 性別：<input id="g1" type="radio" name="gender" value="1" checked="checked"/> <label for="g1">男</label> <input id="g2" type="radio" name="gender" value="0"/> <label for="g2">女</label> <br/> 愛好：<input type="checkbox" name="hobby" value="吃飯"/>吃飯 <input type="checkbox" name="hobby" value="睡覺"/>睡覺 <input type="checkbox" name="hobby" value="學java"/>學java<br/> 籍貫：<select name="province"> <option value="BJ">北京</option> <option value="SD" selected="selected">山東</option> <option value="HB">湖北</option> </select><br/> 靚照：<input type="file" name="photo"/><br/> 簡介：<textarea name="discription" rows="3" cols="38"></textarea><br/> <input type="submit" value="提交"/> <input type="reset" value="重置"/> <input type="button" value="按鈕"/> <input type="image" src="images/reg.jpg"/> </form> </body> </html>
