HTML 文本格式化
HTML可定义很多格式化输出地元素.比如:粗体字 斜体字 文本方向等.而这些格式化的标签可以从两个方面进行划分.
按标签功能可以分为:
文本格式化标签
'计算机输出'标签
引用和术语定义标签
按标签功能的实现可以分为:
基于内容的样式标签
基于物理样式的标签
首先从标签功能实现上来看文本的格式化.
1. 基于内容的样式标签
基于内容的样式会告诉浏览器它所包含的文本具有特殊的含义.上下文或用法.然后浏览器就会把与该含义.上下文或者用法一致的格式应用在文本上.
基于内容的样式标签有以下几种:
1) <abbr>表示一个缩写形式
2) <acronym>定义只取首字母的缩写
3) <code>用于表示计算机源代码或其它机器可以阅读的代码.。
4) <dfn>标记那些对特殊术语或短语的定义.
5) <em>告诉浏览器其所包含的文本为强调内容.
6) <kbd>表示要从键盘输入的文本,浏览器使用等宽字体显示该文本
7) <strong>标签和<em>标签一样,表示对文本的强调.但是<strong>的语气更为强烈些.
8) <var>表示变量名或者由用户提供的值.
基于内容的样式,就是使用不同的字体,格式来显示标签所包围的文本,都是有特殊的含义.如果仅仅是想产生不一样的文本显示效果,而没有这些特殊的含义,最好不要使用这些标签.例如:<strong>表示强调,其包含的文本显示为粗黑体.但是,如果仅仅是想产生粗黑体的文本就不要使用<strong>标签,可以使用<b>标签.
2. 基于物理样式的标签
基于内容的样式告诉浏览器,这些标签所代表了特殊的含义,依此能让浏览器更好的现实文本.在特殊的时候,也许需要文本以特殊的方式来显示,这就需要使用物理样式.9种基于物理的样式:粗体(bold)斜体<Italic)等宽(monospaced),下划线(underlined),删除线(strikethrough)放大(larger),缩小(smaller),上标(superscripted),下标(subscribed)
粗体<b>
大字体<big>
斜体<i>
<s>删除,不常用了,可以使用<del>代替.
<small>小字体
<strike>下划线
<sub>上标
<sup>下标
<tt>等宽字体.
功能实现上的划分就到此了,再来看下从功能上的分类,由于有很多的标签和上面的标签重复,下面只详细的介绍上面没有的标签.
文本格式化标签.
标签 描述
<b> 定义粗字体
<big> 定义大号字体
<small> 定义小号字体
<em> 定义强调文字
<i> 定义斜字体
<strong> 定义较强烈的强调
<sub> 定义上标
<sup> 定义下标
<ins> 定义插入字.
<del> 定义删除
<s> 不赞成使用,del代替
<strike> 不赞成使用,del代替.
计算机输出标签
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
引用、引用和术语定义
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>
实例2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <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>