前端開發-2-HTML-table&form&表單控制 標籤
阿新 • • 發佈：2018-11-09
1、table標籤
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格 給table 物件新增屬性 cellspacing 單元格之間的距離 --> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--<tfoot></tfoot>--> </table> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <td rowspan="3">上午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">課程表</td> </tr> </tfoot> </table> </body> </html>
2、form標籤
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表單控制元件</title> </head> <body> <div class="form"> <!--form標籤是一個塊級元素 被提交--> <form action="https://www.baidu.com" method="get"> <!--label標籤行內元素--><!--input是行內塊元素--> <p> <label for="user">使用者名稱：</label> <input type="text" name="username" id="user" placeholder="請輸入使用者名稱" > </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password" placeholder="請輸入密碼"> </p> <!--單選框 checked 會被預設選中 產生互斥 name 值要相同--> <p> 使用者性別： <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 </p> <!--複選框--> <p> 使用者的愛好： <input type="checkbox" name="checkfav" value="吃" checked="checked">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩" checked>玩 <input type="checkbox" name="checkfav" value="樂">樂 </p> <!--檔案上傳 file 表單的method的方法是 post 不能是get --> <p> <input type="file" name="textfile"> </p> <!--文字域--> <p> 自我介紹 <textarea cols="20" rows="5" name="txt" placeholder="請做自我介紹"></textarea> </p> <!--下拉列表 size設定高度 multiple可多選 selected預設選中 --> <p> <label for="sel">城市：</label> <select name="sel" id="sel" size="3" multiple> <option value="北京">北京</option> <option value="上海" selected>上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </select> </p> <!--按鈕--> <p> <!--顯示普通的按鈕--> <input type="button" name="btn" value="提交" disabled> <!--重置按鈕--> <input type="reset" name="" > <!--提交form表單使用 type=submit 按鈕--> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按鈕</button> <!--類似 普通的按鈕--> <!-- 總結： 按鈕： button reset submit 文字： label text password radio checkbox file textarea 下拉框： select option --> <!-- 總結： html標籤： head 標籤： title 標籤，顯示網站的標題 meta 標籤，提供有關頁面的原資訊 style 標籤，定義內部樣式表 link 標籤，連結css資原始檔、網站圖示 script 標籤，連結指令碼js檔案 body 標籤： h1 - h6 標題標籤 p 段落標籤 ul 無序列表標籤 ol 有序列表標籤 div 盒子標籤 table 表格標籤 th 定義表頭 tr 定義錶行 td 定義表單元格資料 form 表單標籤 ... action method enctype 表單控制元件分類： textarea select option input label ... img 標籤 br 換行標籤 hr 分割線標籤 空格字元 a 超連結標籤 span 標籤 button 按鈕 --> </div> </body> </html>
3、標籤分類
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>標籤分類</title> </head> <body> <!-- 1.標籤屬性 注意事項： 1.HTML標籤除一些特定屬性外可以設定自定義屬性，一個標籤可以設定多個屬性用空格分隔，多個屬性不區分先後順序。 2.屬性值要用引號包裹起來，通常使用雙引號也可以單引號。 3.屬性和屬性值不區分大小寫，但是推薦使用小寫。 2.標籤分類： HTML中標籤元素三種不同型別：塊狀元素，行內元素，行內塊狀元素。 常用的塊狀元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行內元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行內塊狀元素： <img> <input> 塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨佔一行 2、元素的高度、寬度、行高以及頂和底邊距都可設定。 3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設定； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設定 注意 我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為後面頁面佈局做好了準備。 3.標籤巢狀規則： 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如： <div><div></div><h1></h1><p><p></div> ✔️ <a href=”#”><span></span></a> ✔️ a 可以包含 img <span><div></div></span> ❌ 某些塊級元素不能放在p標籤裡面，比如 <p><ol><li></li></ol></p> ✔️ <p><div></div></p> ❌ 個別例外，大家注意 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是： h1、h2、h3、h4、h5、h6、p li元素可以嵌入ul，ol，div等標籤 <ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul> --> <div class="wrapper"> <!--塊級元素： div p h1~h6 ol ul li table form 塊狀元素： 1.獨佔一行 2.可以設寬度和高度，如果設定了寬度和高度，則就是當前的寬度和高度 如果沒有設定，寬度就是父盒子的寬度，高度根據內容填充 --> <div class="left"> 這是路飛學城的戰場 <div>這是我的段落 <div style="width:500px;height: 100px">這是我的愛好</div> <ul> <li> <h2>讀書</h2> </li> <li> <ol> <li>運動</li> <li>學習</li> </ol> </li> </ul> </div> </div> <div class="right"> <!--行內標籤 a span br i en strong label hr 可以設定寬高； br 不可設定寬高； 行內元素：在一行內展示，不能設定寬度和高度，寬度和高度根據內容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">luffy</a> <span style="width: 100px;height: 100px">一些文字</span> <span>一些文字</span> <i>我是i</i> <hr style="height: 100px;width: 100px"> <em>我是em</em> <br style="width: 200px;height: 100px"> <strong style="height: 200px;width: 100px;">我是strong</strong> </div> <div class="inline-block"> <!--行內塊 1.在一行內展示 2.可設定寬高 --> <img src="homesmall1.png" alt="一張圖片" style="height: 500px;width: 500px"> <label for="txt">測試</label> <input type="text" name="username" id="txt" style="width: 200px;height: 50px"> </div> </div> </body> </html>