【无标题】学习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.mzph.cn/news/163738.shtml

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

相关文章

宅家追剧神器推荐，高亮轻薄投影仪极米Z7X带你开启追剧新体验

宅家追剧神器推荐，高亮轻薄投影仪极米Z7X带你开启追剧新体验

周末假期怎么玩&#xff1f;相信有不少朋友已经准备好了出游计划&#xff0c;当然也有很多小伙伴想趁周末在家追追剧、看看电影、玩玩游戏放松一下。那么&#xff0c;今天笔者就给大家带来了一款假期娱乐神器——极米Z7X&#xff0c;无论是出游还是宅家追剧&#xff0c;极米Z7X…
阅读更多...
深度解析 Docker Registry：构建安全高效的私有镜像仓库

深度解析 Docker Registry：构建安全高效的私有镜像仓库

文章目录 什么是Docker Registry&#xff1f;Docker Hub vs. 私有RegistryDocker Hub&#xff1a;私有Registry&#xff1a; 如何构建私有Docker Registry&#xff1f;步骤一&#xff1a;安装Docker Registry步骤二&#xff1a;配置TLS&#xff08;可选&#xff09;步骤三&…
阅读更多...
SVD 最小二乘法解 亲测ok!

SVD 最小二乘法解 亲测ok!

线性最小二乘问题 m个方程求解n个未知数&#xff0c;有三种情况&#xff1a; mn且A为非奇异&#xff0c;则有唯一解&#xff0c;xA.inverse()*bm>n&#xff0c;约束的个数大于未知数的个数&#xff0c;称为超定问题&#xff08;overdetermined&#xff09;m<n&#xff0…
阅读更多...
OpenSSL SSL_read: Connection was reset, errno 10054

OpenSSL SSL_read: Connection was reset, errno 10054

包含下面两种错误 一、unable to access https://github.com/username/xxx.git/: OpenSSL SSL_read: Connection was reset, errno 10054二、unable to access https://github.com/username/xxx.git/: Failed to connect to github.com port 443 after 21171 ms: Timed out不同…
阅读更多...
「 Tomcat-pass-getshell 弱口令」

「 Tomcat-pass-getshell 弱口令」

tomcat
阅读更多...
精通Nginx（17）-安全管控之防暴露、限制访问、防DDos攻击、防爬虫、防非法引用

精通Nginx（17）-安全管控之防暴露、限制访问、防DDos攻击、防爬虫、防非法引用

安全是每个系统都需要考虑的关键因素，Nginx在这方面提供了丰富的功能，使我们可以就实际情形做很精细调整。这些功能包括防信息暴露、客户端访问限制、通讯加密、防DDos攻击、防爬虫、防非法引用及防非法域名请求等。 目录 防信息暴露 关闭版本号 关闭目录列表 客户端访问…
阅读更多...
18.oracle的过程和函数

18.oracle的过程和函数

oracle11g的过程和函数 一、过程&#xff08;Procedure&#xff09;1、子程序2、过程的相关语法 二、函数&#xff08;Function&#xff09;1、函数的概念2、函数的创建3、 案例 在Oracle数据库中&#xff0c;过程和函数都是用来封装一系列SQL语句和逻辑操作的数据库对象&#…
阅读更多...
ChatGPT重磅升级！集简云支持GPT4 Turbo Vision, GPT4 Turbo, Dall.E 3,Whisper等最新模型

ChatGPT重磅升级！集简云支持GPT4 Turbo Vision, GPT4 Turbo, Dall.E 3,Whisper等最新模型

在11月7日凌晨&#xff0c;OpenAI全球开发者大会宣布了 GPT-4的一次大升级&#xff0c;推出了 GPT-4 Turbo号称为迄今为止最强的大模型。 此次GPT-4的更新和升级在多个方面显示出强大的优势和潜力。为了让集简云用户能快速体验新模型的能力&#xff0c;我们第一时间整理了大会发…
阅读更多...
VR直播如何打破视角壁垒，提升观看体验？

VR直播如何打破视角壁垒，提升观看体验？

随着数字技术的不断发展&#xff0c;直播行业也发生了新的变革&#xff0c;VR直播也成为了直播行业中新的趋势&#xff0c;那么VR直播是如何打破视角壁垒&#xff0c;提升观看体验的呢&#xff1f; 杭州亚运会那几天&#xff0c;多项比赛热火朝天&#xff0c;无论你是参赛队伍的…
阅读更多...
【double check 读写锁】

【double check 读写锁】

使用double check 读写锁 读多写少场景 记录下 //来源 jdbc 中的查询连接信息 //public abstract class ConnectionUrl implements DatabaseUrlContainer public static ConnectionUrl getConnectionUrlInstance(String connString, Properties info) {if (connString null…
阅读更多...
上市公司常见的印章问题契约锁如何帮您解决？

上市公司常见的印章问题契约锁如何帮您解决？

您知道公司印章的管理和使用是否存在问题&#xff1f;公司内部该如何通过印章问题自查&#xff0c;及时进行风险防治&#xff1f; 印章是上市公司权利的象征&#xff0c;开展“印章管理审查”确保管理和使用合规&#xff0c;也是上市公司内控和监管的一项重要内容。如果存在不合…
阅读更多...
S71200通过PROFINET协议和岛电数字控制器通讯

S71200通过PROFINET协议和岛电数字控制器通讯

项目要求 西门子S71200PLC需要通过PROFINET协议和岛电数字控制器&#xff08;型号&#xff1a;SRS13A&#xff09;通讯&#xff0c;读取温度的测量值PV和设定值SV。 项目实施 采用NET90-PN-MBT&#xff08;以下简称“网关”&#xff09;&#xff0c;它是一款将Modbus TCP/RT…
阅读更多...
点击按钮，按钮的文字变为倒计时，的小技巧（适用于获取验证码）

点击按钮，按钮的文字变为倒计时，的小技巧（适用于获取验证码）

看效果图&#xff1a; 代码 <a-buttonclick"getSms":disabled"myState.smsSendFlag"v-text"(!myState.smsSendFlag && 获取验证码) || ${myState.time} s" ></a-button>data(){return {myState: {smsSendFlag: false,tim…
阅读更多...
AI数字人的源码独立部署就是你创业的起点

AI数字人的源码独立部署就是你创业的起点

随着AI绘画、chat gpt的爆火&#xff0c;AI时代开始初露矛头的话&#xff0c;那么今年&#xff0c;或许真正是我们全面进入AI时代的元年&#xff0c;一个更新的更智能化的时代正以势不可挡的姿态奔涌而来&#xff01; 晚一步&#xff0c;失去先机&#xff1b;晚一步&#xff0c…
阅读更多...
Notepad-- ubuntu下载安装

Notepad-- ubuntu下载安装

Notepad-- ubuntu下载安装 下载 Gitee链接&#xff1a; https://gitee.com/cxasm/notepad– 安装 sudo apt install *.deb运行 /opt/apps/com.hmja.notepad/files/Notepad--出错 需要安装qt5 sudo apt-get install qt5-default
阅读更多...
网络安全入门教程（非常详细）从零基础入门到精通

网络安全入门教程（非常详细）从零基础入门到精通

网络安全是一个庞大而不断发展的领域&#xff0c;它包含多个专业领域&#xff0c;如网络防御、网络攻击、数据加密等。介绍网络安全的基本概念、技术和工具&#xff0c;逐步深入&#xff0c;帮助您成为一名合格的网络安全从业人员。 一、网络安全基础知识 1.计算机基础知识 了解…
阅读更多...
微服务简介

微服务简介

1、什么是微服务 微服务&#xff08;或称微服务架构&#xff09;是一种云原生架构方法&#xff0c;在单个应用中包含众多松散耦合且可单独部署的小型组件或服务。 这些服务通常拥有自己的技术栈&#xff0c;包括数据库和数据管理模型&#xff1b;通过一个REST API、事件流和消息…
阅读更多...
linux上的通用拍照程序

linux上的通用拍照程序

最近因为工作需要&#xff0c;在ubuntu上开发了一个拍照程序。 为了找到合适的功能研究了好几种实现方式&#xff0c;在这里记录一下。 目录 太长不看版 探索过程 v4l2 QT opencv4.2 打开摄像头 为什么不直接打开第一个视频节点 获取所有分辨率 切换摄像头 太长不看…
阅读更多...
七要素微气象仪气象数据监测助手

七要素微气象仪气象数据监测助手

WX-WQX7 随着科技的发展&#xff0c;气象预测的准确性已成为人们日常生活的重要参考。而七要素微气象仪&#xff0c;作为新型的气象探测设备&#xff0c;以其精细化的数据测量和解析能力&#xff0c;正在改变我们的天气预测方式。 一、产品介绍 七要素微气象仪是一款集成了温…
阅读更多...
某投资公司薪酬激励体系改革项目成功案例纪实

某投资公司薪酬激励体系改革项目成功案例纪实

——优化薪酬结构&#xff0c;实现薪酬公平&#xff0c;提高员工工作积极性 【客户行业】金融行业 【问题类型】薪酬激励 【客户背景】 某投资管理公司位于一线城市&#xff0c;是经市人民ZF批准&#xff0c;在2000年左右设立的市直属综合性投资公司。主要承担ZF重大建设项目…
阅读更多...
最新文章

Copyright @ 2022~2023