從零到英雄：探索HTML世界的神奇之旅 - 初學(xué)者友

從零到英雄：探索HTML世界的神奇之旅 - 初學(xué)者友好指南

建你的第一個(gè)HTML頁面

在學(xué)習(xí)前端開發(fā)的過程中，創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁面是邁出的第一步。在這篇文章中，我們將指導(dǎo)你如何創(chuàng)建一個(gè)基本的HTML頁面，并將其保存為.html文件。

什么是HTML？

HTML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言。它通過定義一系列的元素（elements），告訴瀏覽器如何展示網(wǎng)頁的內(nèi)容。每個(gè)HTML元素都由開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。例如，一個(gè)簡(jiǎn)單的段落可以使用<p>標(biāo)簽來定義：


<p>這是一個(gè)段落。</p>

如何創(chuàng)建一個(gè)HTML頁面？

創(chuàng)建一個(gè)HTML頁面非常簡(jiǎn)單。你需要做的是編寫HTML代碼，并將其保存為.html文件。以下是一個(gè)簡(jiǎn)單的HTML頁面的例子：


<!DOCTYPE html>

<html>

<head>

<title>我的第一個(gè)HTML頁面</title>


</head>


<body>

<h1>歡迎來到我的網(wǎng)站</h1>


<p>這是一個(gè)簡(jiǎn)單的HTML頁面。</p>


</body>


</html>

文件結(jié)構(gòu)

<!DOCTYPE html>：聲明文檔類型，告訴瀏覽器這是一個(gè)HTML5文檔。
<html>：根元素，所有的HTML元素都位于此標(biāo)簽內(nèi)。
<head>：頭部元素，包含了文檔的元數(shù)據(jù)，如標(biāo)題、樣式、腳本等。
<title>：定義文檔的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或頁面的標(biāo)簽上。
<body>：主體元素，包含了可見的頁面內(nèi)容，如文本、圖片、視頻等。

如何保存為.html文件？

將上述代碼復(fù)制到一個(gè)文本編輯器（如Notepad、Visual Studio Code等）中，然后將其保存為.html文件。例如，你可以將文件命名為my-first-html-page.html。

打開HTML文件

保存文件后，你可以使用任何現(xiàn)代瀏覽器（如Chrome、Firefox、Safari等）來打開這個(gè).html文件。瀏覽器將自動(dòng)解析HTML代碼，并將其渲染為網(wǎng)頁。

結(jié)語

通過這篇文章，你學(xué)會(huì)了如何創(chuàng)建一個(gè)基本的HTML頁面，并將其保存為.html文件。這只是前端開發(fā)旅程的起點(diǎn)。在接下來的文章中，我們將探索CSS和JavaScript，這些技術(shù)將使你的網(wǎng)頁更加生動(dòng)和互動(dòng)。如果你對(duì)HTML有任何疑問，或者在前端學(xué)習(xí)的道路上遇到任何難題，歡迎在評(píng)論區(qū)留言，我們一起討論和進(jìn)步。

近臨近開學(xué)了，大家都在忙著準(zhǔn)備各種學(xué)習(xí)的資料，準(zhǔn)備在新的學(xué)期好好學(xué)習(xí)，充實(shí)自己。小編身邊的同學(xué)也是如此，最近，小編的同學(xué)小麗就遇到了一個(gè)很棘手的問題。

她想將一個(gè)網(wǎng)頁的Python學(xué)習(xí)的教程打印下來，方便自己來學(xué)習(xí)，但是上千頁的教程，如果通過手動(dòng)的方式，一個(gè)一個(gè)的去轉(zhuǎn)成pdf并保存到本地，實(shí)在是麻煩的不。

這就是一個(gè)html轉(zhuǎn)pdf的問題，其實(shí)網(wǎng)上有很多不錯(cuò)的html資源，但是苦于學(xué)習(xí)起來，不方便！于是小編就跟小麗保證，這點(diǎn)小事包在我身上。今天，小編就跟分享一下如何用Python把html資料變成pdf。

01.抓取的學(xué)習(xí)資料

如今網(wǎng)上的在線學(xué)習(xí)資料可謂是多如牛毛，為了方便講解，小編就利用python3.9.2的中文文檔作為演示的例子，來將其抓取并保存到本地，其網(wǎng)頁鏈接如下：

https://docs.python.org/zh-cn/3.9/tutorial/index.html

打開上述鏈接后，大家會(huì)在網(wǎng)頁中找到不同內(nèi)容的鏈接地址，包括了基礎(chǔ)的python字符、python語法等內(nèi)容。

02.獲取網(wǎng)頁鏈接

在上圖中，我們需要格外關(guān)注的是紅色方格標(biāo)注的鏈接，每個(gè)鏈接都會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的子網(wǎng)頁中，而在子網(wǎng)頁中，就是我們想要保存的內(nèi)容。

可以看到，上圖中，在python速覽子頁面中，包含了我們需要提取的文字內(nèi)容。所以將html內(nèi)容保存為pdf的第一步便是獲取到子頁面的鏈接。由于教程大都是固定內(nèi)容，因此對(duì)于教程的網(wǎng)頁，大都采用的是靜態(tài)頁面，在網(wǎng)頁源代碼中可以很輕松地找到子頁面的網(wǎng)頁鏈接。

對(duì)于子網(wǎng)頁的鏈接抓取，程序如下圖所示:

程序中，通過BeautifulSoup庫來解析網(wǎng)頁源代碼，然后提取所有的子頁面鏈接地址并返回，如果抓取失敗，則直接返回None。

03.html轉(zhuǎn)pdf

在得到子網(wǎng)頁的鏈接后，接下來就是將html的子網(wǎng)頁保存為pdf文件。小編使用的pdfkit庫，pdfkit庫可以將網(wǎng)頁保存為pdf文檔。首先小編來介紹一下pdfkit庫的安裝。

下載https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.mxe-cross-win64.7z 并解壓到本地文件中。(后臺(tái)輸入：pdf) 直接獲取。
將解壓文件中的bin文件路徑添加到系統(tǒng)變量Path中。
執(zhí)行pip install pdfkit
執(zhí)行pip install wkhtmltopdf

按照上述的操作流程，就可以安裝pdfkit庫。對(duì)于pdfkit庫的使用，常見的用法有以下三種：

上面的程序主要完成以下幾步：

首先需要指定wkhtmltopdf.exe文件的路徑；

然后分別通過from_url、from_file和from_string的三種方式來保存為pdf文件；
需要注意的是，from_file和from_url中的第一個(gè)參數(shù)必須是一個(gè)html的字符串或者是html文檔的列表；
但是小編通過程序運(yùn)行發(fā)現(xiàn)，from_url第一個(gè)參數(shù)只能是html的字符串，不能是html的列表。

因此，pdfkit庫只能將子網(wǎng)頁保存為單獨(dú)的pdf文檔，無法直接通過pdfkit庫將所有的子網(wǎng)頁拼接成一個(gè)完整的pdf文檔，小編通過PyPDF2庫中的PdfFileMerger類來實(shí)現(xiàn)pdf文檔的拼接。程序如下圖所示。

程序中首先將所有的html網(wǎng)頁保存為單獨(dú)的pdf文檔，然后通過PdfFileMerger類對(duì)象來實(shí)現(xiàn)pdf文檔的拼接。最后就可以得到全部的pdf內(nèi)容。最后我們通過視頻的展示，來看一下程序的效果吧。

除此之外，程序不光可以抓取python3.9的中文文檔，針對(duì)其他的在線文檔，只需要對(duì)獲取網(wǎng)頁鏈接的程序進(jìn)行修改即可抓取，例如對(duì)于Flask中文文檔的抓取，程序只需要按照下圖進(jìn)行修改，即可將Flask的在線文檔保存為PDF文檔。

04.總結(jié)

學(xué)習(xí)Python其實(shí)非常有趣，也很有用。因?yàn)镻ython有大量的現(xiàn)成的庫，可以幫助我們把工作中的很多瑣碎的煩事輕松解決。小編將上述的程序稍加修改，很快就幫阿麗搞定了教程，保存為pdf發(fā)送給了她，小編與女神的關(guān)系更拉近了一步

在線咨詢

上一篇：京東們疑似下架無限極；小米回應(yīng)下線路由器“自動(dòng)重啟”
下一篇：html開發(fā)培訓(xùn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商