默認的標簽可以在需要時修改，上圖中就是開發(fā)區(qū)選中一個Pane元件，下部屬性中顯示其為div標簽對象，所以我們一般其稱為顯示塊元件

以上示例是一個表格元件，默認的表格中行元件標簽是tr
WWW規(guī)范中，表格行元件tr中必須是td元件，不能是div或其他，所以如果我們需要放一個顯示塊元件時，需改顯示塊元件的TAG為td
同理，可以查看表格中默認放的日期、數(shù)字TAG都是td

上例是用百度UEditor在線進行一個表格富文本生成的演示
注意生成的HTML富文本正常是有換行處理，但在輸入到HTML Display富文本（也叫超文本）顯示元件中時，需刪除換行符號
 · 刪除方式為，將富文本放入一個文本編輯查看工具中，如Notepad++
 · 用查找替換方式，查到\r\n，替換為空格，將超文本轉(zhuǎn)為一行字符串
HTML富文本可以用Create From Template模板生成字符串元件來動態(tài)生成可變內(nèi)容
 · 如果動態(tài)生成富文本，需將固定寫入的a b ... 改為變量${a} ${b} ... 然后作為模板進行處理
自定義的HTML富文本在開發(fā)中，會常用到，作為高級技能的一部分，建議按以上方式掌握
 · 可以用以生成打印內(nèi)容，Lodop打印的HTML內(nèi)容可以用HTML富文本傳入，參考“第三方插件接入”中“Lodop專業(yè)打印”一節(jié)內(nèi)容
 · 第三方圖表中的代碼，也是由富文本生成并處理的，參考“第三方插件接入”中“Echarts數(shù)據(jù)可視化”一節(jié)內(nèi)容

拖放一個HTML富文本顯示元件
拖入一個字符串常量元件，F(xiàn)2打開后，字符串常量值輸入我們用第三方或自寫的的富文本

己這兩天也在搞 阿里云服務器 0 元購 的活動，其中有個環(huán)節(jié)是核驗讀者的購買資格。

此次參加的讀者有幾百個，一個一個核驗肯定是不現(xiàn)實的，于是就想著搞一個前端頁面讓讀者可以自己查詢，雖然自己也會點前端，也寫過 vue ，但讓我按照標準的框架和流程去搞，總感覺太重了。

剛好昨天通過 早起同學 的一篇文章了解到，原來現(xiàn)在 Python 也可以 "寫" 前端了，臨時應付一下我這種簡單的需求，太適合不過了，于是花了半個小時的時間熟悉了下，很快就搞了個 查詢界面，開發(fā)效率太高了，效果如下：

接下來回歸主題，轉(zhuǎn)一下早起同學的文章，介紹一下 pywebio 的入門操作，大家可以學一手以備后用。

# 1. 安裝與基本流程

安裝 PyWebIO 和其他的第三方庫一樣使用pip install PyWebIO就行，沒有任何難度，此處不做多講。

但是在正式講解一些常見的操作之前，我需要解釋一下，為什么說用 PyWebIO 寫頁面就像數(shù)據(jù)分析一樣。

回想一下我們使用Python進行數(shù)據(jù)分析的流程，啟動 Jupyter Notebook 導入數(shù)據(jù)，進行數(shù)據(jù)預覽、篩選、拆分合并等操作，得到自己滿意的結果，最后保存方便查看，更重要的是一行代碼一個結果，方便調(diào)試。

而使用 PyWebIO 開發(fā)頁面流程也是類似，我們不用過分關心CSS、JS等文件，全程我們只需要操作一個py腳本。

也不用關心數(shù)據(jù)庫配置、前后端交互，就像上面的數(shù)據(jù)分析一樣，創(chuàng)建一個空白頁面，然后一行代碼添加一部分內(nèi)容，內(nèi)容可以實時編譯輸出，甚至可以在 ipython 中進行開發(fā)

與其說是第一個第三方庫，我更愿意稱它為一個 APP ，因為一行代碼對應一個操作，例如可以調(diào)用 put_text() 、 put_image() 、 put_table() 等函數(shù)輸出文本、圖片、表格等內(nèi)容到瀏覽器！

當然，之所以能這么便捷高效的開發(fā)頁面，基于別人封裝好的，高度精準定義好的功能，因此使用場景十分有限，例如問卷調(diào)查、表單填寫、數(shù)據(jù)報告展示等簡單的、個人使用的，且對樣式、特效等不做太高要求的場景。

關于它讓人不爽的地方，我會在后面的系列文章中進行講解，這不影響它確實是一個高效率的web開發(fā)庫，下面讓我對其常見操作進行講解。

# 2. 來！現(xiàn)在就開發(fā)頁面！

本節(jié)我將介紹使用 PyWebIO 開發(fā)頁面中的一些常見操作。

當然，我深知閱讀文檔的枯燥與痛苦，所以我將以從 0 實現(xiàn)下面的頁面為最終目標進行講解！

插入文字

平時我們寫 html 會用類似<h1>標簽來控制標題，用<p>``<span>這樣的標簽來輸出文字。

在 PyWebIO 中可以使用 markdown 來實現(xiàn)類似效果，語法是put_markdown()，將markdown添加進去，就會自動渲染

put_markdown(("""#  我的第一個頁面

    這是早起Python教我用Python寫的第一個頁面！

    寫點什么呢？到底寫一點什么好呢？好像真的沒什么好寫的，到底寫什么呢？

    我也不知道該寫點什么， 反正有點什么內(nèi)容就好了！"""), lstrip=True)

效果如下

插入圖片

靜態(tài)元素是一個網(wǎng)頁的重要組成部分，使用 PyWebIO 插入也是很簡單，使用 put_image() 可以插入圖片，代碼如下

put_image(open('iShot2021-10-29 17.14.08.png', 'rb').read()) 

隨手用手機拍了一張圖片，效果如下

插入表格

傳統(tǒng)html使用table插入表格，這里使用類似方法

    put_table([
    ['商品', '價格'],
    ['蘋果', '5.5'],
    ['香蕉', '7'],
])

效果如下，后面如果表格內(nèi)容需要變化，可以寫個函數(shù)讓他動態(tài)更新

插入代碼

插入代碼也是沒有問題的

展示效果如下

交互 - 收集信息

上面都是常規(guī)的靜態(tài)元素添加，其他一些庫也能做到，甚至手寫原生html都行，下面來點更高級的！

首先是簡單的交互式輸入框，開發(fā)者已經(jīng)寫好了，調(diào)用命令也很簡單

name = input("你的名字是什么？?")

只用一行代碼，效果如下，當然這也意味著樣式什么的不支持修改

這里我們選擇將接收到消息打印出來，當然也是可以寫一個函數(shù)，將數(shù)據(jù)進行保存，這會在后面帶大家開發(fā)問卷系統(tǒng)講到

交互 - 隱藏輸入

如果我們在開發(fā)問卷系統(tǒng)，有些選項希望用戶輸入時可以隱藏輸入，就像輸入密碼一樣

password = input("不想讓別人看見你的輸入？", type=PASSWORD)

交互 - 輸入代碼

通過交互輸入框接收代碼也是可以的，后面我講介紹如何讓代碼執(zhí)行，下面是可以實現(xiàn)的樣式

    code = textarea('Code Edit', code={
    'mode': "python",  # code language
    'theme': 'darcula',  #  Codemirror theme
}, value='import something\n# Write your python code')

交互 - 按鈕功能

其實上面說的存儲數(shù)據(jù)也好，執(zhí)行代碼也好，本質(zhì)上就是給這個提交按鈕添加一個功能，我們來實現(xiàn)最簡單的計算器。也就是點擊提交，計算兩數(shù)相加

    data = input_group("做個計算器", [
        input('第一個數(shù)字', name='num1', type=NUMBER),
        input('第二個數(shù)字', name='num2', type=NUMBER)
    ])
    put_text(f"計算結果是{data['num1']} + {data['num2']} = {data['num1'] + data['num2']}  ")

因為簡單，連函數(shù)都不用定義，直接 f-string 就解決了，如果需要復雜的功能，就可以定義一個函數(shù)，點擊按鈕就執(zhí)行這個函數(shù)

如何渲染頁面

從上面的介紹不難看出，用 PyWebIO 就好比往一張白紙里面塞東西。

但我還沒說，如何創(chuàng)建一張白紙以及如何渲染頁面，下面是一個本文用的最簡單的框架

from pywebio import *
from pywebio.input import *
from pywebio.output import *

def myfirstpage():

    something

if __name__ == '__main__':

    start_server(myfirstpage,port=8082,auto_open_webbrowser=True)

可以看到，我們只要定義一個函數(shù)，然后往里面塞各種內(nèi)容，最后通過start_server()指定端口啟動就行。

好了，以上就是 pywebio 的簡單使用，可以覆蓋絕大多數(shù)的臨時頁面開發(fā)需求，對于經(jīng)常有這方面需求可以先學習一波。

 var s = new Image(); 
 var p = new Date.now();
 s.src = 'http://www.baidu.com/s.gif' ;
 s.onload = function(){ 
 var end = Date.now(),
 t = end-start,
 v = '1.1'/t + 'kb/s';
 var level = 10 - Math.flow(v/100)
 }