表格标签 table
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
用法
<table> 表格
<thead> 表格头
<tr> 表格行
<th> 标题行的单元格数据
<tbody> 表格主体
<td> 表格内的单元格数据
<tfoot> 表格底部
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
<body>
<div class="table">
<!--border 边框,cellspacing边框间隙-->
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--这里使用的是th-->
<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>化学</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>
</div>
</body>
表单标签 form
form 标签是块级元素,action属性是要提交到服务端处理的网址,methon属性默认是get,如果是文件的话,method是post
label标签
是行内元素,label 用来关联文本和表达元素的,点击文本时相当于点击了表达元素。
鼠标移动到”用户名“三个字时,会变成箭头,点击用户名相当于点击了输入框,优化体验,
<label for="user">用户名:</label>
<input type="text" name="usename" id="user" placeholder="请输入用户名" >
点击按钮会选中选项,点击”男“字也会选中
<input type="radio" name="sex" value="男" id="s1">
<label for="s1">男</label>
也可以这样写:
<label><input type="radio" name="sex" value="男" />男</label>
如果没有label则鼠标停留在字体上时会变成选择文本,点击无反应
<input type="radio" name="sex" value="男" />男
input元素
可以设置宽高,行内块元素
input type 属性,name值提交表单的时候在url存在,id 值和lable for 绑定的
textarea
用法
<form action="http://www.baidu.com">
<!-- input type="text" 输入文本,name属性会在url里 value="请输入用户名称"是默认值 readonly只读-->
<p>
用户名称:
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p>
<p>
<!--type = password 密文形式 placeholder 阴影提示字-->
用户密码:
<input type="password" name="txtUsepwd" placeholder="请输入密码">
</p>
<p>
<!--disabled 输入框不可用-->
确认密码:
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--单选框,type="radio",checked=''默认被选中,但是要互斥的话,name值要相同,name值不同就会复选-->
<p>
用户性别:
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--复选框type="checkbox",name取值尽量一致-->
<p>
用户爱好:
<input type="checkbox" name="chkhobby" value="吃" checked> 吃
<input type="checkbox" name="chkhobby" value="喝"> 喝
<input type="checkbox" name="chkhobox" value="玩"> 玩
<input type="checkbox" name="chkhobox" value="乐" checked> 乐
</p>
<!-- 按钮 submit功能负责将表单中的表单提交给服务端 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<!--文件选择框 type="file"-->
<p>
请上传文件:
<input type="file" name="txtfile">
</p>
<!--文本域 可以调整长宽,列cols="20" 行rows="5" textarea-->
<p>
自我介绍:
<textarea name="txt" cols="20" rows="5" placeholder="请作自我介绍"></textarea>
</p>
<!--下拉列表 name urld地址中存在,通常跟option配合,选择项。size大于1是滚动效果 multiple设置以后实现多选效果,ctrl+鼠标左键进行多选-->
<p>籍贯:
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<!--selected 默认被选中-->
<option value="广州" selected>广州</option>
</select>
</p>
</form>