标签:管理 button 专业 视频 pad 日期 led word 列表框
9 综合实例
仿百度云盘下载页面实战
table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示一行里面的某个单元格,通常用在后台管理系统中数据表格的显示
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
<td>等级</td>
</tr>
<tr>
<td>20080795113</td>
<td>李菲</td>
<td>3</td>
<td>12</td>
<td>不及格</td>
</tr>
<tr>
<td>20080795114</td>
<td>张菲</td>
<td>3</td>
<td>82</td>
<td>良好</td>
</tr>
<tr>
<td>20080795115</td>
<td>赵菲</td>
<td>3</td>
<td>32</td>
<td>不及格</td>
</tr>
</table>
注意:在table的开始标签 后面加上 border cellspacing cellpadding,这种形式 叫做给html标签添加属性,border 表示边框, cellspacing 表示单元格之间的间隙,cellpadding表示单元格内容和边框之间的距离
colspan 设置当前单元格的在水平方向上合并单元格的个数
<table border="1px" width="300" cellspacing="0" cellpadding="0">
<tr>
<td>姓名</td>
<td>张三</td>
<td>年龄</td>
<td>20</td>
</tr>
<tr>
<td >个人简介</td>
<td colspan="3"></td>
</tr>
<tr>
<td >专业技能</td>
<td colspan="3"></td>
</tr>
</table>
rowspan 设置当前单元格的在垂直方向上合并单元格的个数。
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>姓名</td>
<td>张三</td>
<td>年龄</td>
<td>12</td>
<td rowspan="3">
<img src="tablehead.jpg"/>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>中国</td>
<td>民族</td>
<td>汉族</td>
</tr>
<tr>
<td>出生日期</td>
<td>1999.3.4</td>
<td>政治面貌</td>
<td>党员</td>
</tr>
</table>
1.课程表 2.个人简历
form 标签 表示表单,作用就是用来 收集用户的信息 并且发送给后台使用,例如:登录,注册就是通过formate表单完成
action: 用于设置表单提交的地址 也就是说表单收集的数据要发送到哪里去 method: 用于设置表单提交的方法 也就是说表单是以何种方式把数据发送到action设置好的地址 get: 表单发送数据的方式之一 特点: 表单的发送的数据会显示在浏览器地址栏 post: 表单发送数据的方式之一 特点: 表单发送的数据通常不被用户看见
<form action="http://www.baidu.com/s" method="get">
用户名: <input type="text" name="user"/>
密码: <input type="password" name="password"/>
<input type="submit" value="提交" />
</form>
input标签为表单的某一个子项 会根据type属性的不同而功能不同 常用的几种type属性:
type = "text"
type = "password"
type = "checkbox"
type = "radio"
type = "button"
type = "submit"
type="file"
type = "hidden"
输入框
<input type=“text” /> <!--type="text" 通常用来输入文本内容-->
密码框
<!--type="password" 通常用来输入密码,输入内容不可见-->
<input type=“password” />
复选框
单选框
<!--type="radio" 表示单选,几个input中只能选择一个,是否选中用checked属性-->
<input type=“radio” />
隐藏域
<!--type="hidden" 隐藏表单元素,有些时候后台需要某个数据,但是在前端
不需要显示的时候这个数据的时候使用-->
<input type=“hidden” />
文件选择控件
<input type=“file” /> <!--type="file" 文件上传-->
提交按钮
<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->
普通按钮
<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->
其他属性 name属性,规定input元素的名称,后台会根据这个属性的值来接收数据
value属性,表单项的值 readonly属性,指定控件处于只读状态,针对输入框有效,对按钮无意义 disabled属性,控件不可用,灰色,并且表单提交时不会传送此数据 注意:如果元素没有name属性,表单提交的时候,数据不会被发送出去
textarea 表示多行文本框 rows属性,设置多行文本框的显示行数(高度),具体尺寸取决于文字大小 cols属性,设置多行文本框的显示列数(宽度),即字符数,具体尺寸取决于文字大小
定义一个按钮。
<button type="button">Click Me!</button>
规定下拉列表框
<select name="city">
<option value="bj">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
name属性,规定下拉框名称 size属性,规定下拉框里面选项的可见数目 multiple属性,设置后选单项目允许多选,否则只能选择一个
定义和用法
下拉框的具体每一项 value属性,下拉框的值 注意:如果value属性没有写,默认提交的时候,下拉框的值是被选中的option元素里面的内容,例如,上海,广州,当写了value属性以后,表单提交的时候,下拉框发送的值是value里面的值,例如,如果第一个option元素被选中,则提交的值是bj而不是北京
定义和用法
为 input 元素定义标注(标记) label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<!--显式的绑定:for属性于哪一个表单项元素绑定(通过id属性绑定)。-->
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
<!--隐式的绑定:-->
<label>Date of Birth: <input type="text" name="DofB" /></label>
螺钉课堂视频课程地址:http://edu.nodeing.com
标签:管理 button 专业 视频 pad 日期 led word 列表框
原文地址:https://www.cnblogs.com/dadifeihong/p/12024071.html