前端开发-4-HTML-tableform表单控制 标签
生活随笔
收集整理的這篇文章主要介紹了
前端开发-4-HTML-tableform表单控制 标签
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?1、table標(biāo)簽
<!DOCTYPE html> <html lang="cn"> <head><meta charset="UTF-8"><title>表格</title> </head> <body><!--表格 給table 對(duì)象添加屬性 cellspacing 單元格之間的距離 --><table border="1" cellspacing="0"><!--表格頭--><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!--表格主體--><tbody><!--表格主體的每一行--><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</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>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td rowspan="2">下午</td><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr><tr><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>英語(yǔ)</td><td>生物</td><td>化學(xué)</td></tr></tbody><tfoot><tr><td colspan="6">課程表</td></tr></tfoot></table></body> </html>2、form標(biāo)簽
<!DOCTYPE html> <html lang="cn"> <head><meta charset="UTF-8"><title>表單控件</title> </head> <body><div class="form"><!--form標(biāo)簽是一個(gè)塊級(jí)元素 被提交--><form action="https://www.baidu.com" method="get"><!--label標(biāo)簽行內(nèi)元素--><!--input是行內(nèi)塊元素--><p><label for="user">用戶名：</label><input type="text" name="username" id="user" placeholder="請(qǐng)輸入用戶名" ></p><p><label for="password">密碼：</label><input type="password" name="password" id="password" placeholder="請(qǐng)輸入密碼"></p><!--單選框 checked 會(huì)被默認(rèn)選中 產(chǎn)生互斥 name 值要相同--><p>用戶性別：<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女</p><!--復(fù)選框--><p>用戶的愛(ài)好：<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="樂(lè)">樂(lè)</p><!--文件上傳 file 表單的method的方法是 post 不能是get --><p><input type="file" name="textfile"></p><!--文本域--><p>自我介紹<textarea cols="20" rows="5" name="txt" placeholder="請(qǐng)做自我介紹"></textarea></p><!--下拉列表 size設(shè)置高度 multiple可多選 selected默認(rèn)選中 --><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> <!--類似 普通的按鈕--><!--總結(jié)：按鈕： button reset submit文本： label text password radio checkbox file textarea下拉框： select option--><!--總結(jié)：html標(biāo)簽：head 標(biāo)簽：title 標(biāo)簽，顯示網(wǎng)站的標(biāo)題meta 標(biāo)簽，提供有關(guān)頁(yè)面的原信息style 標(biāo)簽，定義內(nèi)部樣式表link 標(biāo)簽，鏈接css資源文件、網(wǎng)站圖標(biāo)script 標(biāo)簽，鏈接腳本js文件body 標(biāo)簽：h1 - h6 標(biāo)題標(biāo)簽p 段落標(biāo)簽ul 無(wú)序列表標(biāo)簽ol 有序列表標(biāo)簽div 盒子標(biāo)簽table 表格標(biāo)簽th 定義表頭tr 定義表行td 定義表單元格數(shù)據(jù)form 表單標(biāo)簽...actionmethodenctype表單控件分類：textareaselect optioninputlabel...img 標(biāo)簽br 換行標(biāo)簽hr 分割線標(biāo)簽 空格字符a 超鏈接標(biāo)簽span 標(biāo)簽button 按鈕--></div></body> </html>3、標(biāo)簽分類
<!DOCTYPE html> <html lang="cn"> <head><meta charset="UTF-8"><title>標(biāo)簽分類</title> </head> <body><!--1.標(biāo)簽屬性 注意事項(xiàng)：1.HTML標(biāo)簽除一些特定屬性外可以設(shè)置自定義屬性，一個(gè)標(biāo)簽可以設(shè)置多個(gè)屬性用空格分隔，多個(gè)屬性不區(qū)分先后順序。2.屬性值要用引號(hào)包裹起來(lái)，通常使用雙引號(hào)也可以單引號(hào)。3.屬性和屬性值不區(qū)分大小寫，但是推薦使用小寫。2.標(biāo)簽分類：HTML中標(biāo)簽元素三種不同類型：塊狀元素，行內(nèi)元素，行內(nèi)塊狀元素。常用的塊狀元素：<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>常用的行內(nèi)元素<a> <span> <br> <i> <em> <strong> <label>常用的行內(nèi)塊狀元素：<img> <input>塊級(jí)元素特點(diǎn)：display:block;1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。獨(dú)占一行2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。行內(nèi)元素特點(diǎn)：display:inline;1、和其他元素都在一行上；2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。行內(nèi)塊狀元素的特點(diǎn)：display:inline-block;1、和其他元素都在一行上；2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置注意我們可以通過(guò)display屬性對(duì)塊級(jí)元素、行內(nèi)元素、行內(nèi)塊元素進(jìn)行轉(zhuǎn)換，為后面頁(yè)面布局做好了準(zhǔn)備。3.標(biāo)簽嵌套規(guī)則：塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素，例如：<div><div></div><h1></h1><p><p></div> ??<a href=”#”><span></span></a> ?? a 可以包含 img<span><div></div></span> ?某些塊級(jí)元素不能放在p標(biāo)簽里面，比如<p><ol><li></li></ol></p> ??<p><div></div></p> ? 個(gè)別例外，大家注意有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素，不能再包含塊級(jí)元素，這幾個(gè)特殊的標(biāo)簽是：h1、h2、h3、h4、h5、h6、pli元素可以嵌入ul，ol，div等標(biāo)簽<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"><!--塊級(jí)元素： div p h1~h6 ol ul li table form塊狀元素：1.獨(dú)占一行2.可以設(shè)寬度和高度，如果設(shè)置了寬度和高度，則就是當(dāng)前的寬度和高度如果沒(méi)有設(shè)置，寬度就是父盒子的寬度，高度根據(jù)內(nèi)容填充--><div class="left">這是路飛學(xué)城的戰(zhàn)場(chǎng)<div>這是我的段落<div style="width:500px;height: 100px">這是我的愛(ài)好</div><ul><li><h2>讀書</h2></li><li><ol><li>運(yùn)動(dòng)</li><li>學(xué)習(xí)</li></ol></li></ul></div></div><div class="right"><!--行內(nèi)標(biāo)簽 a span br i en strong labelhr 可以設(shè)置寬高；br 不可設(shè)置寬高；行內(nèi)元素：在一行內(nèi)展示，不能設(shè)置寬度和高度，寬度和高度根據(jù)內(nèi)容填充--><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"><!--行內(nèi)塊1.在一行內(nèi)展示2.可設(shè)置寬高--><img src="homesmall1.png" alt="一張圖片" style="height: 500px;width: 500px"><label for="txt">測(cè)試</label><input type="text" name="username" id="txt" style="width: 200px;height: 50px"></div></div></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/foremostxl/p/9821129.html
總結(jié)
以上是生活随笔為你收集整理的前端开发-4-HTML-tableform表单控制 标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： BZOJ3139/BZOJ1306 HN
- 下一篇： HTML 转 PDF 之 wkhtmlt