学习第二天总结

今天学到了HB的表单用法,还有音频和视频用法。其中知道了HTML中的from的用法。

html中使用form标签完成。表单标签其实是一组标签的组合,不是一个标签。

表单元素是允许用户在表单中(比如:输入框、文本域、下拉列表、单选框、复选框等等)输入信息的元素。

在html中使用<form>来定义表单:

常见的表单元素有:

在form标签中经常使用其他标签:

  input主要是用来让用户输入数据的标签。input标签中的type属性,可以设置当前让用户输入的数据填写的类型

  input标签的type属性

      type="text"  文本框 ,主要用于让用户输入可见的数据,input的默认属性; 

      type="password" 密码框,主要用于让用户输入不可见的数据

      type="radio"  单选按钮,这个一般是让用户选择的,注意name属性必须一致

      type="checkbox"  复选框,用户可以选择多个条件

      type="file"  选择文件可以把本地的文件上传到服务器

      type="submit" 提交, 提交整个form表单中的数据到服务端

      type="reset"  重置,把form表单中的数据重置到初始状态

      type="button"  按钮,就是一个简单按钮,没有任何的点击效果

      type="image" 图片可以代替submit提交

      type="hidden"  隐藏数据,页面上不会显示,但是这个数据依然会在选择提交的时候提交给服务端

    <select> 下拉框需要和option标签一起使用

<textarea rows="5" cols="40"> 文本区域,其中rows文本区域显示的多少行cols用于显示文本区域每行多少列。

input : 用户输入一些文本信息, 默认是type="text"

              type="password" : 密码框,输入 的内容不可见

              type="radio" 单选框,一定要给出name的属性值,并且一定要一样,

                  checked="checked" 默认选中的效果

              type="checkbox" 多选框

              type="hidden" :隐藏的按钮

           select : 下拉框,配合option一起使用, selected="selected"默认选中的效果

           textarea : 文本区域

           button : 简单的一个按钮

然后就是视频标签和视频标签的用法

<video src="" controls=””></video>(这是视频标签)

<audio src="song.mp3" controls="controls" loop="loop"(这是音频标签)

然后就是今天的作业用表单的方法对表格进行修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1px" width="800px" height="900px" cellpadding="0px" cellspacing="0px" >
			<!--名称-->
			<tr align="center">
				<th colspan="7">个人简历</th>
			</tr>
			<tr align="center">
				<!--基本信息-->
				<th>姓  名</th>
				<td><input type="text" id="username" name="username" placeholder="请输入你的名字"/></td>
				<th>性  别</th>
				<td><input type="radio" name="sex" value="男" />男
				<input type="radio" name="sex" value="女" />女</td>
				<th>民  族</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="汉">汉</option>
					<option value="壮族">壮族</option>
					<option value="土族">土族</option>
					<option value="藏族">藏族</option>
					<option value="满族">满族</option>
				</td>
				<th rowspan="4" width="120"><a href="http://bd.maoni521.com/" target="_blank">
					<img src="../img/nan.jpg" width="180px" height="200px"/>
				</a>
				</th>
			</tr>
			<tr align="center">
				<!--出生地日-->
				<th>出生年月</th>
				<td><input type="date" /></td>
				<th>政治面貌</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="群众">群众</option>
				    <option value="党员">党员</option>
					<option value="团员">团员</option></td>
				<th>籍  贯</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="南京">南京</option>
					<option value="重庆">重庆</option>
					<option value="成都">成都</option>
					<option value="上海">上海</option>
					<option value="深圳">深圳</option>
			   </select></td>
				
			</tr>
			<tr align="center">
				<!--身体招生-->
				<th>身体状况</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="健康">健康</option>
					<option value="亚健康">亚健康</option>
					<option value="偏瘦">偏瘦</option>
					<option value="偏胖">偏胖</option>
				</td>
				<th>身  高</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="180cm">180cm</option>
					<option value="175cm">175cm</option>
					<option value="170">170cm</option>
					<option value="165cm">165cm</option>
					<option value="165以下">165以下</option>
					
				</td>
				<th>招生类别</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="并轨">并轨</option>
					<option value="统招">统招</option>
					<option value="非统招">非统招</option>
				</td>
				
			</tr>
			<tr align="center">
				<!--学历-->
				<th>学 历</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="研究生">研究生</option>
					<option value="博士生">博士生</option>
					<option value="本科">本科</option>
					<option value="大专">大专</option>
					<option value="中专">中专</option>
				</td>
				<th>学 制</th>
				<td><input type="text" id="username" name="username" placeholder="请输入你的学年"/></td>
				<th>系 别</th>
				<td><select>
					<option value="请选择">请选择</option>
					<option value="电子信息工程">电子信息工程</option>
					<option value="艺术设计">艺术设计</option>
					<option value="建筑工程">建筑工程</option>
					</td>
				
			</tr>
			<tr align="center">
				<!--毕业院校-->
				<th>毕业学校</th>
				<td colspan="3"><select>
					<option value="请选择">请选择</option>
					<option value="清华大学">清华大学</option>
					<option value="北京大学">北京大学</option>
					<option value="南京大学">南京大学</option>
					<option value="南京医科大学">南京医科大学</option>
				</td>
				<th>专 业</th>
				<td colspan="2"><select>
					<option value="室内设计">室内设计</option>
					<option value="计算机科学">计算机科学</option>
					<option value="土木工程">土木工程</option>
					<option value="临床医学">临床医学</option>
				</td>
			</tr>
			<tr align="center">
				<!--联系方式-->
				<th>电  话</th>
				<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入你的电话"/></td>
				<th colspan="2">E-mail 地址</th>
				<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入你的邮箱"/> </td>
			</tr>
			<tr align="center">
				<!--邮箱地址-->
				<th>联系地址</th>
				<td colspan="6"><input type="text" id="username" name="username" placeholder="请输入你的联系地址"/></td>
			</tr>
			<tr>
				<th>家庭地址</th>
				<td colspan="6"align="center"> <input type="text" id="username" name="username" placeholder="请输入你的联系地址"/></td>
			</tr>
			<tr align="center">
				<!--兴趣爱好-->
				<th>爱  好</th>
				<td colspan="6"><input type="checkbox" name="hobby" value="穿墙术" />穿墙术 
			     <input type="checkbox" name="hobby" value="影身术"/>影身术
			     <input type="checkbox" name="hobby" value="七十二变"/>七十二变
			     <input type="checkbox" name="hobby" value="java"/>java
				<input type="checkbox" name="hobby" value="篮球"/>篮球
				<input type="checkbox" name="hobby" value="唱歌"/>唱歌</td>
			</tr>
			<tr align="center">
				<!--荣誉-->
				<th>个人奖励</th>
				<td colspan="6" rowspan="3" ><textarea cols="100px" rows="10px"></textarea>
				</td>
				</tr>
				
				<tr></tr>
				<tr></tr>
				<tr align="center">
					<!--实习情况-->
				<th>实<br/>
					践<br />
					情<br />
					况<br/>
				</th>
				<td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea>
				</td>
				</tr>
				
				<tr></tr>
				<tr></tr>
				<tr align="center">
					<!--学会了哪些技能-->
					<th>IT<br/>
						技<br />
						术<br />
					</th>
					<td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea>
					</td>
					</tr>
					
				<tr></tr>
				<tr></tr>
				<tr align="center">
					<!--自我认知-->
					<th>自我<br/>
						评价<br />
					</th>
					<td colspan="6" rowspan="3"><textarea cols="100px" rows="4px"></textarea>。</td>
				</tr>
		</table>
	</body>
</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值