3.1 表格table
表格用<table>标签定义,标题用<caption>,tr代表行,td代表列,th代表表头,th的表头也代表一行
表格的属性:
border:边框的粗细
width:表格的宽度,整数不加单位
heigth:表格的高度,整数不加单位
cellspacing:表格与表格之间的间隙
cellpadding:表格中的文本内容与左边框的距离
rowspan:所跨的行数
colspan:所跨的列数
<body>
<!-- table表格:
tr代表行
td代表列
th代表表头,th的表头也代表一行
-->
<table>
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>毕业学校</th>
</tr>
<tr>
<td>康硕天</td>
<td>18</td>
<td>湖南大学</td>
</tr>
</table>
</body>
<body>
<!--
border:边框的粗细
width:表格的宽度,整数不加单位
height:表格的高度,整数不加单位
cellspacing:表格与表格之间的间隙
cellpadding:表格中的文本内容与左边框的距离
-->
<table border="5" width="400" height="300" cellspacing="0" cellpadding="20">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>毕业学校</th>
</tr>
<tr>
<td>康硕天</td>
<td>18</td>
<td>湖南大学</td>
</tr>
<tr>
<td>康硕天</td>
<td>18</td>
<td>湖南大学</td>
</tr>
<tr>
<td>康硕天</td>
<td>18</td>
<td>湖南大学</td>
</tr>
</table>
</body>
合并行和列
<body>
<table border="1" width="200">
<tr>
<td colspan="3">课程成绩</td>
</tr>
<tr>
<td rowspan="2">语文</td>
<td>期中</td>
<td>80</td>
</tr>
<tr>
<td>期末</td>
<td>90</td>
</tr>
<tr>
<td rowspan="2">数学</td>
<td>期中</td>
<td>89</td>
</tr>
<tr>
<td>期末</td>
<td>99</td>
</tr>
</table>
</body>
表格数据的分组<thead> <tbody> <tfooter>(了解)
3.2 表单form
form标签主要用于表单结果的处理和发送
action:规定当提交表单时向何处发送表单数据
method:规定用于发送表单数据的 HTTP 方法
name:规定表单的名称
target:规定在何处打开 action URL。(_blank _self)
3.3 input框
input可以用来定义用户输入数据的输入字段,根据不同的type属性值可以定义不同的表单类型
type的属性值 描述 text 单行文本输入框 radio 单选按钮,checked属性在radio、checkbox中生效 checkbox 复选框 password 密码输入框 reset 重置按钮 submit 提交按钮 search 搜索框 button 按钮 number 只能输入数字 tel 电话号输入框 date 日期选择器 month 月份选择器 time 时间选择器 file 选择文件空间,用于上传文件 hidden 隐藏的输入区域 单选框和复选框必须有value值,和后端数据库对应
<body>
<form action="" name="uform" method="get">
用户名:<input type="text" name="username" />
密码:<input type="password" name="password" />
性别:<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
爱好:<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" />羽毛球
<input type="checkbox" name="hobby" value="ppq" />乒乓球
<input type="reset" />
<input type="button" value="按钮"/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
<label for="">了解</label><br>
<select name="hobbys" id="" size="1" multiple>
<option value="111">打羽毛球</option>
<option value="222" selected>打篮球</option>
<option value="333">足球</option>
</select><br>
<textarea name="" id="" cols="30" rows="10">多行文本框</textarea>
</body>
3.4 标签元素 label
label标签用于为表单中的其他控件元素添加说明文字,当用户在浏览器中单机label元素生成的标签时,会自动将聚焦转移到该标签相关的表单控件上,label最重要的属性是for属性,for属性把label元素绑定到另一个元素,把for属性的值设置为相关元素的id属性值,指定为关联表单控件的id。
<label for="id" >姓名:<input type="text" /></label>
3.5 选择栏 select
select可以创建下拉列表框,实现单选或多选菜单,select标签必须配合option标签使用
// multiple可选择多个选项 size指定下拉列表中同时显示选项的数目 <select name="uname" multiple size='1'> <option value="zs" selected>张三</option> <option value="ls">李四</option> <option value="we">王二</option> <option value="mz">麻子</option> </select>
3.6 多行文本框 textarea
<textarea name="名称" rows="行数" cols="列数"></textarea>
小知识点:
autocomplete="off" 关闭自动补全
readonly 设置为只读,不能修改
disabled 设置为禁用,属性值是true和false
autofocus 自动获取焦点
placeholder 提示内容
required 必输项