能否用CSS/HTML自定义元素简化重复div结构，按需传入内容参数？

当然可以，推荐用HTML原生Web Components或者**<template>模板+JavaScript**来解决这个问题，完全能实现传参生成重复结构，让代码大幅简化。CSS无法单独完成这个需求——它只能控制样式，没法动态生成HTML结构，必须结合JavaScript。

方案一：Web Components 自定义元素 #

这是HTML原生的自定义组件方案，能直接在页面中像使用普通标签一样调用，传入属性即可生成完整结构。

1. 定义自定义元素类

class ArticleCard extends HTMLElement {
  connectedCallback() {
    // 获取传入的属性参数
    const url1 = this.getAttribute('url1');
    const image1 = this.getAttribute('image1');
    const alt1 = this.getAttribute('alt1');
    const url2 = this.getAttribute('url2');
    const titleText = this.getAttribute('title-text');
    const image2 = this.getAttribute('image2');
    const alt2 = this.getAttribute('alt2');
    const authorName = this.getAttribute('author-name');
    const authorDesc = this.getAttribute('author-desc');

    // 生成目标HTML结构
    this.innerHTML = `
      <div class="container">
        <div class="row">
          <div class="specific">
            <article class="item">
              <div class="thumb">
                <a href="${url1}">
                  <img src="${image1}" alt="${alt1}" />
                </a>
              </div>
              <div class="content">
                <h2>
                  <a href="${url2}">${titleText}</a>
                </h2>
                <div class="author">
                  <div class="thumb">
                    <img src="${image2}" alt="${alt2}" />
                  </div>
                  <div class="gold">
                    <h3>${authorName}</h3>
                    <p>${authorDesc}</p>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    `;
  }
}

// 注册自定义元素，命名需包含短横线
customElements.define('article-card', ArticleCard);

2. 在HTML中使用

只需一行标签，传入对应属性即可：

<article-card
  url1="https://example.com/post-link"
  image1="https://example.com/post-cover.jpg"
  alt1="文章封面"
  url2="https://example.com/post-detail"
  title-text="Text sample 1"
  image2="https://example.com/avatar.jpg"
  alt2="作者头像"
  author-name="Text sample 2"
  author-desc="Text sample 3"
></article-card>

方案二：<template>模板+JavaScript渲染 #

如果不想写自定义元素类，也可以用<template>存放静态结构，再通过JavaScript动态替换内容，适合批量生成卡片的场景。

1. 定义模板

<template id="articleCardTemplate">
  <div class="container">
    <div class="row">
      <div class="specific">
        <article class="item">
          <div class="thumb">
            <a href="">
              <img src="" alt="" />
            </a>
          </div>
          <div class="content">
            <h2>
              <a href=""></a>
            </h2>
            <div class="author">
              <div class="thumb">
                <img src="" alt="" />
              </div>
              <div class="gold">
                <h3></h3>
                <p></p>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<!-- 存放生成卡片的容器 -->
<div id="cardContainer"></div>

2. 编写渲染函数

function renderArticleCard(data) {
  const template = document.getElementById('articleCardTemplate');
  // 克隆模板内容
  const clone = template.content.cloneNode(true);
  
  // 替换模板中的内容
  clone.querySelector('.thumb a').href = data.url1;
  clone.querySelector('.thumb img').src = data.image1;
  clone.querySelector('.thumb img').alt = data.alt1;
  clone.querySelector('h2 a').href = data.url2;
  clone.querySelector('h2 a').textContent = data.titleText;
  clone.querySelector('.author .thumb img').src = data.image2;
  clone.querySelector('.author .thumb img').alt = data.alt2;
  clone.querySelector('.gold h3').textContent = data.authorName;
  clone.querySelector('.gold p').textContent = data.authorDesc;
  
  // 将卡片插入容器
  document.getElementById('cardContainer').appendChild(clone);
}

// 使用示例：传入数据生成单个卡片
renderArticleCard({
  url1: "https://example.com/post-link",
  image1: "https://example.com/post-cover.jpg",
  alt1: "文章封面",
  url2: "https://example.com/post-detail",
  titleText: "Text sample 1",
  image2: "https://example.com/avatar.jpg",
  alt2: "作者头像",
  authorName: "Text sample 2",
  authorDesc: "Text sample 3"
});

如果需要批量生成，只需循环调用renderArticleCard并传入不同数据即可。

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