HTML及markdown常用命令

最新推荐文章于 2023-05-31 13:08:33 发布
最新推荐文章于 2023-05-31 13:08:33 发布
阅读量1.9k 收藏 8
点赞数 3
分类专栏： markdown 文章标签： HTML h5 markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011467553/article/details/81260418
版权

文章目录

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

1. 常用代码

空格：
     
色彩：
    <font color=""></font>
链接跳转：
    页内：
    跳转链接：[内容](#jump)
    跳转锚点：<span id="jump"></span>
插入：
    目录：[TOC]
超链接：
    文字超链接：[不如](http://bruce-sha.github.io "不如的博客")
    图片超链接(markdown中)：![GitHub Mark](http://**** "GitHub Mark")
    图片超链接：<img src="http://****" width="128" height="96" />
    网址超链接：<http://ibruce.info>

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="https://i-blog.csdnimg.cn/blog_migrate/1e9af1b48c5585f7edd248047bd18444.jpeg" width="128" height="96" />

百分比定义图片大小：

<img src="https://i-blog.csdnimg.cn/blog_migrate/1e9af1b48c5585f7edd248047bd18444.jpeg" width="20%" height="60" />

居中：

<div align=center>
<img src="https://i-blog.csdnimg.cn/blog_migrate/1e9af1b48c5585f7edd248047bd18444.jpeg" />
</div>

3.2. markdown语法

![](https://i-blog.csdnimg.cn/blog_migrate/1e9af1b48c5585f7edd248047bd18444.jpeg)

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 |
1234
1—居左—----居中——居右—
11223344

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="https://i-blog.csdnimg.cn/blog_migrate/6c5396aec1289c81e81e2f30bcf5bb2a.jpeg" width="128" height="96" /></li>
    <li><img src="https://i-blog.csdnimg.cn/blog_migrate/1e9af1b48c5585f7edd248047bd18444.jpeg" width="128" height="96" /></li>
</ol>

5.2. 多级标题

HTML代码如下：

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

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

<head> 
<style type="text/css"> 
h1{color:red} 
p{color:blue} 
</style> 
<head> 
<style type=”text/css”>P{ color:red }</style>
ol {list-style-type:none;		
   counter-reset:sectioncounter;}                      
ol li:before {content:"美女" counter(sectioncounter) "： "; 
   counter-increment:sectioncounter;
}
<h1><ol><li>这是一个标题。</li></ol></h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

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. 框架模板

6. 附：常用色彩代码

  • HTML 颜色 | 菜鸟教程
    http://www.runoob.com/html/html-colors.html
代码格式：d
<td><font color="#000000">文本内容</font></td>
███#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
wan230114
关注
专栏目录
Markdown常用样式
Mr.W的博客
02-09 2949
# 可表示1-6级标题 斜体 : *斜体* 粗体 : **粗体** 粗体加斜体 : ***粗体*** ???? ???? ???? : :smil\e:(去掉斜线) 分割线(下面这条) : --- 上角标 : ^上角标^ 下角标 : ~下角标~ 删除线 : ~~删除线~~ 下划线 : <u>下划线</u> 无序列表 : - 无序列表 有序列表 : 1. 有序列表 代办列表 : - [ ]代办列表 已完成 : - [x]已完成 区块 : > 区块
Breakdance是一个node.js库用于将HTML转成markdown
08-09
在Web开发中，HTML和Markdown是两种常用的文本格式。HTML（超文本标记语言）是构建网页的标准语言，而Markdown则是一种轻量级的标记语言，用于编写易读易写的文档。有时我们需要将已有的HTML内容转换为Markdown格式...
HTML常用指令
08-31
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML命令
chenxicat1112的专栏
09-02 876
简单实用的HTML代码分享 Jan 5,2005 　Farhill of CyberHome 　　感谢易趣朋友的支持，本篇可以用于网上店铺和物品页面可插入HTML的任何一个地方。如淘宝网，易贝网，买麦网等。 一、HTML各种命令的代码： 1、文本标签(命令) 　　　　　　　　　创建预格式化文本 　　　　　　　　　　创建最大的标题 　　　　　　　　　　创建最小的标题
HTML指令详解
weixin_30674525的博客
10-24 351
HTML指令详解 结构 ＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞ 1.文件标题 ＜title＞..........＜/title＞ 2.文件更新--＜meta＞ 【1】10秒后自动更新一次 ＜meta http-equi...
html 基本指令
weixin_30307921的博客
11-06 129
命令: <pre> </pre> 格式化输出 <ol></ol> 有序 HTML 列表：示例: <pre> here is outout </pre> <ol> <li> Item one <li> Item two <li> Item three &lt...
主要总结了Markdown常用语法，包括文字、公式、符号、矩阵等
08-25
以下是Markdown常用的一些语法点，特别是关于公式、文字编辑、符号和矩阵的部分： 1. **公式编辑**： - Markdown支持LaTeX语法来插入复杂的数学公式。行内公式使用`$`包裹，如`$ \Gamma(z) = \int_0^\infty t^{z-1...
python使用html2text库实现从HTML转markdown的方法详解.docx
01-21
### Python使用html2text库实现从HTML转Markdown的方法详解 #### 概述 在Web开发、数据处理等领域中，经常需要将HTML格式的文本转换成Markdown格式，以便于阅读或进一步处理。Python作为一种广泛使用的编程语言，...
Hexo-常用命令
01-09
根据提供的信息，我们可以推断出该文档主要关注的是Hexo框架中的常用命令。然而，“樱花”一词在标题和描述中出现，似乎与主题没有直接关联，因此在生成相关知识点时，我们将忽略“樱花”这一元素，专注于Hexo及其...
html 标签详解HTML指令详解
03-31
HTML标签详解 HTML指令详解 结构 ＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞
HTML5常用命令-零基础
05-10
这份文件是国外一个学习网站上免费提供的，虽然是英文的，但是命令都很清楚，希望有帮助
HTML标签大全
jamie1688的专栏
12-11 848
＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞ 1.文件标题 ＜title＞..........＜/title＞ 2.文件更新--＜meta＞ 【1】10秒后自动更新一次 ＜meta http-equiv="refresh" content=10＞ 【2】10秒后自动连结到另
【HTML编程常用指令】
Do_all_can的博客
12-09 268
HTML编程常用指令 下面是html中几个常用特殊字符的一种表达方式： &nbsp; 表示 空格（占位符） &amp; 表示 & &lt; 表示 < &gt; 表示 > &quot; 表示 " &qpos; 表示 ’
【HTML】命令大全（常用的命令解析）
five小点心的博客
11-26 9343
什么是HTML？HTML的英文全称是Hyper Text Marked Language，即超文本标记语言。所谓超文本，就是比文本的功能更加全面，包含了我们常见的文字、图片、音频、视频、超链接等。在HTML文本文件中，同样能存放标题、文本框、选项等内容。那标记又是什么呢？标记是HTML用自己的语法规则，把文本内容给包裹起来，就叫做标记。一般由尖括号包含关键词，如就是一个标记。
HTML的基本命令（零基础教程）
m0_64200666的博客
05-31 2590
随着人工智能的不断发展，HTML这门技术也越来越重要，很多人都开启了HTML学习，本文就介绍了HTML的基础内容。一、HTML是什么？HTML是超文本标记语言的缩写，它是一种用于创建网页的标准标记语言。HTML语言使用一系列标签来描述文本、图像、音频、视频和其他内容的外观和布局，并指示浏览器如何呈现该内容。HTML语言通常与CSS（层叠样式表）和JavaScript一起使用，这些语言一起构成了现代网站的基础。
html命令代码大全,一、HTML各种命令的代码：
weixin_31814585的博客
06-05 1316
7　　　　设置字体的颜色,使用名字或十六进制值2、图形(命令)添加一个图像排列对齐一个图像:左中右或上中下设置围绕一个图像的边框的大小加入一条水平线设置水平线的大小(高度)设置水平线的宽度(百分比或绝对像素点)创建一个没有阴影的水平线3、链接(命令)创建一个超链接创建一个自动发送电子邮件的链接创建一个位于文档内部的靶位创建一个指向位于文档内部靶位的链接4、格式排版(命令)创建一个新的段落将段落按左...
前端常用命令总结
m0_37830172的博客
08-22 610
前端常用命令总结 bable bable 安装: (1):npm install –g babel-cli (2):npm install -g cnpm --registry=https://registry.npm.taobao.org [国内域] (3):npm install --save-dev babel-preset-es2015(4):type nul&amp;gt;.babe...
jupyter notebook，常用表格命令
最新发布
03-06
常用的Jupyter Notebook表格命令包括： 1. 创建表格：使用Markdown语法，在单元格中输入表格的内容，使用|和-来分隔表格的列和行。 2. 合并单元格：在表格中，可以使用HTML的合并单元格标签来合并单元格。例如，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值