文章目录

• 1. 常用代码
• 2. 文字
• • 2.1. 基本
  • 2.2. 色彩
  • 2.3. 特殊字符
  • 2.4. 常用html标签语法
• 3. 图片样式定义
• • 3.1. html语法
  • 3.2. markdown语法
• 4. 表格
• • 4.1. html表格
  • 4.2. markdown表格
• 5. 自定义渲染显示样式
• • 5.1. markdown中的CSS标签定义
  • • 5.1.1. 标题栏样式定义
    • 5.1.2. 递增序列
  • 5.2. 多级标题
  • • 5.2.1. CSS标题标签自定义
  • 5.3. 其他
  • • 5.3.1. 框架模板
• 6. 附：常用色彩代码

标签（空格分隔）： JUN-code

1. 常用代码

空格： 
色彩：
链接跳转：页内：跳转链接：[内容](#jump)跳转锚点：
插入：目录：[TOC]
超链接：文字超链接：[不如](http://bruce-sha.github.io "不如的博客")图片超链接(markdown中)：![GitHub Mark](http://**** "GitHub Mark")图片超链接：网址超链接：

2. 文字

2.1. 基本

*我是斜体*  
**我是粗体**  
~~我是删除线~~- 我是序号（无编号）  - 我是二级序号（无编号）- 我是三级序号（无编号）1. 我是序号（有编号）  1. 我是二级序号（有编号）1. 我是三级序号（有编号）> 我是段落引用1  
> 我是段落引用2  

我是斜体
我是粗体
我是删除线

• 我是序号（无编号）
  • 我是二级序号（无编号）
    • 我是三级序号（无编号）

1. 我是序号（有编号）
   1. 我是二级序号（有编号）
      1. 我是三级序号（有编号）

我是段落引用1
我是段落引用2

2.2. 色彩

测试文本内容

测试文本内容

测试文本（仿宋字体，红色，3号大小）

测试文本（仿宋字体，红色，3号大小）

2.3. 特殊字符

2.4. 常用html标签语法

测试文本：三级标题

测试文本：三级标题

3. 图片样式定义

3.1. html语法

数值定义大小：

百分比定义图片大小：

居中：

3.2. markdown语法

![](http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg)

4. 表格

4.1. html表格

<table><tr><td> 1 td> <td> 2 td> <td> 3 td>tr><tr><td> 4 td> <td> 5 td> <td> 6 td>tr>
table>

4.2. markdown表格

| 1   | 2          |      3      |          4 |
| --- | :--------- | :---------: | ---------: |
| 1   | ---居左--- | ----居中--- | ---居右--- |
| 11  | 22         |     33      |         44 |

5. 自定义渲染显示样式

5.1. markdown中的CSS标签定义

5.1.1. 标题栏样式定义

加粗：font-weight:bold;

h1{color:#272727;background:#FF9224;font-family:黑体;font-size: 30px;
}
h2{color:#272727;background:#FFD306;font-family:黑体;font-size: 25px;
}
h3{color:#272727;background:#C2FF68;font-family:黑体;font-size: 20px;
}
h4{color:#272727;font-weight:bold;font-family:黑体;font-size: 18px;
}

5.1.2. 递增序列

CSS代码：

ol {list-style-type:none;		counter-reset:sectioncounter;
}                      
ol li:before {content:"美女" counter(sectioncounter) "： "; counter-increment:sectioncounter;
}

HTML代码：

5.2. 多级标题

HTML代码如下：
  
列表项  
  
列表项  
  
列表项
  
列表项
  
列表项
  
  
  
  
  

ol {padding:0 0 0 20px; margin:0; list-style:none; counter-reset:a;}  
li:before {counter-increment:a; content:counters(a,".")". ";}

 
 
 

ol {list-style-type:none;		counter-reset:sectioncounter;}                      
ol li:before {content:"美女" counter(sectioncounter) "： "; counter-increment:sectioncounter;
}
这是一个标题。
这是一个标题。
这是一个标题。

5.2.1. CSS标题标签自定义

ol {/* 开始计数 */counter-reset: section;                list-style-type: none;
}li::before {counter-increment: section;           content: counters(section,".") " ";  
}ol{list-style: none;counter-reset: ordered;
}
li:before{counter-increment: ordered;content: counters(ordered,".")" ";
}

h1{color:#272727;    background:#FF9224;    font-family:黑体;    font-size: 30px;counter-reset: ordered;
}
h2{color:#272727;    background:#00BB00;    font-family:黑体;    font-size: 25px;
}
h3{color:#272727;    background:#C2FF68;    font-family:黑体;    font-size: 20px;
}
h4{color:#272727;    font-weight:bold;    font-family:黑体;    font-size: 18px;
}
h1:before{ counter-increment: ordered;   content: counter(chapter)" ";
}
h2:before{counter-increment: section;    content: counter(chapter)"."counter(section)" ";
}
h3:before{counter-increment: subsec;    content: counter(chapter)"."counter(section)"."counter(subsec)".";
}

5.3. 其他

5.3.1. 框架模板

• bootstrap ace admin HTML5 全新高大尚后台框架_HTML/CSS_第七城市
  http://www.th7.cn/web/html-css/201501/75159.shtml

6. 附：常用色彩代码

• HTML 颜色 | 菜鸟教程
  http://www.runoob.com/html/html-colors.html

代码格式：d
文本内容

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！