HTML标记语言——引用

请看下面的攻略。

什么是HTML引用标签

HTML的引用标签用于包含一个引用或者称之为一个摘录,因此它也被称为摘录标签。可以使用 <q> 标签为短引用括起来,也就是说,文本中的一个小片段需要被引用的时候,可以使用这个标签。而如果需要引用的内容比较长,那么就需要使用 <blockquote> 标签包裹。这样就可以在内容前后添加引号和缩进(在大多数浏览器中,默认值是 40 像素左右)。下面我们分别讲解用法和一些示例。

使用HTML引用标签

<q> 标签

<q> 标签可以用于短的引用或者从外部的来源拿来的文本片段,该标签会添加一个小引号在引用的前面和后面,如下面的示例代码:

<p>以下是著名的权利宣言之一:</p>

<q>我们认为,这些真理是不言而喻的:人人生而平等;他们被造就时,赋予了若干不可剥夺的权利,其中包括生命权、自由权和幸福追求权。</q>

<p>以上是著名的权利宣言之一。</p>

上面的代码将会渲染为以下的HTML文本:

<p>以下是著名的权利宣言之一:</p>

<p><q>我们认为,这些真理是不言而喻的:人人生而平等;他们被造就时,赋予了若干不可剥夺的权利,其中包括生命权、自由权和幸福追求权。</q></p>

<p>以上是著名的权利宣言之一。</p>

在上述例子中,<q> 标签被用来引用权利宣言中的一句话,小引号会自动添加并包含在文本中。

<blockquote> 标签

<blockquote> 标签用于包裹需要引用的文本,并且这段文本会默认产生一个比较深的缩进。下面是一个包含 <blockquote> 标签的例子:

<blockquote>
  <p>当我发觉我什么都不懂的时候,我就开始认为我是不是活得不对头。</p>
  <cite>——钱钟书</cite>
</blockquote>

上面的代码将会渲染为以下的HTML文本:

<blockquote>
  <p>当我发觉我什么都不懂的时候,我就开始认为我是不是活得不对头。</p>
  <cite>——钱钟书</cite>
</blockquote>

在上面的例子中,<blockquote> 标签被用于引用了一段来自钱钟书的文字,并用 <cite> 标签注明了出处。

结束语

HTML 引用标签是为了方便作者在文本中插入摘录和引用而创造的。使用这些标签,可以方便地在内容中插入引用和摘录,帮助读者更好地理解文章内容。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML标记语言——引用 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 微信小程序实现滚动条功能

    下面是详细讲解“微信小程序实现滚动条功能”的完整攻略: 准备工作 在开始之前,请确保已经了解了微信小程序的基本知识,包括常用的组件和API。同时,为了实现滚动条功能,我们还需要使用一些额外的组件和API,包括scroll-view组件和scroll-into-view API。 实现过程 1. 创建一个scroll-view组件 用于实现滚动条功能的组件是s…

    css 2023年6月10日
    00
  • CSS3实现各种图形的示例代码

    那我来给你详细讲解一下CSS3实现各种图形的示例代码的攻略。 准备工作 在开始实现各种图形之前,我们需要确保在HTML文件中引用了CSS文件,这里我们可以通过以下代码引入: <link rel="stylesheet" href="style.css"> 接着我们需要定义一些基础的CSS样式,比如背景色、字…

    css 2023年6月10日
    00
  • 浅谈webpack devtool里的7种SourceMap模式

    当我们使用webpack打包项目时,我们可以通过 devtool 选项来配置生成source map。 它们有不同的视觉效果(适用于不同的开发场景)和内存资源消耗(可能影响构建时间)。 下面我们来详细讲解webpack devtool里的7种source map模式。 1. eval 这种模式是将每个模块封装到 eval(…) 中,因此生成的source…

    css 2023年6月9日
    00
  • 基于jquery的不规则矩形的排列实现代码

    下面是关于“基于jquery的不规则矩形的排列实现代码”的完整攻略: 1. 前期准备 在开始编写代码之前,我们需要先确定代码所需的资源和环境。具体步骤如下: 确定用于排版的元素样式和尺寸,例如宽度、高度、背景颜色等等。 引入jQuery库,确保代码能够正常执行。 在页面中添加用于显示排版的容器,例如一个<div>标签。 2. 实现思路 在前期准备…

    css 2023年6月10日
    00
  • Angular动画实现的2种方式以及添加购物车动画实例代码

    Angular动画是Angular框架中一个非常重要且强大的特性,可以帮助我们轻松实现各种动画效果,提升界面交互的体验。本文将详细介绍Angular动画实现的两种方式,并提供添加购物车动画实例代码,方便大家上手操作。 Angular动画实现的2种方式 Angular动画可以使用两种方式来实现:通过使用Angular内置的动画模块和使用第三方动画库。 1. 使…

    css 2023年6月10日
    00
  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)

    Jquery实现侧边栏跟随滚动条固定(兼容IE6) 一、问题背景 我们经常看到一些网站的侧边栏会在页面滚动时,保持位置不变,一直显示在页面的某个位置上。这种效果可以增加页面的交互性和用户体验。但是,由于不同浏览器对CSS属性的支持不同,因此此效果兼容性并不好。为了解决这个问题,我们可以使用Jquery实现侧边栏跟随滚动条固定的效果,并兼容IE6。 二、实现过…

    css 2023年6月10日
    00
  • JavaScript+CSS相册特效实例代码

    下面我将详细讲解 JavaScript+CSS 相册特效实例代码的完整攻略。该攻略包括以下几个部分: 确定页面布局 加载图片资源 实现相册特效 完成代码实现 1. 确定页面布局 在开始实现相册特效之前,我们需要先确定页面的布局。一般来说,相册页面需要有以下几个元素: 一个包含所有图片的容器 一个用于预览图片的容器 翻页按钮 下面是一个示例代码片段,可以用作基…

    css 2023年6月10日
    00
  • velocity.js实现页面滚动切换效果

    下面我将为您讲解如何使用velocity.js实现页面滚动切换效果。 Velocity.js简介 Velocity.js是一款轻巧、高速的Javascript动画库,拥有优秀的性能表现和兼容性。它使用CSS样式作为动画的起点和终点,从而可以轻松地实现复杂的交互动画效果。Velocity还拥有很多进阶的功能,比如支持SVG、滚动等等,可以说是一款非常优秀的动画…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部