HTML练习

最新推荐文章于 2024-03-29 08:52:21 发布
最新推荐文章于 2024-03-29 08:52:21 发布
阅读量388 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45454695/article/details/102599282
版权

这是自己做的一个小练习

1. QQ免费申请

用到了表格嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <table width="70%" align="center" cellpadding="5">
        <caption>免费QQ申请</caption>
        <tr>
            <td bgcolor="blue">基本信息</td>
        </tr>
        <tr>
            <td>
                <table align="center" width="500px">
                    <tr>
                        <td width="120px">*昵称：</td>
                        <td><input type="text" style="width: 300px"></td>
                    </tr>
                    <tr>
                        <td  width="120px">*年龄：</td>
                        <td><input type="text"  style="width: 300px"></td>
                    </tr>
                    <tr>
                        <td  width="120px">*性别：</td>
                        <td>
                            <input type="radio" name="sex" >男
                            <input type="radio" name="sex">女
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="blue">设置密码</td>
        </tr>
        <tr>
            <td>
                <table align="center" width="500px">
                    <tr>
                        <td width="120px"> *密码：</td>
                        <td><input type="password"  style="width: 300px"></td>
                    </tr>
                    <tr>
                        <td width="120px">*确认密码：</td>
                        <td><input type="password"  style="width: 300px"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="blue">所在地区</td>
        </tr>
        <tr>
            <td>
                <table width="500px" align="center">
                    <tr>
                        <td width="120px">*国家：</td>
                        <td>
                            <select name="" id="" style="width: 300px">
                                <option value="中华人民共和国" >中华人民共和国</option>
                                <option value="美国">美国</option>
                                <option value="英国">英国</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120px">*省份：</td>
                        <td>
                            <select name="" id="" style="width: 300px">
                                <option value="陕西">陕西</option>
                                <option value="江苏">江苏</option>
                                <option value="四川">四川</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120px">*城市：</td>
                        <td>
                            <select name="" id="" style="width: 300px">
                                <option value="西安">西安</option>
                                <option value="苏州">苏州</option>
                                <option value="成都">成都</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="blue">密码保护信息</td>
        </tr>
        <tr>
            <td>请填写密码保护信息，用于丢失密码时，找回密码！</td>
        </tr>
        <tr>
            <td>
                <table align="center" width="500px">
                    <tr>
                        <td width="120px">*问题1：</td>
                        <td>
                            <select name="" id="" style="width: 300px">
                                <option value="">请选择提示问题</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120px">*答案1：</td>
                        <td><input type="text" style="width: 300px"></td>
                    </tr>
                    <tr>
                        <td width="120px">*问题2：</td>
                        <td>
                            <select name="" id="" style="width: 300px">
                                <option value="">请选择提示问题</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="120px">*答案2：</td>
                        <td><input type="text"style="width: 300px"></td>
                    </tr>
                    <tr>
                        <td colspan="2">请填写电子邮件地址，可用于“密码找回”和“密码申诉”等操作。</td>
                    </tr>
                    <tr>
                        <td width="120px">安全邮件地址：</td>
                        <td><input type="text" style="width: 300px"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr bgcolor="blue">
            <td>相关条款服务
                <br>
                <input type="checkbox">我同意<a href="">《腾讯QQ用户服务条款》</a>
            </td>
        </tr>
        <tr align="center">
            <td><input type="submit"></td>
        </tr>
    </table>
</form>
</body>
</html>

出来的效果图
在这里插入图片描述

2、在线订单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <table align="center" width="40%" cellpadding="5" cellspacing="0">
        <tr bgcolor="#7fff00">
            <td width="100px">产品名称：</td>
            <td><input type="text" style="width: 200px">&nbsp;*</td>
        </tr>
        <tr bgcolor="#ffefd5">
            <td width="100px">定购数量：</td>
            <td><input type="text" style="width: 150px"></td>
        </tr>
        <tr bgcolor="#7fff00">
            <td width="100px">付款方式：</td>
            <td>
                <select name="" id="">
                    <option value="-付款方式-">-付款方式-</option>
                </select>&nbsp;*
            </td>
        </tr>
        <tr bgcolor="#ffefd5">
            <td width="100px">公司名称：</td>
            <td><input type="text" style="width: 200px"></td>
        </tr>
        <tr  bgcolor="#7fff00">
            <td width="100px">联系电话：</td>
            <td><input type="text" style="width: 150px">&nbsp;*</td>
        </tr>
        <tr bgcolor="#ffefd5">
            <td width="100px">联系人：</td>
            <td><input type="text" style="width: 150px">&nbsp;*</td>
        </tr>
        <tr  bgcolor="#7fff00">
            <td width="100px">传真：</td>
            <td><input type="text" style="width: 150px"></td>
        </tr>
        <tr  bgcolor="#ffefd5">
            <td width="100px">联系地址：</td>
            <td><input type="text" style="width: 200px">&nbsp;*</td>
        </tr>
        <tr  bgcolor="#7fff00">
            <td width="100px">邮政编码：</td>
            <td><input type="text" style="width: 150px"></td>
        </tr>
        <tr bgcolor="#ffefd5">
            <td width="100px">联系E_mail：</td>
            <td><input type="text" style="width: 180px">&nbsp;*</td>
        </tr>
        <tr  bgcolor="#7fff00">
            <td width="100px">公司网址：</td>
            <td><input type="text" style="width: 180px"></td>
        </tr>
        <tr  bgcolor="#ffefd5">
            <td  colspan="2" align="center"><input type="button" value="递交"\>　　<input type="reset"></td>
        </tr>
    </table>
</form>
</body>
</html>

效果图
在这里插入图片描述

柚子～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML-简单练习
crraxx的博客
02-24 7560
练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
html的简单例子练习（6个）
小黄呀呀呀的博客
04-19 6237
1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
从零开始学WEB前端——HTML实战练习
最新发布
2301_76267999的博客
03-29 833
作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。VSCode：插件众多，拓展性强；适用于绝大部分前端开发Sublime Text：界面简洁，轻量级启动快速。HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。
HTML练习题：
qq_50692350的博客
09-21 351
HTML
HTML面试题：50道含答案和代码示例的练习题
三拾的博客
05-31 4765
答案：meta标签用于向浏览器提供网页的元数据，包括网页的描述、关键词和编码等信息。答案：块级元素是独立的元素，会独占一行，并且可以设置宽度、高度、边距和填充等属性。答案：表单中的输入框可以是文本输入框、密码输入框、单选框、复选框、下拉列表框等。行内元素是内联的元素，不会独占一行，并且只能设置字体、颜色、背景等属性。答案：iframe标签用于在网页中嵌入另一个网页，创建一个内嵌框架。答案：属性是HTML标签的特性，用于描述标签的行为和外观。答案：标签是HTML中的元素，用于描述网页的结构和内容。
css网页布局小练习，文字案例，小米官网卡片案例
m0_51045721的博客
02-18 1470
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">
html练习
02-22
html练习
html 练习素材
01-02
html 练习素材
HTML练习之qq飞车首页
03-16
HTML练习之QQ飞车首页图片资源
HTML练习文档 HTML练习文档
01-14
html
html练习.zip
07-25
其中部分文件为自己建立的，是自己在学习HTML知识时做的练习，部分文件下载自siki学院的学习资料，仅供学习参考
html的一些小练习
08-16
html的一些小练习，javascript的一些小应用，
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
qq_55154022的博客
11-20 403
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
从零开始学WEB前端——HTML实战练习，推荐一个GitHub项目
m0_60452070的博客
03-20 876
项目 1描述项目 1项目 2描述项目 2。
HTML简介和标签练习（一）
haha的博客
03-11 507
HTML简介和常见的文本标签练习
第1章 补充案例（HTML练习题）
Ice Point.
02-03 4565
一、案例描述 1、 考核知识点 HTML5文档基本格式 2、 练习目标  初步了解HTML5文档基本格式。  能够运用HTML5文档基本格式制作简单的页面。 3、 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 4、 案例分析 效果如图1-1所示。 具体实现步骤如下： a) 新建Dreamweaver默认文档。
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
Html入门案例
weixin_56309075的博客
08-06 519
Html 1.html简介 ​ HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。 1.1 Html练习 1.1.1 html超链接 <a
html 练习题和答案
07-07
HTML 练习题和答案是为帮助学习者巩固和提升他们在HTML方面的知识，以下为一些常见的HTML练习题和答案： 1. 创建一个HTML文件，包含一个标题为"我的第一个网页"的标题标签。 ```html <!DOCTYPE html> <html> 我的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值