制作表格

  • elmmet语法练习

  1. table[border='1' align='center' cellspacing='0' cellpadding='2']>caption{重庆市渝北区茨竹镇华蓥中学校}+(thead[bgcolor='red']>tr>th{时间}+th*5{星期$})+(tr>(td[rowspan='3']{上午}+td*5{$})+tr*2>td*5{$})+tr>td[colspan='6']{中午休息12：00-14:00}+tr>(td[rowspan='2']{下午}+td*5{$})+tr>td*5{$}+tr>(td{备注}+td[colspan='5']{每天写完作业才能放学})

  • 效果图

  • 代码块

  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=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <table border="1" align="center" cellspacing="0" cellpadding="2">
  11.         <caption>重庆市渝北区茨竹镇华蓥中学校</caption>
  12.         <thead bgcolor="red">
  13.             <tr>
  14.                 <th>时间</th>
  15.                 <th>星期1</th>
  16.                 <th>星期2</th>
  17.                 <th>星期3</th>
  18.                 <th>星期4</th>
  19.                 <th>星期5</th>
  20.             </tr>
  21.         </thead>
  22.         <tr>
  23.             <td rowspan="3">上午</td>
  24.             <td>1</td>
  25.             <td>2</td>
  26.             <td>3</td>
  27.             <td>4</td>
  28.             <td>5</td>
  29.             <tr>
  30.                 <td>1</td>
  31.                 <td>2</td>
  32.                 <td>3</td>
  33.                 <td>4</td>
  34.                 <td>5</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>1</td>
  38.                 <td>2</td>
  39.                 <td>3</td>
  40.                 <td>4</td>
  41.                 <td>5</td>
  42.             </tr>
  43.         </tr>
  44.         <tr>
  45.             <td colspan="6">中午休息12：00-14:00</td>
  46.             <tr>
  47.                 <td rowspan="2">下午</td>
  48.                 <td>1</td>
  49.                 <td>2</td>
  50.                 <td>3</td>
  51.                 <td>4</td>
  52.                 <td>5</td>
  53.                 <tr>
  54.                     <td>1</td>
  55.                     <td>2</td>
  56.                     <td>3</td>
  57.                     <td>4</td>
  58.                     <td>5</td>
  59.                     <tr>
  60.                         <td>备注</td>
  61.                         <td colspan="5">每天写完作业才能放学</td>
  62.                     </tr>
  63.                 </tr>
  64.             </tr>
  65.         </tr>
  66.     </table>
  67.   </body>
  68. </html>

表单提交

  • 效果图

  • 代码块

  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=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <form action="" style="display: grid; gap: 0.5em" method="post">
  11.       <fieldset>
  12.         <legend>必填项</legend>
  13.         <div>
  14.           <label for="user">账号:</label>
  15.           <input type="text" id="user" autofocus required placeholder="账号6-10位"/>
  16.         </div>
  17.         <div>
  18.           <label for="password" >密码:</label>
  19.           <input type="password" id="password" required placeholder="密码6-16位"/>
  20.         </div>
  21.         <div>
  22.           <label for="email" >邮箱:</label>
  23.           <input type="email" id="email" name="email" required placeholder="demo@gmail.com"/>
  24.         </div>
  26.       </fieldset>
  27.       <div>
  28.         <label for="secret"></label>
  29.         <input type="radio" name="sex" value="man" id="man" /><label for="man">男</label>
  30.         <input type="radio" name="sex" value="woman" id="woman" /><label for="woman">女</label>
  31.         <input type="radio" name="sex" id="secret" value="secret" checked/><label for="secret">保密</label>
  32.       </div>
  33.       <div>
  34.         <label for="drawing">爱好:</label>
  35.       <input type="checkbox" name="hobby[]" id="ping pong" />  <label for="ping pong">乒乓球</label>
  36.         <input type="checkbox" name="hobby[]" id="basketball" /><label for="basketball">篮球</label>
  37.        <input type="checkbox" name="hobby[]" id="swim" /> <label for="swim">游泳</label>
  38.        <input type="checkbox" name="hobby[]" id="drawing" checked/> <label for="drawing">画画</label>
  39.       </div>
  40.       <select name="" id="">
  41.         <option value="1">铜牌会员</option>
  42.         <option value="2">银牌会员</option>
  43.         <option value="3">金牌会员</option>
  44.         <option value="4">钻石会员</option>
  45.       </select>
  46.       <div>
  47.         <label for="">职业技能:</label>
  48.         <input type="search" list="my-key" name="search" >
  49.         <datalist id="my-key">
  50.           <option value="1">1</option>
  51.           <option value="2">2</option>
  52.           <option value="3">3</option>
  53.           <option value="4">4</option>
  54.         </datalist>
  55.       </div>
  56.       <div>
  57.         <button type="submit">提交</button>
  58.       </div>
  59.     </form>
  60.   </body>
  61. </html>

更多相关文章

  1. 我的第12个代码
  2. 2021_2_1
  3. php流程控制和循环结构
  4. android之App Widget开发实例
  5. Android课程表显示
  6. Android时间转换星期 昨天 今天工具
  7. Android获取当前时间与星期几
  8. Android(安卓)自定义实现日历控件
  9. Android-日历CalendarView使用

随机推荐

  1. Android webkit image的加载过程解析（二）
  2. Android官方技术文档翻译——Gradle 插件
  3. 获取Android的Java源代码并在Eclipse中关
  4. 当Google忙着忽悠Android的时候，各位别忘
  5. Android 中文API合集 chm版,电子书籍下载
  6. Android 中文 API――android.widget合集
  7. android 自定义组件 ：对VelocityTracker的
  8. Android(安卓)SQLite使用详解和多线程并
  9. android基础入门(二)――创建android工程
  10. 2010-11-4