html练习

最新推荐文章于 2024-08-26 21:48:51 发布
最新推荐文章于 2024-08-26 21:48:51 发布
阅读量185 收藏
点赞数 1
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanbudu/article/details/140400776
版权

电子汇款单  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子汇款单</title>
    <style>
        h1{
            font-size: 50px;
        }
        .type{font-style: italic;}
       
    </style>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
     <table  border="1px"   cellspacing="0" cellpadding="0" >
       <tr height="50px">
        <td width="180px"><big><b>回单类型</b></big></td>
        <td width="500px">网上转账汇款</td>
        <td width="180px"><big><b>指令序号</b></big></td>
        <td width="500px">HQH000000000000003878172</td>
       </tr>
       <tr >
        <td colspan="4">
        <table  border="1px" height="200px"  cellspacing="0" cellpadding="0" >
            <tr >
                <td width="30px" rowspan="4"><big><b>收款人</b></big></td>
                <td width="150px">户名</td>
                <td width="500">老牟</td>
                <td width="30px" rowspan="4"><big><b>付款人</b></big></td>
                <td width="150px">户名</td>
                <td width="500">老刘</td>      
        </tr>
            <tr >
                <!-- <td width="30px"></td> -->
                <td width="150px"><big><b>卡号</b></big></td>
                <td width="500">000000000001</td>
                <!-- <td width="30px"></td> -->
                <td width="150px"><big><b>卡号</b</big></td>
                <td width="500">000000000002</td>      
        </tr>
            <tr >
                <!-- <td width="30px"></td> -->
                <td width="150px">地区</td>
                <td width="500">南京</td>
                <!-- <td width="30px"></td> -->
                <td width="150px">地区</td>
                <td width="500">杭州</td>      
        </tr>
            <tr >
                <!-- <td width="30px"></td> -->
                <td width="150px"><big><b>网点</b></big></td>
                <td width="500">工商江苏南京业务处理中心</td>
                <!-- <td width="30px"></td> -->
                <td width="150px"><big><b>网点</b></big></td>
                <td width="500">江苏徐州业务中心</td>      
        </tr>
        </table>
    </td>
        <tr>
            <tr height="50px">
            <td width="180px"><big><b>币种</b></big></td>
            <td width="500px">人民币</td>
            <td width="180px"><big><b>钞汇标志</b></big></td>
            <td width="500px">钞票</td>
    </tr>
        <tr>
            <tr height="50px">
            <td width="180px"><big><b>金额</b></big></td>
            <td width="500px">1.00元</td>
            <td width="180px"><big><b>手续费</b></big></td>
            <td width="500px">0.57元</td>
    </tr>
        
        <tr>
            <tr height="50px">
            <td width="180px"><big><b>合计</b></big></td>
            <td width="500px" colspan="3">人名币(大写):壹元整</td>
            <!-- <td width="180px"></td>
            <td width="500px"></td>  -->
    </tr>
    <tr>
        <tr height="50px">
        <td width="180px"><big><b>交易时间</b></big></td>
        <td width="500px" class="type">2017年6月1日</td>
        <td width="180px" ><big><b>时间戳</b></big></td>
        <td width="500px" class="type">2017-06-01-13.00.00,00000</td>
</tr>
   </table>
   <p>
   <div>票据打印时间:2017-06-01 15:00.12</div></p>
   <del>票据打印单位:江苏徐州业务中心</del><P>
    <div>操作员:大曾</div>
   </P>
       
       
    </body>
</html>

李白诗词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李白诗词</title>
    <style>
        h1,h2{
            display: inline-block; 
        }
        h1{font-size: 50px;}
        h2{font-size: 40px;
        margin-left: 20px;}
        .text{
            line-height: 2;
            font-size: 29px;  
        } 
    </style>
</head>
<body>
  <table   >
    <tr height="100px">
        <td width="900px">
            <h1>将进酒</h1>
            <h2>君不见黄河之水天上来</h2>
        </td>
    </tr>
</table>
    <table >
    <tr height="800px">
        <td width="450px" >
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.oBTb9-5wYLJX0ER0kgHtSgHaEg?w=279&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""
    width="400px"
    height="800px"
   > 
    </td>
        <td width="600px">
            <div class="text">
        君不见黄河之水天上来，奔流到海不复回。<br>
        君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
        人生得意须尽欢，莫使金樽空对月。<br>
        天生我材必有用，千金散尽还复来。<br>
        烹羊宰牛且为乐，会须一饮三百杯。<br>
        岑夫子，丹丘生，将进酒，杯莫停。<br>
        与君歌一曲，请君为我倾耳听。<br>
        钟鼓馔玉不足贵，但愿长醉不愿醒。<br>
        古来圣贤皆寂寞，惟有饮者留其名。<br>
        陈王昔时宴平乐，斗酒十千恣欢谑。<br>
        主人何为言少钱，径须沽取对君酌。<br>
        五花马、千金裘，<br>
        呼儿将出换美酒，与尔同销万古愁。<br>
    </div>
    </td>         
 </table>
</body>
</html>

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        table{
            margin: auto;
            margin-top: 200px;
            background-color:rgb(237, 237, 237);
        }
        .t1,.t2{
            text-align: center;
            background-color: rgb(201, 201, 201);
        }
        div{
            text-align: right;
            
        }
    </style>
</head>
<body>
     <table  border="1px" cellspacing="1px" >  
    <tr  class="t1" height="30px" >
        <td  width="150px" colspan="2">用户注册</td> 
    </tr>
    <tr  height="30px" >
        <td  width="80px">
            <div>用户名</div>
        </td>
        <td  width="190px">
                <form action="">
                    <input type="text" name="UserName" maxlength="20"
                     size="15" ">
                </form>
        </td>
    </tr>
    <tr  height="30px" >
        <td  width="80px">
            <div>密码</div>
        </td>
        <td  width="190px">
            <form action="">
                <input type="password"name="UserPass" maxlength="20" size="15"">
            </form>
        </td>
    </tr>
    <tr  height="30px" >
        <td  width="80px"><div>性别</div></td>
        <td  width="190px">
            <form action="">
                <input type="radio" name="sex" value="1" > 男
                <input type="radio" name="sex" value="0" > 女
            </form>
        </td>
    </tr>
    <tr  height="30px" >
        <td  width="80px"><div>爱好</div></td>
        <td  width="190px">
            <form action="">
                <input type="checkbox" name="like" value="写作" >写作
                <input type="checkbox" name="like" value="听音乐" >听音乐
                <input type="checkbox" name="like" value="体育" >体育
        </form></td>
    </tr>
    <tr  height="30px" >
        <td  width="80px"><div>省份</div></td>
        <td  width="190px">
            <select name="province">
                <option value="shanxi">陕西省</option>
                <option value="shanx">山西省</option>
            </form>
        </td>
    </tr>
    <tr  >
        <td  width="80px" ><div>自我介绍</div></td>
        <td  width="190px">
            <textarea name="intro" cols="25" rows="5">世间万物无最爱无例外</textarea>
        </td>
    </tr>
    <tr class="t2" height="30px" >
        <td  width="190px" colspan="2">  
        <button type="submit"  >提交</button>
        <button>重置</button>
        </td>
    </tr>
    </table> 
</body>
</html>

电影登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影</title>
    <style>
        li{
            list-style: none;
            display: inline;
            margin-left: 60px;
        }
        .t1{
            margin-left: 80px;
        }
        /* .box >div{border: 1px solid red;} */
        .box{
            display: grid;
          
            grid-template-columns: repeat(4,1fr);
            height: 785px;
            grid-template-rows: repeat(2,1fr);
            width: 1200px;
            grid-gap: 10px;
        }
        img{
            width: 300px;
            height: 340px;
        }
        .text{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div><h1>热门电影板块</h1></div>
    <hr>
    <b>最近热门电影</b>
    
    <li>热门</li>
    <li>最新</li>
    <li>豆瓣高分</li>
    <li>冷门佳片</li>
    <li>华语</li>
    <li>欧美</li>
    <li>韩国</li>
    <li>日本</li>
    <li class="t1">更多>></li>
</div>
    <hr>
    <div class="box">
        <div>
            <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.oGHn-C3TE99UugkP1j4EVgHaKX&w=211&h=295&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" alt="">
            <div class="text">唐人街探案3</div>
        </div>
        <div>
            <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.D49m_GI5tgmv2zMAzDHIDgHaKX&w=211&h=295&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" alt="">
            <div class="text">急先锋</div>
        </div>
        <div>
            <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.0T0jalIAN8IxB0FZ8WnRrgHaKX&w=211&h=295&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" alt="">
            <div class="text">幕后玩家</div>
        </div>
        <div>
            <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.dxCC08W0i1mkPZvMFPxFWgAAAA&w=210&h=296&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"">
            <div class="text">毒液</div>
        </div>
        <div>
            <img src="https://pic.wujinpp.com/upload/vod/20240620-1/b7f91c958ea3bf987639a17387f4c75f.jpg" alt="">
            <div class="text">扫黑·决不放弃</div>
        </div>
        <div>
            <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.FTu_JOkRQK_JeX_V2PN_ewHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" alt="">
            <div class="text">八佰</div>
        </div>
        <div>
            <img src="https://pic.wujinpp.com/upload/vod/20240518-1/485fd06847c416c3d211d890cd56bb27.jpg" alt="">
            <div class="text">加菲猫2024</div>
        </div>
        <div>
            <img src="https://img.guangsuimage.com/cover/230fd6d29005cc05d3586a611cb25131.jpg" alt="">
            <div class="text">猩球崛起:新世界</div>
        </div>
    </div>
    
</body>
</html>

wanbudu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML简易网页练习
zhangmingxian1的博客
10-28 1394
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
第1章 补充案例（HTML练习题）
Ice Point.
02-03 4616
一、案例描述 1、 考核知识点 HTML5文档基本格式 2、 练习目标  初步了解HTML5文档基本格式。  能够运用HTML5文档基本格式制作简单的页面。 3、 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 4、 案例分析 效果如图1-1所示。 具体实现步骤如下： a) 新建Dreamweaver默认文档。
HTML-简单练习
crraxx的博客
02-24 8042
练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
html表单练习
weixin_45239190的博客
08-06 2662
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
下面语句中,( a )将html页面的标题设置为"html练习",HTML试题
weixin_33481022的博客
07-28 1464
一、选择题1. 以下描述将图像作为链接的形式(一项)正确的是()A. ＜A Href=”http://doc.xuehai.net”＞＜IMG SRC="logo.gif"＞＜/A＞B. ＜A Href=”http://doc.xuehai.net”＞＜/A＞＜IMG SRC="logo.gif"＞C. ＜A Href=”http://doc.xuehai.net” IMG SRC="logo.g...
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
html相关案例练习题
卓卓卓
10-16 1286
案例一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background
HTML练习之帧动画
Playful_Elbow的博客
04-17 2769
<!DOCTYPE html> <html> <head> <title>Document</title> <meta charset="utf-8"> <style type="text/css"> *,body{ margin:0; padding:0; } #view{ width:500px; ...
HTML练习文档 HTML练习文档
01-14
这个"HTML练习文档"可能是一系列用于学习和实践HTML语法、结构和元素的文件集合。通过这些文档，我们可以深入理解HTML的工作原理，提升网页设计和开发的能力。 HTML的主要特点在于其结构化标签，这些标签用来定义...
html练习.zip
07-25
这个“html练习.zip”压缩包显然包含了一些与HTML学习相关的资源，可能包括练习文件、示例代码、教程文档等。下面我们将深入探讨HTML的基本概念、重要元素以及它在网页设计中的作用。 HTML是一种标记语言，它通过一...
WE'RE GETTING MARRIED HTML练习模板_HTML_练习
09-24
这个"WE'RE GETTING MARRIED HTML练习模板"为初学者提供了一个实践HTML和CSS技能的机会。在这个模板中，你将学习到如何创建一个关于婚礼主题的静态网页。 首先，HTML用于定义网页的结构和内容，如标题、段落、链接...
HTML_course.rar_html 练习题
09-14
本“HTML_course.rar_html 练习题”资源包含了一个完整的HTML学习课程，共分为七章，旨在帮助学习者深入理解和掌握HTML的基本概念、语法以及实际应用。通过这份资料，你可以系统地提升自己的HTML技能，并通过练习题...
CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(二)
最新发布
08-26 738
CRUD中，如何做到全端通吃，基于ABP的Dto模块，通过对Dto的编辑，从而控制全部的前端内容，让数据的表格和数据的表单做到动态创建，动态验证等！
html文本文字中保留空格和换行
qq_41985405的博客
08-26 46
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
【HTML】语义化
DX390609的博客
08-22 301
根据内容的结构选择合适的标签。
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 600
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
HTML练习全集：选择、判断、填空与编程挑战
"HTML练习题" HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它构成了互联网的基础。本资源是一套完整的HTML练习题集合，包括选择题、多选题、判断题、填空题、简答题以及编程题，旨在帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值