HTML文本格式化

浏览数：35 / 时间：2015年06月09日

斜体文本；加粗文本 <br可以替换This text is emphasized；

加粗文本：斜体文本 可以替换This text is strong；

电脑自动输出：<code>电脑自动输出</code> ；

文本下标及上标： 下标 和 上标；

加大/小文本：<big/small>This text is big</big/small>；

通常标签 替换加粗标签 来使用, 替换 标签使用；

预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制；呈现出来的文本跟打上去一样；

<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

</body>
</html>

效果：

技术分享

计算机输出标签：<code> 定义计算机代码。 <samp> 定义计算机代码样本。 <tt> 定义打字机代码。 <pre> 定义预格式文本。,多用在显示静态页面源代码,输出格式上的不同.功能有些类似 h1 h2等.没特殊的意思.

<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

地址：此例演示如何在 HTML 文件中写地址；

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

缩写和首字母缩写：如何实现缩写或首字母缩写；

<html>

<body>

<abbr（简写） title（标题）="etcetera">etc.</abbr>
<br />
<acronym（首字母缩写）title="World Wide Web">WWW</acronym>

<p>在某器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p些浏览>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

文字方向：如何改变文字的方向；

<!DOCTYPE html>
<html>
<body>

<p>This paragraph will go left-to-right.</p>  
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>  

</body>
</html>

双引号：如果标记是不需要段落分隔的短引用，请使用 <q>。

在 HTML 4.01 中，<blockquote> 标签定义一段长引用。

<!DOCTYPE html>
<html>
<body>

<p>WWF‘s goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

<blockquote>
<p>Here is a long quotation here is a long quotation.</p>
</blockquote>

在 HTML5 中，<blockquote> 标签定义摘自另一个源的块引用；

<!DOCTYPE html>
<html>
<body>

<h1>About WWF</h1>
<p>Here is a quote from WWF‘s website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world?s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

</body>
</html>

效果:

技术分享

删除字效果和插入字效果：

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>（删除）blue</del> <ins>（插入）red</ins>!</p>

</body>
</html>

标签及定义：

<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目