相关信息

时间: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作业(列表/表格与表单)

作业效果

image.png

其他信息

My Blog: www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html