HTML基础练习

已于 2024-03-11 16:04:09 修改
阅读量293 收藏
点赞数 2
文章标签： html 前端 数据库
于 2024-03-11 15:55:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74536424/article/details/136625614
版权

1.用户注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
</head>
<body>
    
        <table border="1px" cellspacing="0px" width="300px" bgcolor="lightgray" align="center">
            <form action="https:www.baidu.com">
            <tr>
                <td align="center" colspan="2">
                    用户注册
                </td>
            </tr>
            <tr>
                <td width="30%">用户名</td>
                <td>
                    <input type="text" name="username" >
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>
                    国家
                </td>
                <td>
                    <select name="国家">
                        <option value="中国">中国</option>
                        <option value="俄罗斯">俄罗斯</option>
                        <option value="美国">美国</option>
                        <option value="英国">英国</option>
                        <option value="日本">日本</option>
                        <option value="印度">印度</option>
                        <option value="朝鲜">朝鲜</option>
                        <option value="其他">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <label><input type="radio" name="性别" checked>男&nbsp;&nbsp;&nbsp;</label>
                    <label><input type="radio" name="性别">女</label>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <label><input type="checkbox" name="aihao">写作&nbsp;&nbsp;</label>
                    <label><input type="checkbox" name="aihao">听音乐&nbsp;&nbsp;</label>
                    <label><input type="checkbox" name="aihao">看电影&nbsp;&nbsp;&nbsp;</label>
                    <label><input type="checkbox" name="aihao">体育&nbsp;&nbsp;</label>
                </td>
            </tr>
            <tr>
                <td>省份</td>
                <td>
                    <select name="省份">
                        <option>陕西</option>
                        <option>山东</option>
                        <option>浙江</option>
                        <option>河南</option>
                        <option>河北</option>
                        <option>湖南</option>
                        <option>湖北</option>
                        <option>黑龙江</option>
                        <option>其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>详细住址</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <label>
                    <td>
                        自我介绍
                    </td>
                    <td>
                        <textarea name="自我介绍 " cols="25%" rows="10%"></textarea>
                    </td>
                </label>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit">&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

2.电子汇款单

<!DOCTYPE html>
<html>
   <head>
	  <title>工商银行电子汇款单</title>
	  <meta charset="utf-8">
   </head>
   <body>
	  <h1>工商银行电子汇款单</h1>
      <table border="1" cellpadding="0" cellspacing="0" style="width: 1100px">
             <tr>
             	<td colspan="2" style="width: 100px"><b>回单类型</b></td>
             	<td style="width: 400px">网上转账汇款</td>
             	<th colspan="2" ="width: 100px">指令序号</th>
             	<td style="width:  500px">HQH0000000000000013878172</td>
             </tr>
             <tr>
             	<th rowspan="4" style="width: 20px">收款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老牟</td>
             	<th rowspan="4" style="width: 20px">付款人</th>
             	<td style="width: 80px">户名</td>
             	<td>老刘</td>
             </tr>
             <tr>
                 <td><b>卡号</b></td>
                 <td>000000000001</td>
                 <td><b>卡号</b></td>
                 <td>000000000002</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-06-01-13.00.0000000</td>
             </tr>
      </table>
             <div>票据打印时间：2017-06-01 15：:00:12</div> 
             <div><del>票据打印单位：江苏徐州业务中心</del> </div>
             <div>操作员：大曾</div>

    </body>
</html>

 

 表的嵌套练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
    <table border="1px" cellspacing="0px">
        <tr>
            <th>回单类型</th>
            <td>网上转账汇款</td>
            <th>指令序号</th>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr >
            <td>
                <table border="1px" cellspacing="0px" width="100%" border-top="null">
                    <tr>
                        <th rowspan="4">收<br>款<br>人</th>
                        <td>户名</td>
                    </tr>
                    <tr>
                        <th>卡号</th>
                    </tr>
                    <tr>
                        <td>地区</td>
                    </tr>
                    <tr>
                        <th>网点</th>
                    </tr>
                </table>
            </td>
            <td>
                <table border="1px" cellspacing="0px">
                    <tr>
                        <td>老牟</td>
                    </tr>
                    <tr>
                        <td>000000000001</td>
                    </tr>
                    <tr>
                        <td>南京</td>
                    </tr>
                    <tr>
                        <td>工商江苏南京业务处理中心</td>
                    </tr>
                </table>
            </td>
            <td>
                <table border="1px" cellspacing="0px" width="100%">
                    <tr>
                        <th rowspan="4">付<br>款<br>人</th>
                        <td>户名</td>
                    </tr>
                    <tr>
                        <th>卡号</th>
                    </tr>
                    <tr>
                        <td>地区</td>
                    </tr>
                    <tr>
                        <th>网点</th>
                    </tr>
                </table>
            </td>
            <td>
                <table border="1px" cellspacing="0px" width="100%">
                    <tr>
                        <td>老刘</td>
                    </tr>
                    <tr>
                        <td>000000000002</td>
                    </tr>
                    <tr>
                        <td>杭州</td>
                    </tr>
                    <tr>
                        <td>江苏徐州业务中心</td>
                    </tr>
                </table>
            </td>

        </tr>
        <tr>
            <th>币种</th>
            <td>人名币</td>
            <th>钞汇标志</th>
            <td>钞票</td>
        </tr>
        <tr>
            <th>金额</th>
            <td>1.00元</td>
            <th>手续费</th>
            <td>0.57元</td>
        </tr>
        <tr>
            <th>合计</th>
            <td colspan="3">人名币（大写）：壹元整</td>
        </tr>
        <tr>
            <th>交易时间</th>
            <td>2017年6月1日</td>
            <th>时间戳</th>
            <td>2017-0601-13.00.00,00000</td>
        </tr>
    </table>
    票据打印时间:2017-06-01 15:00:12<br>
    <s>票据打印单位:江苏徐州业务中心</s><br>
    操作员:大管

</body>
</html>

 

3.古诗词 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>古诗词</title>
</head>
<body>
    <h1>
        将进酒
        <small >
            君不见黄河之水天上来
        </small>
    </h1>
    
    <img 
    src="./李白.png"
    align="left"
    ><pre>
    君不见，黄河之水天上来，奔流到海不复回。

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

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

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

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

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

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

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

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

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

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

    五花马、千金裘，呼儿将出换美酒，
    
    与尔同销万古愁！
    </pre>
</body>
</html>

 4.豆瓣电影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门电影板块</title>
</head>
<body>
    <h1 align="center">热门电影板块</h1>
    <hr width="800px">
    <pre align="center"><b><big>最近热门电影</big></b>     热门     最新     豆瓣高分     冷门佳片     华语     欧美     韩国     日本          <a href=https://v.qq.com/>更多>> </a></pre>
    <hr width="800px">
    <table align="center">
        <tr>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E7%8C%9C%E7%81%AB%E8%BD%A6">
                    <img src="./猜火车3.png" width="200px" height="=250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E8%B4%9D%E5%B0%94%E7%A7%91%E5%AE%9E%E9%AA%8C&stag=0&smartbox_ab=">
                    <img src="./贝尔科实验.png" width="200px" height="250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E5%8A%A0%E5%B7%9E%E5%85%AC%E8%B7%AF%E5%B7%A1%E8%AD%A6&stag=0&smartbox_ab=">
                    <img src="./加州公路巡警.png" width="200px" height="250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E6%AD%8C%E5%A3%B0%E4%B8%8D%E7%BB%9D&stag=&smartbox_ab=">
                    <img src="./歌声不绝.png" width="200px" height="250px">
                </a>
            </td>
        </tr>
        <tr align="center">
            <td>猜火车&nbsp;8.1</td>
            <td>贝尔科实验&nbsp;6.0</td>
            <td>加州公路巡警&nbsp;6.8</td>
            <td>歌声不绝&nbsp;6.3</td>
        </tr>
        <tr>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E6%98%8E%E6%97%A5%E7%9A%84%E6%88%91%E4%B8%8E%E6%98%A8%E6%97%A5%E7%9A%84%E6%88%91&stag=0&smartbox_ab=">
                    <img src="./明日的我与昨日的我2.png" width="200px" height="=250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E9%80%9F%E5%BA%A6%E4%B8%8E%E6%BF%80%E6%83%858&stag=0&smartbox_ab=">
                    <img src="./速度与激情8.png" width="200px" height="250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E7%96%BE%E9%80%9F%E7%89%B9%E6%94%BB&stag=0&smartbox_ab=">
                    <img src="./疾速特攻.png" width="200px" height="250px">
                </a>
            </td>
            <td>
                <a href="https://v.qq.com/x/search/?q=%E9%87%91%E5%88%9A%E7%8B%BC3%EF%BC%9A%E6%AE%8A%E6%AD%BB%E4%B8%80%E6%88%98&stag=2&smartbox_ab=4828328">
                    <img src="./金刚狼3：殊死一战.png" width="200px" height="250px">
                </a>
            </td>
        </tr>
        <tr align="center">
            <td>明日的我与昨日的我</td>
            <td>速度与激情8</td>
            <td>疾速特攻</td>
            <td>金刚狼3：殊死一战</td>
        </tr>
    </table>
</body>
</html>

 

m0_74536424
关注
html基础练习 css部分练习 盒模型定位部分练习
11-27
这个压缩包文件中的"html基础练习"部分，很可能是对HTML基本语法、元素、属性等内容的练习题，包括如何创建文档结构，如使用`<html>`, `<head>`, `<body>`等标签，以及如何插入文本、图像、链接等元素，如`<p>`, `...
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基础练习作品集
02-19
这个"html5基础练习作品集"是一个集合，包含了一些初学者或者开发者在学习HTML5时创作的实践项目。通过这些作品，我们可以深入理解HTML5的核心特性和应用场景。 首先，HTML5的核心特性包括语义化标签、离线存储、...
html小练习.docx
08-27
本文档旨在指导初学者掌握 HTML 基础知识，并通过实践练习熟悉 HTML 编程。本文档共分为四页，涵盖 HTML 基础概念、表单设计、图片显示、样式设置等内容。 页 1：块级元素、内联元素和内联块元素的默认显示特征 在...
html 练习素材
01-02
总的来说，这个"HTML练习素材"涵盖了HTML5的基础到高级应用，包括语义化标签、响应式设计、Flexbox布局、表单处理以及多媒体集成等关键知识点。通过实践这些示例，学习者可以系统地提升自己的HTML5编程能力。
HTML基础题目.rar
04-08
文件为HTML基础题目，题目如下，欢迎下载，3-1《七步诗》3-2制作Google Logo效果3-3《关山月》3-4通配符选择器3-5CSS字体样式属性3-6春天3-7你若安好便是晴天3-8CSS层叠性3-9CSS优先级3-10制作新浪博客效果
HTML单页面实现量子纠缠效果
weixin_52236586的博客
11-06 308
【代码】单页面量子纠缠效果。
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 652
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
HTML前端页面设计静态网站-仿百度
2402_86955314的博客
11-02 524
浅浅分享一下前端作业，大佬轻喷~
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 578
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 470
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
IntersectionObserver鼠标在页面左右滑动时，右侧滚动条会上下抖动，但页面不会
poguanba的博客
11-07 164
‌，这通常是由于页面宽度设置不当导致的。当页面内容没有占满屏幕时，右侧不会出现滚动条，但当内容加载更多时，页面宽度设置为auto会导致整个页面向左移动，从而产生抖动现象。
HTML 块级元素和内联（行内）元素详解
Allen-
11-03 195
块级元素是页面中的结构元素，它们独占一行，通常用于搭建页面的主要框架，如段落、容器、标题等。它们无论其内容多少，都会占据父元素的整个宽度。这种特性使得块级元素特别适合用于页面的整体布局和内容的分区组织。内联元素是页面中用于**修饰或嵌入小块内容的元素，它们不会独占一行，可以与其他内联元素或文本同行显示，因此也叫行内元素
HTML字符实体详解
Allen-
11-03 200
HTML 字符实体是在 HTML 文档中用来表示特定字符的特殊编码。这些字符可能因为直接输入而引发解析错误，或某些字符在 HTML 中具有特殊含义（例如，< 和 > 用于标签）。因此，使用字符实体可以确保文本的准确呈现。
HTML第一次作业
qq_74541296的博客
11-04 1365
制作带有下拉悬停菜单的导航栏。
html第一个网页
Qhumaing的博客
11-06 465
创建你的第一个HTML网页是一个激动人心的步骤。
vue中html如何转成pdf下载，pdf转base64,忽略某个元素渲染在pdf中，方法封装
葫芦娃y的博客
11-07 268
vue中html如何转成pdf下载，pdf转base64,忽略某个元素渲染在pdf中，方法封装
【前端】html的8个常用标签
最新发布
Wuweinan_190cm的博客
11-07 629
超文本链接语言——HTML
【HTML】——VSCode 基本使用入门和常见操作
阿华的博客
10-30 1051
html，前端，VSCode使用
HTML基础练习与测试题
"这个资源包含了多个HTML练习题目，旨在帮助学习者巩固HTML基础知识，包括HTML文档的作用、HTML标签的使用、表单元素的理解以及超链接的特性等。这些题目覆盖了HTML的基本结构、元素和属性，是初学者检验学习效果的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值