🐣 小白救星 · 全能代码助手

<div class="类名">
    这里是内容（文字、图片或其他标签）
</div>

<div class="box">第一个盒子</div>
<div class="box">第二个盒子</div>
<div class="box">第三个盒子</div>

<div class="父容器">
    <div class="子元素1">内容1</div>
    <div class="子元素2">内容2</div>
</div>

<div class="card">
    <h3>卡片标题</h3>
    <p>卡片描述文字，可以换行。<br>第二行内容。</p>
</div>

<div class="card">
    <img src="images/photo.jpg" alt="图片说明">
    <h3>标题</h3>
    <p>描述文字</p>
</div>

<p><strong><span style="color: #d12323;">这段文字是红色加粗的</span></strong></p>

<div class="quote-box">
    <p class="quote-text">这里是引用文字内容</p>
</div>

<div class="quote-box">
    <p class="quote-text">第一段引用</p>
</div>
<div class="quote-box">
    <p class="quote-text">第二段引用</p>
</div>

<h1 class="main-title">标题文字</h1>
<p class="subtitle">副标题</p>
<div class="deco-line"></div>

<div class="story-section">
    故事内容，可以包含<br>换行。
</div>

<div class="window-photo">
    <img src="images/photo.jpg" alt="描述">
</div>

<div class="quote-box">
    <p class="quote-text">引用文字1</p>
</div>

<div class="quote-box">
    <p class="quote-text">引用文字2</p>
</div>

<div class="cta-section">
    <p class="cta-text">行动号召文字</p>
    <span class="cta-highlight">高亮按钮</span>
</div>

<!-- 错误1：div 没有闭合 -->
<div class="box">内容

<!-- 错误2：嵌套混乱 -->
<div class="outer">
    <div class="inner">内层
</div>

❌ 上面的写法会导致页面错乱，务必保证每个开标签都有对应的闭标签，嵌套顺序正确。

• 每个开标签 <div> 必须有对应的闭标签 </div>。
• 嵌套规则：后打开的标签要先关闭（像俄罗斯套娃），例如 <div><p>文字</p></div> 正确。
• 并列关系：同级标签不能互相交叉，必须完全闭合后开启下一个。
• 属性值：统一用双引号包裹，如 class="quote-box"。
• 自闭合标签：如 <img>、<br> 不需要写 </img>，建议写成 <img src="..." alt="..."> 和 <br>。