【无标题】学习HTML

由于工作需求，学习了一些html的相关知识，最终应用到打印功能上使用。

HTML是指超文本标记语言（HyperText Markup Language）。它是一种用于创建和呈现互联网上页面的标准标记语言。HTML是Web开发的基础，是构建网页和应用程序的检查点之一。

作为新手，首先我了解了一些概念：

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web

https://www.runoob.com/html/html-basic.html

https://www.cnblogs.com/anding/p/16811255.html

https://blog.csdn.net/rulaixiong/article/details/129623458

可以在网站上直接测试：测试网站-菜鸟工具

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

一、HTML元素详解

HTML 是一种格式的标记语言，每一个标签都是以尖括号“<>”来定义的。HTML不区分大小写，HTML中的标签名、属性名都统一小写，都按照小写来处理，就是说如果你大写的也会被转换为小写，⚠️自定义标签、属性时需注意。

<标签名 属性名=“属性值”>内容</标签名>

在这里插入图片描述
一个元素主要部分：开始标签、结束标签与内容相结合，开始标签中还包括属性/值。

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围，表示元素从这里开始或者开始起作用。

  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠/，这表示元素的结尾。

  • 内容（Content）：元素的内容，元素标签内的内容。

  • 属性：属性定义元素的一些额外信息，一个属性就是一个键值对组成属性名=“属性值”，值必须添加引号，多个属性空格隔开。

元素也可以有属性（Attribute）：
在这里插入图片描述
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

属性应该包含：

  1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
  2. 属性的名称，并接上一个等号。
  3. 由引号所包围的属性值。

📢单标签（空元素）：<标签名>，<标签名 属性名=“属性值”>。大部分元素标签都是是双标签的形式，具有开始标签、结束标签。也有小部分元素没有结束标签，称为单标签，或空元素。HTML5中的单标签不需要写斜杠/,如 <hr>，<br>,<img>,<input>,<link>,<meta>,<base>、table中的 <col>,<hr&source;,<embed>等。。。

HTML中的注释格式：<!–注释–>

剩下的属性就不继续多讲了，上面提供的学习链接已介绍的很详细了。

二、HTML表格

1、表格——创建

表格由行和列组成，创建时，表格、表格的行、表格的列是分开创建的。

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列

<table>  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：
在这里插入图片描述
我们只能看到六个元素呈表格状的表现形式，但是没有表格的边框，那是我们丢掉了表格重要的属性： border，它是用来控制表格边框宽度的。
加上它 假设 border=“2px” ，

<table border="2px">  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

我们再看一下效果：
在这里插入图片描述
假设 border=“10px” ，
效果：
在这里插入图片描述

2、表格——设置表格的宽、高

我们用 border 来规定表格的边框的宽度， width 规定表格的宽度， height 规定表格的高度。
设置属性的先后顺序为 border – width – height

创建一个表格，设置它的宽为100%，高为200px，边框为1px：

<table border="1px width="100%" height="200px">  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：
在这里插入图片描述

假设width=“100px”
在这里插入图片描述
假设width=“200px”
在这里插入图片描述
假设height=“100px”
在这里插入图片描述
假设height=“200px”
在这里插入图片描述

3、表格——cellpadding

在上边我们设置了宽、高，可是内容是紧挨着边框的，那怎么使表格的内容和边框有间距呢？

我们用 cellpadding 来规定单元边沿与其内容之间的空白。

来张图说明一下具体是哪里：

灰色部分表示cellpadding，它的值表示灰色部分的宽度。

![在这里插入图片描述](https://img-blog.csdnimg.cn/85c02960d7ac4030b5c600fc2ab0b450.png![在这里插入图片描述](https://img-blog.csdnimg.cn/124cc94b2d384ba3a65cd42e05f02cb2.png

创建一个表格，它的边框宽度为2px， cellpadding值为6

代码如下：

<table border="2" cellpadding="6">
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：
在这里插入图片描述
假如cellpadding=“1px”
在这里插入图片描述
假如cellpadding=“10px”
在这里插入图片描述

4、表格——cellspacing

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这是因为表格与th/td元素都有独立的边界。

我们用 cellspacing 来规定单元格之间的空间。

这里用图来说明，如图所示：

双箭头的大小表示 cellspacing 属性的值。
在这里插入图片描述
创建一个表格，它的边框宽度为1px，cellpadding值为10，cellspacing值为0
代码如下：

<table border="1px" cellpadding="10" cellspacing="0">
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：
在这里插入图片描述

假设cellspacing=“0”
在这里插入图片描述

假设cellspacing=“10”
在这里插入图片描述

5、表格——表格的标题

表格一般都有标题来说明这个表格具体是做什么的。

我们用<caption>标签来创建表格标题。

需要注意的是它的位置：紧随<table>标签之后。

添加一个表格标题，内容为“信息统计”。

代码所示：

<table border="1px" cellpadding="10" cellspacing="0">
	<caption>信息统计</caption>
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如图所示：
在这里插入图片描述

6、表格——<td>标签的 rowspan 属性

我们想要创建一个成绩表格时，只能每行都出现“科目”这个元素，
在这里插入图片描述
科目是包括语文、数学、英语的，每行都出现看起来分类不对，那么如何修改成融合的呢，这里就用到了rowspan属性，它是用来规定单元格可横跨的行数的。

我们用 rowspan 来规定单元格可横跨的行数。

修改成如下效果：
在这里插入图片描述
代码如图：
在这里插入图片描述

7、表格——<td>标签的 colspan 属性

上面我们讲了 rowspan 是用来规定单元格可横跨的行数的，那我们想要横跨列该怎么办呢？

我们用 colspan 来规定单元格可横跨的列数。

效果如图：
在这里插入图片描述
代码如图：
在这里插入图片描述

8、举一个表格的综合案例吧

效果如下：

  • 边框为2px；

  • 宽为100%；

  • cellspacing为0；

  • cellpadding为6；

  • 标题内容为本周财政计划；

  • 在 <style> 标签里设置文本为居中对齐。

  • 在这里插入图片描述
    代码如下：

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align:center;     
    }
    </style>
    <!--设置表格-->
    <table border="2" cellpadding="6" cellspacing="0"  width="100%" >
        <caption>本周财政计划</caption>
        <tr>
            <td rowspan="2" colspan="2">项目</td>
            <td colspan="2">本周发生</td>
            <td rowspan="2">备注</td>
        </tr>
        <tr>
            <td>收入</td>
            <td>支出</td>            
        </tr>
        <tr>
            <td rowspan="3">收入</td>
            <td>贷款收回</td>
            <td>8700</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td>内部转款</td>
            <td>6000</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td>收入合计</td>
            <td>14700</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td rowspan="3">支出</td>
            <td>采购支出</td>
            <td>0</td>
            <td>5000</td>
            <td></td>
        </tr>
         <tr>
            <td>工资支出</td>
            <td>0</td>
            <td>7000</td>
            <td></td>
        </tr>
         <tr>
            <td>支出合计</td>
            <td>0</td>
            <td>12000</td>
            <td></td>
        </tr>
    </table>               
    <!-- ********* End ********* -->
</body>
</html>

在这里插入图片描述

三、Qt中加载HTML并显示，并打印

需要在pro文件中加 QT += printsupport

在这里插入图片描述

具体实现例程我放到下面了：
https://download.csdn.net/download/cao_jie_xin/88563876

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

掌握未来技术趋势，成为领先者——深度解析2023年技术热点

掌握未来技术趋势，成为领先者——深度解析2023年技术热点

掌握未来技术趋势&#xff0c;成为领先者——深度解析2023年技术热点 摘要&#xff1a;本文探讨当前最热门的技术趋势。我们将介绍人工智能、大数据、区块链、5G等前沿技术&#xff0c;并阐述它们如何改变我们的生活。最后&#xff0c;我们将总结如何利用这些技术趋势&#xf…
阅读更多...
中断方式的数据接收

中断方式的数据接收

中断接收简介 回顾之前的代码 之前的代码是 等待标志位RXNE位为1才有数据 进而读取数据存放在变量c中 再根据c变量的数据是为0还是为1进而编写灯亮灭的代码 if语句 但这样的代码明显不符合裸机多任务的编程模型 因为在while中为进程 进程执行的时间不能大于5ms 但是while&…
阅读更多...
pcie-2-rj45速度优化

pcie-2-rj45速度优化

背景： 目前用iperf3打流传输速率达不到要求,千兆实际要求跑到800M以上： 优化方案： 1.优化defconfig: 首先编译user版本验证看是否正常 debug版本关闭CONFIG_SLUB_DEBUG_ON宏控。 2.找ＦＡＥ　，通过更换驱动，或者更新驱动来优化 3.绑定大核： 以８１２５网卡为例，udp…
阅读更多...
企业数字化转型的作用是什么？_光点科技

企业数字化转型的作用是什么？_光点科技

在当今快速变化的商业环境中&#xff0c;数字化转型已成为企业发展的重要策略。企业数字化转型指的是利用数字技术改造传统业务模式和管理方式&#xff0c;以提升效率、增强竞争力和创造新的增长机会。 提升运营效率&#xff1a;数字化转型通过引入自动化工具和智能系统&#x…
阅读更多...
【数据结构】树如何定义 | 如何存储 | 实际应用

【数据结构】树如何定义 | 如何存储 | 实际应用

前言 如上图&#xff0c;A中的孩子的个数是不固定的。我们无法精确的每个不同的根结点有多少个孩子。所以并不能精确知道需要定义多少个孩子节点。 struct TreeNode {int val;struct TreeNode* child1;struct TreeNode* child2;struct TreeNode* child3;//...//这样显然是不能…
阅读更多...
AnalyticDB for PostgreSQL 实时数据仓库上手指南

AnalyticDB for PostgreSQL 实时数据仓库上手指南

AnalyticDB for PostgreSQL 实时数据仓库上手指南 2019-04-016601 版权 本文涉及的产品 云原生数据仓库 ADB PostgreSQL&#xff0c;4核16G 50GB 1个月 推荐场景&#xff1a; 构建的企业专属Chatbot 立即试用 简介&#xff1a; AnalyticDB for PostgreSQL 提供企业级数…
阅读更多...
mysql 行转列 GROUP_CONCAT 试验

mysql 行转列 GROUP_CONCAT 试验

1.概要 很多时候需要用到行专列的方式做数据分析。比如对通讯数据的采集 数据采集结果如下&#xff1a; 变量值采集周期131251132272 我想要看的结果 变量1变量2采集周期351372 就是我想看到相关数据的周期变化情况。 2.试验 2.1创建数据如下&#xff08;表名 tb5&…
阅读更多...
CentOS虚拟机重置账号密码

CentOS虚拟机重置账号密码

虚拟机忘记密码了 一般来说&#xff0c;虚拟机的账号密码&#xff0c;工作中都会有文档记录&#xff0c;如果忘记了可以查看文档。但是也有特例&#xff0c;虚拟机的密码没有记录到文档中&#xff0c;尝试了很多次依然登录失败&#xff0c;这时候就只能重置账号密码了。 1.重…
阅读更多...
使用vcpkg安装库失败的解决方法

使用vcpkg安装库失败的解决方法

1、前言 vcpk是是一款开源的c/c库管理工具&#xff0c;尤其是在windows平台&#xff0c;可以帮助我们很好的管理各种依赖包。 在windows环境做c/c开发的人应该都深有体会&#xff0c;有时候编译需要下载一堆依赖库&#xff0c;导致搭建编译环境特别麻烦。但是&#xff0c;通过v…
阅读更多...
【黑马甄选离线数仓day02_数据采集】

【黑马甄选离线数仓day02_数据采集】

1. 数仓工具使用-DataX 1.1 DataX介绍 ​ DataX 是阿里推出的一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。 ​ 将DataX安装好之后, 仅需要配置Json的采…
阅读更多...
STM32 中断系统

STM32 中断系统

单片机学习 目录 文章目录 前言 一、中断系统 1.1 什么是中断 1.2 中断优先级 1.3 中断嵌套 1.4 C语言中的中断程序 二、STM32的中断通道和中断向量 2.1 中断通道 2.2 嵌套向量中断控制器NVIC 2.2.1 什么是NVIC 2.2.2 NVIC基本结构 2.2.3抢占优先级和响应优先级 2.2.4 NVIC的优…
阅读更多...
【OJ比赛日历】快周末了，不来一场比赛吗？ #11.25-12.01 #17场

【OJ比赛日历】快周末了，不来一场比赛吗？ #11.25-12.01 #17场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-11-25&#xff08;周六&#xff09; #9场比赛2023-11-26…
阅读更多...
分布式链路追踪入门篇-基础原理与快速应用

分布式链路追踪入门篇-基础原理与快速应用

为什么需要链路追踪&#xff1f; 我们程序员在日常工作中&#xff0c;最常做事情之一就是修bug了。如果程序只是运行在单机上&#xff0c;我们最常用的方式就是在程序上打日志&#xff0c;然后程序运行的过程中将日志输出到文件上&#xff0c;然后我们根据日志去推断程序是哪一…
阅读更多...
Selenium介绍及基本使用方法

Selenium介绍及基本使用方法

Selenium是一个开源、免费、简单、灵活&#xff0c;对Web浏览器支持良好的自动化测试工具&#xff0c;在UI自动化、爬虫等场景下是十分实用的&#xff0c;能够熟练掌握并使用Selenium工具可以大大的提高效率。 Selenium简介 Selenium支持多平台、多浏览器、多语言去实现自动化…
阅读更多...
为销售赋能：利用 Splashtop 增强远程培训技术

为销售赋能：利用 Splashtop 增强远程培训技术

远程销售团队这一概念在当今快节奏的商业环境中日益普遍。各公司正在计划在不同地点灵活开展销售业务&#xff0c;希望利用技术优势缩小地域差距。但是&#xff0c;这种向远程销售的转型面临着重大挑战&#xff0c;尤其在培训和发展领域。培训远程销售团队需要采用创新方法&…
阅读更多...
Kafka 控制器（controller）

Kafka 控制器（controller）

Kafka 控制器&#xff08;controller&#xff09; 在kafka集群中 会存在一个或者多个broker&#xff08;一个服务器就是一个broker&#xff09;&#xff0c;其中有一个broker会被选举为控制器 kafka controller &#xff0c;负责管理整个集群中所有副本、分区的状态&#xff0…
阅读更多...
5.1 PBR基础 BRDF介绍

5.1 PBR基础 BRDF介绍

基于物理的渲染&#xff08;Physically Based Rendering&#xff0c;PBR&#xff09;是指使用基于物理原理和微平面理论建模的着色/光照模型&#xff0c;以及使用从现实中测量的表面参数来准确表示真实世界材质的渲染理念。 一、反射率方程 理论基础放在参考链接里。 直接开始…
阅读更多...
什么是steam搬砖中的散户、倒爷和倒狗？三者有什么区别？

什么是steam搬砖中的散户、倒爷和倒狗？三者有什么区别？

csgo倒狗们是如何操盘csgo饰品市场的&#xff1f; 什么是游戏搬砖中的散户、倒爷和倒狗&#xff1f;三者有什么区别&#xff1f; csgo饰品市场有三种人&#xff1a;散户&#xff0c;倒爷和倒狗。 散户&#xff1a;定义和股票市场中的定义是一样的&#xff0c;拥有同类型饰品数…
阅读更多...
STM32入门笔记15_PWR电源管理模块

STM32入门笔记15_PWR电源管理模块

PWR和低功耗模式 PWR简介 PWR(Power Control) 电源控制PWR负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压检测器和低功耗模式的功能可编程电压检测器(PVD) 可以监控VDD电源电压&#xff0c;当VDD下降到PVD阈值以下或上升到PVD阈值之上时&#xff0c;PVD会触…
阅读更多...
ESP32测试DHT11温湿度

ESP32测试DHT11温湿度

ESP32测试DHT11温湿度 arduino导入dht库 2.arduion里 DHT11 代码 #include <DHT.h> #define DHTPIN 4 //修改数据引脚 #define DHTTYPE DHT11 DHT dht(DHTPIN, DHTTYPE); void setup() {Serial.begin(9600);dht.begin(); }void loop() { float h dht.readHum…
阅读更多...
最新文章

Copyright @ 2022~2023