HTML+CSS基礎知識個人筆記_1
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_1
HTML表格
表格的建立
表格建立方式， table>cap+tr>td或者table>tr>th，th為表頭，caption為標題
注意和dl的小差別，dl dt dd 的dd為空，不會佔位。目前是如此。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 三參為0！！！ border cellspacing cellpadding --> <!-- cellspacing 單元格與單元格之間的距離 類似margin --> <!-- cellpadding 單元格內容與單元格邊框的距離 類似padding --> <!-- 與dl dt dd區分，dl>dt+dd table>cap+tr>td table>tr>th --> <table width="200" align="center" border="0" cellspacing="0" cellpadding="0"> <!-- 表格標題緊跟表格！ 且只存在於此！ 一般而言，td方可包含任意，此為唯一 例外 --> <caption>user info</caption> <!-- align 加在tr，行內居中 用CSS更簡單--> <tr align="center"> <!-- align 加在td，單元格內居中 --> <!-- th表頭 --> <th>name</th> <th>sex</th> <th>num</th> </tr> <tr> <!-- 表格td為空，但是會佔一個單元格，區別自定義列表元素為空 --> <td></td> <td>male</td> <td>111</td> </tr> <tr> <td>xiaohong</td> <td>female</td> <td>222</td> </tr> </table> <!-- 無序列表為空，會佔位 --> <ul> <li></li> <li>123</li> <li>123</li> </ul> <!-- 有序列表為空，會佔位 --> <ol> <li></li> <li>123</li> <li>123</li> </ol> <!-- 自定義列表為空，不會佔位 --> <dl> <dt>name</dt> <dd>123</dd> <dd></dd> <dd>123</dd> </dl> </body> </html>
合併單元格
自左向右，自上而下，不要忘記註釋或刪掉被合併的單元格，個數不要超出。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>03_合併單元格</title> </head> <body> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tr align="center"> <td colspan="3">123</td> <!-- colspan rowspan 自左向右，自上而下，不要忘記註釋或刪掉被合併的 單元格，個數不要超出，雖然目前OK --> <!-- <td>abc</td> --> <!-- <td>ABC</td> --> </tr> <tr align="center"> <td>123</td> <td rowspan="2">abc</td> <td>ABC</td> </tr> <tr align="center"> <td>123</td> <!-- <td>abc</td> --> <td>ABC</td> </tr> </table> </body> </html>
HTML input 控制元件
input radio型別一組的要指定相同的name
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>04_input控制元件</title> <style> /*選擇器 { 屬性： 值； } ------ 選擇器，選擇標籤的*/ th { color: skyblue; } td { font-size: 14px; } tr { height: 20px; } </style> </head> <body> <table width="600" align="center"> <!-- 行內式 內聯樣式 --> <caption> <h3 style="color: pink; font-size: 35px;">information</h3> </caption> <!-- 以下是性別 --> <tr height = "50px"> <td>性別</td> <td> <!-- radio 一組的必須指定相同的name --> <input type="radio" name="sex" checked="checked" /> 男 <input type="radio" name="sex" /> 女 </td> </tr> <!-- 以下是所在地區 --> <!-- CSS修飾優先順序似乎高於HTML，內聯樣式似乎高於內部樣式表 --> <tr style="height: 50px;"> <td> <label for="diqu">所在地區</label> </td> <td> <input type="text" value="北京" style="color: #ccc;" id="diqu" /> </td> </tr> <!-- 以下是年份 --> <tr height = "50px"> <td>年份</td> <td> <select> <option>選擇年份</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> </select> </td> </tr> <!-- 以下是籍貫 --> <tr height = "50px"> <td>籍貫</td> <td> <select> <option>選擇籍貫</option> <option>上海</option> <option>杭州</option> <option>廣州</option> <option selected="selected">台州</option> </select> </td> </tr> <!-- 以下是婚姻狀況 --> <tr height = "50px"> <td style="color: blue;">婚姻狀況</td> <td> <input type="radio" name="hunyin" /> 未婚 <input type="radio" name="hunyin" /> 離婚 <input type="radio" name="hunyin" /> 喪偶 </td> </tr> <!-- 以下是學歷 --> <tr height = "50px"> <td>學歷</td> <td> <input type="text" value="小學" /> </td> </tr> <!-- 以下是月薪 --> <tr height = "50px"> <td>月薪</td> <td> <input type="text" value=“5000-10000 /> </td> </tr> <!-- 以下是手機號 --> <tr height = "50px"> <td>手機號</td> <td> <input type="text" /> </td> </tr> <!-- 以下是暱稱 --> <tr height = "50px"> <td>暱稱</td> <td> <input type="text" /> </td> </tr> <!-- 以下是喜歡的型別 --> <tr height = "50px"> <td>喜歡的型別</td> <td> <input type="checkbox" name="xihuan" checked="checked" /> A <input type="checkbox" name="xihuan" /> B <input type="checkbox" name="xihuan" /> C <input type="checkbox" name="xihuan" /> D </td> </tr> <!-- 以下是密碼 --> <tr height = "50px"> <td>密碼</td> <td> <input type="password" maxlength="6" /> </td> </tr> <!-- 以下是按鈕 --> <tr height = "50px"> <td></td> <td> <input type="button" value="普通按鈕" /> <input type="submit" value="提交按鈕" /> <input type="reset" value="重置按鈕" /> <input type="image" src="https://edu-ad-test- cdn.cdn.bcebos.com/d33cbe6cd5bf44e168940d576b0477d9 /b92c5a029665d33cf0ebb318517666ca.png" /> </td> </tr> <!-- 以下是上傳頭像 --> <tr height = "50px"> <td>上傳頭像</td> <td> <input type="file" /> </td> </tr> <!-- 以下是同意 --> <tr height = "50px"> <td></td> <td> <input type="checkbox" /> 我同意 </td> </tr> <!-- 以下是會員 --> <tr height = "50px"> <td></td> <td> <a href="https://wenku.baidu.com/user/mydocs">我是會員，立即 登入</a> </td> </tr> <!-- 以下是建議 --> <tr height = "50px"> <td>建議</td> <td> <textarea cols="50" rows="30">now</textarea> </td> </tr> <!-- 以下是標語 --> <tr height = "50px"> <td></td> <td> <h4>null</h4> <ul> <li>abc</li> <li>ABC</li> <li>123</li> </ul> </td> </tr> </table> </body> </html>