HTML - 引用



HTML 中的引用标签允许您在 网页内容中包含引号文本并设置其格式。这些用于引用任何句子或关键字,有用于创建引用的标签列表。

这些标签有助于保持正确的格式和语义,增强网页上引用内容的呈现和含义。加入引号对于准确传达信息和为用户提供井井有条的阅读体验至关重要。

HTML 引用标签列表

  • HTML <q> 标签
  • HTML <blockquote> 标签
  • HTML <cite> 标签
  • HTML <address> 标签
  • HTML <bdo> 标签
  • HTML <abbr> 标签

下面我们使用每个标签进行引用,每个标签都有其默认样式,其中很少接受某些属性,但我们没有使用任何属性来更改其默认样式。

HTML “<q>” 标签引用示例

我们使用 <q> 标签在 HTML 中添加短引号。如果我们想为多行报价,请使用 <blockquote> 标签。我们还可以在 <blockquote> 标签中使用 cite 属性来指示 URL 形式的引用来源。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML 引用标签示例</title>
</head>
<body>
	 <p>
			欢迎使用<q>七科普教程</q>
	 </p>
	 <p>
		 七科普是一家领先的教育网站,致力于提供有关技术和非技术主题的最佳学习材料。
	 </p>
</body>
</html>
输出  
欢迎使用七科普教程

七科普是一家领先的教育网站,致力于提供有关技术和非技术主题的最佳学习材料。

HTML “<blockquote>” 标签引用示例

<blockquote> 标签用于表示长引号。它应该只包含块级元素,而不仅仅是纯文本。它指定从另一个源引用的部分,并且仅包含块级元素。我们还可以在 <blockquote> 标签中使用 cite 属性来指示 URL 形式的报价来源。

示例 1


<!DOCTYPE html>
<html>
<body>
	 <p>
			关于教程
	 </p>
	 <blockquote>
			教程源于存在的想法
			一类对在线内容反应更好的读者
			更喜欢在舒适的环境中按照自己的节奏学习新技能。
	 </blockquote>
</body>
</html>
输出  
关于教程
教程源于存在的想法
一类对在线内容反应更好的读者
更喜欢在舒适的环境中按照自己的节奏学习新技能。
 

示例 2


<!DOCTYPE html>
<html>
<body>
	 <h1>教程示例</h1>
	 <p>
			这是七科普官方网站上的一句话
	 </p>
	 <blockquote cite="https://www.qikepu.com">
			加入我们数以百万计的忠实访问者,访问我们的免费文本库。 
			从编程语言和网络开发到数据科学和
			网络安全,我们精心制作的教程将帮助您掌握
			任何从头开始的技术或概念。
	 </blockquote>
</body>
</html>
输出  
这是七科普官方网站上的一句话
 

加入我们数以百万计的忠实访问者,访问我们的免费文本库。 
从编程语言和网络开发到数据科学和
网络安全,我们精心制作的教程将帮助您掌握
任何从头开始的技术或概念。
 

HTML “<cite>” 标签引用示例

HTML 中的 <cite> 标签用于在内容中引用创意作品的标题,例如书籍、电影或歌曲。它为引文提供了语义意义。这是一个编码示例:


<!DOCTYPE html>
<html>
<body>
	 <p>
			这个<cite>风格元素</cite>来源于斯特伦克和怀特。
	 </p>
</body>
</html>
输出 :这个风格元素来源于斯特伦克和怀特。

HTML “<address>” 标签引用示例

HTML 中的 <address> 标签用于定义文档作者或所有者的联系信息。它通常包括电子邮件地址、实际地址或其他相关联系信息等详细信息。举个例子 -


<!DOCTYPE html>
<html>
<body>
<address>
	 联系我们: <a href="mailto:info@example.com">info@example.com</a><br>
	 联系地址: 北京路50号
</address>
</body>
</html>
输出:
 联系我们: info@example.com
 联系地址: 北京路50号

HTML “<bdo>” 标签引用示例

HTML 中的 <bdo> 标签,bdo 代表双向覆盖,用于覆盖当前文本方向。它通常用于需要更改默认文本方向的情况,例如从右到左显示文本。举个例子 -


<!DOCTYPE html>
<html>
<body>
	 <p>此文本将从左到右。</p>
	 <p><bdo>
			欢迎访问五科普教程。
	 </bdo></p>
</body>
</html>
输出 :
此文本将从左到右。
欢迎访问五科普教程。

HTML “<abbr>” 标签引用示例

HTML 中的 <abbr> 标签用于定义缩写或首字母缩略词。在此示例中,<abbr> 用于将名称“Abhishek”缩写为“Abhy”,而“title”属性提供缩写的完整描述。


<!DOCTYPE html> 
<html>
 <head> 
<title>缩写标签 Example</title>
 </head> 
<body> 
<p>我最好的朋友的名字是<abbr title=“Abhishek”>Abhy</abbr>。</p>
 </body>
</html>
输出 :我最好的朋友的名字是Abhy