Technology Sharing

html homework

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Table of contents

Assignment Title

1. User Registration

Figure A

B Code

2. ICBC electronic remittance slip

Figure A

B Code

3. Li Bai's poems

Figure A

B Code

4. Douban Movies

Figure A

B Code

Learning outputs:

Assignment Title

1. User Registration

Figure A

B Code

  1. <!DOCTYPE html>
  2. <html lang="zh">
  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. </head>
  9. <body>
  10. <form action="../作业/1.用户注册页面.html" method="post">
  11.     <table border="1px" align="center" width="380" style="background-color: rgb(241, 241, 241);">
  12.         <tr>
  13.         <tr>
  14.             <td colspan="2" align="center" style="background-color: gray;">用户注册</td>
  15.         </tr>
  16.  
  17.         <tr>
  18.             <td><label for="UserName">用户名</label></td>
  19.             <td><input type="text" name="UserName" id="UserName" size="15" maxlength="20" placeholder="输入用户名" autofocus required></td>
  20.         </tr>
  21.  
  22.         <tr>
  23.             <td><label for="password" >密码</label></td>
  24.             <td><input type="password" name="password" id="password" size="15" maxlength="20" placeholder="输入密码" required></td>
  25.         </tr>
  26.  
  27.         <tr>
  28.             <td><label>性别</label></td>
  29.             <td><input type="radio" name="sex" value="male" checked> 男
  30.                 <input type="radio" name="sex" value="female"> 女
  31.             </td>
  32.         </tr>
  33.  
  34.         <tr>
  35.             <td><label for="like" >爱好</label></td>
  36.             <td><input type="checkbox" name="like" value="写作">写作
  37.                 <input type="checkbox" name="like" value="听音乐">听音乐
  38.                 <input type="checkbox" name="like" value="体育">体育
  39.             </td>
  40.         </tr>
  41.  
  42.         <tr>
  43.             <td><label for="province">省份</label></td>
  44.             <td><select name="province">
  45.                 <option value="shanxi" checked >陕西省</option>
  46.                 <option value="shanxi">山西省</option>
  47.             </select></td>
  48.         </tr>
  49.  
  50.         <tr>
  51.             <td><label for="self-introduction">自我介绍</label></td>
  52.             <td><textarea name="intro"  cols="25" rows="5" <input value="这个家伙什么也没有留下" placeholder="这个家伙什么也没有留下"></textarea>></textarea></td>
  53.         </tr>
  54.  
  55.         <tr style="color: black;background-color: gray;">
  56.             <td colspan="2" align="center"><input type="submit" value="提交" name="send">
  57.                 <input type="reset" value="重置" name="reset"></td>
  58.         </tr>
  59.     </table>
  60. </form>
  61. </body>
  62. </html>

2. ICBC electronic remittance slip

Figure A

B Code

  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. 	  <h1>工商银行电子汇款单</h1>
  10.       <table border="1" cellpadding="0" cellspacing="0" style="width: 800px">
  11.              <tr>
  12.              	<td colspan="2"><b>回单类型</b></td>
  13.              	<td >网上转账汇款</td>
  14.              	<td colspan="2"><b>指令序号</b></td>
  15.              	<td >HQH0000000000000013878172</td>
  16.              </tr>
  17.              <tr>
  18.              	<th rowspan="4" style="width: 20px">收款人</th>
  19.              	<td style="width: 80px">户名</td>
  20.              	<td>老牟</td>
  21.              	<th rowspan="4" style="width: 20px">付款人</th>
  22.              	<td style="width: 80px">户名</td>
  23.              	<td>老刘</td>
  24.              </tr>
  25.              <tr>
  26.                  <td><b>卡号</b></td>
  27.                  <td>000000000001</td>
  28.                  <td><b>卡号</b></td>
  29.                  <td>000000000002</td>
  30.              </tr>
  31.              <tr>
  32.                  <td>地区</td>
  33.                  <td>南京</td>
  34.                  <td>地区</td>
  35.                  <td>杭州</td>
  36.              </tr>
  37.              <tr>
  38.                  <td><b>网点</b></td>  
  39.                  <td>工商江苏南京业务处理中心</td>
  40.                  <td><b>网点</b></td>
  41.                  <td>江苏徐州业务中心</td>
  42.              </tr>
  43.              <tr>
  44.                  <td colspan="2"><b>币种</b></td>
  45.                  <td>人民币</td>
  46.                  <td colspan="2"><b>钞汇标志</b></td>
  47.                  <td><u>钞票</u></td>
  48.              </tr>
  49.              <tr>
  50.                  <td colspan="2"><b>金额</b></td>
  51.                  <td>1.00元</td>
  52.                  <td colspan="2"><b>手续费</b></td>
  53.                  <td>0.57元</td>
  54.              </tr>
  55.              <tr>
  56.                  <td colspan="2"><b>合计</b></td>
  57.                  <td colspan="4">人民币（大写）壹元整</td>
  58.              </tr>
  59.              <tr>
  60.                  <td colspan="2"><b>交易时间</b></td>
  61.                  <td><i>2017年6月1日</i></td>
  62.                  <td colspan="2"><b>时间戳</b></td>
  63.                  <td><i>2017-06-01-13.00.0000000</i></td>
  64.              </tr>
  65.       </table>
  66.              <div>票据打印时间:2017-06-01 15:00:12</div> <br>
  67.              <div><del>票据打印单位：江苏徐州业务中心</del> </div><br>
  68.              <div>操作员：大曾</div>
  69.     </body>
  70. </html>

3. Li Bai's poems

Figure A

B Code

  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.     <h1>将进酒 <small>君不见黄河之水天上来</small></h1>
  10.     <table>
  11.         <tr>
  12.             <td>
  13.                 <img src="http://t15.baidu.com/it/u=3081529631,4032033417&fm=224&app=112&f=JPEG?w=374&h=500" alt="!!!图片走丢了!!!" width="280" height="360" title="李白的将进酒">
  14.             </td>
  15.             <td>
  16.                 <pre>
  17. 君不见，黄河之水天上来，奔流到海不复回。
  18.                     
  19. 君不见，高堂明镜悲白发，朝如青丝暮成雪。	
  20.                                     
  21. 人生得意须尽欢，莫使金樽空对月。		
  22.                                 
  23. 天生我材必有用，千金散尽还复来。	
  24.                                     
  25. 烹羊宰牛且为乐，会须一饮三百杯。	
  26.                                     
  27. 岑夫子，丹丘生，将进酒，杯莫停。	
  28.                                     
  29. 与君歌一曲，请君为我倾耳听。		
  30.                                 
  31. 钟鼓馔玉不足贵，但愿长醉不愿醒。	
  32.                                     
  33. 古来圣贤皆寂寞，惟有饮者留其名。
  34.                                         
  35. 陈王昔时宴平乐，斗酒十千恣欢谑。	
  36.                                     
  37. 主人何为言少钱，径须沽取对君酌。	
  38.                                     
  39. 五花马，千金裘，
  40.                     
  41. 呼儿将出换美酒，与尔同销万古愁。
  42.                     
  43.                 </pre>
  44.             </td>
  45.         </tr>
  46.     </table>
  47. </body>

4. Douban Movies

Figure A

B Code

  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. <h1>热门电影板块</h1>
  10. <hr>
  11. <p><b>最近热门电影</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  12.     热门 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  13.     最新 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  14.     豆瓣高分 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  15.     冷门佳片 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  16.     华语 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  17.     欧美 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  18.     韩国 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  19.     日本 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  20.     ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>></p>
  21. <hr>
  22.     <table>
  23.         <tr>
  24.             <td><a href="https://movie.douban.com/subject/1292528/"target="_blank">
  25.                 <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p513567548.webp" width="210px" height="300px" alt="!!!图片走丢了!!!" title="点击猜火车跳转"></a></td>
  26.             <td><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2410846893.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  27.             <td><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2464030020.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  28.             <td><img src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2430385341.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  29.         </tr>
  30.         <tr align ="center">
  31.             <td>猜火车 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">8.1</span></td>
  32.             <td>贝尔科实验 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">6.0</span></td>
  33.             <td>加州公路巡警 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">6.8</span></td>
  34.             <td>歌声不绝 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">6.3</span></td>
  35.         </tr>
  36.         <tr>
  37.             <td><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2390682054.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  38.             <td><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2444256500.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  39.             <td><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2545437039.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  40.             <td><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2445529009.webp" width="210px" height="300px" alt="!!!图片走丢了!!!"></td>
  41.         </tr>
  42.         <tr align ="center">
  43.             <td>明日的我与昨日的你约会 <span style=" color:rgb(255, 0, 0)">7.7</span></td>
  44.             <td>速度与激情8 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">7.0</span></td>
  45.             <td>极线杀手 Polar &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">8.8</span></td>
  46.             <td>金刚狼3:殊死一战 &nbsp;&nbsp;&nbsp;<span style=" color:rgb(255, 0, 0)">8.3</span></td>
  47.         </tr>
  48.     </table>
  49. </body>
  50. </html>

Learning outputs:

  • Technical notes 1 time
  • Please point out any errors and the author will correct them promptly.

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail