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>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <b>这个文本是加粗的</b> <br /> <strong>这个文本是加粗的</strong> <br /> <big>这个文本字体放大</big> <br /> <em>这个文本是斜体的</em> <br /> <i>这个文本是斜体的</i> <br /> <small>这个文本是缩小的</small> <br /> 这个文本包含 <sub>下标</sub> <br /> 这个文本包含 <sup>上标</sup> </body> </html>
提交重置代码