Skip to content

Markdown_HTML.md

Latest commit

 

History

History
749 lines (684 loc) · 24.6 KB

Markdown_HTML.md

File metadata and controls

749 lines (684 loc) · 24.6 KB
Raw

Markdown及HTML常用命令

@[toc]

1. 常用代码

空格：

 

色彩：

<font color=""></font>

链接跳转（页内跳转，页外需#前加上路径）：

跳转链接：[xxx文本显示内容](#jump)
跳转锚点：<span id="jump"></span>

插入目录：

[TOC]

文字超链接：

[baidu](http://baidu.com)

网址超链接：

<http://ibruce.info>

图片超链接(markdown中)：

![Baidu logo](http://www.baidu.com/img/flexible/logo/pc/result.png)
<img src="http://www.baidu.com/img/flexible/logo/pc/result.png" width="128" height="96" />

上标下标：

H<sub>2</sub>O  CO<sub>2</sub>
爆米<sup>TM</sup>

复制模板：

<div align=center>
<img src=""  width="450" align="middle" style="border:0px solid black">
<br><br>
<p><b></b></p>
<p></p>
<br><br>
</div>
<b>  </b>
<p>  
</p>
<details><summary>来源：</summary>
</details>

2. 文字

2.1. 基本

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

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

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

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

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

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

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

2.2. 色彩

<font color="#00ff00">测试文本内容</font>

测试文本内容

<font face="仿宋" color="red" size="3">测试文本（仿宋字体，红色，3号大小）</font>

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

2.3. 特殊字符

<描述> <语法>
空格 &nbsp;
换行符 <br>

2.4. 常用html标签语法

<h3>测试文本：三级标题</h3>

测试文本：三级标题

3. 图片样式定义

3.1. html语法

数值定义大小：

<img src="http://www.baidu.com/img/flexible/logo/pc/result.png" width="128" height="96" />



百分比定义图片大小：

<img src="http://www.baidu.com/img/flexible/logo/pc/result.png" width="20%" height="60" />



居中：

<div align=center>
<img src="http://www.baidu.com/img/flexible/logo/pc/result.png" />
</div>



3.2. markdown语法

![注释信息](http://www.baidu.com/img/flexible/logo/pc/result.png)

注释信息


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>
1 2 3
4 5 6

4.2. markdown表格

| 1   | 2          |      3      |          4 |
| --- | :--------- | :---------: | ---------: |
| 1   | ---居左--- | ----居中--- | ---居右--- |
| 11  | 22         |     33      |         44 |
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代码：

<ol>
    <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128" height="96" /></li>
    <li><img src="http://www.baidu.com/img/flexible/logo/pc/result.png" width="128" height="96" /></li>
</ol>

5.2. 自动多级标题

<head>
    <style type="text/css">
        ol {
            padding: 0 0 0 20px;
            margin: 0;
            list-style: none;
            counter-reset: content_a;
        }
        li:before {
            counter-increment: content_a;
            content: counters(content_a, ".")". ";
        }
    </style>
</head>

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <ol>  
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
        </ol>
    </ol>
</ol>

文件预览：./HTML_ol_order.html

5.3. CSS标题标签自定义

<div class="test">
    <style scoped>
        /* 设置起始，一般使用body。可以自定义开始的标签：
        如 .test，调用时使用<div class="test"></div> */
        .test {
            counter-reset: or1;
        }
        h1{ color:#272727;    background:#FF9224;    font-family:黑体;    font-size: 30px; counter-reset: or2; }
        h2{ color:#272727;    background:#00BB00;    font-family:黑体;    font-size: 25px; counter-reset: or3; }
        h3{ color:#272727;    background:#C2FF68;    font-family:黑体;    font-size: 20px; counter-reset: or4; }
        h4{ color:#272727;    font-weight:bold;    font-family:黑体;    font-size: 18px; counter-reset: or5; }
        h1:before{ counter-increment: or1;   content: counter(or1)" "; }
        h2:before{ counter-increment: or2;   content: counter(or1)"."counter(or2)" "; }
        h3:before{ counter-increment: or3;   content: counter(or1)"."counter(or2)"."counter(or3)"."; }
        h4:before{ counter-increment: or4;   content: counter(or1)"."counter(or2)"."counter(or3)"."counter(or4)"."; }
    </style>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h4>标题4</h4>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h4>标题4</h4>
    </body>
</div>

文件预览：./HTML_header_order.html

5.4. 其他

框架模板

6. 附：常用色彩代码

<table>
    <tr>
        <td><font color="#000000">███#000000</font></td>
        <td><font color="#2F0000">███#2F0000</font></td>
    </tr>
</table>
███#000000 ███#2F0000 ███#600030 ███#460046 ███#28004D
███#272727 ███#4D0000 ███#820041 ███#5E005E ███#3A006F
███#3C3C3C ███#600000 ███#9F0050 ███#750075 ███#4B0091
███#4F4F4F ███#750000 ███#BF0060 ███#930093 ███#5B00AE
███#5B5B5B ███#930000 ███#D9006C ███#AE00AE ███#6F00D2
███#6C6C6C ███#AE0000 ███#F00078 ███#D200D2 ███#8600FF
███#7B7B7B ███#CE0000 ███#FF0080 ███#E800E8 ███#921AFF
███#8E8E8E ███#EA0000 ███#FF359A ███#FF00FF ███#9F35FF
███#9D9D9D ███#FF0000 ███#FF60AF ███#FF44FF ███#B15BFF
███#ADADAD ███#FF2D2D ███#FF79BC ███#FF77FF ███#BE77FF
███#BEBEBE ███#FF5151 ███#FF95CA ███#FF8EFF ███#CA8EFF
███#d0d0d0 ███#ff7575 ███#ffaad5 ███#ffa6ff ███#d3a4ff
███#E0E0E0 ███#FF9797 ███#FFC1E0 ███#FFBFFF ███#DCB5FF
███#F0F0F0 ███#FFB5B5 ███#FFD9EC ███#FFD0FF ███#E6CAFF
███#FCFCFC ███#FFD2D2 ███#FFECF5 ███#FFE6FF ███#F1E1FF
███#FFFFFF ███#FFECEC ███#FFF7FB ███#FFF7FF ███#FAF4FF
███#000079 ███#000079 ███#003E3E ███#006030 ███#006000
███#000093 ███#003D79 ███#005757 ███#01814A ███#007500
███#0000C6 ███#004B97 ███#007979 ███#019858 ███#009100
███#0000C6 ███#005AB5 ███#009393 ███#01B468 ███#00A600
███#0000E3 ███#0066CC ███#00AEAE ███#02C874 ███#00BB00
███#2828FF ███#0072E3 ███#00CACA ███#02DF82 ███#00DB00
███#4A4AFF ███#0080FF ███#00E3E3 ███#02F78E ███#00EC00
███#6A6AFF ███#2894FF ███#00FFFF ███#1AFD9C ███#28FF28
███#7D7DFF ███#46A3FF ███#4DFFFF ███#4EFEB3 ███#53FF53
███#9393FF ███#66B3FF ███#80FFFF ███#7AFEC6 ███#79FF79
███#AAAAFF ███#84C1FF ███#A6FFFF ███#96FED1 ███#93FF93
███#B9B9FF ███#97CBFF ███#BBFFFF ███#ADFEDC ███#A6FFA6
███#CECEFF ███#ACD6FF ███#CAFFFF ███#C1FFE4 ███#BBFFBB
███#DDDDFF ███#C4E1FF ███#D9FFFF ███#D7FFEE ███#CEFFCE
███#ECECFF ███#D2E9FF ███#ECFFFF ███#E8FFF5 ███#DFFFDF
███#FBFBFF ███#ECF5FF ███#FDFFFF ███#FBFFFD ███#F0FFF0
███#467500 ███#424200 ███#5B4B00 ███#844200 ███#642100
███#548C00 ███#5B5B00 ███#796400 ███#9F5000 ███#842B00
███#64A600 ███#737300 ███#977C00 ███#BB5E00 ███#A23400
███#73BF00 ███#8C8C00 ███#AE8F00 ███#D26900 ███#BB3D00
███#82D900 ███#A6A600 ███#C6A300 ███#EA7500 ███#D94600
███#8CEA00 ███#C4C400 ███#D9B300 ███#FF8000 ███#F75000
███#9AFF02 ███#E1E100 ███#EAC100 ███#FF9224 ███#FF5809
███#A8FF24 ███#F9F900 ███#FFD306 ███#FFA042 ███#FF8040
███#B7FF4A ███#FFFF37 ███#FFDC35 ███#FFAF60 ███#FF8F59
███#C2FF68 ███#FFFF6F ███#FFE153 ███#FFBB77 ███#FF9D6F
███#CCFF80 ███#FFFF93 ███#FFE66F ███#FFC78E ███#FFAD86
███#D3FF93 ███#FFFFAA ███#FFED97 ███#FFD1A4 ███#FFBD9D
███#DEFFAC ███#FFFFB9 ███#FFF0AC ███#FFDCB9 ███#FFCBB3
███#E8FFC4 ███#FFFFCE ███#FFF4C1 ███#FFE4CA ███#FFDAC8
███#EFFFD7 ███#FFFFDF ███#FFF8D7 ███#FFEEDD ███#FFE6D9
███#F5FFE8 ███#FFFFF4 ███#FFFCEC ███#FFFAF4 ███#FFF3EE
███#613030 ███#616130 ███#336666 ███#484891 ███#6C3365
███#743A3A ███#707038 ███#3D7878 ███#5151A2 ███#7E3D76
███#804040 ███#808040 ███#408080 ███#5A5AAD ███#8F4586
███#984B4B ███#949449 ███#4F9D9D ███#7373B9 ███#9F4D95
███#AD5A5A ███#A5A552 ███#5CADAD ███#8080C0 ███#AE57A4
███#B87070 ███#AFAF61 ███#6FB7B7 ███#9999CC ███#B766AD
███#C48888 ███#B9B973 ███#81C0C0 ███#A6A6D2 ███#C07AB8
███#CF9E9E ███#C2C287 ███#95CACA ███#B8B8DC ███#CA8EC2
███#D9B3B3 ███#CDCD9A ███#A3D1D1 ███#C7C7E2 ███#D2A2CC
███#E1C4C4 ███#D6D6AD ███#B3D9D9 ███#D8D8EB ███#DAB1D5
███#EBD6D6 ███#DEDEBE ███#C4E1E1 ███#E6E6F2 ███#E2C2DE
███#F2E6E6 ███#E8E8D0 ███#D1E9E9 ███#F3F3FA ███#EBD3E8