Blogger Information
Blog 41
fans 0
comment 0
visits 41094
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
理工附中2020年度初二课程表|表单控件实例演示
幸福敲门的博客
Original
696 people have browsed it

理工附中初二课程表

  1. <!DOCTYPE html>
  2. <html lang="xfqm">
  3. <head>
  4. <meta charset="utf-8">
  5. <title ><理工附中2020年度初二课程表</title>
  6. </head>
  7. <body>
  8. <table class="lesson" border="1">
  9. <caption>理工附中2020年度初二课程表</caption>
  10. <thead>
  11. <tr>
  12. <th colspan="2"></th>
  13. <!-- <th></th> -->
  14. <th>星期一</th>
  15. <th>星期二</th>
  16. <th>星期三</th>
  17. <th>星期四</th>
  18. <th>星期五</th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr>
  23. <td rowspan="4">上午</td>
  24. <td>1</td>
  25. <td>语文</td>
  26. <td>数学</td>
  27. <td>物理</td>
  28. <td>政治</td>
  29. <td>生物</td>
  30. </tr>
  31. <tr>
  32. <td>2</td>
  33. <td>数学</td>
  34. <td>物理</td>
  35. <td>地理</td>
  36. <td>体育</td>
  37. <td>语文</td>
  38. </tr>
  39. <tr>
  40. <td>3</td>
  41. <td>物理</td>
  42. <td>化学</td>
  43. <td>英语</td>
  44. <td>语文</td>
  45. <td>数学</td>
  46. </tr>
  47. <tr>
  48. <td>4</td>
  49. <td>英语</td>
  50. <td>历史</td>
  51. <td>语文</td>
  52. <td>数学</td>
  53. <td>物理</td>
  54. </tr>
  55. <tr>
  56. <td colspan="9" div class="text" style=" text-align:center;">中午休息</td>
  57. </tr>
  58. <tr>
  59. <td rowspan="3">下午</td>
  60. <td>5</td>
  61. <td>生物</td>
  62. <td>语文</td>
  63. <td>数学</td>
  64. <td>物理</td>
  65. <td>化学</td>
  66. </tr>
  67. <tr>
  68. <td>6</td>
  69. <td>语文</td>
  70. <td>数学</td>
  71. <td>物理</td>
  72. <td>化学</td>
  73. <td>地理</td>
  74. </tr>
  75. <tr>
  76. <td>7</td>
  77. <td colspan="5">课外活动:各班自由活动,定期有比赛</td>
  78. </tr>
  79. <tr>
  80. <td rowspan="8">晚上</td>
  81. <td>8</td>
  82. <td colspan="5">晚自习合班自由安排</td>
  83. </tr>
  84. </tbody>
  85. </table>
  86. </body>
  87. <html>

图示:
初二课程表

表单控件实例演示

一.列表

  1. ### 1.无序列表
  2. <h3>初中部</h3>
  3. <!-- ul + li -->
  4. <ul>
  5. <li>初一部</li>
  6. <li>初二部</li>
  7. <li>初三部</li>
  8. </ul>
  9. ### 2.有序列表
  10. <h3>高中部</h3>
  11. <!-- ol + li -->
  12. <ol>
  13. <li>高一部</li>
  14. <li>高二部</li>
  15. <li>高三部</li>
  16. </ol>
  17. ### 3.自定义列表
  18. <!-- dl+dt+dd... -->
  19. <dl>
  20. <dt>名称:理工附属中学</dt>
  21. <dd>php中文网</dd>
  22. <dt>地址:</dt>
  23. <dd>北京市海淀区西三环北路20号</dd>
  24. <dt>01068735471</dt>
  25. <dd>电话: <a href="tel:17825632547">17825632547</a></dd>
  26. <dd>邮箱: <a href="mailto:lgfz@lgfz.com?subject=title&body=content">lgfz@lgfz.com</a></dd>
  27. </dl>

运行图示:
列表

应用案例:无序列表常用在网站导航栏目和图文列表中

二.表单

  1. 表格也是用一组标签来描述:table,thead,tbody,tr,td/th
  2. 所有的数据必须填充到td /th中, thtdPLus+,自带了一个加粗和居中的样式
  3. <caption>表格标题</caption>
  4. <thead>表头</thead>
  5. colspan 属性规定单元格可横跨的列数
  6. 表单中合并行rowspa
  7. 表格的主体,一个表格可以有多个主体,但只能有一个表

三、表单的控件与实例

  1. <h3 class="title">用户注册</h3>
  2. <!-- action:处理表单的程序 -->
  3. <!-- method:表单提交类型 -->
  4. <!-- 默认为GET:数据直接放在url地址中 -->
  5. <!-- POST:表单的数据在请求体中 -->
  6. <form action="" method="" class="register">
  7. <!-- 1.单行文本框 -->
  8. <label for="username">账号:</label>
  9. <!-- type:控件类型 -->
  10. <!-- name:数据的变量名 -->
  11. <!-- value:数据的内容 -->
  12. <input type="text" name="username" id="username" value="" placeholder="admin" required/>
  13. <!-- type="text" 这是通用文本框,还有一些是专用的 -->
  14. <!-- 邮箱文本型 -->
  15. <label for="email">邮箱:</label>
  16. <input type="email" name="email" id="email" value="" placeholder="admin@mail.cn" required/>
  17. <!-- 密码框文本框/非明文 -->
  18. <label for="password">密码:</label>
  19. <input type="password" name="password" id="password" value="" placeholder="不少于8位" required/>
  20. <!-- 2.单选按钮与复选框 -->
  21. <label for="mi">性别:</label>
  22. <div>
  23. <input type="radio" name="gender" value="male" id="male"/><label for="male"></label>
  24. <input type="radio" name="gender" value="nv" id="nv"/><label for="nv"></label>
  25. <input type="radio" name="gender" value="mi" id="mi"/><label for="mi">保密</label>
  26. </div>
  27. <label for="">兴趣:</label>
  28. <div>
  29. <input type="checkbox" name="hobby[]" value="game" id="game"/><label for="game">游戏</label>
  30. <input type="checkbox" name="hobby[]" value="code" id="code" checked/><label for="code">编程</label>
  31. <input type="checkbox" name="hobby[]" value="ly" id="ly" /><label for="ly">旅游</label>
  32. </div>
  33. <!-- 3.下拉框/下拉列表 -->
  34. <label for="edu">学历:</label>
  35. <select name="edu" id="edu">
  36. <option value="1">初中</option>
  37. <option value="2">高中</option>
  38. <option value="3" selected>本科</option>
  39. <option value="4">研究生</option>
  40. <!-- label属性的优先级大于option内部的文本 -->
  41. <!-- <option value="5" label="老司机">自学成才</option> -->
  42. </select>
  43. <!-- 4.文件域与隐藏域 -->
  44. <label for="user-pic">头像:</label>
  45. <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  46. <input type="hidden" name="MAX_FILE_SIZE" value="80000"/>
  47. <input type="file" name="user_pic" id="user-pic" />
  48. <!-- 头像占位符 -->
  49. <div class="user-pic" style="grid-column:span 2"></div>
  50. <!-- 简历占位符 -->
  51. <label for="user-resume">简历:</label>
  52. <input type="file" name="user_resume" id="user-resume"/>
  53. <!-- 简历占位符 -->
  54. <div class="user-resume" style="grid-column:span 2"></div>
  55. <!-- 5:文本域 -->
  56. <label for="comment">备注:</label>
  57. <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  58. <!-- 提交按钮 -->
  59. <button>提交</button>
  60. </form>

图示:
用户注册表单

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post