前端开发-4-HTML-tableform表单控制 标签
生活随笔
收集整理的這篇文章主要介紹了
前端开发-4-HTML-tableform表单控制 标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?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 表單標簽...actionmethodenctype表單控件分類：textareaselect optioninputlabel...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、pli元素可以嵌入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 labelhr 可以設置寬高；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>?
轉載于:https://www.cnblogs.com/foremostxl/p/9821129.html
總結
以上是生活随笔為你收集整理的前端开发-4-HTML-tableform表单控制 标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BZOJ3139/BZOJ1306 HN
- 下一篇： HTML 转 PDF 之 wkhtmlt