HTML基础入门——简单网页页面

news2025/1/9 6:45:16

目录

一,网上转账电子账单

​编辑

1,所利用到的标签

2,代码编写

3,运行结果

二,李白诗词

1,所用到的标签

2,照片的编辑

3,代码编写

4,运行结果


一,网上转账电子账单

1,所利用到的标签

  1. P   段落标签,一段是一个内容,段落之间存在间隔
  2. hn (1-6) 标题标签
  3. br   换行
  4. 文本修饰标签(加粗,加斜,加下划线,中划线等等效果)
  5. 加粗:strong / b
  6. 中划线:del

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="1" cellpadding="5" cellspacing="0" width="1000">

    <tr>

        <td colspan="2"><b>回单类型</b></td>

        <td>网上转账汇款</td>

        <td colspan="2"><b>指令序号</b></td>

        <td>HQH000000000000013878172</td>

    </tr>

   <tr>

        <td rowspan="4" width="10" ><b>收款人</b></td>

        <td width="50">户名</td>

        <td>老牟</td>

        <td rowspan="4" width="10" ><b>付款人</b></td>

        <td width="50">户名</td>

        <td>老刘</td>

   </tr>

   <tr>

    <td><b>卡号</b></td>

    <td>0000000000001</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>人民币(大写):壹元整</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>

    <p>票据打印时间:2017年-06-01 15:00:12</p>

    <p><del>票据打印单位:江苏徐州业务中心</del></p>

    <p>操作员:大曾</p>

</table>

</body>

</html>

3,运行结果

二,李白诗词

1,所用到的标签

图片标签:展示图片的标签, “ <img> ”标签就是图片标签。

属性:一般以键值对形式在标签的开始部分

注意:我们要想在自己的网页插入照片,首先将照片保存在本地磁盘文件里,再将其拖到vscode的编译器里

2,照片的编辑

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>

    <h1>将进酒   <small>君不见黄河之水天上来</small></h1>

<table>

    <tr>

        <td>

            <img src="./照片/jmg/李白.jpg">

        </td>

        <td>

            <p>君不见黄河之水天上来,奔流到海不复回。</p>

            <p>君不见高堂明镜悲白发,朝如青丝暮成雪。</p>

            <p>人生得意须尽欢,莫使金樽空对月。</p>

            <p>天生我材必有用,千金散尽还复来。</p>  

            <p>烹羊宰牛且为乐,会须一饮三百杯。</p>

            <P>岑夫子,丹丘生,将进酒,杯莫停。</P>

            <p>与君歌一曲,请君为我倾耳听。</p>

            <p>钟鼓馔玉不足贵,但愿长醉不复醒。</p>

            <p>古来圣贤皆寂寞,惟有饮者留其名。</p>

            <p>陈王昔时宴平乐,斗酒十千恣欢谑。</p>

            <p>主人何为言少钱,径须沽取对君酌。</p>

            <p>五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。</p>

        </td>

    </tr>

</table>

</body>

</html>

4,运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2273630.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

365天深度学习训练营:第N2周:构建词典

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 本周任务: 使用N1周的.txt 文件构建词典&#xff0c;停用词请自定义 1. 导入数据 from torchtext.vocab import build_vocab_from_iterator from collection…

vue2迁移至rsbuild

背景 由于远程机器配置较低&#xff0c;每次运行vue2项目都会非常卡。后期项目文件、路由更多的时候&#xff0c;启动到一半直接会跳出open too many files类似的错误&#xff0c;尝试将路由屏蔽掉只剩下开发所需的一个路由也不行&#xff08;不是说webpack的打包是全部打包&am…

升级 Spring Boot 3 配置讲解 — 新版本的秒杀系统怎么做?

学会这款 &#x1f525;全新设计的 Java 脚手架 &#xff0c;从此面试不再怕&#xff01; 1. Spring Boot 3 升级指南 在升级 Spring Boot 3 之前&#xff0c;首先需要确保你的项目已经升级到 Java 17&#xff0c;因为 Spring Boot 3 不再支持 Java 8 和 Java 11。接下来&…

Seata的部署与微服务集成

文章目录 Seata的部署与微服务集成1. Seata介绍2. 部署TC服务2.1 数据准备2.2 配置文件2.3 docker 部署2.4 访问 3. 微服务集成Seata3.1 引入服务3.2 改造配置3.3 添加数据库表3.4 注解标记 Seata的部署与微服务集成 1. Seata介绍 Seata 是一款开源的分布式事务解决方案&…

NFS 组件容器化部署实战指南

文章目录 前言部署NFS服务器K8S部署NFS问题记录 前言 使用nfs-client-provisioner这个应用&#xff0c;利用nfs server给kubernets提供作为持久化后端&#xff0c;并且动态提供pv。所有节点需要安装nfs-utils组件&#xff0c;并且nfs服务器与kubernets worker节点都能网络连通…

【江协STM32】10-2/3 MPU6050简介、软件I2C读写MPU6050

1. MPU6050简介 MPU6050是一个6轴姿态传感器&#xff0c;可以测量芯片自身X、Y、Z轴的加速度、角速度参数&#xff0c;通过数据融合&#xff0c;可进一步得到姿态角&#xff0c;常应用于平衡车、飞行器等需要检测自身姿态的场景3轴加速度计&#xff08;Accelerometer&#xff…

裸机器搭建k8s部署 1.28.10版本

问了搭建k8s集群踩了很多坑&#xff0c;问题主要出现在网络插件处&#xff0c;因此主要是master节点操作问题。重新走一下流程整理一下笔记。 目录 虚拟机准备 虚拟机 系统版本信息 修改镜像地址 配置静态ip 关闭防火前和交换分区 转发 IPv4 并让 iptables 看到桥接流量…

HCIE-day10-ISIS

ISIS ISIS&#xff08;Intermediate System-to-Intermediate System&#xff09;中间系统到中间系统&#xff0c;属于IGP&#xff08;内部网关协议&#xff09;&#xff1b;是一种链路状态协议&#xff0c;使用最短路径优先SPF算法进行路由计算&#xff0c;与ospf协议有很多相…

70.爬楼梯 python

爬楼梯 题目题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a; 题解思路分析Python 实现代码空间优化代码解释提交结果 题目 题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff…

优质内容在个人IP运营中的重要性:以开源AI智能名片商城小程序为应用实例的深度探讨

摘要&#xff1a;在数字化时代&#xff0c;个人品牌&#xff08;IP&#xff09;的塑造与传播已成为各行各业提升影响力、吸引用户关注、促进商业转化的关键策略。优质内容作为连接个人IP与目标受众的桥梁&#xff0c;其在个人IP运营中的重要性不言而喻。本文旨在深入探讨优质内…

有限元分析学习——Anasys Workbanch第一阶段笔记(8)水杯案例的对称与轴对称处理

目录 1 序言 2 对称处理 2.1 模型处理 2.2 网格划分、约束载荷及接触设置 2.3 计算结果 3 轴对称处理 3.1 对称与轴对称概念 3.2 轴对称问题的应用 3.2.1 创建分析案例 3.2.2 导入并处理模型 3.2.3 网格划分、约束载荷及接触设置 3.2.4 后处理计算结果 1 序言 本章…

网络安全-web渗透环境搭建-BWAPP(基础篇)

01--所需系统环境&#xff1a; 虚拟主机系统部署&#xff08;vmware&#xff0c;虚拟主机创建、虚拟主机网络配置&#xff08;桥接&#xff0c;便于网络中多个主机都能访问虚拟主机&#xff09;、虚拟软件功能&#xff0c;快照、克隆、镜像文件加载&#xff0c;ova文件制作&am…

Java 实现 Elasticsearch 查询当前索引全部数据

Java 实现 Elasticsearch 查询当前索引全部数据 需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后 需求背景 通常情况下&#xff0c;Elasticsearch 为了提高查询效率&#xff0c;对于不指定分页查询条数的查询语句&#xff0c;默认会返回10条数据。那么这就会有…

算能AI计算服务器SE5设备树的二次修改实操

目录 1.大纲 2.实操 2.下载对应文件包 3.解包启动文件 4.修改对应的设备树 5.重启后 教程链接&#xff1a;https://github.com/sophgo/sophon-tools/tree/main/source/pmemory_edit 1.大纲 2.实操 2.1 选择串口&#xff0c;波特率115200&#xff0c;重启设备&#xff0…

Python的Matplotlib库应用(超详细教程)

目录 一、环境搭建 1.1 配置matplotlib库 1.2 配置seaborn库 1.3 配置Skimage库 二、二维图像 2.1 曲线&#xff08;直线&#xff09;可视化 2.2 曲线&#xff08;虚线&#xff09;可视化 2.3 直方图 2.4 阶梯图 三、三维图像 3.1 3D曲面图 3.2 3D散点图 3.3 3D散…

Flutter:封装一个自用的bottom_picker选择器

效果图&#xff1a;单列选择器 使用bottom_picker: ^2.9.0实现&#xff0c;单列选择器&#xff0c;官方文档 pubspec.yaml # 底部选择 bottom_picker: ^2.9.0picker_utils.dart AppTheme&#xff1a;自定义的颜色 TextWidget.body Text() <Widget>[].toRow Row()下边代…

牛客网刷题 ——C语言初阶(6指针)——BC106 上三角矩阵判定

1. 题目描述——BC106 上三角矩阵判定 牛客网OJ题链接 描述 KiKi想知道一个n阶方矩是否为上三角矩阵&#xff0c;请帮他编程判定。上三角矩阵即主对角线以下的元素都为0的矩阵&#xff0c;主对角线为从矩阵的左上角至右下角的连线。 示例 输入&#xff1a; 3 1 2 3 0 4 5 0 0…

力扣刷题:数组OJ篇(下)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 目录 1.轮转数组&#xff08;1&#xff09;题目描述…

《(限)战斗天赋VR》V02122024官方中文学习版

《(限)战斗天赋VR》官方中文版https://pan.xunlei.com/s/VODaeHDXSxw4BNDNl39dxJXnA1?pwdusm5# 一款具有挑战性的基于物理的roguelite剑术格斗游戏&#xff0c;你可以在一个超级无缝的程序地牢中创造自己的战斗风格&#xff0c;体验无与伦比的游戏体验。有80多种敌人变种、10…

《Spring Framework实战》3:概览

欢迎观看《Spring Framework实战》视频教程 Spring Framework 为基于现代 Java 的企业应用程序提供了全面的编程和配置模型 - 在任何类型的部署平台上。 Spring 的一个关键要素是应用程序级别的基础设施支持&#xff1a;Spring 专注于企业应用程序的 “管道”&#xff0c;以便…