markdown空格缩进以及HTML空格实体

Posted 2023-04-04

参考技术A

  在中文书写时我们通常习惯段首缩进两个字，但是使用markdown编辑时我们手打空格缩进是不起效果的，因此我们需要通过使用html中的空格实体来帮助我们实现缩进效果。

  一个汉字占两个空格大小，所以使用四个空格就可以达到首行缩进两个汉字的效果。有如下几种方法：

以上空格实体的详细介绍如下：

  HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（   ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌ ‍ ）在不同浏览器中宽度各异。

  它叫不换行空格，全称是 No-Break Space ，它是最常见和我们使用最多的空格，大多数的人可能只接触了   ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

  它叫“半角空格”，全称是 En Space ，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

  它叫“全角空格”，全称是 Em Space ，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

  它叫“窄空格”，全称是 Thin Space 。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

  它叫零宽不连字，全称是 Zero Width Non Joiner ，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： “‌”

  它叫零宽连字，全称是 Zero Width Joiner ，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。
此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（ ）、换行（ ）和回车（ ）还有（　）等等。
HTML中的实体空格参考自： http://www.itroad.org/2017/webui_0308/504.html

Markdown 学习笔记

Markdown 学习笔记

一、 Markdown 介绍

Markdown 是一种兼容HTML的书写语言。 要在Markdown中使用HTML语法，有以下要求：

1. 必须在区块元素（div, table, pre, p等）的开标签前和闭标签后用空行与其他内容隔开；

2. 开闭标签不能用tab或者空格缩进。

二、Markdown 语法

1. 标题

   使用 ‘#‘ 来标示标题，‘#‘越多，字体越小，最多支持6级标题。在‘#‘之后需要有个空格与内容隔开。

2. 引用

   使用‘>‘，用法同标题的‘#‘

3. 列表

   使用‘+‘或‘*‘或‘-‘开头，作为无序列表的标记

   使用‘1.‘，作为有序列表的标记

   为了避免不小心产生了列表，可以把‘.‘转义，如1998\.

4. 代码块

   在一个新行中使用两个tab进行缩进即可

   或者使用两个```包含住代码块（三个tab键上面的上撇号）

5. 分割线

   在一行中使用连续的三个‘-‘或‘*‘，或‘_‘，行内无其他字符

6. 链接

   [显示的内容](网址) 用这种方式可以使得“显示的内容变成超链接导向圆括号里面的网址”，用法就是中括号括住显示的内容，紧跟着一个圆括号，括住网址

   例如： This is a [link](http://example.com)

   显示效果为: This is a link

   [显示的内容](网址 ”当鼠标移上去之后显示的title信息”) 用这种方式可以使得“显示的内容变成超链接导向圆括号里面的网址”，用法就是中括号括住显示的内容，紧跟着一个圆括号，括住网址，网址后面空一格然后加一个双引号，引号里面就是当鼠标移到显示的内容上面的时候显示的信息。

   例如： This is a [link](http://example.com “Hello”)

   显示效果为: This is a link

   使用隐式链接标记

   [Google][][Google]: http://google.com>

   使用一个代号，代替网址内容

   例如：

   This is a [link][id]

   [id]: http://example.com "Hello" 这里的Hello可以去掉，其实就是上一种用法的Title

7. 代码

   一行代码的可以使用两个反引号 `（tab键上面的那个键），两个反引号包括住的代码会显示成代码行

   代码块的包含可以使用三个反引号开启，然后使用三个反引号结束， 也可以使用两个tab缩进然后形成代码块

8. 图片

   ![图片的替代文字](图片的网址 "鼠标移上去之后显示的title信息")

   使用一个代号，代替网址内容，用法类似链接

   ![图片的替代文字][id][id]: url/to/image "optional title attribute"

9. 自动链接

   使用尖括号包含住网址或者邮箱地址，可以自动转换成链接

10. 粗体

    **内容**，那么内容就是显示为粗体

11. 斜体

    *内容*， 那么内容就会显示为斜体

    ***内容***， 那么内容就是显示为加粗的斜体

12. 表格

    | Tables        | Are           | Cool  || ------------- |:-------------:| -----:|| col 3 is      | right-aligned | $1600 || col 2 is      | centered      |   $12 || zebra stripes | are neat      |    $1 |

    语法解释：

    1.每行第一个|和最后一个|可以省略；

    2.内容和 |之间的多余空格会被忽略，定义表格格式的时候的‘-‘至少要有一个，但为了美观可以多加几个-；

    3.|， :， -之间的多余空格会被忽略；

    4.-:表示内容和标题栏（就是所在的那一列）居右， :-表示居左， :-:表示居中，如果只有-没有:，意思该列默认为标题栏居中，内容居左。

    显示效果为:

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1