HTML（5）常用的格式标签
一、基本文字格式
1.标题<h></h>
HTML定义<h1></h1>到<h6></h6>六个<h>标签，分别用来不同大小字体的标题（Heading）。字体由大到小，<h1>最大，<h6>则最小。 Heading标签需要注意的是：a.浏览器会自动地在标题的前后添加空行。因为Heading标签属于块级元素，而在默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行（<br/>）。b.标题对整个页面来说很重要,应该将HTML heading 标签只用于标题，而不要仅仅是为了产生粗体或大号的文本而使用标题。因为Heading标签对SEO是很友好的，搜索引擎使用标题为您的网页的结构和内容编制索引，而且用户则以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 <h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。
1 <!--<h>标签是设置标题的，把重要的信息放在<h1>里面，搜索引擎会优先搜索--> 2 <h1> 3 中国一</h1> 4 <h2> 5 中国二</h2> 6 <h3> 7 中国三</h3> 8 <h4> 9 中国四</h4> 10 <h5> 11 中国五</h5> 12 <h6> 13 中国六</h6>
效果如下图，字体大小由大到小：
2.换行<br/>、不换行<nobr></nobr>和分段<p></p>
关于HTML中的换行标签<br/>和分段标签<p></p>的区别是，换行标签<br/>只是回车，<p></p>则是分段。因为<p>标签属于块级元素，它的前后会有比较大的空白（自动添加<br/>），而<br/>标签属于行级元素，它只是简单的换行，前后没有空白。有一个与<br/>相对的标签<nobr></nobr>，它表示不换行，通常用于防止浏览器将程序代码等不需要换行的地方自动换行。
1 <!-- 换行和分段：--> 2 <p> 3 这是第一段<br /> <!--换行--> 4 用到了换行标签<br /> 5 请看效果<br /> 6 很容易理解</p> 7 <p> 8 这是第二段</p> <!--分段，自动加换行--> 9 <p> 10 这是第三段</p> 11 <p> 12 <nobr> <!--防止换行--> 13 int i =0,j=10; 14 </nobr> 15 </p>
3.水平线标签<hr/>
<hr /> 标签在 HTML 页面中创建水平线。使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法。<hr/>标签可以设置宽度width和高度height，这两个属性又分别有像素和百分比的表示方式。此外，<hr/>标签还有size（厚度）、color（颜色）和noshade（无阴影）的属性。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <hr size="5" color="#FF0000" /> 8 <!--定义了size（厚度）为5和color为红色的hr标签--> 9 <hr width="60" /> 10 <!--width属性为60px--> 11 <hr width="60%" /> 12 <!--width为60%--> 13 <hr size="10" /> 14 <!--size为10px--> 15 <hr size="10%" /> 16 <!--size为10%--> 17 <!--align属性，可取值分别为left、right和center--> 18 <hr width="20%" align="left" /> 19 <hr width="20%" align="right" /> 20 <hr width="20%" align="center" /> 21 <hr color="#FF0000" /> 22 <!--noshade属性，设置无阴影效果--> 23 <hr noshade="noshade" /> 24 </body> 25 </html>
4.文本格式化标签
1 <!--常用文本格式标签--> 2 <center>博客园</center>居中显示 3 <b>Hello，World！</b>粗体，推荐使用<strong>标签。 4 <i>斜了吧</i>斜体。 5 <u>我是一个下划线标签</u>带下划线。 6 <em>强调，斜体</em> 7 <sub>2</sub>下标，如：H<sub>2</sub>O 8 <sup>2</sup>上标，如：10<sup>2</sup> 9 10 <!--设置字体大小可分为绝对字体大小和相对字体大小，绝对的通过<font>标签的size属性来设置， 而相对字体大小为默认字体的相对值--> 11 <!--绝对字体大小为size的值是1-7的某个数--> 12 <!--color（设置颜色） size（1-7）。--> 13 <!--face属性用于设置字体--> 14 <font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>
5.预格式化标签<pre>
<pre> 预格式化标签，保持网页的内容原样展示。可以用于某些特殊内容的展示，也可以用于显示计算机编程的源代码（比如博客园的源代码就是通过<pre>标签来显示的）。
1 <p>pre 标签显示某些特殊的希望原样展示的内容：</p> 2 <pre> 3 我是个好孩子， 4 我喜欢中 啊啊啊啊 5 6 这是一个预格式化标签 7 8 ____ 9 (. \ 10 \ | 11 \ |___(\--/) 12 __/ ( . . ) 13 "'._. '-.O.' 你好，我是一只小猫！ 14 '-. \ "|\ 15 '.,,/'.,, 16 17 18 (⊙_⊙)？你说什么呢？？？？ 19 </pre> 20 21 <p>pre 标签很适合显示计算机代码：</p> 22 <pre> 23 for i = 1 to 10 24 print i 25 next i 26 </pre>
6.<marquee></marquee>标签
<marquee></marquee>标签对告诉浏览器移动显示其中的文本和图像。
1 <div> 2 <!--marquee标签部分浏览器支持:IE、FF--> 3 <!--direction属性：指定内容的移动方向，可取值有left、right、up和down--> 4 <!--behavior属性：指定标签的行为，可取值有scroll、alternate和slide--> 5 <marquee direction="left" scrolldelay="100" behavior="alternate"> 6 大家好，欢迎大家来到我的主页！...... 7 </marquee> 8 </div>
7.其它的格式标签例子。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 </head> 7 <body> 8 <!--<abbr>显示缩写：--> 9 <abbr title="British Broadcasting Corporation"> 10 BBC</abbr><br /> 11 <!-- <acronym>显示一个词组的缩写字头：--> 12 <acronym title="World Wide Web">www</acronym><br /> 13 <!--<blockquote>定义了长文字的引用:--> 14 <blockquote> 15 <p> 16 Beyond two or three days ,the world's best forecasts are speculative ,and beyond 17 six or seven they are worthless. 18 </p> 19 <br /> 20 <!-- <q>标签定义短引用：--> 21 <q>The q lable!!!</q> 22 </blockquote> 23 24 <!--<address>地址，签名，文档的作者信息等:--> 25 <address> 26 北京市海淀区中关村软件园 sys@qq.com 27 </address> 28 <!--<bdo>标签通过dir属性来定义文字显示的顺序：--> 29 <bdo dir="ltr">博客园</bdo><br /> <!--ltr：left to right,从左到右--> 30 <bdo dir="rtl">博客园</bdo><br /> <!--rtl:right to left,从右到左--> 31 </body> 32 </html>
二、HTML列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <b>HTML列表:</b><br /> 8 <hr size="5" color="#FF0000;" /> 9 <br /> 10 <!--第一，无序列表（ul:unordered list)--> 11 <font size="+1" color="#00FF00" face="华文楷体">I.无序列表(Unordered List):</font><br /> 12 1.默认：<br /> 13 <ul> 14 <li>香蕉</li> 15 <li>苹果</li> 16 <li>橘子</li> 17 </ul> 18 2.用type属性:<br /> 19 <!--ul type属性的取值： 20 disc:实心圆、circle:空心圆、square:实心方块--> 21 <!--ol type属性的取值： 22 <ul type="I"/"a"/"A"/"1"> 23 --> 24 <ul type="circle"> 25 <li>香蕉</li> 26 <li>苹果</li> 27 <li>橘子</li> 28 </ul> 29 <ul type="square"> 30 <li>香蕉</li> 31 <li>苹果</li> 32 <li>橘子</li> 33 </ul> 34 3.属性值的混合使用，起强调作用：<br /> 35 <ul type="circle"> 36 <li>香蕉</li> 37 <li type="disc">苹果</li> 38 <li>橘子</li> 39 </ul> 40 <!--第二，有序列表(ol,ordered list)--> 41 <font size="+1" color="#00FF00" face="华文楷体">II.有序列表(Ordered List)：</font><br /> 42 1.默认：<br /> 43 <ol> 44 <li>篮球</li> 45 <li>排球</li> 46 <li>足球</li> 47 </ol> 48 2.使用type属性：<br /> 49 <ol type="i"> 50 <li>篮球</li> 51 <li>排球</li> 52 <li>足球</li> 53 </ol> 54 <ol type="A"> 55 <li>篮球</li> 56 <li>排球</li> 57 <li>足球</li> 58 </ol> 59 3.改变有序列表项的前导编号：<br /> 60 <blockquote> 61 a.<font color="#FF00FF">start</font>属性单独使用：<br /> 62 <ol start="3"> 63 <li>篮球</li> 64 <li>排球</li> 65 <li>足球</li> 66 </ol> 67 b.<font color="#FF00FF">vlaue</font>属性单独使用:<br /> 68 <ol> 69 <li>篮球</li> 70 <li value="5">排球</li> 71 <li>足球</li> 72 </ol> 73 c.<font color="#FF00FF">start、value</font>属性的共同使用：<br /> 74 <ol start="8"> 75 <li>篮球</li> 76 <li value="15">排球</li> 77 <li>足球</li> 78 </ol> 79 </blockquote> 80 <font size="+1" color="#00FF00" face="花纹楷体">III.嵌套列表(Nested Lists)：</font><br /> 81 1.无序列表中嵌套无序列表:<br /> 82 <ul> 83 <li>饮料</li> 84 <li>水果 85 <ul> 86 <li>香蕉</li> 87 <li>苹果</li> 88 <li>橘子</li> 89 </ul> 90 </li> 91 <li>蔬菜</li> 92 <li>茶叶</li> 93 </ul> 94 2.无序列表中嵌套有序列表:<br /> 95 <ul> 96 <li>饮料</li> 97 <li>水果 98 <ol> 99 <li>香蕉</li> 100 <li>苹果</li> 101 <li>橘子</li> 102 </ol> 103 </li> 104 <li>蔬菜</li> 105 <li>茶叶</li> 106 </ul> 107 3.有序列表中嵌套有序列表：<br /> 108 <ol> 109 <li>饮料</li> 110 <li>水果 111 <ol> 112 <li>香蕉</li> 113 <li>苹果</li> 114 <li>橘子</li> 115 </ol> 116 </li> 117 <li>蔬菜</li> 118 <li>茶叶</li> 119 </ol> 120 4..有序列表中嵌套无序列表：<br /> 121 <ol> 122 <li>饮料</li> 123 <li>水果 124 <ul> 125 <li>香蕉</li> 126 <li>苹果</li> 127 <li>橘子</li> 128 </ul> 129 </li> 130 <li>蔬菜</li> 131 <li>茶叶</li> 132 </ol> 133 5.列表的多级嵌套：<br /> 134 <ol> 135 <li>饮料</li> 136 <li>水果 137 <ul> 138 <li>香蕉</li> 139 <li>苹果 140 <ul> 141 <li>产自巴西</li> 142 <li>产自中国</li> 143 </ul> 144 </li> 145 <li>橘子</li> 146 </ul> 147 </li> 148 <li>蔬菜</li> 149 <li>茶叶</li> 150 </ol> 151 <!--第三，定义列表（dl,definition list)--> 152 <font size="+1" color="#00FF00">IV.定义列表：</font><br /> 153 1.定义列表：<br /> 154 <!-- 155 <dl> 156 <dt>第一个标题项</dt> 157 <dd>对第一个标题项的解释性文字</dd> 158 <dt>第二个标题项</dt> 159 <dd>对第二个标题项的解释性文字</dd> 160 </dl> 161 其中：<dl>用来标识定义列表的开始； 162 <dt>用来标识定义列表的列表项； 163 <dd>用来标识定义列表中列表项的解释性文字。 164 --> 165 <dl> 166 <!--dt:definition term(定义术语)定义“北京”这个标题项--> 167 <dt>北京</dt> 168 <!--dd:definition definition(定义对术语的解释定义)对“北京”这个标题项的解释--> 169 <dd> 170 中国的政治中心</dd> 171 <dt>上海</dt> 172 <dd> 173 中国的经济中心</dd> 174 <dt>深圳</dt> 175 <dd> 176 中国改革开放的前沿城市</dd> 177 </dl> 178 </body> 179 </html>
三、改变文本的外观和含义
很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。
1.基于内容的样式（content-based style）
基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。注意，基于内容的标签赋予含义，而不是格式化。因此，它们对于自动处理来说非常重要；计算机并不关心文档的外观如何。
因为字体样式是通过语义线索来指定的，因此浏览器可以为用户选择一种合适的显示样式。由于不同地点的样式各种各样，所以使用基于内容的样式可以帮助你确保自己的文档对广大范围的读者来说都是有意义的。这一点在专门供那些盲人和残疾人所使用的浏览器上显得尤其重要，因为他们的显示选项可能和我们传统的文本根本不同，或者在某方面具有非常大的局限性。
当前的 HTML 和 XHTML 标准并没有为每一个基于内容的标签都定义一种格式；它们仅仅规定必须用与文档中普通文本不同的方式来显示基于内容的样式。标准甚至没有要求这些基于内容的样式彼此之间都要用不同的方式显示。在实际应用中，你可能会发现很多这样的标签和传统的印刷有着非常明显的关系，它们有着相似的含义和显示样式，而且在多数浏览器中都以相同的样式和字体来显示。
使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则，因为仅仅是简单地想想文本该如何显示，而不必知道这些文本的含义是什么，是十分容易的。一旦你开始使用基于内容的样式之后，文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑。这些标签是：
<abbr>
<acronym>
<cite>
<code>
<dfn>
<em>
<kbd>
<samp>
<strong>
<var>
2.物理样式（physical style）
在讨论基于内容的样式标签时，我们经常用到“意图”这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。然而，在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗）。在这种情况下，就可以对文本使用物理样式。
虽然其他文字处理系统的趋势是精确地控制样式和外观，但是在使用 HTML 或 XHTML 时，除非极少情况下，都应该避免使用物理标签。应当尽可能地向浏览器提供上下文信息，并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本，但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式。
当前的 HTML/XHTML 标准一共提供了 9 种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。这些标签是：
<b>
<big>
<i>
<s>
<small>
<strike>
<sub>
<sup>
<tt>
注：改变文本的外观和含义摘自：http://www.w3school.com.cn/html/html_style.asp
