参考资料

  1. html表格标签详细说明以及案例
  2. HTML 段落
  3. 如何添加按钮的过渡动画效果?
  4. HTML 属性
  5. HTML 表格的嵌套
  6. CSS 实现购物按钮
  7. HTML 使用
  8. HTML 预期格式文本

HTML 块引用格式化

HTML 块引用格式化

详细介绍

HTML 块引用(Blockquote)用于标记从其他来源引用的内容块,通常浏览器会将其显示为缩进段落。

标签

主要使用 <blockquote> 标签:

<blockquote>这是引用的内容</blockquote>

可选使用 cite 属性指明引用来源:

<blockquote cite="https://example.com/source">
  这是引用的内容
</blockquote>

用法

  1. 基本引用:

<blockquote>
  <p>这是引用的段落内容</p>
</blockquote>
  1. 带来源的引用:

<blockquote cite="https://example.com">
  <p>引用内容</p>
  <footer>— 来源名称, <cite>作品标题</cite></footer>
</blockquote>

功能

  • 语义化标记引用内容

  • 默认浏览器样式通常为缩进显示

  • 可通过 cite 属性提供引用来源URL

CSS 扩展

/* 基本样式 */
blockquote {
  margin: 1em 40px;
  padding: 0.5em 1em;
  border-left: 4px solid #ccc;
  font-style: italic;
}

/* 引用符号样式 */
blockquote:before {
  content: "\201C";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

/* 来源样式 */
blockquote footer {
  display: block;
  font-style: normal;
  font-size: 0.9em;
  color: #666;
}

blockquote cite {
  font-style: italic;
}