简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >l链接，列表，表格，表单实例演示

l链接，列表，表格，表单实例演示

暝皑祯π_π
暝皑祯π_π原创
2020年04月04日 19:50:13623浏览
  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.   </head>
  8.   <body>
  9.       <!-- 表格实例 -->
  10.     <table
  11.       id="b"
  12.       border="1"
  13.       align="conter"
  14.       cellspacing="0"
  15.       cellpadding="2"
  16.       width="800"
  17.       height="900"
  18.     >
  19.       <thead align="center">
  20.         <th colspan="5">红包申请表</th>
  21.       </thead>
  22.       <tbody>
  23.         <tr>
  24.           <td>申请人姓名</td>
  25.           <td>***</td>
  26.           <td>申请人性别</td>
  27.           <td>***</td>
  28.           <td rowspan="7">生活照片</td>
  29.         </tr>
  30.         <tr>
  31.           <td>申请人年龄</td>
  32.           <td>***</td>
  33.           <td>婚姻状况</td>
  34.           <td>***</td>
  35.         </tr>
  36.         <tr>
  37.           <td colspan="4">联系方式</td>
  38.         </tr>
  39.         <tr>
  40.           <td>是否有姐妹</td>
  41.           <td>姐妹姓名1</td>
  42.           <td>姐妹姓名2</td>
  43.           <td>姐妹姓名3</td>
  44.         </tr>
  45.         <tr>
  46.           <td rowspan="3" align="center">是/否</td>
  47.           <td>***</td>
  48.           <td>***</td>
  49.           <td>***</td>
  50.         </tr>
  51.         <tr>
  52.           <td>联系电话1</td>
  53.           <td>联系电话2</td>
  54.           <td>联系电话3</td>
  55.         </tr>
  56.         <tr>
  57.           <td>***</td>
  58.           <td>***</td>
  59.           <td>***</td>
  60.         </tr>
  61.         <tr>
  62.           <td colspan="2">目前与我的关系</td>
  63.           <td colspan="3">***</td>
  64.         </tr>
  65.         <tr>
  66.           <td colspan="2">以后想发展什么关系</td>
  67.           <td colspan="3">***</td>
  68.         </tr>
  69.         <tr>
  70.           <td>申请金额</td>
  71.           <td colspan="4">人民币： **百 **拾 **元 **角 **分</td>
  72.         </tr>
  73.         <tr>
  74.           <td rowspan="3">申请理由</td>
  75.           <td colspan="4" rowspan="3"></td>
  76.         </tr>
  77.         <tr></tr>
  78.         <tr></tr>
  80.         <tr>
  81.           <td rowspan="2">申请时间</td>
  82.           <td colspan="5" rowspan="2"></td>
  83.         </tr>
  84.         <tbody>
  85.         <tr></tr>
  86.        <tfoot>
  87.            <tr>
  88.                <td colspan="5">备注：1寸照片两张，1500字申请书，身份证，户口本复印证。500元保证金。另附申请理由陈述书，不少于1500字。</td>
  89.            </tr>
  90.        </tfoot>
  91.     </table>
  92.     <!-- 链接实例 -->
  93.     <a href="" download="示例文本.zip">示例文本</a>
  94.     <a href="tel:123456789">咨询热线</a>
  95.     <a href="mailto:111111@qq.com">发信息给我</a>
  96.     <!-- 表单实例 -->
  97.     <form action="1.php" method="POST">
  98.         <section>
  99.         <input type="submit" value="提交">
  100.     </section>
  101.     </form>
  102.    <br>
  103.    <br>
  104.    <form action="2.php" method="POST">
  105.        <section>
  106.            <label for="yonghuming">用户名：</label>
  107.            <input type="text" name="yonghuming" id="yonghuming" placeholder="请输入" required><br>
  108.            <label for="mima">密码：</label>
  109.            <input type="password" name="mima" id="mima" placeholder="密码" required>
  110.        </section>
  111.        <br>
  112.    </form>
  113.    <form action="3.php" method="POST">
  114.        <label for="secret">性别</label>
  115.        <div>
  116.         <input type="radio" name="gender" id="man" value="男人">
  117.         <input type="radio" name="gender" id="woman" value="女人">
  118.         <input type="radio" name="gender" id=”secret value="保密" checked>
  119.        </div>
  120.        <br>
  121.    </form>
  122.    <form action="4.php" method="POST">
  123.        <section>
  124.            <label for="interest">兴趣</label>
  125.            <div>
  126.                <input type="checkbox" name="interst[]" id="game" value="游戏">
  127.                <input type="checkbox" name="interst[]" id="photography" value="摄影">
  128.                <input type="checkbox" name="interst[]" id="programme" value="编程" checked>
  129.            </div>
  130.        </section>
  132.    </form>
  133. <!-- 列表实例 -->
  135. <h3>0403学习内容总结</h3>
  136. <ul>
  137.     <li>语义化元素</li>
  138.     <ol>
  139.         <li>语义化结构元素</li>
  140.         <li>语义化标签</li>
  141.     </ol>
  142.     <li>列表</li>
  143.     <ol>
  144.         <li>有序列表</li>
  145.         <li>无序列表</li>
  146.     </ol>
  147.     <li>表格</li>
  148.     <ol>
  149.         <li>表格页眉(thead）一个表格中只能有一个页眉</li>
  150.         <li>表格主体（tbody）一个表格中可以有几个表格主体</li>
  151.         <li>表格页尾（tfoot）一个表格中只能有一个页尾</li>
  152.     </ol>
  153.     <li>表单</li>
  154.     <ol>
  155.         <li>form元素</li>
  156.         <li>input元素</li>
  157.     </ol>
  158. </ul>
  159. <div>
  160. <a href="#b"><img src="![](https://img.php.cn/upload/image/283/370/483/1586000717889553.png)" alt="返回头部"></a>
  161. </div>
  162.   </body>
  163. </html>
上一条：html5 文档结构和属性下一条：链接元素、表单元素、表格元素、表单元素的使用举例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多