table课程表，用户注册模板，内联框架实现后台

程序员文章站 2022-04-08 18:29:45

...

1.Table课程表

图片：

<img>标签的alt属性作用：当src引用资源不可用时，会以文本方式显示，同时更利用搜索引擎抓取，利于SEO。

<img src="https://img.php.cn/upload/course/000/000/015/61a0a9014ed91862.jpg" alt="第十八期前端开发">第十八期前端开发封面</img>

链接

<a>标签href属性链接跳转地址，target属性跳转打开页面的位置，默认值是_self

列表

ul+li 无序列表，前面的小黑点可以用css来处理。
ol+li 有序列表，不常用。
dl+dt+dd 自定义列表，dl是自定义列表，dt+dd组合==标题+名词解释。
hr 水平分割线
html标签大全（html5标准）
https://www.runoob.com/tags/html-reference.html

table表格

由table+caption+thead+tbody+tfoot 组成。
table 表格标签。
caption 表格标题，不要用h2来做，h2是划分页面布局时使用。
thead 表格标头，可省略。
tbody 表格内容体，不可省略，避免选择表格时选中thead中的tr
tfoot 表格底部，可省略。
tr 代表行
td 代表列，原则是，先行后列。
colspan 表格同行列合并，会把同行其他列单元格挤出去，直接删除td即可。
rowspan 表格同列行合并，会把同列被合并行单元格挤出，需要删除其他行的td。

课标作业

效果
table课程表，用户注册模板，内联框架实现后台
代码：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=table, initial-scale=1.0" />
    <title>课程表作业</title>
  </head>
  <body>
    <table
      border="1"
      align="center"
      cellspacing="0"
      cellpadding="5"
      width="500"
    >
      <caption>
        <h2>小学生课程表</h2>
      </caption>
      <thead bgcolor="green">
        <tr>
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td rowspan="4" bgcolor="#e7f7f7">上午</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td colspan="6">午休</td>
        </tr>
        <tr>
          <td rowspan="3" bgcolor="#e7f7f7">下午</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>道法</td>
          <td>体育</td>
        </tr>
      </tbody>
      <tfoot align="center" bgcolor="green">
        <tr>
          <td>备注</td>
          <td colspan="5">每天下午15:30-17:30在校写完作业才可回家</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

2.用户注册表单模板

lable标签通过for属性和input的id属性进行绑定，只要两个值一样就完成绑定，实现点击lable中的文本后聚焦到input文本框。
required 强制必填项
autofocus 自动聚焦
placeholder 提示信息
checked 默认选中状态，多选的时候多个lable的name值要相同，从而实现多选。
效果：
table课程表，用户注册模板，内联框架实现后台


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=table, initial-scale=1.0" />
    <title>用户登录</title>
  </head>
  <body>
    <style>
      body {
        text-align: center;
        background-color: rgb(48, 153, 48);
      }
      .login {
        display: inline-block;
        margin-top: 2em;
      }
      .login .group {
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #888;
        padding: 1em 3em;
        background-color: rgb(147, 211, 147);
        border-radius: 0.5em;
        display: grid;
      }

      .login .group .title {
        padding: 0.5em 1.5em;
        background-color: rgb(147, 211, 147);
        text-align: center;
        box-shadow: 3px 3px 3px #888;
        border-top-left-radius: 1em;
        border-bottom-right-radius: 1em;
      }
      .login .group .userinfo {
        display: grid;
        gap: 1em;
      }

      .login .group input {
        border: none;
        border-bottom: 1px solid;
        background-color:rgb(147, 211, 147);
        outline: none;
      }

      .login .group .submit {
        border: none;
        outline: none;
        height: 2.2em;
        background-color: seagreen;
        color: white;
        color: black
        width: 81%;
        margin-top: 1em;
        margin-left: auto;
      }
      .login .group .submit:hover {
        cursor: pointer;
        background-color: coral;
        box-shadow: 0 0 3px #888;
        transition: 0.3s;
      }
    </style>
    <form action="login.php" method="post" class="login">
      <fieldset class="group">
        <legend for="" class="title">用户登录</legend>
        <div class="userinfo">
          <div>
            <label for="email"
              >邮箱:
              <input
                type="email"
                value="admin@php.cn"
                placeholder="请填写用户邮箱"
                id="email"
                required
                name="email"
                autofocus
              />
            </label>
          </div>
          <div>
            <label for="password"
              >密码:
              <input
                type="password"
                placeholder="请填写用户密码"
                id="password"
                required
                name="password"
              />
            </label>
          </div>
        </div>
        <div>
          <button class="submit">提交</button>
        </div>
      </fieldset>
    </form>
  </body>
</html>

3.内联框架实现后台

抄写记录


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内联框架元素的小应用:后台</title>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 10em 1fr;
        grid-template-rows: 6em 1fr;
        margin: 0;
      }

      body .header {
        grid-column-end: span 2;
        border-bottom: 1px solid currentColor;
        background-color: #efe;
        padding: 2em;
        display: flex;
        align-items: center;
      }
      body .header div {
        margin-left: auto;
      }
      body .nav {
        background-color: #efc;
        margin: 0;
        padding-top: 1em;
        list-style: none;
      }
      body iframe {
        width: calc(100vw - 10em);
        height: calc(100vh - 6em);
        border-left: 1px solid currentColor;
      }
    </style>
  </head>
  <body>
    <!-- 后台顶部 -->
    <div class="header">
      <h1>网站后台管理</h1>
      <div>
        <span>admin</span>
        <a href="logout.php">退出</a>
      </div>
    </div>

    <!-- 左侧导航 -->
    <ul class="nav">
      <li><a href="demo1.html" target="content">菜单项1</a></li>
      <li><a href="demo2.html" target="content">菜单项2</a></li>
      <li><a href="demo3.html" target="content">菜单项3</a></li>
      <li><a href="demo4.html" target="content">菜单项4</a></li>
      <li><a href="demo5.html" target="content">菜单项5</a></li>
    </ul>

    <!-- 右侧内容 -->
    <iframe src="" frameborder="0" name="content"></iframe>
  </body>
</html>

上一篇： CSS基础2：伪类选择器，字体图标，盒模型

下一篇： Grafana镜像在阿里云镜像站首发上线