Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1209—列表、表单、表格
Blogger Information
Blog 64
fans 2
comment 1
visits 47283
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1209—列表、表单、表格
Y的博客
Original
650 people have browsed it

1.表单

有序列表

  1. <ol>
  2.     <li>牛奶</li>
  3.     <li>面包</li>
  4.     <li>可乐</li>
  5. </ol>

无序列表

  1.  <ul>
  2.     <li>洗发水</li>
  3.     <li>沐浴露</li>
  4.     <li>洗面奶</li>
  5. </ul>

自定义列表

  1. <dl>
  2.     <dt>电脑：</dt>
  3.         <dd>MacBook</dd>
  4.     <dt>手机：</dt>
  5.         <dd>iPhone11</dd>
  6.     <dt>平板：</dt>
  7.         <dd>iPad</dd>
  8.     <dt>电话：</dt>
  9.         <dd>手机号：<a href="tel:120">120</a></dd>
  10.         <dd>邮箱号：<a href="mailto:120@163.com">120@163.com</a></dd>
  11. </dl>

2.表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>表单</title>
  7. <link rel="stylesheet" href="style/form.css">
  8. </head>
  9. <body>
  10. <h3 class="title">用户注册</h3>
  11. <!-- action处理表单的脚本，method表单的提交类型 -->
  12. <form action="" method="POST" class="register" enctype="multipart/form-data">
  13.     <label for="usernam">账号：</label>
  14.     <input type="text" id="username" name="username" value="" placeholder="用户名" required>
  15.     <label for="usernam">邮箱：</label>
  16.     <input type="email" id="emali"" name="emali" value="" placeholder="@.com" required>
  17.     <label for="usernam">密码：</label>
  18.     <input type="password"" id="password"" name="password" value="" placeholder="不少于6位" required>
  19.     <label for="female">性别：</label>
  20.     <div>
  21.         <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>
  22.         <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
  23.     </div>
  24.     <label for="#">兴趣：</label>
  25.     <div>
  26.         <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
  27.    <input type="checkbox" name="hobby[]" value="book" id="book" checked><label for="book">看书</label>
  28.    <input type="checkbox" name="hobby[]" value="photo" id="photo" checked><label for="photo">摄影</label>
  29.     </div>
  30. <label for="">学历</label>
  31.     <select name="edu" id="edu">
  32.         <option value="1">初中</option>
  33.         <option value="2">高中</option>
  34.         <option value="3">大学</option>
  35.         <option value="4">研究生</option>
  37.     </select>
  38.     <button>提交</button>
  40. </form>

</body>
</html>

3.表格

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>课程表</title>
  7. <link rel="stylesheet" href="style/table.css">
  8. </head>
  9.   <body>
  10. <table class="lesson">
  11.     <caption>课程表</caption>
  12.     <thead>
  13.         <tr>
  14.             <th colspan="2"></th>
  15.             <th>星期一</th>
  16.             <th>星期二</th>
  17.             <th>星期三</th>
  18.             <th>星期四</th>
  19.             <th>星期五</th>
  20.         </tr>
  21.     </thead>
  22.     <tbody>
  23.          <tr>
  24.             <td rowspan="4">上午</td>
  25.             <td>一</td>
  26.             <td>语文</td>
  27.             <td>数学</td>
  28.             <td>英语</td>
  29.             <td>体育</td>
  30.             <td>美术</td>
  31.          </tr>
  32.          <tr>
  33.             <td>二</td>
  34.             <td>语文</td>
  35.             <td>数学</td>
  36.             <td>英语</td>
  37.             <td>体育</td>
  38.             <td>美术</td>
  39.          </tr>
  40.          <tr>
  41.             <td>三</td>
  42.             <td>语文</td>
  43.             <td>数学</td>
  44.             <td>英语</td>
  45.             <td>体育</td>
  46.             <td>美术</td>
  47.          </tr>
  48.          <tr>
  49.             <td>四</td>
  50.             <td>语文</td>
  51.             <td>数学</td>
  52.             <td>英语</td>
  53.             <td>体育</td>
  54.             <td>美术</td>
  55.          </tr>
  56.         <tr>
  57.             <td colspan="7">课间休息</td>
  58.         </tr>
  59.         <tr>
  60.             <td rowspan="4">下午</td>
  61.             <td>五</td>
  62.             <td>语文</td>
  63.             <td>数学</td>
  64.             <td>英语</td>
  65.             <td>体育</td>
  66.             <td>美术</td>
  67.          </tr>
  68.          <tr>
  69.             <td>六</td>
  70.             <td>语文</td>
  71.             <td>数学</td>
  72.             <td>英语</td>
  73.             <td>体育</td>
  74.             <td>美术</td>
  75.          </tr>
  76.          <tr>
  77.             <td>七</td>
  78.             <td>课外活动</td>
  79.             <td colspan="4"></td>
  80.          </tr>
  81.     </tbody>
  82. </table>
  83. </body>
  84. </html>
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