初识web-----HTML

已于 2024-03-19 20:00:08 修改
阅读量257 收藏 4
点赞数 7
文章标签： 前端 html
于 2024-03-13 21:18:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_65810417/article/details/136659469
版权
本文展示了如何使用HTML和CSS创建一个工商银行的电子汇款单网页，以及设计一个简单的用户注册页面和电影推荐网页。内容涵盖了基本的HTML结构、表单元素和样式设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.制作一个电子汇款单，通过网页的方式显示出来；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工商银行电子汇款单</title>
    <style type="text/css">
        .span{
            height: 10px;
            display: block;
        }
        table,td{
            margin: 0px;
            border: 2px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h3>工商银行电子汇款单</h3>
    <table border="1px">
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH000000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4" style="text-align: center;" width="20px"><b>收款人</b></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4" style="text-align: center;" width="20px"><b>付款人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>0000000000001</td>
            <td><b>卡号</b></td>
            <td>0000000000002</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>
            <!-- <td></td> -->
            <!-- <td></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.00,00000</td>
        </tr>
    </table>
    <div>
            <span class="span">票据打印时间:2017-06-01 15:00:12</span> <br>
            <span class="span"><s>票据打印单位:江苏徐州业务中心</s></span> <br>
            <span class="span">操作员:大曾</span>
    </div>
</body>
</html>
网页效果图： 

2.根据自己的想法，设计一个简单的用户注册页面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        body {
            /* 设置页面的背景图 */
            background: url("./yemian.jpg") no-repeat;
            background-size: 100% 100% ;
            background-attachment: fixed;
        }
        .register{ 
            /* 在背景图中央设计一个图框 */
            width: 50%;
            height: 600px;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
         }
         .control{
            padding: 0 28px;
         }
         #sub{
            font-size: 14px;
            font-family: 宋体;
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: white;
            background-color: #29b2d4;
            border-radius: 6px;
            border: 0;
            float: 160px;
         }
         #res{
            font-size: 14px;
            font-family: 宋体;
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: white;
            background-color: #29b2d4;
            border-radius: 6px;
            border: 0;
            float: 160px;
         }
    </style>
</head>
<body>
    <!-- 布局，为其它标签提供容器 -->
    <div class="register">
        <!-- 在图框的基础上创建表 -->
        <table width="800px" height="100px" align="center">
            <tr>
                <td align="center"><h2>用户注册</h2>
                <form action="https://www.baidu.com" align="center" method="post">
                    <p>用户名称:<input type="text" name="username"></p>
                    <p>登录密码:<input type="password" name="password"></p>
                    <p>重复密码:<input type="password" name="password"></p>
                       <p style="width: 107%;">出生日期：
                      <select>
                        <option>--年份--</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                        <option>2006</option>
                        <option>2007</option>
                        <option>2008</option>
                        <option>2009</option>
                        <option>20010</option>
                      </select> 
                      <select>
                         <option>--月份--</option>
                         <option>1</option>
                         <option>2</option>
                         <option>3</option>
                         <option>4</option>
                         <option>5</option>
                         <option>6</option>
                         <option>7</option>
                         <option>8</option>
                         <option>9</option>
                         <option>10</option>
                         <option>11</option>
                         <option>12</option>
                     </select> 
                     <select>
                         <option>--日期--</option>
                         <option>1</option>
                         <option>2</option>
                         <option>3</option>
                         <option>4</option>
                         <option>5</option>
                         <option>6</option>
                         <option>7</option>
                         <option>8</option>
                         <option>9</option>
                         <option>10</option>
                     </select>
                       </p>
                    <p>电子邮箱:<input type="text" name="e-mail"> </p>
                    <p style="width: 95%;">性别：
                        <input type="radio" name="gender" value="男" checked>男 
                        <input type="radio" name="gender" value="女" >女
                    </p>
                    <p>您的爱好:<input type="text" name="hobby"> </p>
                    <p style="width: 90%;">城市：
                       <select name="city" id="city">
                        <option value="1">武汉</option>
                        <option value=""2>北京</option>
                        <option value="3">上海</option>
                        <option value="4">南京</option>
                        <option value="5">杭州</option>
                        <option value="6">深圳</option>
                        <option value="7">成都</option>
                        <option value="8">合肥</option>
                       </select> 
                    </p>
                    <p style="width: 630px;">自我介绍：</p>
                        <p style="height: 100%;;">
                            <textarea name="10" id="" cols="35" rows="10" placeholder="请在此输入！"></textarea><br>
                           <div class="control">
                            <input type="submit" id="sub" value="提交">
                            <input type="reset" id="res" value="重置">
                            </div>
                        </p>
                </form>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
网页效果图：

还需要不断的进行优化！！！！ 

3.古诗词

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将进酒</title>
	</head>
	<body>
		<div>
		<pre><b style="font-size:50px;">将进酒</b><b style="font-size:40px;">君不见黄河之水天上来</b></pre>
		</div>
		<p style="font-size: 20px">
		<img src="./libai.png" style="float: left;height: 350px;width: 250px;">
			君不见黄河之水天上来，奔流到海不复回。<br>
			君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
			人生得意须尽欢，莫使金樽空对月。<br>
			天生我材必有用，千金散尽还复来。<br>
			烹羊宰牛且为乐，会须一饮三百杯。<br>
			岑夫子，丹丘生，将进酒，杯莫停。<br>
			与君歌一曲，请君为我侧耳听。<br>
			钟鼓馔玉不足贵，但愿长酔不复醒。<br>
			古来圣贤皆寂寞，惟有饮者留其名。<br>
			陈王昔时宴平乐，斗酒十千恣欢谑。<br>
			主人何为言少钱，径须沽取对君酌。<br>
			五花马，千金裘，<br>
			呼儿将出换美酒，与尔同销万古愁。<br>
		</p>
	</body>
</html>
 网页效果图：

 4.电影网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>热门电影板块</h1>
		<hr>
		<table border="0" cellspacing="0" width="1200">
			<tr>
				<td><font size="5"><b>最近热门电影</b></font></td>
				<td align="center"><font size="5">热门</font></td>
				<td align="center"><font size="5">最新</font></td>
				<td align="center"><font size="5">豆瓣高分</font></td>
				<td align="center"><font size="5">冷门佳片</font></td>
				<td align="center"><font size="5">华语</font></td>
				<td align="center"><font size="5">欧美</font></td>
				<td align="center"><font size="5">韩国</font></td>
				<td align="center"><font size="5">日本</font></td>
				<td align="center"><font size="5">更多>></font></td>
			</tr>
		</table>
		<hr>
		<table border="0" cellspacing="0">
			<tr>
				<td><img src="./战狼2.png"></td>
				<td><img src="./唐人街探案3.png"></td>
				<td><img src="./双子杀手.png"></td>
				<td><img src="./雷神.png"></td>
			</tr>
			<tr>
				<td>战狼2  7.5</td>
				<td>唐人街探案3  6.0</td>
				<td>双子杀手  6.8</td>
				<td>雷神  6.3</td>
			</tr>
			<tr>
				<td><img src="./毒液.png"></td>
				<td><img src="./误杀.png"></td>
				<td><img src="./加勒比海盗5.png"></td>
				<td><img src="./金刚狼.png"></td>
			</tr>
			<tr>
				<td>毒液</td>
				<td>误杀 </td>
				<td>加勒比海盗5 </td>
				<td>金刚狼 </td>
			</tr>
		</table>
	</body>
</html>
网页效果图：

 在表格的基础上，新增了一些变化！！！！

繁星日月
关注
html中的人民币符号&yen；
听海边涛声
05-26 839
html中的人民币符号¥
web-view基础使用
weixin_45454281的博客
03-15 2035
webview
JavaEE-初识Servlet
摸鱼胖嘟嘟的博客
02-22 662
打包之前，需要一些准备工作，在pom.xml文件中配置以下代码，注意是和在同一级目录，war包算是给tomcat专门用的，这里不光包含一些.class文件，还可以包括一些配置文件，以及一些依赖的第三方jar包，html，css，js……因为tomcat可能会收到很多请求，这么多请求，咱们需要的是路径里带/hello的这种情况，才会让tomcat来调用hello world 这个类，同时需要保证方法也是doGet方法。(注意和自己创建的目录一致)前者的内容是可变的，根据用户不同的输入，可以得到不同的结果。
初识Web前端-Hello World
weixin_74110437的博客
10-03 1366
初识前端，一同走入前端的世界！
01初识web前端-
weixin_44941576的博客
03-31 543
初识web前端 字体图标 作用 :使用字体图标实现网页中简洁的效果图标。 优点：可以灵活改变图标的样式大小跟颜色 (一)使用方法 前往字体图标网站 Iconfont：https://www.iconfont.cn/ 下载字体包 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地 解压之后,将字体包命名为iconfont 使用link引入iconfont.css文件 <link rel="stylesheet" href="./ic
初识SpringBoot--入门SpringBoot
qq_24428851的博客
09-16 1322
有三四年没有写博客了，一是因为没有时间，二是比较懒，三是当时能力不行。现在要重新写会博客，写博客一方面能分享技术，一方面自己也能有所提高。这是第一篇博客，是SpringBoot最入门简单的博客，随后我们将进入SpringBoot的持久化框架 Mybatis，Mybatis-Plus，关系型数据库Mysql，内存数据库Redis、JWT等单体应用技术。
Web Component-初识
老司机的后备箱
06-29 686
Web Component 有点东西简单来讲就是浏览器提供的原生组件复用方案。主要由三种技术方案实现：Custom elements（自定义元素）。可以用来定义标签（元素）Shadow DOM（影子 DOM）。可以用来做样式隔离HTML templates（HTML 模板）。可以用来定义一个基础的组件的dom结构实现 Web Component 的最基本流程： 接着基于👆创建的创建一个_类组件_ CustomElementRegistry.define() 方法注册自定义标签（元素） 使用该.
初识 H5-day-01
2301_78178746的博客
08-11 92
【代码】初识 H5-day-01。
初识RabbitMQ-概念、安装和使用
weixin_61933613的博客
04-22 1585
摘要：整理列下RabbitMQ相关的内容，包括基本概念、安装（Linux和MacOS）和使用，记录下...
初识 Katalon-Studio 自动化功能测试工具
那一缕寒意，冰封千里
04-18 5595
Katalon-Studio 一款免费的自动化测试工具   小编求助： Katalon 这个单词我查了百度，有道，又问了几个大学生。都不知道怎么发音。但是根据单词音标（拼音）我暂时读他为“卡塔隆”。要是哪个英语贼6的大神希望能给小编指点一下。再此谢过了！   自动化测试是软件测试领域一直比较火热的话题。这些年来，大家都在追求简洁、易用、稳定的方向。有一些工具能够有助于创建简单易行的脚本，但是使用起...
入门html+css初识CSS-WEB前端大作战.docx
05-10
HTML和CSS是构建网页的基础技术，它们使得网页不仅仅是文字和图片的简单堆砌，而是能够形成富有设计感和交互性的网页。...通过学习CSS，可以将网页设计推向一个新的高度，从而使得Web前端开发工作更加高效和专业。
Web前端开发技术-初识JavaScript.pptx
07-07
JavaScript是Web前端开发的核心技术之一，它是一种功能强大的编程语言，专为创建交互式Web页面而设计。在当今数字化世界中，JavaScript几乎无处不在，无论是个人电脑还是移动设备上的网页，其丰富的交互效果和动态...
HTML5应用开发技术-初识HTML5.pptx
03-03
总之，HTML5的引入极大地推动了网页开发的进步，它的简洁和标准化使得开发者能更加高效地构建现代Web应用。理解和掌握HTML5的这些基本概念和技术，对于任何想要涉足Web开发的人来说都是至关重要的。
web前端开发之JavaScript-初识jQuery框架.docx
05-10
在web前端开发中，jQuery可以用于快速获取文档元素、构建动态效果、创建AJAX无刷新网页、增强JavaScript语言能力、提供改进的事件处理、更改网页内容、简化HTML文档操作和事件操作。它的设计宗旨是“写更少的代码，...
阿里云服务器安装nginx并配置前端资源路径（前后端部署到一台服务器并成功访问）
2301_79201170的博客
06-05 1036
​​​运行以下命令，。运行wget命令。您可以通过Nginx开源社区直接获取对应版本的安装包URL，然后通过wget URL的方式将Nginx安装包下载至ECS实例。例如，Nginx 1.21.6的下载命令如下：运行以下命令，，然后。make​./nginx​没有报错信息则代表nginx启动成功！启动防火墙服务放行80端口重加载防火墙使修改生效查看状态重启停止kill -9 端口号。
2025年阿里最新软件测试面试题：Web 测试+接口测试+App 测试
2401_83387413的博客
06-05 815
上面就是我为大家整理出来的一份软件测试工程师发展方向知识架构体系图。希望大家能照着这个体系在1-2年内完成这样一个体系的构建。可以说，这个过程会让你痛不欲生，但只要你熬过去了。以后的生活就轻松很多。正所谓万事开头难，只要迈出了第一步，你就已经成功了一半，古人说的好“不积跬步，无以至千里。”等到完成之后再回顾这一段路程的时候，你肯定会感慨良多。
前端node项目——gif实时生成倒计时（30s内）
编程知识分享，主打前端
06-06 242
node实现api返回gif实时倒计时
45、web实验-抽取公共页面
weixin_54449574的博客
06-06 542
在其他需要使用公共片段的页面中，通过`th:insert`、`th:replace`或`th:include`属性引入公共片段。- **`th:include`**：将公共片段的内容插入到指定标签内部，但不保留公共片段的根标签。- **`th:insert`**：将公共片段的内容插入到指定标签内部，保留原标签。- **`th:replace`**：用公共片段的内容替换指定标签及其内容。-- 引入公共的侧边栏代码 -->-- 引入公共的头部代码 -->-- 引入公共的底部代码 -->
matlab模型死机
最新发布
mirandali的专栏
06-06 218
block被模型调用的时候会刷一遍这个模型的mask，好像是不定时刷，然后如果刷到你的死循环mask回调就挂了。而且2022版本还自己出不来。至于为什么前两天重新配了编译器又可以了，然后又不行，应该是重新配置编译器后，刷新的程序会中断，所以表象是重新配置编译器OK了。2020和2025应该是内部有机制让这种超时自己出来，但是2022没有，也没有任何报错，就是死机，好无语。有的时候前端是不死的，但是编译必死，现象就是点击运行按钮，然后。一般都是mask的回调函数里面有死循环。死在“编译：更新库链接模块”
初识HTML：hello-world的创建与展示
总结来说，"Hello World"作为计算机编程入门的常见示例，对于学习HTML和Web开发尤为重要。它简单直观地介绍了HTML标签、元素、以及如何构建一个基本的网页结构。对于那些对IT行业感兴趣的人来说，理解和掌握"Hello ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值