相关信息
时间:2020年12月9日
知识点概述
本章节主要描述列表、表格、表单等信息
列表
演示地址:https://php.gzj2001.com/day2/index1.html
列表分为以下三个类型
1.有序列表
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
2.无序列表
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
3.自定义列表
<dl>
<dt>地址:</dt>
<dd>贵州省毕节市</dd>
<dt>网站:</dt>
<dd>www.gzj2001.com</dd>
<dt>电话:</dt>
<dd><a href="tel:130****5400">130****5400</a></dd>
<dt>邮箱:</dt>
<dd><a href="mailto:3168680361@qq.com?subject=我在您的网站联系您$boday=这是来自示例代码的邮件">3168680361@qq.com</a></dd>
</dl>
表格
表格结构
演示地址:https://php.gzj2001.com/day2/index2.html
表格由以下tboday>caption标题>thead表头>tboday主体>tr>td组成
<table class="product">
<!-- 表格标题caption -->
<caption>商品信息表</caption>
<!-- 表头 -->
<thead>
<!-- 每添加一组数据，需要添加一个表头 -->
<th>ID</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</thead>
<!-- 一个表格可以有多个主体，但是只能有一个表头 -->
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>5000</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>电脑</td>
<td>5000</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>显示器</td>
<td>5000</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
行和列的合并
演示地址:https://php.gzj2001.com/day2/index3.html
在表格中，使用colspan="value"来进行行的缩进，使用rowspan="value"来进行列的缩进，下面来看一个简单的课程表
<table>
<caption>不知名的课程表</caption>
<thead>
<tr>
<th colspan="2"></th>
<!-- <th></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>上午</td> -->
<td>2</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>3</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>4</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="7">中午休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>6</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>7</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td>上午</td> -->
<td>8</td>
<td>课外活动:</td>
<td colspan="4">语文</td>
<!-- <td>语文</td>
<td>语文</td>
<td>语文</td> -->
</tr>
</tbody>
</table>
表单
表单结构
演示地址:https://php.gzj2001.com/day2/index4.html
表单由form标签组成，其中form标签包含几个属性
action 需要提交到的地方
method 提交的方式
enctype 提交数据的模式，默认为application/x-www-form-urlencoded 如果使用表单上传文件需要修改为multipart/form-data
控件与隐藏域
<!-- action:处理表单的程序 -->
<!-- method:表单的提交类型 常见的类型get|post，默认get -->
<!-- get:数据直接放在URL中 -->
<!-- post:表单的数据在请求体中 -->
<form action="" method="GET" enctype="application/x-www-form-urlencoded">
<!-- 1.单行文本框 -->
<!-- 使用label的for 与 input的id进行聚焦关联 -->
<label for="username">用户名:</label>
<!-- type 控件类型 -->
<!-- name 数据的变量名 -->
<!-- value 数据的内容 -->
<!-- required 必选 -->
<!-- placeholder 提示 -->
<input type="text" id="username" name="username" value="" required placeholder="请输入用户名">
<br>
<!-- 邮箱型文本框 -->
<label for="email">邮 箱:</label>
<input type="email" id="email" name="email" value="" required>
<br>
<!-- 密码型文本框 -->
<label for="password">密码:</label>
<input type="password" name="password" id="password" required>
<br>
<!-- 2.单选按钮与复选框 -->
<label for="sex3">性别</label>
<div>
<!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值得唯一性 -->
<!-- 默认选中使用checked -->
<input type="radio" name="sex" id="sex" value="mman"><label for="sex">男</label>
<input type="radio" name="sex" id="sex2" value="girl"><label for="sex2">女</label>
<input type="radio" name="sex" id="sex3" value="prative" checked><label for="sex3">保密</label>
</div>
<!-- 复选框 -->
<label for="">兴趣爱好:</label>
<div>
<!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值 -->
<input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label>
<input type="checkbox" name="hobby[]" id="chat" value="chat"><label for="chat">聊天</label>
<input type="checkbox" name="hobby[]" id="video" value="video"><label for="video">视频</label>
</div>
<!-- 下拉列表 -->
<label for="edu">学历:</label>
<!-- multiple 多选属性 -->
<!-- size 显示的数量 -->
<!-- selected 默认项 -->
<select name="edu" id="edu" multiple>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">本科</option>
<option value="4">研究生</option>
<!-- 在option中 label属性的优先级大于option内的文本 -->
</select>
<br>
<!-- 3.文件域与隐藏域 -->
<!-- 上传文件要注意两点:
1.请求类型必输是:post
2.将表单数据编码设置为enctype:multipart/form-data -->
<label for="head">头像:</label>
<!-- 隐藏域，在前端页面看不到的，它的值供后端处理使用 -->
<input type="hidden" name="MAX_FILE_SIZE" value="8192">
<input type="file" name="head_pic" id="head">
<br>
<!-- 4.文本域（多行文本框） -->
<label for="comment">备注:</label>
<textarea name="comment" id="comment" cols="30" rows="5"></textarea>
<!-- 提交按钮 -->
<button>提交</button>
</form>
表单控件的form属性
演示地址:https://php.gzj2001.com/day2/index5.html
<h3>用户注册</h3>
<form action="" method="GET" id="register">
<div>
<!-- 使用form属性，将控件与它所属的表单进行关联/绑定 -->
<label for="username">账号</label>
<input type="text" name="username" id="username" form="register">
<br>
<label for="email">邮箱</label>
<input type="email" name="email" id="email" form="register">
<br>
<label for="password">密码</label>
<input type="password" name="password" id="password" form="register">
<br>
<button form="register">提交</button>
</div>
</form>
<!-- 尽管form属性可以将控件写到任何地方，仍然能够获取到值，但不要这样做，第一影响布局，第二代码混乱，但是js中获取数据会非常方便 -->
实战作业
作业环境说明
系统:centos
web服务器：nginx
php版本:7.4
IDE:vscode
作业代码合集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day2-1209作业</title>
<style>
body {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
table {
margin: auto;
}
table.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 1em;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">首页</a></li>
<li><a href="#table">查看课程表</a></li>
<li><a href="#change">修改课程表</a></li>
</ul>
<table class="gridtable" id="table">
<caption>1209作业课程表</caption>
<thead>
<tr>
<th colspan="2"></th>
<!-- <th></th> -->
<th>星期一</th>
<th>星期二</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>
<td>洗漱</td>
<td>洗漱</td>
</tr>
<tr>
<!-- <td></td> -->
<td>2</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
</tr>
<tr>
<!-- <td></td> -->
<td>3</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
</tr>
<tr>
<!-- <td></td> -->
<td>4</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<td colspan="8" style="text-align: center;">中午休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>6</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>7</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>8</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<td colspan="8" style="text-align: center;">晚间休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="4">晚上</td>
<td>9</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>10</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>11</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>12</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
</tr>
<tr>
<td colspan="9" style="text-align: center;">本实例CSS由网上搜集</td>
</tr>
</tbody>
</table>
<hr>
<form action="" id="change" style="margin-top: 1000px;">
<h3>更新课程表</h3>
<label for="table-name">表格标题:</label>
<input type="text" name="table_title" id="table-name" placeholder="1209作业课程表">
<br>
<label for="day1">更新日期:</label>
<input type="radio" name="day" id="day1" checked><label for="day1">星期一</label>
<input type="radio" name="day" id="day2"><label for="day2">星期二</label>
<input type="radio" name="day" id="day3"><label for="day3">星期三</label>
<input type="radio" name="day" id="day4"><label for="day4">星期四</label>
<input type="radio" name="day" id="day5"><label for="day5">星期五</label>
<input type="radio" name="day" id="day6"><label for="day6">星期六</label>
<input type="radio" name="day" id="day7"><label for="day7">星期天</label>
<br>
<label for="">更新课程:</label>
<select name="study" id="study" multiple size="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<br>
<label for="">更新内容:</label>
<div>
<input type="checkbox" name="connent[]" id="game" value="game"><label for="game">游戏</label>
<input type="checkbox" name="connent[]" id="chat" value="chat"><label for="chat">聊天</label>
<input type="checkbox" name="connent[]" id="video" value="video"><label for="video">视频</label>
</div>
<br>
<label for="">上传背景图片:</label>
<input type="hidden" name="MAX_FILE_SIZE" value="8192">
<input type="file" name="background" id="background">
<br>
<label for="email">管理员邮箱:</label>
<input type="email" name="email" id="email" required placeholder="请输入管理员邮箱！">
<br>
<label for="password">管理员密码:</label>
<input type="password" name="password" id="password" required placeholder="请输入管理员密码">
<br>
<label for="comment">本次修改备注:</label>
<textarea name="comment" id="comment" cols="30" rows="5"></textarea>
<br>
<button>确认修改</button>
</form>
<ul>
<li><a class="active" href="#">首页</a></li>
<li><a href="#table">查看课程表</a></li>
<li><a href="#change">修改课程表</a></li>
</ul>
</body>
</html>
作业地址
作业标题：1208作业(列表/表格与表单)
- 作业内容：
- 1.制作一个你的课程表；
- 2.将课堂上提及所有表单控件全部实例演示一遍
https://php.gzj2001.com/day2/index.html
作业效果
其他信息
My Blog: www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html