【无标题】学习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

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QEMU Guest Agent本地提权漏洞处理(CVE-2023-0664)

QEMU Guest Agent本地提权漏洞处理(CVE-2023-0664)

一、漏洞描述 QEMU Guest Agent&#xff08;qga&#xff09;类似于vmware中的 vmtools&#xff0c;相关安全报告显示它的Windows版本安装程序存在本地提权高危漏洞&#xff08;CVE-2023-0664&#xff09;&#xff0c;攻击者可利用该漏洞进行本地权限提升&#xff0c;获得SYSTE…
阅读更多...
Java互联网+医院智能导诊系统源码 自动兼容H5小程序、Uniapp

Java互联网+医院智能导诊系统源码 自动兼容H5小程序、Uniapp

随着信息和通信技术的进步,智能和移动技术越来越普遍,尤其在医疗保健领域,一些新型卫生信息系统被不断开发出来支持医院和其他卫生保健组织的管理和运作。 智能导诊系统是嵌入到医院和医疗保健卫生中心 HIS系统中的一种专门导诊系统,通过智能语音交互的方式帮助用户完成导诊、分…
阅读更多...
【Mysql学习笔记】3 - 本章作业

【Mysql学习笔记】3 - 本章作业

1.判断 1. 这句话表示ename as name 可以不要这个as&#xff0c;同理后面的sal salary也是别名&#xff0c;而选项D的Annual Salary中间也有空格&#xff0c;程序会判断为as 但as不能连用&#xff0c;所以错误&#xff0c;选D 2.选B&#xff0c;因为null不能加上判断符号<&…
阅读更多...
行情分析 - - 加密货币市场大盘走势（11.23）

行情分析 - - 加密货币市场大盘走势（11.23）

大饼昨日又开始了回调&#xff0c;因为FTF消息&#xff0c;而实际还是要下跌的&#xff0c;耐心等待即可。 空单策略&#xff1a;入场37300 止盈34000-33000 止损39000 以太昨日上涨也很激励&#xff0c;目前上涨打了止损&#xff0c;现在入场是好的机会&#xff0c;等待即可。…
阅读更多...
JS（买奶茶项目）

JS（买奶茶项目）

阅读更多...
揭开未来：塑造数字营销的尖端技术

揭开未来：塑造数字营销的尖端技术

介绍 对于企业来说&#xff0c;要想在瞬息万变的数字营销世界中取得成功&#xff0c;领先一步至关重要。技术正在以惊人的速度发展&#xff0c;开辟了新的机会&#xff0c;正在改变营销人员与消费者的互动方式。这篇文章的目的是重点介绍重新定义数字营销领域的十大创新技术。…
阅读更多...
如何实现在公网下使用navicat图形化工具远程连接本地内网的MariaDB数据库

如何实现在公网下使用navicat图形化工具远程连接本地内网的MariaDB数据库

公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…
阅读更多...
Linux常用命令指南以及shell脚本编程

Linux常用命令指南以及shell脚本编程

常用快捷键 Tab键补齐命令CtrlA键光标移动到最前CtrlE键光标移动到最后CtrlU键清空当前输入的内容上/下键切换之前输入的命令 文件操作 cd test进入test目录cd…返回上一个目录cd.停留在当前目录 .代表当前目录ls显示当前文件夹下面的所有文件/文件夹等ls -all显示当前文件夹…
阅读更多...
WorkPlus实现完全私有化部署，企业数据安全有保障

WorkPlus实现完全私有化部署，企业数据安全有保障

在这个信息化飞速发展的时代&#xff0c;企业正面临着越来越多的数据安全挑战。为了确保数据的安全性和隐私性&#xff0c;WorkPlus迎合市场需求&#xff0c;推出了完全私有化部署方案&#xff0c;为企业提供了全面、可靠的安全保障&#xff0c;成为企业移动办公的首选。 WorkP…
阅读更多...
PLC-Recorder文件存储设置的一些注意事项和技巧

PLC-Recorder文件存储设置的一些注意事项和技巧

存储是PLC-Recorder高速采集软件的三大基本功能之一&#xff08;另外两个是“采集”和“使用”&#xff09;。与内存访问相比&#xff0c;磁盘访问是一个很慢的过程&#xff0c;频繁的读写操作或多或少地会对采集造成影响&#xff0c;因此&#xff0c;也有一些可遵循的规则。 …
阅读更多...
VSDX Annotator v1.16.1(Visio 绘图注释工具)

VSDX Annotator v1.16.1(Visio 绘图注释工具)

VSDX Annotator是一款在Mac上操作MSVisio绘图的工具&#xff0c;提供了广泛的注释可能性&#xff0c;以及在多平台环境中共享可视文档。它确保共有12个注释工具&#xff0c;并允许添加注释、标注、注释、块、图形文件等。该应用程序允许用户在Mac上查看Visio流程图、图表、方案…
阅读更多...
主播-产品对比话术

主播-产品对比话术

主播产品对比手册 一、产品特点对比 1.主播一号:该产品具有高清晰度、低延迟的特点&#xff0c;适用于直播、游戏、教育等多种场景。其特点还包括智能美颜功能&#xff0c;能自动识别人脸&#xff0c;优化肤色和轮廓。 2.主播二号:该产品具有双向音视频功能,用户可以与观众实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023