陈昕怡的课程表
表格元素
- <caption> 标签来为表格设置标题
- <table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
- <tr> 表示表格的行。
- <td> 表示表格的单元格
- <th> 表示表格的表头。大多数的浏览器会把表头显示为粗体居中的文本
- border-collapse:collapse 可以使表格的双边框变为单边框
- rowspan：表示跨行合并;n 是一个整数，表示要合并的行数或者列数。
<td rowspan="n">单元格内容</td>
- colspan：表示跨列合并;n 是一个整数，表示要合并的行数或者列数。
<td colspan="n">单元格内容</td>
代码部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><table border="1"><caption>陈欣怡的课程表</caption><thead><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td>1</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td>2</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td>3</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td>4</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td colspan="7">下午</td></tr><tr><td rowspan="4">上午</td><td>5</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td>6</td><td>语文</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td></tr><tr><td>7</td><td>活动</td><td colspan="4">自由组织</td></tr></tbody></table></body></html>
表单元素
form控件
- 所有表单元素都应该写到form控件中
<form action="" method="POST" enctype="multipart/form-data"><input type="text" id="" name=""></form>
- 如果表单元素在form控件外，应该增加属性form=”formid”
<form action="" method="POST" enctype="multipart/form-data"><input type="text" id="" name="" form="formid"></form>
- form控件属性说明
- action 用于填写表单处理文件地址
- method 数据提交请求方式
- GET Get方式在通过URL提交数据，数据在URL中可以看到
- POST POST方式，数据放置在HTML HEADER内提交，如果有文件上传需选择。
- enctype 表单数据发送到服务器之前如何对其进行编码
- 默认application/x-www-form-urlencoded
- 如果有文件上传需选择multipart/form-data
文本框 input
input 用于收集用户信息，根据type的不同可以分为以下几种形式
- text 文本类型
<input type="text" name="" id="">
- mail 类型
<input type="text" name="" id="">
- password 密码类型
<input type="password" name="" id="">
- radio 单选类型:单选框name必须相同
<input type="radio" name="gender" id=""><input type="radio" name="gender" id="">
- hidden 隐藏域类型:用于隐藏提交数据，前台不显示
- 默认选用用checked ，只能一个
<input type="radio" name="gender" id="" checked><input type="radio" name="gender" id="">
- checkbox 复选框类型
- 默认选用用checked ，可以多个
<input type="checkbox" name="" id="" checked><input type="checkbox" name="" id="" checked><input type="checkbox" name="" id="">
- 文件域 用来提交文件
<input type="file" name="file" id="file" />
下拉列表 select
- select元素可创建单选或多选菜单
- select元素中的 <option> 标签用于定义列表中的可用选项
- 默认选中增加属性selected
- label属性值优先级大于option文本
<select name="" id=""><option value="" selected></option><option value="" label=""></option></select>
文本域
- 文本域用于多文本输入
<textarea name="" id="" cols="30" rows="10"></textarea>
提交按钮
- 提交按钮 botton
<button type=""></button>
代码部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style></style></head><body><form action="" method="POST" enctype="multipart/form-data"><label for="username">用户名：</label><input type="text" name="username" id="username" /><label for="email">邮箱：</label><input type="email" name="email" id="email" /><label for="password">密码：</label><input type="password" name="passrword" id="password" /><label for="gender">性别：</label><input type="radio" name="gender" id="male" checked /><label for="male">男</label> <input type="radio" name="gender" id="female" /><label for="female">女</label><input type="hidden" /><label for="edu">学历：</label><select name="edu" id="edu"><option value="1">初中</option><option value="1" selected>高中</option><option value="1">大专</option><option value="1">本科</option></select><label for="#">兴趣爱好</label><textarea name="" id="" cols="30" rows="10"></textarea><label for="file">头像</label><input type="file" name="file" id="file" /><button type="submit">提交</button></form></body></html>
