具体排版

1、标题和标题类 <h1> ~<h6>和.h1~h6｜副标题<small>和.small

              font-size                    margin-top                margin-bottom

h1         36px                          20px                          10px

h2         30px                          20px                          10px

h3         24px                          20px                          10px

h4         18px                          10px                          10px

h5         14px                          10px                          10px

h6         12px                          10px                          10px

e.g.:<h*>这是标题<small>这是副标题</small></h*>

 

2、内容、p段落  font-size:14px; line-height:20px;margin-bottom:10px;

e.g.:<p>这是段落</p>

 

3、强调突出内容  .leader{margin-bottom:20px;font-size:16px(min-width:768:21px);font-weight:300;}

e.g.:<p>这是段落 突出显示</p>

 

4、标记文本<mark>和.mark  {padding/background-color}

e.g.:<mark>这是标记文本</mark>||<*>这是已标记显示的文本</*>

 

5、删除的文本<del>  浏览器自带样式

e.g.:<del>这是删除的文本</del>

 

6、无用的文本<s>  浏览器自带样式

e.g.:<s>这是无用的文本</s>

 

7、插入的文本<ins>  浏览器自带样式

e.g.:<ins>这是插入的文本</ins>

 

8、带下划线文本<u>  浏览器自带样式

e.g.:<u>这是下划线的文本</u>

 

9、小号文本<small>和.small  {font-size:85%;}

e.g.:<small>这是小号文本</small>||<*>这是已小号显示的文本</*>

 

10、着重<strong>  浏览器自带样式  有语气

e.g.:<strong>这是着重的文本 加粗显示</strong>

 

11、斜体<em>  浏览器自带样式  有语气

e.g.:<em>这是着重的文本 斜体显示</em>

 

12、高亮文本<b>  浏览器自带样式  不带语气

e.g.:<b>这是加粗的文本</b>

 

13、斜体<i>  浏览器自带样式  不带语气  一般用于技术词汇、发言

e.g.:<i>这是斜体的文本</i>

 

14、文本对齐  .text-left  .text-center  .text-right  .text-justify  .text-nowrap

e.g.:<p>文本左对齐</p>||<p>文本居中对齐</p>||<p>文本右对齐</p>||<p>文本两端对齐</p>||<ptext-lowercase">字母转换小写显示<p>||<p>字母转换大写显示<p>||<p>字母首字母大写显示<p>

 

16、缩略语  <abbr title=””>  {cursor/border-bottom}

e.g.:<abbr>提示文本 鼠标经过显示title内容</abbr>

 

17、首字母缩略语  <abbr title .initialism> {font-size:90%/uppercase}

e.g.:<p><abbr>首字母内容</abbr>首字母后面内容</p>

 

18、地址  <address>  {font-style}

e.g.:<address>姓名<br/>地址<br>号码</address> 一般配合<br />使用

 

19、引用  <blockquote>  {padding/font-size/border-left}

e.g.:<blockquote><p>这是引用文本</p></blockqoute> 直接引用一般配合<p>使用

 

20、引用＋命名来源  <footer>  <cite>

e.g.:<blockquote>这是引用文本<footer>这是引用来源描述<cite>这是引用名称</cite></footer></blockquote>

 

21、引用反向风格  .blockquote-reverse

e.g.:<blockquote>这是引用文本<footer>这是引用来源描述<cite>这是引用名称</cite></footer></blockquote> 右对齐显示

 

22、无序列表 <ul>  {margin-top/margin-bottom}

e.g.:<ul><li>这是无序列表内容</li></ul>

 

23、有序列表  <ol>  {margin-top/margin-bottom}

e.g.:<ol><li>这是有序列表内容</li></ol>

 

24、无样式列表  .list-unstyled  {padding-left/list-style}

e.g.:<ul><li>这是无序列表 层叠默认样式显示</li></ul>||<ol><li>这是有序列表 层叠默认样式显示</li></ol>

 

25、内联样式  .list-inline  {padding-left/margin-left/list-style}  {display/padding}

e.g.:<ul><li>这是无序列表 一行显示</li></ul>||<ol><li>这是有序列表 一行显示</li></ol>

 

26、定义列表  <dl>  {margin-top/margin-bottom}  {font-weight}  {margin-left}

e.g.:<dl><dt>定义标题</dt><dd>定义内容</dd></dl>

 

27、定义列表水平排列  .dl-horizontal

e.g.:<dl><dt>定义标题</dt><dd>定义内容</dd></dl> 标题和内容在一行显示

 

28、代码  <code>  {padding/font-size/color/background-color/border-radius}

e.g.:<code>代码片段</code> 特殊字符一般以字符实体表示

 

29、用户输入  <kbd>  {padding/font-size/color/background-color/border-radius /box-shadow}

e.g.:<kbd>键盘输入的内容</kbd>

 

30、代码块  <pre>  {padding/margin/font-size/color/background-color/word-break/word-wrap/border/border-radius}

e.g.:<pre>代码块内容</pre> 特殊字符一般以字符实体表示

 

31、变量  <var>  浏览器自带样式

e.g.:<var>程序中的变量</var>

 

32、程序输出  <samp>  {font-family}

e.g.:<samp>程序输出的内容</samp>