在网页我们有时候要对文本进行缩略处理，并把鼠标移到缩略词上会显示完整的文本。我们怎么来编写它，请看下面的实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<title>这是个缩略词标签</title>
</head>
<html>
<body>
<p><abbr title="中华人民共和国">中国</abbr>成立于1949年10月1日</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html>
运行效果：
从这个实例中看出，中国两个字下面有一排小点，这正是<abbr>标签的作用。当你鼠标移动到中国两个字上时，就会显示中华人民共和国的文本。
title 属性是显示缩略词的标题。
HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
在网页编辑中长引用<blockquote>是对文本进行缩进处理的。
实例代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个长引用标签元素，它会对文本进行缩进处理</p>
<blockquote cite="https://dwoke.com">你行网成立2019年6月28日，刚刚上线，专注于drupal开源学习和应用，
我叫黄日升，是你行网的管理员，希望和大家一起交流和分享drupal学习经验，
希望大家在你行网注册账号并在论坛社区发表drupal相关的答题供大家解答和学习，
如你有drupal 相关文章需要发表的可以发到我的邮箱，我可以帮帮你开通你行
网的发表文章权限，让你发表文章在你行网上。</blockquote>
</body>
</html>
运行效果：
从这个实例中看看<blockquote>标签对文本进行缩进处理。
<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。
前面我们已经讲了html标签的长引用和短引用，这一节我们来复习一下。
实例代码：
<!doctype html>
<head>
<meat charset="utf-8">
</head>
<html>
<body>
<p>这是一个短引用实例，浏览器通常会给P 元素周围添加双引号</p>
<p>中华人民共和国简称:<q>中国</q></p>
</body>
</html>
运行效果：
从这实例中看出，p元素给中国加上双引号。
HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。
在编辑网页的时候，有时要给文本进行标记删除线和下划线，这一节来学习这个两个标签。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>
这是一个删除线的文本：<del>删除线</del>
<br />
这是一个下划线的文本：<ins>下划线</ins>
</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>
运行效果：
从这个实例中我们学到了如何给文本加删除线和下划线。
<del>：定义文本的删除线。
<ins>：定义文本的下划线。
我们在编辑网页文本会遇到长短不一格式，我们怎么来统一这样格式呢？接下来我们就来学习一个<blockquote>标签，此例演示如何实现长短不一的引用语。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<head>
<html>
<body>
这是一个长引用：
<blockquote>
这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。
这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。
</blockquote>
这是一个短引用：
<q>这是一个短引用。</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
</body>
</html>
运行效果：
从这个实例看出，<blockquote>会使文本变得更整齐，而<p>标签会给文本加上引号。
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
<q> 标签定义短的引用。
浏览器经常在引用的内容周围添加引号。
<q> 与 <blockquote> 的区别
<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
如果我们在编辑网页的时候，需要改变文本的方向的话，我们该如何处理呢？在这里html 给我们提供一个<bdo>标签，这个标签是定义改变文本的方向。
下面我们来做一个实例，如下：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body style="background-color:yellow">
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">这是改变文本方向的HTML标签</html>
</body>
</html>
运行效果：
从这个实例中我们可以 ，<bdo>标签内的内容是从右到左输出的。大家注意一下，我用了个黄色背景，是为了巩固一下前面学习的知识：设置网面的背景颜色。
<bdo>标签定义改变文本的方向。
dir ="rtl":表示文本从右到左输出。
网页中有时我们要标记一缩写或首字母缩写，这时我们就可以用<abbr>和<acronym>标签来进行定义。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<abbr title="中华人民共和国">中国 </abbr>
<br />
<acronym titie="World Wide Web">WWW</acronym>
<p>
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。<br />
仅对于 IE 5 中的 acronym 元素有效。<br />
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。<br />
</p>
<body>
</html>
运行效果：
在这个实例中，当你的鼠标移到“中国”的时候，会显示“中华人民共和国”，移到“WWW”的时候，会显示“world wide web”字样。
<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
HTML5 中不支持 <acronym> 标签。请使用 <abbr> 标签代替。
<acronym> 标签定义首字母缩写。
缩写能够作为单词来朗读，例如 NATO, NASA, ASAP, GUI。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
在网页编辑中，我们经常用到地址，它是用什么html标签输出的呢？这一节我们来讲一下<address>地址标签的输出。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>下面是一个地址标签</p>
<address>
<b>地址：</b>广东省海丰县公平镇
新桔仔园村108号
<br />
<b>网址：</b> <a href="https://dwoke.com">你行网</a>
</address>
</body>
</html>
运行效果：
从这个实例中看出，我可以看<address>标签输出是斜体的样式。在这里我们用到 <p>段落标签，<address>地址标签，<br>换行标签，<b>加粗标签 等HTML网页标签。
这一节我们来学习 <code> ，<kbd>，<tt>，<samp>，<var> 这些标签常用于显示计算机编程代码。
实例代码如下：
<!doctype html>
<head>
<meta charset="UTF-8">
<title>计算机代码标签</title>
</head>
<html>
<body>
<code>这是一个显示计算机代码标签</code>
<br /> <!--这是一回车换行标签-->
<kbd>这是一个键盘输入标签</kbd>
<br />
<tt>这是一个电传打字文本标签</tt>
<br />
<samp>这是一个示例文本标签</samp>
<br />
<var>这是一个计算机变量标签</var>
<p>
<b>注释：</b>这些标签常用于计算机代码显示。
</>
</body>
</html>
运行效果：
从这个实例看出，有了这些标签，我们对于计算机代码输出更多的方法。
<tt> 标签呈现类似打字机或者等宽的文本效果。
<tt> 标签与 <code> 和 <kbd> 标签一样，<tt> 标签和必需的 </tt> 结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code>标签配合使用。
有时候我们对文本需要预演输出效果，我们可以使用 pre 标签对空行和空格进行控制。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<pre>
这是一个预演的文本样式，
它不会忽略空格，
按的编辑文本格式
进行输出。
<pre>
<p>pre 很适合计算机代码输出</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
运行效果：
从这个实例中看出，我们在代码中输入的文本格式不会改变，这就是<pre> 标签样式 的作用。
评论