1.Table课程表

图片：

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

  1. <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中的trtfoot 表格底部，可省略。tr 代表行td 代表列，原则是，先行后列。colspan 表格同行列合并，会把同行其他列单元格挤出去，直接删除td即可。rowspan 表格同列行合并，会把同列被合并行单元格挤出，需要删除其他行的td。

课标作业

效果课程表代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=table, initial-scale=1.0" />
  7.     <title>课程表作业</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       align="center"
  13.       cellspacing="0"
  14.       cellpadding="5"
  15.       width="500"
  16.     >
  17.       <caption>
  18.         <h2>小学生课程表</h2>
  19.       </caption>
  20.       <thead bgcolor="green">
  21.         <tr>
  22.           <th>时间</th>
  23.           <th>周一</th>
  24.           <th>周二</th>
  25.           <th>周三</th>
  26.           <th>周四</th>
  27.           <th>周五</th>
  28.         </tr>
  29.       </thead>
  30.       <tbody align="center">
  31.         <tr>
  32.           <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  33.           <td>语文</td>
  34.           <td>数学</td>
  35.           <td>英语</td>
  36.           <td>道法</td>
  37.           <td>体育</td>
  38.         </tr>
  39.         <tr>
  40.           <td>语文</td>
  41.           <td>数学</td>
  42.           <td>英语</td>
  43.           <td>道法</td>
  44.           <td>体育</td>
  45.         </tr>
  46.         <tr>
  47.           <td>语文</td>
  48.           <td>数学</td>
  49.           <td>英语</td>
  50.           <td>道法</td>
  51.           <td>体育</td>
  52.         </tr>
  53.         <tr>
  54.           <td>语文</td>
  55.           <td>数学</td>
  56.           <td>英语</td>
  57.           <td>道法</td>
  58.           <td>体育</td>
  59.         </tr>
  60.         <tr>
  61.           <td colspan="6">午休</td>
  62.         </tr>
  63.         <tr>
  64.           <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  65.           <td>语文</td>
  66.           <td>数学</td>
  67.           <td>英语</td>
  68.           <td>道法</td>
  69.           <td>体育</td>
  70.         </tr>
  71.         <tr>
  72.           <td>语文</td>
  73.           <td>数学</td>
  74.           <td>英语</td>
  75.           <td>道法</td>
  76.           <td>体育</td>
  77.         </tr>
  78.         <tr>
  79.           <td>语文</td>
  80.           <td>数学</td>
  81.           <td>英语</td>
  82.           <td>道法</td>
  83.           <td>体育</td>
  84.         </tr>
  85.       </tbody>
  86.       <tfoot align="center" bgcolor="green">
  87.         <tr>
  88.           <td>备注</td>
  89.           <td colspan="5">每天下午15:30-17:30在校写完作业才可回家</td>
  90.         </tr>
  91.       </tfoot>
  92.     </table>
  93.   </body>
  94. </html>

2.用户注册表单模板

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=table, initial-scale=1.0" />
  7.     <title>用户登录</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       body {
  12.         text-align: center;
  13.         background-color: rgb(48, 153, 48);
  14.       }
  15.       .login {
  16.         display: inline-block;
  17.         margin-top: 2em;
  18.       }
  19.       .login .group {
  20.         border: 1px solid #ccc;
  21.         box-shadow: 0 0 5px #888;
  22.         padding: 1em 3em;
  23.         background-color: rgb(147, 211, 147);
  24.         border-radius: 0.5em;
  25.         display: grid;
  26.       }
  28.       .login .group .title {
  29.         padding: 0.5em 1.5em;
  30.         background-color: rgb(147, 211, 147);
  31.         text-align: center;
  32.         box-shadow: 3px 3px 3px #888;
  33.         border-top-left-radius: 1em;
  34.         border-bottom-right-radius: 1em;
  35.       }
  36.       .login .group .userinfo {
  37.         display: grid;
  38.         gap: 1em;
  39.       }
  41.       .login .group input {
  42.         border: none;
  43.         border-bottom: 1px solid;
  44.         background-color:rgb(147, 211, 147);
  45.         outline: none;
  46.       }
  48.       .login .group .submit {
  49.         border: none;
  50.         outline: none;
  51.         height: 2.2em;
  52.         background-color: seagreen;
  53.         color: white;
  54.         color: black
  55.         width: 81%;
  56.         margin-top: 1em;
  57.         margin-left: auto;
  58.       }
  59.       .login .group .submit:hover {
  60.         cursor: pointer;
  61.         background-color: coral;
  62.         box-shadow: 0 0 3px #888;
  63.         transition: 0.3s;
  64.       }
  65.     </style>
  66.     <form action="login.php" method="post" class="login">
  67.       <fieldset class="group">
  68.         <legend for="" class="title">用户登录</legend>
  69.         <div class="userinfo">
  70.           <div>
  71.             <label for="email"
  72.               >邮箱:
  73.               <input
  74.                 type="email"
  75.                 value="admin@php.cn"
  76.                 placeholder="请填写用户邮箱"
  77.                 id="email"
  78.                 required
  79.                 name="email"
  80.                 autofocus
  81.               />
  82.             </label>
  83.           </div>
  84.           <div>
  85.             <label for="password"
  86.               >密码:
  87.               <input
  88.                 type="password"
  89.                 placeholder="请填写用户密码"
  90.                 id="password"
  91.                 required
  92.                 name="password"
  93.               />
  94.             </label>
  95.           </div>
  96.         </div>
  97.         <div>
  98.           <button class="submit">提交</button>
  99.         </div>
  100.       </fieldset>
  101.     </form>
  102.   </body>
  103. </html>

3.内联框架实现后台

抄写记录

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>内联框架元素的小应用:后台</title>
  8.     <style>
  9.       body {
  10.         height: 100vh;
  11.         width: 100vw;
  12.         display: grid;
  13.         grid-template-columns: 10em 1fr;
  14.         grid-template-rows: 6em 1fr;
  15.         margin: 0;
  16.       }
  18.       body .header {
  19.         grid-column-end: span 2;
  20.         border-bottom: 1px solid currentColor;
  21.         background-color: #efe;
  22.         padding: 2em;
  23.         display: flex;
  24.         align-items: center;
  25.       }
  26.       body .header div {
  27.         margin-left: auto;
  28.       }
  29.       body .nav {
  30.         background-color: #efc;
  31.         margin: 0;
  32.         padding-top: 1em;
  33.         list-style: none;
  34.       }
  35.       body iframe {
  36.         width: calc(100vw - 10em);
  37.         height: calc(100vh - 6em);
  38.         border-left: 1px solid currentColor;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <!-- 后台顶部 -->
  44.     <div class="header">
  45.       <h1>网站后台管理</h1>
  46.       <div>
  47.         <span>admin</span>
  48.         <a href="logout.php">退出</a>
  49.       </div>
  50.     </div>
  52.     <!-- 左侧导航 -->
  53.     <ul class="nav">
  54.       <li><a href="demo1.html" target="content">菜单项1</a></li>
  55.       <li><a href="demo2.html" target="content">菜单项2</a></li>
  56.       <li><a href="demo3.html" target="content">菜单项3</a></li>
  57.       <li><a href="demo4.html" target="content">菜单项4</a></li>
  58.       <li><a href="demo5.html" target="content">菜单项5</a></li>
  59.     </ul>
  61.     <!-- 右侧内容 -->
  62.     <iframe src="" frameborder="0" name="content"></iframe>
  63.   </body>
  64. </html>