前端开发-4-HTML-table&form&表单控制 标签
2018-10-20 16:09
525 查看
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>
相关文章推荐
- (转)HTML table、form表单标签的介绍
- 网站开发之HTML基础表格Table和表单Form(三)
- HTML table、form表单标签的介绍
- struts2的form等表单布局问题,去掉其自动生成的<table><tr><td>标签
- HTML table、form表单标签的介绍
- HTML table、form表单标签的介绍
- truts2中表单可以不用struts自带的<s:form>标签,直接用html的<form>标签能够提交数据到action
- HTML table、form表单标签的介绍
- 开发日志:struts标签[<s:selec>/<s:submit>/<s:form>......] 在table的时候位置错误 [会自动换行/自动生成tr、td的问题]
- WEB前端开发学习----2.HTML表格table标签
- HTML table、form表单标签的介绍
- HTML table、form表单标签的介绍
- WEB前端开发学习----3.HTML表单form标签
- 前端开发基础学习笔记html标签
- web前端与移动开发---html列表、表单元素等标签的学习
- 前端学习 -- Html&Css -- 表单
- 提交表单存在html标签报错-检测到有潜在危险的 Request.Form 值
- HTML <form> 标签的 enctype 属性
- HTML <form> 标签的 target 属性
- HTML&CSS基础学习笔记1.26-input标签重置表单