收藏
天蓬老师批改状态：合格
老师批语：
应用：
table:表格
caption：标题
thead：表格头部
tbody：表格主体
tfoot：表格底部
tr：行
th：着重行，文字居中、加粗
td：列
colspan：列合并
rowspan：行合并
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>表格:行与列的合并</title><link rel="stylesheet" href="style/table.css" /></head><body><!-- table:表格caption：标题thead：表格头部tbody：表格主体tfoot：表格底部tr：行th：着重行，文字居中、加粗td：列colspan：列合并rowspan：行合并--><table class="lesson"><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 class="rest"><td colspan="7">中午休息</td></tr><tr><td rowspan="3">上午</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>
action: 处理表单的程序（接收表单数据的地址）
method:表单提交类型（明文get，密文post)
默认为GET: 数据直接放在url地址中
POST: 表单的数据在请头体中
enctype：传输数据的方式/类型
尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做
第一影响布局，第二代码混乱
但是，用在js中， 获取数据将会变得非常的方便
input > type值：
- text 通用文本框
- password 密码框（密文）
- email 邮箱
- button 按钮
- checkbox 复选框
- radio 单选框
- file 文件上传
- hidden 隐藏域
其它控件：
- select + option 下拉框
- textarea 文本域
- label 文本标签
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>表单</title><link rel="stylesheet" href="style/form.css" /></head><body><h3 class="title">用户注册</h3><!-- action: 处理表单的程序（接收表单数据的地址）method:表单提交类型（明文get，密文post）默认为GET: 数据直接放在url地址中POST: 表单的数据在请头体中enctype：传输数据的方式/类型demo4.html?username=admin&email=admin%40php.cn&password=123456尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做第一影响布局，第二代码混乱但是，用在js中， 获取数据将会变得非常的方便 --><form action="" method="POST" class="register" enctype="multipart/form-data"><!-- 1. 单行文本框 for：绑定控件id --><label for="username">帐号:</label><!-- type: 控件类型 --><!-- name: 数据的变量名 --><!-- value: 数据的内容 --><input type="text" id="username" name="username" value="" placeholder="username" required /><!-- type="text"这是通用文本框,还有一些专用的 --><!-- 邮箱型文本框 --><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" required placeholder="demo@email.com" /><!-- 密码型文本框/非明文 --><label for="password">密码:</label><input type="password" id="password" name="password" value="" required placeholder="不少于6位" /><!-- 2. 单选按钮与复选框 --><label for="secret">性别:</label><div><!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 --><input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" id="female" /><label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label></div><label for="#">兴趣:</label><div><!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 --><input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label><input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label></div><!-- 3. 下拉列表/下拉框 --><label for="edu">学历:</label><!-- multiple：多选size:可显示的选项数量--><!-- <select name="edu" id="edu" multiple size="2"></select> --><select name="edu" id="edu"><option value="1">初中</option><option value="2">高中</option><option value="3" selected>本科</option><option value="4">研究生</option><!-- label属性的优先级大于option内部的文本 --><!-- <option value="5" label="老司机">自学成长</option> --></select><!-- 4. 文件域与隐藏域 --><!-- 上传文件要注意二点:1. 请求类型必须是: POST2. 将表单数据编码设置为: --><label for="user-pic">头像:</label><!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --><input type="hidden" name="MAX_FILE_SIZE" value="80000" /><input type="file" name="user_pic" id="user-pic" /><!-- 头像占位符 --><div class="user-pic" style="grid-column: span 2"></div><label for="user-resume">简历:</label><!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --><input type="hidden" name="MAX_FILE_SIZE" value="100000" /><input type="file" name="user_resume" id="user-resume" /><div class="user-resume" style="grid-column: span 2"></div><!-- 5. 文本域 --><label for="comment">备注:</label><textarea name="comment" id="comment" cols="30" rows="5"></textarea><!-- 提交按钮 --><button>提交</button></form></body></html><script src="style/demo7.js"></script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
