【無標題】學習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.pswp.cn/news/163738.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/163738.shtml
英文地址，請注明出處：http://en.pswp.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