023_html引用和术语定义标签

1. <q>标签

1.1. <q>标签定义短的引用。

1.2. 浏览器通常会为<q>元素包围引号。

1.3. 例

1.3.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>q标签定义短的引用</title>
	</head>
	<body>
		<p>浏览器通常会在q元素周围包围引号。</p>
		<p>WWF的目标是<q>构建人与自然和谐相处的世界。</q></p>
	</body>
</html>

1.3.2. 效果图

2. <blockquote>标签

2.1. <blockquote>标签定义块引用。

2.2. <blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来, 经常会在左、右两边进行缩进(增加外边距), 而且有时会使用斜体。也就是说, 块引用拥有它们自己的空间。

2.3. 例

2.3.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>blockquote标签定义块引用</title>
	</head>
	<body>
		<p>以下内容引用自 WWF 的网站:</p>
		<blockquote>
		五十年来,WWF 一直致力于保护自然界的未来。
		世界领先的环保组织,WWF 工作于 100 个国家,
		并得到美国一百二十万会员及全球近五百万会员的支持。
		</blockquote>
	</body>
</html>

2.3.2. 效果图

3. <abbr>标签

3.1. <abbr>标签定义缩写或首字母缩略语。表示它所包含的文本是一个更长的单词或短语的缩写形式。

3.2. 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

3.3. 可以在<abbr>标签中使用全局的title属性, 这样就能够在鼠标指针移动到<abbr>元素上时显示出简称/缩写的完整版本。

3.4. 例

3.4.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>abbr标签定义缩写或首字母缩略语</title>
	</head>
	<body>
		<p><abbr title="World Health Organization">WHO</abbr>成立于1948年。</p>
		<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
	</body>
</html>

3.4.2. 效果图

4. <dfn>标签

4.1. <dfn>元素定义术语(项目)或缩写的定义。术语定义应当在<p>, <section>(定义文档中的节)或定义列表(通常是<dt>, <dd>对)中给出。

4.2. 被定义术语的值由下列规则确定:

4.2.1. 如果<dfn>元素有一个 title属性, 那么该术语的值就是该属性的值。

4.2.2. 否则, 如果它仅包含一个<abbr>元素, 该元素拥有title属性, 那么该术语的值就是该属性的值。

4.2.3. 否则, <dfn>元素的文本内容就是该术语, 并且父元素包含定义。

4.3. 现在流行的浏览器通常用斜体来显示<dfn>中的文本。将来, <dfn>还可能有助于创建文档的索引或术语表。

4.4. 与其他许多基于内容的样式和物理样式标签一样, <dfn>标签尽量少用为妙。作为一种通用样式, 尤其在技术文档中, 当第一次新的术语时, 应该将它们与普通文本分开, 这样读者可以更好地理解文章当前的主题, 而从那以后就不要再对这个术语进行任何标记了。

4.5. 例

4.5.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>dfn表示术语的一个定义</title>
	</head>
	<body>
		<p>The <dfn title="World-Wide Web">WWW</dfn> is a system of interlinked hypertext documents accessed on the Internet.</p>

		<p>The <dfn><abbr title="World-Wide Web">WWW</abbr></dfn> is a system of interlinked hypertext documents accessed on the Internet.</p>

		<p>The <dfn>WWW</dfn> World-Wide Web is a system of interlinked hypertext documents accessed on the Internet.</p>
		<!-- 最常用的写法如下: -->
		<dl>
  			<dt><dfn><abbr title="World-Wide Web">WWW</abbr></dfn></dt>
  			<dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on the Internet.</dd>
		</dl>
	</body>
</html>

4.5.2. 效果图

5. <address>标签

5.1. <address>标签定义文档或文章的联系信息(作者/拥有者)。

5.2. 此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

5.3. 如果<address>元素位于<body>元素内, 则它表示文档联系信息。

5.4. 如果<address>元素位于<article>(可以定义帖子、文章、博客、评论)元素内, 则它表示文章的联系信息。

5.5. <address>元素通常连同其他信息被包含在<footer>(定义文档或节的页脚)元素中。

5.6. 例

5.6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>address元素定义文档或文章的联系信息(作者/拥有者)</title>
	</head>
	<body>
		<p>html address元素定义文档或文章的联系信息(作者/拥有者)。</p>
		<address>
			Written by Jon Doe.<br /> 
			Visit us at:<br />
			Example.com<br />
			Box 564, Disneyland<br />
			USA
		</address>
	</body>
</html>

5.6.2. 效果图

6. <cite>标签

6.1. <cite>标签定义著作的标题。

6.2. <cite>标签通常表示它所包含的文本对某个参考文献的引用, 比如书籍或者杂志的标题。

6.3. 用<cite>标签把指向其他文档的引用分离出来, 尤其是分离那些传统媒体中的文档, 如书籍、杂志、期刊等等。如果引用的这些文档有联机版本, 还应该把引用包括在一个<a>标签中, 从而把一个超链接指向该联机版本。

6.4. <cite>标签还有一个隐藏的功能: 它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器, 它能够自动整理引用表格, 并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用; 它使浏览器能够以各种实用的方式来向用户表达文档的内容。

6.5. 浏览器通常会以斜体显示<cite>元素。

6.6. 例

6.6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>cite标签定义著作的标题</title>
	</head>
	<body>
		<p>HTML cite 元素定义著作的标题。</p>
		<p>浏览器通常会以斜体显示 cite 元素。</p>

		<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
	</body>
</html>

6.6.2. 效果图

7. <bdo>标签

7.1. <bdo>标签定义双流向覆盖(bi-directional override)。

7.2. <bdo>标签用于覆盖当前文本方向。

7.3. <bdo>标签的属性dir有2个值, 从左向右进行书写: ltr, 从右向左进行书写: rtl。

7.4. 例

7.4.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>bdo标签定义双流向覆盖</title>
	</head>
	<body>
		<p>如果您的浏览器支持bdo, 则文本将从右向左进行书写(rtl):</p>
		<bdo dir="rtl">This line will be written from right to left</bdo>
	</body>
</html>

7.4.2. 效果图

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值