如何使用Tkinter开发GUI编辑HTML正文及标签生成自定义网页

核心思路 #

将固定的HTML模板中可编辑的内容拆分为独立占位符，无需手动解析修改HTML结构，GUI中获取用户输入后直接替换对应占位符再写入HTML文件即可实现标签内容修改、新增自定义标签的需求。

完整可运行代码 #

import webbrowser
import os
from tkinter import *

# 提前定义带占位符的HTML模板，可编辑部分用{变量名}预留位置
html_template = """
<html>
<meta charset="utf-8">
<body>
<h1>{h1_text}</h1>
{extra_body_content}
</body>
</html>
"""

# 初始化默认HTML文件
default_h1 = "Stay tuned for our amazing summer sale!"
default_body = ""
init_html = html_template.format(h1_text=default_h1, extra_body_content=default_body)
with open("webgen.html", "w", encoding="utf-8") as f:
    f.write(init_html)
filename = 'file:///'+os.getcwd()+'/' + 'webgen.html'
webbrowser.open_new_tab(filename)

# 定义HTML更新函数，点击按钮时触发
def update_html():
    # 读取GUI输入框的内容
    h1_content = h1_entry.get().strip()
    body_content = body_text.get("1.0", END).strip()
    # 替换模板占位符
    new_html = html_template.format(h1_text=h1_content, extra_body_content=body_content)
    # 写入新的HTML文件
    with open("webgen.html", "w", encoding="utf-8") as f:
        f.write(new_html)
    # 自动刷新打开的网页
    webbrowser.open_new_tab(filename)

# 构建GUI
window=Tk()
window.title('Web Generator')
window.geometry("400x400+10+10")

# h1编辑区域
Label(window, text="编辑<h1>标签内容：").place(x=20, y=20)
h1_entry=Entry(window, bd=5, width=40)
h1_entry.insert(0, default_h1) # 加载默认内容
h1_entry.place(x=20, y=50)

# body编辑区域
Label(window, text="编辑body其他内容（可直接写HTML标签）：").place(x=20, y=90)
body_text=Text(window, bd=5, width=45, height=12)
body_text.place(x=20, y=120)

# 确认按钮
btn=Button(window, text="确认修改并更新网页", fg='blue', command=update_html)
btn.place(x=120, y=350)

window.mainloop()

功能说明 #

• 修改
  标签内容：直接修改顶部单行输入框的文本即可，程序会自动将内容填充到<h1>标签内部
• 编辑body内容/新增标签：在下方多行文本框中直接输入内容即可，需要新增<p>、<h2>、<img>等标签时直接写对应HTML代码即可，保存后会自动插入到网页body区域
• 点击确认按钮后会自动更新HTML文件并打开新的网页标签页展示修改后的效果

内容的提问来源于stack exchange，提问作者Muneshyne