标题
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
列表
无序列表
- Django是个好框架
- Uliweb是个好框架
- MVT模型
- 组织结构
- 资源共享的处理方式
- URL映射
- Bottle是个好框架
- Rails是个好框架
有序列表
- 以热爱祖国为荣，以危害祖国为耻吗？
- 以服务人民为荣，以背离人民为耻吗？
- 以崇尚科学为荣，以愚昧无知为耻吗？
- 以辛勤劳动为荣，以好逸恶劳为耻吗？
- 以团结互助为荣，以损人利己为耻吗？
- 以诚实守信为荣，以见利忘义为耻吗？
- 以遵纪守法为荣，以违法乱纪为耻吗？
- 以艰苦奋斗为荣，以骄奢淫逸为耻吗？
定义列表
- 定义列表
- 适用于术语的定义/解释
- Django
- Django 是一种高级的基于python的web开发框架；
- 推崇一种快速,整洁而且实用主义哲学的设计及开发方式
行内列表
- 首页
- 关于
- 博客
- 联系
段落
例1：论语学而篇第一
作者：孔子（）
本篇引语
《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是“吾日三省吾身”；“节用而爱人，使民以时”；“礼之用，和为贵”以及仁、孝、信等道德范畴。
原文
子曰[1]：“学[2]而时习[3]之，不亦说[4]乎？有朋[5]自远方来，不亦乐[6]乎？人不知[7]，而不愠[8]，不亦君子[9]乎？”
注释
[1] 子：中国古代对于有地位、有学问的男子的尊称，有时也泛称男子。《论语》书中“子曰”的子，都是指孔子而言。
[2] 学：孔子在这里所讲的“学”，主要是指学习西周的礼、乐、诗、书等传统文化典籍。
[3] 时习：在周秦时代，“时”字用作副词，意为“在一定的时候”或者“在适当的时候”。但朱熹在《论语集注》一书中把“时”解释为“时常”。“习”，指演习礼、乐；复习诗、书。也含有温习、实习、练习的意思。
[4] 说：音ｙｕè，同悦，愉快、高兴的意思。
[5] 有朋：一本作“友朋”。旧注说，“同门曰朋”，即同在一位老师门下学习的叫朋，也就是志同道合的人。
[6] 乐：与说有所区别。旧注说，悦在内心，乐则见于外。
[7] 人不知：此句不完整，没有说出人不知道什么。缺少宾语。一般而言，知，是了解的意思。人不知，是说别人不了解自己。
[8] 愠：音ｙùｎ，恼怒，怨恨。
[9] 君子：《论语》书中的君子，有时指有德者，有时指有位者。此处指孔子理想中具有高尚人格的人。
译文
孔子说：“学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？”
评析
宋代著名学者朱熹对此章评价极高，说它是“入道之门，积德之基”。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的“学”不是指学习，而是指学说或主张；“时”不能解为时常，而是时代或社会的意思，“习”不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同我的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
此外，在对“人不知，而不愠”一句的解释中，也有人认为，“人不知”的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。
总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。
代码 用的不多，只是为了完整性而放进来，在code.css中。
行内代码
例如，section 应该被做为行级代码包装。
块级代码
<p>示范文本...</p>
表格 这是一个临时的方案
1、默认表格样式
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
2、背景交替的表格样式
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
3、有边框的表格样式
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
4、悬停的表格样式
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
5、紧凑的表格样式
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
表单
暂时没有很好的表单解决方案，要等图标，按钮确定后，并且解决表单的验证和提交后方能进行这里的开发。
默认样式
行内表單樣式
水平表單樣式
按钮
对于现在的按钮没有很好的定义，差不多只是从视觉上分类，并没有从语义上有良好的定义。这里展示的只不过是一种思路，一种实践方式。
| 按钮 | class | 描述 |
|---|---|---|
| 默认 | .btn |
标准默认按钮 |
| 主要 | .btn.btn-primary |
在一系列按钮中，指出这个是最主要的操作。 |
| 弱化 | .btn.btn-weak |
在一系列按钮中，指出这个按钮相对来说没这么重要。 |
| 链接 | .btn.btn-link |
简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为。 |
下面的按钮在同程的UI中并没有涉及，但是为了保持按钮语义级别的完整性，我还是把它们全部列举出来。 |
||
| 信息 | .btn.btn-info |
默认样式的替代样式。 |
| 成功 | .btn.btn-success |
表示成功或积极的动作。 |
| 警告 | .btn.btn-warning |
提醒应该谨慎采取这个动作。 |
| 危险 | .btn.btn-danger |
表示这个动作危险或存在危险。 |
图标和徽标
图标和徽标，应该以怎样分类呢？怎样的html结构和样式呢？
看了设计部门的图标整理，没辙了。
以下是自己根据bootstrap的图标修改的(着色 205,10,25):