使用Dominate库操作HTML文档的完整指南

一、Dominate基础入门

1.1 安装与环境配置

pip install dominate

1.2 基本文档结构

from dominate import document
from dominate.tags import *

doc = document(title='Dominate示例')
with doc.head:
    meta(charset='utf-8')
    link(rel='stylesheet', href='style.css')
    
with doc:
    h1('欢迎使用Dominate')
    p('这是一个Python生成HTML的库')

print(doc)

输出效果：

<!DOCTYPE html>
<html>
  <head>
    <title>Dominate示例</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <h1>欢迎使用Dominate</h1>
    <p>这是一个Python生成HTML的库</p>
  </body>
</html>

二、核心标签操作

2.1 常用标签生成

# 创建列表和表格
with div() as content:
    ul(
        li('第一项'),
        li('第二项'),
        li('第三项')
    )
    
    table(
        tr(
            th('姓名'), th('年龄')
        ),
        tr(
            td('张三'), td(25)
        )
    )

print(content)

2.2 属性动态添加

# 动态设置属性
img = img(src='logo.png')
img['id'] = 'header-logo'
img['class'] = 'responsive-image'
img['data-version'] = '1.0'

print(img)

三、文档构建进阶

3.1 上下文管理

doc = document(title='购物车')
with doc.body:
    with div(id='cart'):
        h2('我的购物车')
        with ul(cls='items'):
            for product in ['手机', '笔记本', '耳机']:
                li(product, cls='item')
                
print(doc)

3.2 条件渲染

items = ['苹果', '香蕉', None, '橙子']

with ul():
    for item in items:
        if item:
            li(item)
        else:
            li('缺货', style='color: gray')

四、样式与脚本控制

4.1 CSS样式嵌入

with style():
    css("""
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
    """)

div('重要内容', cls='highlight')

4.2 JavaScript集成

with script():
    """document.addEventListener('DOMContentLoaded', function() {
        alert('页面加载完成');
    });"""

五、复杂页面构建

5.1 Bootstrap页面

doc = document(title='Bootstrap页面')
with doc.head:
    link(
        rel="stylesheet",
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    )

with doc:
    with div(cls='container mt-5'):
        with div(cls='row'):
            with div(cls='col-md-6'):
                h1('左侧内容', cls='text-primary')
                p('使用Bootstrap样式')
            with div(cls='col-md-6'):
                with div(cls='card'):
                    with div(cls='card-body'):
                        h5('卡片标题', cls='card-title')
                        p('卡片内容', cls='card-text')
                        a('点击这里', href='#', cls='btn btn-primary')

print(doc)

5.2 表单生成

with form(action='/submit', method='post'):
    label('用户名:', cls='form-label')
    input_(type='text', name='username', cls='form-control')
    
    label('密码:', cls='form-label')
    input_(type='password', name='password', cls='form-control')
    
    with div(cls='form-check'):
        input_(type='checkbox', cls='form-check-input')
        label('记住我', cls='form-check-label')
    
    button('提交', type='submit', cls='btn btn-primary')

六、文件操作与导出

6.1 保存HTML文件

from dominate.util import raw

doc = document(title='保存示例')
with doc:
    p(raw('© 2023 版权所有'))

with open('output.html', 'w', encoding='utf-8') as f:
    f.write(doc.render())

6.2 渲染选项控制

# 美化输出
print(doc.render(pretty=True))

# 压缩输出
print(doc.render(xhtml=True))

七、高级功能应用

7.1 自定义标签

from dominate.tags import html_tag

@html_tag
def custom_tag(content, **kwargs):
    return div(content, cls='custom', **kwargs)

custom_tag('特殊内容', data_id=123)

7.2 SVG图形生成

with svg(width=100, height=100):
    circle(cx=50, cy=50, r=40, fill='red')
    text('SVG示例', x=50, y=55, 
         font_size=16, text_anchor='middle')

八、性能优化技巧

8.1 批量生成内容

# 高效生成大量列表项
items = [f'项目{i}' for i in range(1, 101)]
ul(*[li(item) for item in items])

8.2 片段复用

def create_card(title, content):
    with div(cls='card mb-3') as card:
        with div(cls='card-body'):
            h5(title, cls='card-title')
            p(content, cls='card-text')
    return card

with div(cls='container'):
    create_card('卡片1', '内容1')
    create_card('卡片2', '内容2')

九、实战案例演示

9.1 完整博客页面

doc = document(title='我的博客')
with doc.head:
    link(rel="stylesheet", href="blog.css")

with doc:
    with header(cls='site-header'):
        h1('技术博客', cls='site-title')
        nav(
            a('首页', href='/'),
            a('文章', href='/posts'),
            a('关于', href='/about')
        )
    
    with main(cls='content'):
        with article(cls='post'):
            h2('Python Dominate教程', cls='post-title')
            div('2023-10-15', cls='post-date')
            with div(cls='post-content'):
                p('Dominate是一个强大的HTML生成库...')
                pre(code('print("Hello Dominate")'))
    
    with footer(cls='site-footer'):
        p('© 2023 版权所有')

print(doc.render(pretty=True))

9.2 数据可视化报表

data = {
    'Python': 75, 
    'JavaScript': 60,
    'Java': 45,
    'C++': 30
}

doc = document(title='技能报表')
with doc:
    h1('编程技能评估')
    with table(cls='table table-striped'):
        with thead():
            tr(th('语言'), th('掌握程度'))
        with tbody():
            for lang, score in data.items():
                with tr():
                    td(lang)
                    with td():
                        div(
                            cls='progress-bar',
                            style=f'width: {score}%',
                            role='progressbar',
                            aria_valuenow=score
                        ).add(span(f'{score}%'))

十、最佳实践总结

10.1 代码组织建议

# 模块化结构示例
# components.py
def navbar(active_page):
    with nav(cls='navbar'):
        # 导航栏实现...

# pages.py        
from dominate import document
from components import navbar

def home_page():
    doc = document()
    with doc:
        navbar('home')
        # 页面内容...
    return doc