HTML5基础练习

最新推荐文章于 2024-07-11 17:51:07 发布
最新推荐文章于 2024-07-11 17:51:07 发布
阅读量302 收藏 2
点赞数 5
文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72632154/article/details/136803179
版权

一、用户注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>
    <form action="https:www.baidu.com" method="post">
    <table border="1px">
        <tr>
            <td colspan="2" align="center">用户注册</td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" name="password" id=""></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="gendar">男
                <input type="radio" name="gendar">女
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <input type="checkbox" name="hobby">看电影
                <input type="checkbox" name="hobby">体育运动
                <input type="checkbox" name="hobby">看书
            </td>
        </tr>
        <tr>
            <td>省份</td>
            <td>
                <select name="area">
                    <option value="陕西省">陕西省</option>
                    <option value="北京市">北京市</option>
                    <option value="上海市">上海市</option>
                </select>
            </td>
        </tr>
        <tr>
            <td rowspan="2">自我介绍</td>
            <td rowspan="2">
                <label>
                    <textarea name="introduce" cols="30" rows="10"></textarea>
                </label>
            </td>
        </tr>
        <tr>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="button" name="button" value="注册">
                <input type="submit" name="submit" value="提交">
                <input type="reset" name="reset" value="重置">
            </td>
            <!-- <td></td> -->
        </tr>
    </table>
    </form>
</body>
</html>

二、电子汇款单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汇款单</title>
</head>
<body>
    <div>
        <strong>工商银行电子汇款单</strong>
    </div>
    <table border="1px">
        <tr>
            <th colspan="2">回单类型</th>
            <!-- <td></td> -->
            <td>网上转账汇款</td>
            <td colspan="2">指令序号</td>
            <!-- <td></td> -->
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <th rowspan="4">收款人</th>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4">付款人</td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <td>卡号</td>
            <td>000000000001</td>
            <!-- <td></td> -->
            <td>卡号</td>
            <td>000000000002</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <td>地区</td>
            <td>南京</td>
            <!-- <td></td> -->
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <td>网点</td>
            <td>工商江苏南京业务处理中心</td>
            <!-- <td></td> -->
            <td>网点</td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <th colspan="2">币种</th>
            <!-- <td></td> -->
            <td>人民币</td>
            <td  colspan="2">钞汇标志</td>
            <!-- <td></td> -->
            <td>钞票</td>
        </tr>
        <tr>
            <th colspan="2">金额</th>
            <!-- <td></td> -->
            <td>1.00元</td>
            <td colspan="2">手续费</td>
            <!-- <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>2017年6月1日</td>
            <td colspan="2">时间戳</td>
            <!-- <td></td> -->
            <td>2017-06-01-13.00.00,00000</td>
        </tr>
    </table>
    <div>
        <br>
        <small>票据打印时间：2017-06-01 15：00：12</small><br>
        <br>
        <small><s>票据打印单位：江苏徐州业务中心</s></small><br>
        <br>
        <small>业务员：大曾</small><br>
    </div>
</body>
</html>

三、古诗词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>古诗</title>
</head>
<body>
    <p style="font-size: 100px;margin-top: 0px;margin-bottom: 0px;">沁园春·长沙</p>
    <p style="font-size: 100px;margin-top: 0px;margin-bottom: 0px;"><small>毛泽东</small></p>
    <img src="https://img0.baidu.com/it/u=652234263,3035500774&fm=253&app=138&f=JPEG?w=800&h=1689" alt=" 图片不见了"
        align="left" style="width: 500px;height: auto;">
    <pre style="font-size: 50px;">
        独立寒秋，湘江北去，橘子洲头。

        看万山红遍，层林尽染；漫江碧透，百舸争流。

        鹰击长空，鱼翔浅底，万类霜天竞自由。

        怅寥廓，问苍茫大地，谁主沉浮？

        携来百侣曾游，忆往昔峥嵘岁月稠。

        恰同学少年，风华正茂；书生意气，挥斥方遒。

        指点江山，激扬文字，粪土当年万户侯。

        曾记否，到中流击水，浪遏飞舟？
    </pre>
</body>
</html>

四、豆瓣电影界面

​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣电影</title>
</head>
<body style="background-color: bisque;">
    <p style="font-size: 30px;"><b>热门电影板块</b></p>
    <hr>
    <table>
         <tr>
            <th style="width: 200px;">最近热门电影</th>
            <td style="width: 80px;">热门</td>
            <td style="width: 80px;">最新</td>
            <td style="width: 100px;">豆瓣高分</td>
            <td style="width: 100px;">冷门佳片</td>
            <td style="width: 80px;">华语</td>
            <td style="width: 80px;">欧美</td>
            <td style="width: 80px;">韩国</td>
            <td style="width: 80px;">日本</td>
            <td colspan="2">更多&gt;&gt;</td>
            <!-- <td></td> -->
         </tr>
    </table>
    <hr>
    <table style="width: 1000px;">
        <tr>
            <th>
                <a href="https://ikan6.vip/vodplay/249599-1-1/" title="周处除三害" target="_blank">
                    <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2905021483.jpg" alt="周处除三害">
                    <p>周处除三害</p>
                </a>
            </th>
            <th>
                <a href="https://ikan6.vip/vodplay/223238-1-1/" title="铁雨" target="_blank">
                    <img src="https://inews.gtimg.com/om_ls/O-eHLgBqrtjLc7Y6esvdbHHYJUXkyKflDEXHY5-ZROZe0AA/0" alt="铁雨">
                    <p>铁雨</p>
                </a>
            </th>
            <th>
                <a href="https://ikan6.vip/vodplay/245618-1-1/" title="铁雨2：首脑会谈" target="_blank">
                    <img src="https://inews.gtimg.com/om_ls/Od9FVHxUvoTlU4vl_Gv8IzotfxMAFwaJ2wWWwgzR-ijx4AA/0" alt="铁雨2：首脑会谈">
                    <p>铁雨2：首脑会谈</p>
                </a>
            </th>
        </tr>
        <tr>
            <th>
                <a href="https://ikan6.vip/vodplay/57008-1-1/" title="新世界" target="_blank">
                    <img src="https://uc0.qpic.cn/qqgameedu/0/8ef445b38e0c9a047acabb1caaaafd4b_0/0" alt="新世界">
                    <p>新世界</p>
                </a>
            </th>
            <th>
                <a href="https://ikan6.vip/vodplay/3057-1-1/" title="霸王别姬" target="_blank">
                    <img src="https://p9-bk.byteimg.com/tos-cn-i-mlhdmxsy5m/04f00351a69c468498320e4596be4e5e~tplv-mlhdmxsy5m-q75:0:0.image" alt="霸王别姬">
                    <p>霸王别姬</p>
                </a>
            </th>
            <th>
                <a href="https://ikan6.vip/vodplay/151696-1-1/" title="甜蜜蜜" target="_blank">
                    <img src="https://inews.gtimg.com/newsapp_ls/0/15823019873/0" alt="甜蜜蜜">
                    <p>甜蜜蜜</p>
                </a>
            </th>
        </tr>
    </table>
</body>
</html>

​

咦唔喻iuv
关注
html5入门练习（一）
syl011002的博客
09-25 564
表单练习 <!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"> <titl.
html5基础练习作品集
02-19
一些简单的HTML5的网页设计，有些比较欠缺代码，有些比较完整，dell的那个页面比较有参考意义
【网页前端设计HTML】HTML练习题（一）
最新发布
weixin_53597021的博客
07-11 404
二、网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。Presto(Opera前内核) (已废弃)， Opera现已改用Google Chrome的Blink内核。1.网页的形成，网页要依托什么来展示？五大浏览器及其内核是什么？2．如果网页中出现乱码，我们一般使用（ ）来解决。3．下面选项中，属于HTML正确注释方式是（ ）。内核 webkit–>blink。B. //注释内容//默写HTML基本结构。内核：Trident。三、HTML基本结构。
HTML5入门小练习
qq_30635247的博客
04-30 403
通过学习，本次小练习实现了了html基础的一些编写，但是写的很粗糙，仍需多加练习。 效果图1： 代码： <!DOCTYPE html> <html lang="zn-CH"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新闻..
HTML5练习4
weixin_30537451的博客
05-27 198
1、菜单条 主要代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .a1 { background-color:#F00; width:100px; ...
HTML5基础基础练习题
qq_42663223的博客
10-27 4177
HTML5基础基础练习题 学习内容： 提示：HTML5是标记语言大多数都是记单词不过基础最重要 例如： 1、 掌握单表签->例如<br> 2、 掌握双标签->例如<p><p> 3、 掌握超链接->例如<a href=" “><a> 4、 掌握img图片->例如<img src=” "> 基础习题一李清照的词 提示：根据下图使用HTML5标记语言实现 代码如下所示： <!DOCTYPE html>
html5练习
小甜甜专栏
01-05 1096
字体下载 css3 @font-face css3
Html5程序设计基础教程(练习题参考答案)
06-25
HTML5程序设计基础教程主要涵盖了HTML5的基本概念、新特性以及JavaScript编程和表单处理等内容。以下是这些知识点的详细说明： 1. HTML5概述： - HTML5是超文本标记语言的第五个版本，增加了许多新的元素和API，...
html5 canvas米字格式手写文字练习代码.zip
09-26
这个“html5 canvas米字格式手写文字练习代码”压缩包提供了一个实例，可以帮助学习者更好地理解和掌握Canvas API的用法，特别是关于文字绘制的部分。 在HTML5中，Canvas是一个二维绘图上下文，通过JavaScript来...
HTML5和CSS3编程从基础到应用 练习文件
08-31
这个“HTML5和CSS3编程从基础到应用”的练习文件集，涵盖了从基本概念到高级特性的全面内容，共13个章节，源自清华大学出版社。 **HTML5知识点：** 1. **基础结构**：HTML5的基础结构包括文档类型声明`<!DOCTYPE ...
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">
HTML5：HTML5练习
02-16
HTML5 HTML5练习
html5字体练习
01-05
本案例是关于css3中@font-face的练习，可正常运行，提供了三种字体，可供学习使用。
html5 练习代码
04-23
html5 练习代码 入门学习使用 简单实用
HTML5练习 - 表单练习
有时四月会降雪的博客
02-29 1005
HTML5 练习题 - 表单练习 效果展示 HTML <form> <fieldset> <!-- caption --> <legend>学生档案</legend> <!-- userName --> <label for="userNam...
HTML网页小练习
qq_44376244的博客
06-01 461
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为
HTML5网页设计练习
m0_66168318的博客
04-11 569
最终效果图： 素材： 更多>> 奥斯卡影后的纽约俭约豪宅奥斯卡影后娜塔莉—波特曼的这间公寓，整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感… 流光溢彩 施华洛世奇系列珠宝璀璨耀巴世：巴黎古董双年展金融巨头眼中的十大品牌名表 思路： 1.文字部分分为四个区域，即四个盒子（外面还有一个大盒子，共五个div），使用块元素里的div标签，分别给类名（标签语义化）。 2.添加背景图。background，盒子的宽度和高度等于图片的宽度和高度。 3.左上角如何到达目标位置？用小盒.
css网页布局小练习，文字案例，小米官网卡片案例
m0_51045721的博客
02-18 1546
1、网页排版 目标效果图如下： <!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">
动画H5
adminFanj的博客
10-08 501
html> html> head lang="en"> meta charset="UTF-8"> title>Titletitle> style> span.change:hover{ color: red; font-size:50px ; } a.change:hover
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值