片由Firmbee在Unsplash上拍攝
在 PyCon US 2022 上,Anaconda 的 CEO 宣布了一項(xiàng)名為 PyScript 的新技術(shù),該技術(shù)允許用戶在瀏覽器中編寫(xiě) Python 代碼。
我們只需要在 HTML 中編寫(xiě)和運(yùn)行 Python 代碼來(lái)構(gòu)建 Web 應(yīng)用程序。這意味著我們不需要擔(dān)心部署,但一切都會(huì)發(fā)生在我們的網(wǎng)絡(luò)瀏覽器中。
您可以在 Web 瀏覽器上構(gòu)建的最酷和最簡(jiǎn)單的東西之一是 Python 可視化,在本指南中,我將向您展示如何使用 PyScript 在您的 Web 瀏覽器上顯示 matplotlib 和 bokeh 可視化。
在此之后,您甚至可以構(gòu)建儀表板并共享 HTML 文件,以便其他人可以在他們的 Web 瀏覽器中看到它。
不想讀書(shū)?你可以看我的視頻代替!
要設(shè)置 PyScript,我們首先需要一個(gè)基本的 HTML 模板。
大多數(shù)文本編輯器和 IDE 都有一個(gè)可以使用的 HTML 模板。您只需要?jiǎng)?chuàng)建一個(gè) HTML 文件,然后鍵入doc或按html回車(chē)鍵。
在 Pycharm 中,我可以在編寫(xiě)doc. 以防萬(wàn)一,您沒(méi)有得到它,這是您可以使用的模板。
現(xiàn)在要使用 PyScript,將以下行添加到<head>HTML 模板中的部分。
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script >
這些行是從PyScript網(wǎng)站中提取的。我會(huì)將它們粘貼在<title>標(biāo)簽下方。
你應(yīng)該有這樣的東西。
偉大的!到目前為止,我們已經(jīng)成功設(shè)置了 PyScript。現(xiàn)在讓我們?cè)谖覀兊木W(wǎng)絡(luò)瀏覽器上繪制一些可視化。
在我們的 Web 瀏覽器上使用 matplotlib 和 bokeh 繪制可視化的步驟有些不同。
讓我們先用 matplotlib 制作一個(gè)線圖并在我們的網(wǎng)絡(luò)瀏覽器中顯示它。
為了制作我們的線圖,首先,我們必須在 HTML 文件中加載 matplotlib。我們<py-env>在下面的代碼段中使用該標(biāo)簽。
此外,在該部分中,我使用標(biāo)簽<body>為我們的繪圖添加了一個(gè)標(biāo)題。<py-script>在該標(biāo)簽內(nèi),我使用 Python 代碼打印出“My Lineplot”字樣。
要查看結(jié)果,我們必須在 Web 瀏覽器中打開(kāi)這個(gè) HTML 文件。在 Pycharm 上,我可以通過(guò)轉(zhuǎn)到右上角并單擊 Chrome 圖標(biāo)輕松地做到這一點(diǎn)。
作者圖片
您也可以在瀏覽器上打開(kāi) HTML 文件,方法是右鍵單擊文件,選擇“打開(kāi)方式”并選擇 Chrome/Safari/Firefox。
選擇瀏覽器后,將打開(kāi)一個(gè)新選項(xiàng)卡。你應(yīng)該看到這個(gè)。
作者圖片
偉大的!到目前為止,我們?cè)跒g覽器中有標(biāo)題?,F(xiàn)在讓我們制作線圖。
在我們編寫(xiě) Python 代碼來(lái)創(chuàng)建線圖之前,在本<body>節(jié)中,我們必須創(chuàng)建一個(gè)<div>包含id該圖的 。id 將是“線圖”
<div id="lineplot"></div>
<py-script>然后我們使用標(biāo)簽創(chuàng)建線圖。這里我們使用output屬性并將其設(shè)置為等于我們之前定義的 id。
<py-script output="lineplot">
# Python 代碼在這里 ...
</py-script>
這是制作線圖的 Python 代碼(你應(yīng)該把它放在py-script標(biāo)簽內(nèi))
偉大的!如果將所有元素放在一起,您應(yīng)該會(huì)在瀏覽器中看到下面的線圖(加載可能需要幾秒鐘)。
作者圖片
如果您無(wú)法將各個(gè)部分組合在一起,您可以在我的Github上找到完整的代碼。
與 Matplotlib 不同,Bokeh 需要在該部分中添加幾行額外的行<head>。
我們來(lái)看一下。
代碼是從PyScrpt Github中提取的,除了我們之前從 PyScript 網(wǎng)站復(fù)制的兩行代碼外,還包括 Javascript 元素(第 8-17 行)等內(nèi)容。
現(xiàn)在讓我們?cè)谠摬糠种刑砑右粋€(gè)<div>和<py-script>標(biāo)簽,<body>以在網(wǎng)絡(luò)上顯示我們的散景圖。
如果將 2 個(gè)片段放在一起并刷新瀏覽器,您應(yīng)該會(huì)看到下圖。
作者圖片
就是這樣!現(xiàn)在您知道如何使用 Python 和 HTML 在 Web 瀏覽器上運(yùn)行可視化。
覽html網(wǎng)頁(yè),查看其源代碼,可以幫助我們了解該版網(wǎng)頁(yè)的信息以及架構(gòu),每個(gè)瀏覽器都是允許用戶查看他們?cè)L問(wèn)的任何網(wǎng)頁(yè)的HTML源代碼的。以下編程獅小師妹就介紹幾個(gè)常見(jiàn)瀏覽器的查看網(wǎng)頁(yè) HTML 源代碼的方法。
方法一
要僅查看源代碼,請(qǐng)按計(jì)算機(jī)鍵盤(pán)上的Ctrl+U。
方法二
右鍵單擊網(wǎng)頁(yè)的空白部分,然后從出現(xiàn)的彈出菜單中選擇“查看網(wǎng)頁(yè)源代碼(V)”。
提示:
在 Chrome 中,按 F12 或 Ctrl+ Shift+I 也會(huì)調(diào)出交互式開(kāi)發(fā)人員工具。此工具提供了與源代碼和 CSS 設(shè)置的更多交互,使用戶可以查看代碼中的更改如何立即影響網(wǎng)頁(yè)。
方法一
要僅查看源代碼,請(qǐng)按計(jì)算機(jī)鍵盤(pán)上的 Ctrl+U。
方法二
右鍵單擊網(wǎng)頁(yè)的空白部分,然后從出現(xiàn)的彈出菜單中選擇“查看頁(yè)面源代碼(V)”。
提示:
在 Firefox 中,按 F12 或 Ctrl+ Shift+I也會(huì)調(diào)出交互式開(kāi)發(fā)人員工具。該工具提供了與源代碼和 CSS 設(shè)置的交互,使用戶可以實(shí)時(shí)查看代碼中的更改如何影響網(wǎng)頁(yè)。
提示:
您可以使用 Firebug 附加組件查看和編輯頁(yè)面的源代碼,并通過(guò)瀏覽器實(shí)時(shí)查看更改。
方法一
要僅查看源代碼,請(qǐng)按計(jì)算機(jī)鍵盤(pán)上的Ctrl+U。
方法二
右鍵單擊網(wǎng)頁(yè)的空白部分,然后從出現(xiàn)的彈出菜單中選擇“查看頁(yè)面源代碼(V)”。
提示:
在Microsoft Edge中,按F12或 Ctrl+ Shift+I 也會(huì)調(diào)出交互式開(kāi)發(fā)人員工具。該工具提供了與源代碼和 CSS 設(shè)置的交互,使用戶可以實(shí)時(shí)查看代碼中的更改如何影響網(wǎng)頁(yè)。
方法一
要僅查看源代碼,請(qǐng)按計(jì)算機(jī)鍵盤(pán)上的Ctrl+U。
方法二
右鍵單擊網(wǎng)頁(yè)的空白部分,然后從出現(xiàn)的彈出菜單中選擇查看源(V)。
提示:
在 Internet Explorer 中,按 F12 會(huì)彈出 DOM 工具。該工具提供了與源代碼和 CSS 設(shè)置的交互,使用戶可以查看代碼中的更改如何立即影響網(wǎng)頁(yè)。
方法一
要僅查看源代碼,請(qǐng)按計(jì)算機(jī)鍵盤(pán)上的Ctrl+U。
方法二
右鍵單擊網(wǎng)頁(yè)的空白部分,然后從出現(xiàn)的彈出菜單中選擇“查看網(wǎng)頁(yè)源代碼(V)”。
提示:
在 360 安全瀏覽器中,按 F12 或 Ctrl+ Shift+I 也會(huì)調(diào)出交互式開(kāi)發(fā)者工具。此工具提供了與源代碼和 CSS 設(shè)置的更多交互,使用戶可以查看代碼中的更改如何立即影響網(wǎng)頁(yè)。
查看完網(wǎng)頁(yè)上的源代碼后,您可能想要退出或關(guān)閉它。關(guān)閉源代碼取決于您用來(lái)打開(kāi)源代碼的方法。
除了使用瀏覽器外,還有一些在線工具可讓您查看任何網(wǎng)頁(yè)的源代碼。這些工具可能會(huì)有所幫助,因?yàn)榇蠖鄶?shù)工具都可以格式化,樣式化和突出顯示代碼,以使其易于閱讀。
以上就是編程獅W3Cschool為你整理的關(guān)于《如何在瀏覽器賬中查看網(wǎng)頁(yè)的HTML源代碼?》的全部?jī)?nèi)容,希望對(duì)你有所幫助~
豬腳本(原飛豬腳本)以按鍵精靈教學(xué)為主,涉及UiBot,Python,Lua等腳本編程語(yǔ)言,教學(xué)包括全自動(dòng)辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁(yè)腳本,安卓腳本,IOS腳本,注冊(cè)腳本,點(diǎn)贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個(gè)領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長(zhǎng).
1.什么是網(wǎng)頁(yè)元素特征字符串?
請(qǐng)參考網(wǎng)頁(yè)特征字符串詳解;
2.Html系列命令
2.1.HtmlSelect命令
1)HtmlSelect命令只能夠根據(jù)Select項(xiàng)的值來(lái)進(jìn)行選擇,注意這里不是顯示在Select項(xiàng)上的文字,而是該項(xiàng)的value。
一個(gè)典型的下拉框HTML代碼如下:
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
這里如果要選擇上海,需要選擇值為2的項(xiàng);
2)級(jí)聯(lián)的下拉列表組合。
在有的網(wǎng)頁(yè)中,會(huì)有幾個(gè)級(jí)聯(lián)的下拉列表,后一個(gè)下拉框會(huì)隨前一個(gè)框的值變化而發(fā)生變化,典型的有注冊(cè)頁(yè)面上的省份城市選擇,HtmlSelect命令能夠觸發(fā)Onchange事件,會(huì)導(dǎo)致后一個(gè)下拉框值發(fā)生變化,但是如果執(zhí)行腳本太快,而導(dǎo)致后一個(gè)未能選中正確的值,可以在前一個(gè)HtmlSelect后加上適當(dāng)?shù)难訒r(shí);
3)多選表單中的列表控件;有的列表支持多選,在有一些個(gè)求職網(wǎng)站中,職業(yè)是可以多選的,這時(shí)候可以用%將多個(gè)需要選擇的值連接起來(lái)傳遞給HtmlSelect命令實(shí)現(xiàn)多選;
2.2.HtmlExists命令
HtmlExists命令,能夠判斷指定特征的元素是否存在,并能夠返回具備該特征的元素的個(gè)數(shù)。這個(gè)命令能夠用來(lái)判斷某個(gè)元素是否存在,如果為0證明不存在;
2.3.HtmlGet命令
HtmlGet命令比較復(fù)雜,但是功能也非常強(qiáng)大,該命令具備兩個(gè)參數(shù),第一個(gè)參數(shù)為獲取類型,目前支持的值如下所示:
序號(hào) 值 適用對(duì)象
1 text 得到指定元素的文本值,對(duì)應(yīng)DOM屬性innerText
2 html 得到指定元素內(nèi)部的HTML代碼,對(duì)應(yīng)DOM屬性innerHTML
3 outerHtml 得到元素整體的HTML代碼,對(duì)應(yīng)DOM屬性的outerHTML
4 value 得到元素的Value值,用于獲取表單元素內(nèi)部的值
5 src 得到圖像元素的src屬性,用于IMG標(biāo)簽對(duì)象
6 href 得到鏈接元素的鏈接地址,用于A標(biāo)簽
7 …其他名稱 其他屬性,如果您使用的是合法的屬性名稱,就能夠返回對(duì)應(yīng)的值。如何才是合法的屬性?請(qǐng)參閱HTML標(biāo)準(zhǔn)。
第二個(gè)參數(shù)為特征字符串,如果匹配多個(gè),只能返回第一個(gè)元素的值;
例如,獲得淘寶貨物價(jià)格:
Plugin price=Web.HtmlGet("text","id:id_Price")
獲取某個(gè)表單文本的值
Plugin email=Web.HtmlGet("value","name:Email")
2.4.RunJS命令
RunJS命令提供了直接運(yùn)行Javascript的功能,如果您對(duì)JS非常熟悉,就能夠極大的擴(kuò)展WQM的功能。
RunJS命令支持兩中執(zhí)行方式,第一個(gè)參數(shù)設(shè)置為0時(shí),能夠執(zhí)行一段沒(méi)有返回值的Javascript,
例如:
RunJS(0,"alert('hello');")
第一個(gè)參數(shù)設(shè)置為1時(shí),能執(zhí)行一段js并返回由return語(yǔ)句返回的值,返回值為字符串類型;
例如:返回Html文檔的title;
RunJS(1,"var t=document.title;return t;")
如果您分析到網(wǎng)頁(yè)中某個(gè)按鈕實(shí)際上就是執(zhí)行了一個(gè)函數(shù),例如
<input type="Button" … />
您就可以直接調(diào)用
RunJS(0,"dosomething();")
JQuery的支持,網(wǎng)頁(yè)按鍵精靈集成了Jquery1.3.2,為了不與其他JQ的庫(kù)發(fā)生沖突,使用了wqmjq來(lái)代替$操作符,如果您需要直接使用JQ來(lái)操作網(wǎng)頁(yè),可使用wqmjq來(lái)執(zhí)行Jquery語(yǔ)句:
RunJS(0,"wqmjq('#test').click();")
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。