<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--網頁重定向--> <meta http-equiv="refresh" content="5, http://www.qq.com"/> <!--外部樣式連接--> <link rel="stylesheet" type="text/css" href="css/all.css"/> <!--設置icon圖標--> <link rel="icon" href="img/favicon.ico"> </head> <body> </body> </html>
表格行與列
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title></title> </head> <body> <table border="1" width="300" height="200" cellspacing="0" cellpadding="20"> <tr> <td>Sam</td> <td>22</td> <td>Web</td> </tr> <tr> <td>Jack</td> <td>27</td> <td>Python</td> </tr> </table> </body> </html>
table 屬性：
Border=”1” 邊框
Width=”500” 寬度
Height=”300” 高
cellspacing=”2” 默認值為2 單元格與單元格的距離
cellpadding=”2” 內容距邊框的距離
align=”left | right | center”
如果直接給表格用align=”center” 表格居中
如果給tr或者td使用 ，tr或者td內容居中。
bgcolor=”red” 背景顏色。
表格的標准結構
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title></title> </head> <body> <table> <!--完整的標准結構有利於seo，但是有的瀏覽器不友好--> <thead></thead> <tbody></tbody> <tfoot></tfoot> </table> </body> </html>
標准結構的標簽只是表明表格的結構，不支持樣式屬性，若想加樣式可以放在tr、td上
表頭和單元格合並
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title></title> </head> <body> <table border="1" width="500" height="300" cellspacing="0" align="center"> <caption>表頭標簽</caption> <tr> <td colspan="2">John 22</td> <!--colspan 合並行--> <!--<td>26</td>--> <td>web前端</td> </tr> <tr> <td>John</td> <td>26</td> <td rowspan="2">web前端</td> <!--rowspan 合並列--> </tr> <tr> <td>John</td> <td>26</td> <!--<td>web前端</td>--> </tr> </table> </body> </html>
表格之標題、內容垂直對齊方式、邊框顏色
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title></title> </head> <body> <table border="1" bordercolor="blue" width="500" height="300" cellspacing="0"> <tr> <th>姓名</th> <th>年齡</th> <th>職業</th> </tr> <tr> <td valign="top">姓名</td> <td>年齡</td> <td>職業</td> </tr> <tr> <td>姓名</td> <td>年齡</td> <td>職業</td> </tr> </table> </body> </html>
表格標題 <th></th>用法和td一樣
標題的文字自動加粗水平居中對齊
bordercolor="blue" 邊框顏色
內容垂直對齊方式
valign="top | middle | bottom" 三個值
表單之文本輸入框、密碼輸入框、單選框
表單域
<form action="act.py" method="get"></form>
屬性：action:處理信息
Method=”get | post”
Get通過地址欄提供（傳輸）信息，安全性差。
Post 通過act.py來處理信息，安全性高。
文本輸入框
<form action="act.py" method="post"> <!--文本輸入框--> 用戶名：<input type="text" maxlength="12" readonly="readonly" value="" /> </form>
maxlength="6" 限制輸入字符長度
readonly=”readonly” 將輸入框設置為只讀狀態（不能編輯）
<input type="text" maxlength="12" disabled="disabled" value="" />
disabled="disabled" 輸入框未激活狀態
name="username" 輸入框的名稱，取個名字，在處理信息的時候知道誰是誰
value="web前端" 將輸入框的內容傳給處理文件
密碼輸入框
<!--密碼輸入框--> 密碼：<input type="password" />
注意：文本輸入框的所有屬性對密碼輸入框都有效。
單選框
<!--單選框--> <input type="radio" name="genter" id="genter" value="" />男 <input type="radio" name="genter" id="genter" value="" checked="checked" />女
只有將name的值設置相同的時候，才能實現單選效果。
checked=”checked” 設置默認選擇項。
下拉列表
<!--下拉列表--> 省（市）： <select name=""> <option>黑龍江</option> <option>吉林</option> <option>遼寧</option> <option>山東</option> <option value="" selected="selected">北京</option> </select><br /> <select name="" multiple="multiple"> <option value="">河北</option> <option value="">湖北</option> <option value="">江蘇</option> <option value="">浙江</option> </select>
屬性：
multiple=”multiple” 將下拉列表設置為多選項
selected=”selected” 設置默認選中項目
<!--下拉列表分組--> <select name=""> <optgroup label="北京"> <option value="">昌平</option> <option value="">大興</option> <option value="">古城</option> <option value="">朝陽</option> </optgroup> <optgroup label="河北"> <option value="">昌平</option> <option value="">大興</option> <option value="">古城</option> <option value="">朝陽</option> </optgroup> </select>
<optgroup></optgroup> 對下拉列表進行分組。
label=" " 分組名稱。
表單之多選框、按鈕、信息分組
<!--多選框--> <input type="checkbox" name="" id="" value="" />A <input type="checkbox" name="" id="" value="" checked="checked" />B <input type="checkbox" name="" id="" value="" />C
checked=”checked” 設置默認選中項
<!--多行文本框--> <textarea cols="10" rows="20"></textarea>
cols 控制輸入字符的長度。相當於寬
rows 控制輸入的行數。相當於高
文件上傳控件、提交按鈕
<!--文件上傳控件--> <input type="file" name="" id="" value="" /><br /><br /> <!--提交按鈕--> <input type="submit" id="" name="提交" />
submit 可以實現信息提交功能
普通按鈕 不能提交信息，配合JS使用。
<!--普通按鈕--> <input type="button" name="" id="" value="普通按鈕" />
圖片按鈕 可實現信息提交功能
<!--圖片按鈕--> <input type="image" src="" />
重置按鈕 將信息重置到默認狀態
<!--重置按鈕--> <input type="reset" name="" id="" value="重置按鈕" />
表單信息分組 fieldset 標簽要放在 form 標簽內部
<form action="act.py" method="post"> <fieldset id=""> <legend>分組名稱</legend> </fieldset> </form>
<fieldset></fieldset> 對表單信息分組
<legend></legend> 表單信息分組名稱
html5補充表單控件
標簽語義化
好的語義化的網站標准就是去掉樣式表文件之后，結構依然很清晰。
標簽語義化概念：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）
-標簽語義化意義：
1:網頁結構合理
2:有利於seo和搜索引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取；
3:方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
4:便於團隊開發和維護
1：盡可能少的使用無語義的標簽div和span；
2：在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
3：不要使用純樣式標簽，如：b、font、u等，改用css設置。
4：需要強調的文本，可以包含在strong或者em標簽中strong默認樣式是加粗（不要用b），em是斜體（不用i）；