青岛市建设监理协会网站,网站优化培训班,国产十大erp软件,做图网站有哪些东西由于工作需求#xff0c;学习了一些html的相关知识#xff0c;最终应用到打印功能上使用。
HTML是指超文本标记语言#xff08;HyperText Markup Language#xff09;。它是一种用于创建和呈现互联网上页面的标准标记语言。HTML是Web开发的基础#xff0c;是构建网页和应…由于工作需求学习了一些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 属性可为元素提供一个标识名称以便进一步为元素指定样式或进行其他操作时使用。
属性应该包含
在属性与元素名称或上一个属性如果有超过一个属性的话之间的空格符。属性的名称并接上一个等号。由引号所包围的属性值。 单标签空元素标签名标签名 属性名“属性值”。大部分元素标签都是是双标签的形式具有开始标签、结束标签。也有小部分元素没有结束标签称为单标签或空元素。HTML5中的单标签不需要写斜杠/,如 hrbr,img,input,link,meta,base、table中的 col,hrsource;,embed等。。。 HTML中的注释格式!–注释–
剩下的属性就不继续多讲了上面提供的学习链接已介绍的很详细了。
二、HTML表格
1、表格——创建
表格由行和列组成创建时表格、表格的行、表格的列是分开创建的。 table标签用来创建表格tr标签用来创建行td标签用来创建列 table tr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table效果如下 我们只能看到六个元素呈表格状的表现形式但是没有表格的边框那是我们丢掉了表格重要的属性 border它是用来控制表格边框宽度的。 加上它 假设 border“2px”
table border2px tr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table我们再看一下效果 假设 border“10px” 效果
2、表格——设置表格的宽、高 我们用 border 来规定表格的边框的宽度 width 规定表格的宽度 height 规定表格的高度。 设置属性的先后顺序为 border – width – height 创建一个表格设置它的宽为100%高为200px边框为1px
table border1px width100% height200px tr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table效果如下 假设width“100px” 假设width“200px” 假设height“100px” 假设height“200px”
3、表格——cellpadding
在上边我们设置了宽、高可是内容是紧挨着边框的那怎么使表格的内容和边框有间距呢 我们用 cellpadding 来规定单元边沿与其内容之间的空白。 来张图说明一下具体是哪里
灰色部分表示cellpadding它的值表示灰色部分的宽度。 创建一个表格它的边框宽度为2px cellpadding值为6
代码如下
table border2 cellpadding6tr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table
效果如下 假如cellpadding“1px” 假如cellpadding“10px” 4、表格——cellspacing
前面表格看起来就好像有两个边框一样怎么让它变成一条边框呢
这是因为表格与th/td元素都有独立的边界。 我们用 cellspacing 来规定单元格之间的空间。 这里用图来说明如图所示
双箭头的大小表示 cellspacing 属性的值。 创建一个表格它的边框宽度为1pxcellpadding值为10cellspacing值为0 代码如下
table border1px cellpadding10 cellspacing0tr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table效果如下
假设cellspacing“0”
假设cellspacing“10” 5、表格——表格的标题
表格一般都有标题来说明这个表格具体是做什么的。 我们用caption标签来创建表格标题。 需要注意的是它的位置紧随table标签之后。
添加一个表格标题内容为“信息统计”。
代码所示
table border1px cellpadding10 cellspacing0caption信息统计/captiontr td姓名/td td年龄/td /tr tr td张三/td td18/td /tr
/table效果如图所示 6、表格——td标签的 rowspan 属性
我们想要创建一个成绩表格时只能每行都出现“科目”这个元素 科目是包括语文、数学、英语的每行都出现看起来分类不对那么如何修改成融合的呢这里就用到了rowspan属性它是用来规定单元格可横跨的行数的。 我们用 rowspan 来规定单元格可横跨的行数。 修改成如下效果 代码如图 7、表格——td标签的 colspan 属性
上面我们讲了 rowspan 是用来规定单元格可横跨的行数的那我们想要横跨列该怎么办呢 我们用 colspan 来规定单元格可横跨的列数。 效果如图 代码如图 8、举一个表格的综合案例吧
效果如下 边框为2px 宽为100% cellspacing为0 cellpadding为6 标题内容为本周财政计划 在 style 标签里设置文本为居中对齐。 代码如下
html
headmeta charsetUTF-8
/head
body!-- ********* Begin ********* --stylebody{margin:30px;}table{/*居中对齐*/text-align:center; }/style!--设置表格--table border2 cellpadding6 cellspacing0 width100% caption本周财政计划/captiontrtd rowspan2 colspan2项目/tdtd colspan2本周发生/tdtd rowspan2备注/td/trtrtd收入/tdtd支出/td /trtrtd rowspan3收入/tdtd贷款收回/tdtd8700/tdtd0/tdtd/td/trtrtd内部转款/tdtd6000/tdtd0/tdtd/td/trtrtd收入合计/tdtd14700/tdtd0/tdtd/td/trtrtd rowspan3支出/tdtd采购支出/tdtd0/tdtd5000/tdtd/td/trtrtd工资支出/tdtd0/tdtd7000/tdtd/td/trtrtd支出合计/tdtd0/tdtd12000/tdtd/td/tr/table !-- ********* End ********* --
/body
/html三、Qt中加载HTML并显示并打印
需要在pro文件中加 QT printsupport 具体实现例程我放到下面了 https://download.csdn.net/download/cao_jie_xin/88563876
