web前端练习一

ANCHG_2024-03-13 22:52

1.电子汇款单

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子汇款单</title>
</head>
<body>
    <h2>工商银行电子汇款单</h2>
    <table border="1px">
        <tr>
            <th colspan="2">回单类型</th>
            <!-- <td></td> -->
            <td width="280">网上转账汇款</td>
            <th colspan="2">指令序号</th>
            <!-- <td></td> -->
            <td width="280">HQH000000000000013878172&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <th rowspan="4">收&nbsp;<br>款&nbsp;<br>人&nbsp;</th>
            <td>户名</td>
            <td>老牟</td>
            <th rowspan="4">付&nbsp;<br>款&nbsp;<br>人&nbsp;</th>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <th>卡号</th>
            <td>0000000001</td>
            <!-- <td></td> -->
            <th>卡号</th>
            <td>0000000002</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <td>地区</td>
            <td>南京</td>
            <!-- <td></td> -->
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <th>网点</th>
            <td>工商江苏南京业务处理中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <!-- <td></td> -->
            <th>网点</th>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <th colspan="2">币种</th>
            <!-- <td></td> -->
            <td>人民币</td>
            <th colspan="2">钞汇标志</th>
            <!-- <td></td> -->
            <td><u>钞票</u></td>
        </tr>
        <tr>
            <th colspan="2">金额</th>
            <!-- <td></td> -->
            <td>1.00元</td>
            <th colspan="2">手续费</th>
            <!-- <td></td> -->
            <td>0.57元</td>
        </tr>
        <tr>
            <th colspan="2">合计</th>
            <!-- <td></td> -->
            <td colspan="4">人民币（大写）：壹园整</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <th colspan="2">交易时间</th>
            <!-- <td></td> -->
            <td><i>2017年6月1日</i></td>
            <th colspan="2">时间戳</th>
            <!-- <td></td> -->
            <td><i>2017-06-01-13.00.00. 00000</i></td>
        </tr>
    </table>
    &nbsp;<br>
    <h7>票据打印时间：2017-06-01 15:00:12</h7><br>
    &nbsp;<br>
    <s><h7>票据打印单位：江苏徐州业务中心</h7></s><br>
    &nbsp;<br>
    <h7>操作员：大曾</h7>
    </table>
</body>
</html>

2.将进酒

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将进酒</title>
</head>
<body>
    <b><span style="font-size: 40px;">将进酒</span></b>
    <b><span style="font-size: 33px;">君不见黄河之水天上来</span></b><br>
    <a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fr=ge_ala" title="点击了解李白更多">
        <img src="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/9ac61cb655c84cf29e7a97c871804fc1?from=pc" 
        width="500" height="560" align="left"></a>
    &nbsp;<br>
    &nbsp;<br>
    <div>&nbsp;君不见黄河之水天上来，奔流到海不复回。</div>&nbsp;<br>
    <div>&nbsp;君不见高堂明镜悲白发，朝如青丝暮成雪。</div>&nbsp;<br>
    <div>&nbsp;人生得意须尽欢，莫使金樽空对月。</div>&nbsp;<br>
    <div>&nbsp;天生我材必有用，千金散尽还复来。</div>&nbsp;<br>
    <div>&nbsp;烹羊宰牛且为乐，会须一饮三百杯。</div>&nbsp;<br>
    <div>&nbsp;岑夫子，丹丘生，将进酒，杯莫停。</div>&nbsp;<br>
    <div>&nbsp;与君歌一曲，请君为我倾耳听。</div>&nbsp;<br>
    <div>&nbsp;钟鼓馔玉不足贵，但愿长醉不复醒。</div>&nbsp;<br>
    <div>&nbsp;古来圣贤皆寂寞，惟有饮留其名。</div>&nbsp;<br>
    <div>&nbsp;陈王昔时宴平乐，斗酒十千恣欢谑。</div>&nbsp;<br>
    <div>&nbsp;主人何为言少钱，仅须沽取对君酌。</div>&nbsp;<br>
    <div>&nbsp;五花马，千金裘，</div>&nbsp;<br>
    <div>&nbsp;呼儿将出换美酒，五二同销万古愁。</div>&nbsp;<br>
</body>
</html>

3.电影模块

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影板块</title>
</head>
<body>
    <h2>热门电影模块</h2><hr>
    <table>
        <tr>
            <td width="200"><b>最近热门电影</b></td>
            <td width="90">热门</td>
            <td width="90">最新</td>
            <td width="120">豆瓣高分</td>
            <td width="150">冷门佳作</td>
            <td width="90">华语</td>
            <td width="90">欧美</td>
            <td width="90">欧美</td>
            <td width="90">韩国</td>
            <td width="300">日本</td>
            <td width="90">更多&lt;&lt;</td>
        </tr>
    </table><hr>
    <table width="1250">
        <tr>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
        </tr>
        <tr>
            <td height="45">猜火车 8.1</td>
            <td>贝尔实验 6.0</td>
            <td>加州公路巡警 6.8</td>
            <td>歌声不绝 6.3</td>
        </tr>
        <tr>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
        </tr>
        <tr>
            <td height="45">明日的我与昨日的你 7.5</td>
            <td>激情与速度8 8.1</td>
            <td>极速特工 6.4</td>
            <td>金刚狼3：殊死一战 7.6</td>
        </tr>
    </table>
</body>
</html>

4.用户注册页面

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>   
    <form action="https:www.baidu.com" method="post">
        <table align="center">
            <tr>
                <td colspan="2" align="center"><h3>用户注册</h3></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>用户名：</td>
                <td><p><input type="text" name="username"></p></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><p><input type="password" name="password"></p></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <p>
                        <input type="radio" name="gender" value="男">男    
                        <input type="radio" name="gender" value="女">女             
                    </p>
                </td>
            </tr>
            <tr>
                <td>省份：</td>
                <td>
                    <select name="provice">
                        <option value="provice1" selected="">广东省</option>
                        <option value="provice2">陕西省</option>
                        <option value="provice3">湖北省</option>
                        <option value="provice4">江西省</option>
                        <option value="provice5">辽宁省</option>
                        <option value="provice6">四川省</option>
                        <option value="provice7">山东省</option>
                        <option value="provice8">吉林省</option>
                        <option value="provice9">......</option>
    
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <p>
                        <input type="checkbox" name="hobby" value="唱">唱
                        <input type="checkbox" name="hobby" value="跳">跳
                        <input type="checkbox" name="hobby" value="rap">rap
                        <input type="checkbox" name="hobby" value="篮球">篮球
                        <input type="checkbox" name="hobby" value="其他">其他
                    </p>
                </td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><p><input type="email" name="email" id=""></p></td>
            </tr>
            <tr>
                <td>联系电话：</td>
                <td><p><input type="text" name="phone" id=""></p></td>
            </tr>
                <td>入职时间：</td>
                <td>
                    <p>
                        <input type="date" name="date">
                    </p>
                </td>
            </tr>
            <tr>
                <td>离职时间：</td>
                <td>
                    <p>
                        <input type="date" name="date">
                    </p>
                </td>
            </tr>
            <tr>
                <td>自我介绍：</td>
                <td><textarea name="introduce" cols="30" rows="5">请输入100字左右</textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <p>
                        <input type="reset">
                        <input type="submit" value="提交">
                    </p>
                </td>
                <!-- <td></td> -->
            </tr>
        </table>
    </form>
</body>
</html>
相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示