在 Django 模板中，应避免将非列表语义的提示文本（如“暂无事项”）放在 <ul> 内部；正确做法是使用 {% if %} 判断数据是否存在，再分别渲染列表或提示文案，从而确保 HTML 结构语义清晰、样式可控。
在 django 模板中，应避免将非列表语义的提示文本（如“暂无事项”）放在 `
- ` 内部；正确做法是使用 `{% if %}` 判断数据是否存在，再分别渲染列表或提示文案，从而确保 html 结构语义清晰、样式可控。
Django 模板中的 {% for ... empty %} 语法虽便捷，但其 empty 分支仍位于循环标签内部——这意味着它会被渲染在 <ul> 元素之内，违背 HTML 语义（<p> 不应作为 <ul> 的直接子元素），也易导致意外的外边距、缩进或 CSS 样式冲突。
要彻底解决该问题，需将逻辑判断提前：先用 {% if deeds %} 检查列表是否非空，再决定渲染 <ul> 还是独立的 <p> 提示块。这样既符合 HTML5 文档流规范，也便于后续通过 CSS 精确控制间距与布局。
以下是推荐的重构写法：
{% extends "todo_lists/base.html" %}
{% block content %}
<h2>Deeds of a {{ list_title }} list</h2>
{% if deeds %}
<ul>
{% for deed in deeds %}
<li>{{ deed.title }}</li>
{% endfor %}
</ul>
{% else %}
<p>No deeds here yet</p>
{% endif %}
{% endblock content %}✅ 优势说明：
- 语义正确：<p> 不再嵌套于 <ul> 中，符合 W3C HTML 标准；
- 样式可控：可单独为 <p> 设置 margin: 0; 或自定义字体/颜色，不受列表默认样式影响；
- 可扩展性强：未来可在 {% else %} 分支中添加按钮、引导链接或图标，无需修改结构；
- 逻辑清晰：模板层级直观反映业务意图——“有数据则渲染列表，否则显示空态”。
⚠️ 注意事项：
- deeds 应为 QuerySet 或 Python 列表（非 None）；若可能为 None，建议改用 {% if deeds and deeds|length > 0 %} 或在视图中确保传入空列表 []；
- 若需复用空状态 UI（如多个列表共用），可将其提取为包含模板（{% include "partials/empty_state.html" %}），提升可维护性。
通过这一调整，你不仅修复了结构问题，也为应用的可访问性（a11y）和长期可维护性打下坚实基础。
