4个HTML案例练习

已于 2024-07-06 11:40:02 修改
阅读量155 收藏
点赞数 4
文章标签： html 前端 javascript
于 2024-07-05 10:58:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80811863/article/details/140202089
版权

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <table border="2px" width="500px" height="550px" align="center">
        <tr>
            <th colspan="2" bgcolor="grey" >用户注册</th>
            <!--<th></th>-->
        </tr>
        <tr>
            <td align="right">用户名</td>
            <td><input type="text" name="Username" id="" maxlength="20" > </td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td><input type="password" name="Userpass" id="" maxlength="20" ></td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td><input type="radio" name="sex" id="男" checked >男
            <input type="radio" name="sex" id="女" >女
            </td>
        </tr>
        <tr>
            <td align="right">爱好</td>
            <td><input type="checkbox" name="like" checked>写作
            <input type="checkbox" name="like" checked>听音乐
            <input type="checkbox" name="like" checked>体育
            </td>
        </tr>
        <tr>
            <td align="right">省份</td>
            <td><select name="province">
                <option value="shaanxi">陕西省</option>
                <option value="shanx">山西省</option>
            </select>
            </td>
        </tr>
        <tr>
            <td align="right">自我介绍</td>
            <td><textarea name="intro" rows="5" cols="25" placeholder="这个家伙什么也没留下"></textarea></td>
        </tr>
        <tr>
            <td colspan="2" bgcolor="grey" align="center">
                <button type="submit" name="send">提交</button>
                <button type="reset" name="reset">重置</button>
            </td>
            <!--td></td-->
        </tr>
    </table>
</body>
</html>

运行结果：

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
    <table border="3px" width="900px" height="500px" >
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4"><b>付款人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>00000000000001</td>
            <td><b>卡号</b></td>
            <td>00000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币（大写）：壹元整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td>2017年6月1日</td>
            <td colspan="2"><b>时间戳</b></td>
            <td>2017-03-01-13.00.00.00000</td>
        </tr>
    </table>
    <div>票据打印时间：2017-06-01 15：00：12</div>
    <div><del>票据打印单位：江苏徐州业务中心</del></div>
    <div>操作员：大曾</div>
</body>
</html>

运行结果：

作业3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李白诗词</title>
</head>
<body>
    <table width="400px" height="400px">
        <tr>
            <td colspan="2"><font size="10"><b>将进酒</b></font><font size="5"><b>君不见黄河之水天上来</b></font></td>
        </tr>
        <tr>
            <td width="200px" height="350px"><img src="C:\Users\刘川司\Desktop\web前端\code\01.html\1.7表单标签（重）\李白.jpg" alt=""></td>
            <td width="100px" height="400px">
                <pre>
                    君不见黄河之水天上来，奔流到海不复回。

                    君不见高堂明镜悲白发，朝如青丝暮成雪。

                    人生得意须尽欢，莫使金樽空对月。

                    天生我材必有用，千金散尽还复来。

                    烹羊宰牛且为乐，会须一饮三百杯。

                    岑夫子，丹丘生，将进酒，杯莫停。

                    与君歌一曲，请君为我侧耳听。

                    钟鼓馔玉不足贵，但愿长醉不复醒。

                    古来圣贤皆寂寞，惟有饮者留其名。

                    陈王昔时宴平乐，斗酒十千恣欢谑。

                    主人何为言少钱，径须沽取对君酌。

                    五花马，千金袭。

                    呼儿将出换美酒，与尔同销万古愁。
                </pre>
            </td>
    </table>
</body>
</html>

运行结果：

作业4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣电影</title>
</head>
<body>
    <h1>热门电影板块</h1>
    <hr>
    <table width="800px" height="20px">
        <tr>
            <td><b>最新热门电影</b></td>
            <td>热门</td>
            <td>最新</td>
            <td>豆瓣高分</td>
            <td>冷门佳片</td>
            <td>华语</td>
            <td>欧美</td>
            <td>韩国</td>
            <td>日本</td>
            <td><a href="https://movie.douban.com/" target="_blank">更多>></a></td>
        </tr>
    </table>
    <hr>
    <table width="800px" hright="600px">
        <tr>
            <td ><a href="https://www.bilibili.com/bangumi/play/ep787223" target="_blank"><img src="C:\Users\刘川司\Desktop\猜火车.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://ysgcfun.com/covodplay/18677-1-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\贝尔科实验.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://ysgcfun.com/covodplay/43320-1-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\加州公路巡警.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://ysgcfun.com/covodplay/68519-1-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\歌声不绝.jpg" width="200px" height="250px" alt=""></a></td>
        </tr>
        <tr>
            <td>猜火车8.1</td>
            <td>贝尔科实验6.0</td>
            <td>加州公路巡警6.8</td>
            <td>歌声不绝6.3</td>
        </tr>
        <tr>
            <td><a href="https://www.rijutv.net/rijutv/71561-1-0.html" target="_blank"><img src="C:\Users\刘川司\Desktop\明日的我和昨日的我.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://www.kanmaoyy.com/dianying/240444-1-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\速度与激情.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://www.idkdy.com/vod-play/1555/2-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\疾速特工.jpg" width="200px" height="250px" alt=""></a></td>
            <td><a href="https://ysgcfun.com/covodplay/1705-1-1.html" target="_blank"><img src="C:\Users\刘川司\Desktop\金刚狼.jpg" width="200px" height="250px" alt=""></a></td>
        </tr>
        <tr>
            <td>明日的我与昨日的我</td>
            <td>速度与激情8</td>
            <td>疾速特工</td>
            <td>金刚狼3：殊死一战</td>
        </tr>
    </table>
    <hr>
</body>
</html>

运行结果：

川trans
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pink老师html＋css综合案例个人练习
03-13
在“pink老师html+css综合案例个人练习”中，我们可以看到一个关于HTML和CSS技术应用的实际项目。这个练习可能是为了帮助学习者巩固和提升他们在HTML结构化标记语言和CSS样式表语言方面的技能。日期标注为“2023.3....
一个简单的HTML的练习
05-31
一个极其简单的HTML的案例，初学者可以学习一下，其框架还是很完整的可以在上面进行进一步的改进从而得到总计的HTML案例。
HTML综合案例练习
moteandsunlight的博客
02-26 1166
可以首先看一下我们的效果，之后再思考怎么实现总的来说，这个练习不算难。这里关于这个简历的代码编写我们不说太多，只注意以下几个内容即可：注意及时查看我们的代码是否符合预期，即一段一段测基本信息那里的内容应该是普通文字，但是注意加换行符项目那里注意不同级别的划分功能介绍是二级的无序话不多说，直接看效果和源码！！ 二、简历内容填写 首先可以看一下我们最终的效果：接下来，我们思考怎么实现。这里由于这个练习代码相对更多，更琐碎，所以这里列了一个思维导图，帮助理解。 三、总结 关于HTML 总的来讲，html还是比较简
html相关案例练习题
卓卓卓
10-16 1226
案例一 <!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——css与js案例练习
人若有志,就不会在半坡停止。
09-14 1667
简易ATM机 简易计算器
HTML简单练习案例
sokoooo的博客
02-17 5914
HTML简单练习案例 目录 HTML简单练习案例 1. 圣诞节 2. 注册表单 3. 小说排行榜 #END（素材源于b站pink老师分享） 1. 圣诞节 1.1 代码： <body> <h1>圣诞节的那些事</h1> 1.圣诞是怎样由来的 <br> 2.<a href="#oldman">圣诞老人的由来</a> <br> 3.<a href="#tree"..
HTML+CSS练习案例
weixin_53519274的博客
12-21 862
这个小案例是我大一刚学前端的html+css的练习小案例，虽然简单，但是对于当时小白的自己，也是给了我很大的成就感的哈哈哈哈，现在记录一下（找了好久才找到的，呜呜呜）提示：以下是本篇文章正文内容，下面案例可供参考这个小案例是大一暑假学习练习的，时间已经很久了，适合小白练习。
html5 案例练习（注册页面）
baipenggui_bo
08-16 433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘</title> </head> <body> <table width="600" align="center" > <caption><h4>青春不常在，抓紧谈恋爱</h...
HTML / CSS 案例练习
MartinYP的博客
07-17 61
HTML / CSS 练习
html+css网页练习四
qq_52108058的博客
02-07 4170
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
HTML案例-1.标签练习
m0_46279684的博客
03-14 484
作为标题使用，并且依据重要性递减。
html布局，小米布局案例练习，填充内容即可
weixin_45077672的博客
04-06 792
小米网站原图： 自己写的布局盒子： 源码： <!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"&
十个静态页面展示-练习 HTML-CSS
12-12
在本实践项目中，"十个静态页面展示-练习 HTML-CSS" 是一个为初学者设计的教程，旨在帮助那些刚刚接触前端开发或者对前端技术感兴趣的朋友们掌握基础的 HTML 和 CSS 技能。这个压缩包文件包含了 01-HTML-CSS 这个子...
一个简单的关于html布局案例
07-01
在这个"一个简单的关于html布局案例"中，我们将深入探讨如何利用这两种技术来创建一个基本的网页布局。 HTML是网页内容的结构语言，用于定义网页的各个元素，如标题、段落、图像、链接等。在提供的文件列表中，有两...
vue案例练习
08-10
在“vue案例练习”这个主题中，我们主要会探讨如何使用Vue.js进行实际项目开发和练习。 1. **基础概念** - **Vue实例**：Vue应用的核心就是Vue实例，它包含了数据、方法、生命周期钩子等属性和方法。 - **模板...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1252
title>充电效果
HTML 学习指南：从入门到精通
英英的博客
07-09 424
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 257
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
html&css基础
antyuki的博客
07-09 775
/
html表单案例练习
09-28
以下是一个HTML表单案例练习： ```html <form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <label for="email...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值