前端工程师必须遵守的高质量的前端代码规范，你写代码是这样做吗？

、唯一定律

无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。

2.2 Example

四、语言属性

五、IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

六、字符编码

八、实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

九、属性顺序

9.1 从大到小

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

十、布尔（boolean）型属性

10.1 注意

（1）布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

（2）元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

十一、减少标签的数量

编写灵活、稳定、高质量的CSS代码的规范

一、语法

1.1 注意

（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

（2）为选择器分组时，将单独的选择器单独放在一行。

（3）为了代码的易读性，在每个声明块的左花括号前添加一个空格。

（4）声明块的右花括号应当单独成行。

（5）每条声明语句之后应该插入一个空格。

（6）为了获得更准确的错误报告，每条声明都应该独占一行。

（7）所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

（8）对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

（9）不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

（1）由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。

（2）盒模型排在第二位，因为它决定了组件的尺寸和位置。

（3）其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

2.3 Example

三、不要使用 @import

（1）使用多个 <link> 元素

（2）通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

（3）通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

四、媒体查询（Media query）的位置

五、带前缀的属性

这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 100 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

七、简写形式的属性声明

7.1 滥用简写

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

（1）padding

（2）margin

（3）font

（4）background

heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

八、Less 和 Sass 中的嵌套

十、注释

10.1 注意

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

十一、class 命名

11.1 规范

（1）class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

（2）避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

（3）class 名称应当尽可能短，并且意义明确。

（4）使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

（5）基于最近的父 class 或基本（base） class 作为新 class 的前缀。

（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。

十二、选择器

12.1 注意

（1）对于通用元素使用 class ，这样利于渲染性能的优化。

（2）对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

（3）选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

（4）只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

十三、代码组织

13.1 注意

（1）以组件为单位组织代码段。

（2）制定一致的注释规范。

（3）使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。

有技术问题私信小编:666

×00 简介
0×01 解码过程总述
0×02 浏览器中的词法分析
0×03 HTML编码与HTML解析
0×04 常见误区
0×05 浏览器有趣的容错行为
0×06 结语

*原创作者：VillanCh

0×00 简介

编码问题一直是一个痛点，在wooyun有一篇XSS编码的文章，讲到一些痛点，既然准备再次完成一篇对XSS中的编码讲解，同时也对得起这个文章的名字，本文就比较系统的讲一下浏览器Lexer中HTML编码处理的问题与XSS的html编码原理剖析。

0×01 解码过程总述

在开始XSS之前，我们如果不清楚编码解码的过程，将会对XSS造成非常大的困难，不懂得编码而乱插一气，如果你是自动化工具还好但是如果你是手动XSS，那么你可就遭殃了，运气好做出来，运气不好就怎么样也解决不了编码问题了。

了解编码过程首先从浏览器解析来讲吧

对浏览器解析HTML有过了解的同学，肯定是清楚浏览的的这些工具原理，一般来讲浏览器通过Lexer-Parser来解析生成Dom树然后再对CSS元素进行渲染，最后执行javascript（浏览器脚本），但是为什么要讲这一部分呢？原因就是这和解码的顺序是有关系的！

举一个简单的例子吧：在HTML（非XHTML）环境下如果你的xss输出点在<script>标签内，你采用了HTML实体编码的形式，怎么可能触发XSS漏洞呢？如果你不懂这个问题，也许你会做很多无用功。

0×02 浏览器中的词法分析

熟悉编译原理的读者可以自由选择快速略过第一第二段或者短暂复习一下。

关于一个计算机工作人员是否需要学习编译原理这个话题，我相信大家各持己见。但是我相信如果你是要做一个优秀的程序员或者是IT工作者，编译原理不一定要精通，但是至少应该有所了解，限于篇幅的原因，我并不打算在这里讲太多的编译原理的只是简单提及一下让大家知道编译原理到底是干什么的，在浏览器中是怎么被应用的。

Parser-Lexer Combination（解析器-词法分析器）

这个结构负责对html文档进行解析，解析的过程分为两个过程：词法分析和语法分析

本部分，主要讲词法分析部分

词法分析就是将输入的句子（语句，内容）分解为有顺序的单词和符号:具体例子就是如果输入1+2-3，那么经过词法分析，就应该按顺序得到五个token：分别是1（int），+（option），2（int），-（option），3（int）。然后得到的结果交给语法分析进行上下文无关语法判别。

如果有兴趣了解如何实现词法分析，可以参考编译原理及实践这本书。

那么在浏览器中，词法分析的特性还是值得注意的，例如，它会自动跳过HTML中的空格和换行或者制表符，这样也就是有些条件下仅仅是多个空格或者换行符制表符就能起到过waf，的原理了，（但是现在这种bypass方法已经很out了）。除此之外呢，在词法分析中，也许还会忽略注释部分，那么大家是不是又有一些想法了呢？那么，我们结合以前XSS的经验，笔者结合符号算法的简单叙述，大家可以理解检测一下自己的猜测是不是正确。

众所周知，我们的浏览器解析html时，是把

这个标签解析成

img

src

这六个符号（token）的。

那么仅仅就是这么简单么？答案当然是否定的。

解析过程简单例子：

1. 在解析<这个符号以前，状态是Data State
2. 然后解析到<的时候，解析状态变为Tag open state，然后开始搜寻标签名，（在搜寻标签名的时候，我们要思考一个问题，<和标签名img并不是同一个token，他们显然是分别进行解析的，那么有没有可能忽略掉<和img之间的空格或者换行什么的？这个问题，我相信很好找到答案。）
3. 找到标签名，状态变为Tag name state，这个状态就表示已经识别了标签名，
4. 然后知道读取到最近的一个>时，结束tag name state的状态，重新进入Data State。

如果嵌套有标签的话重复上述解析步骤，关于</body>的部分，大同小异，只不过/符号会创建一个闭合标签的标识，来表示一个标签的闭合。

但是！我要说的是但是！这个解析过程是相当松散的。因为HTML的历史原因，导致HTML的模式千奇百怪，错误频繁出现，开发者程序员的水平参差不齐，HTML的不规范的特性。这个解析过程注定是相当复杂的。举个最简单的例子。

你觉得这个元素可以被识别么？能弹窗么？既然这么问，那么答案肯定是肯定的。

如果http://pic.com/pic.jpg这个图片真实存在，那么，这个没有引号的标签可以被识别么？

除此之外，还有很多很多的神奇的trick值得去探索。

0×03 HTML编码与HTML解析

HTML实体编码的出现，解决了一个问题，例如<和>这两个符号在HTML文档中出现是非常不安全的，因为这标志着标签的开始和结束，为了安全使用这些保留字符。开发人员使用了一套叫实体编码的编码策略，这类编码以&开头，以分号;结尾。

但是结合0×02的知识我们可以猜测，以“；”为分割符，在实际的处理中，由于浏览器解析器高度的容错性，所有的可以成为分割符的符号放在结尾代替；当然有可能可以正确分隔，那么这也就是著名的一个trick：HTML实体编码最后的；可以省略，这就是原理所在。好，我们，接着讲HTML实体编码的一些有趣的东西。

在HTML编码，中大家都知道一个应该写为“&#数字”或者“&#x十六进制”，但是不为人知的可能就是后面的数字可以写成Unicode，曾经有点蛋疼的时候，笔者把所有的unicode字符用&#编码的形式打了出来，看了一下有没有什么有趣的符号。在《web之困》中，作者就举例了一个有趣的符号：

那么读者要问了，这个东西讲的有什么意思呢？那么接下来就要说一些很明确的，也是很多有误区的地方：HTML在哪里可以解析？整个HTML的文档下都可以解析么？

得明确地讲：HTML编码要在Data state（标签外部和标签的text段）和标签内的属性值的位置解析，但是直接注意的是在特殊模式（这个问题将在下一段中解释）下，即使是在Data state下，HTML编码也照样不会被解析。在0×02中，我们知道解析到HTML解析过程中，在遇到一对<和>的解析过程中，都是Tagname/open/close state，在这三个状态中，HTML编码也是不会被解码的，也就意味着解析到标签属性的值的时候自动切换进了Data State，这些都是符合我们正确认知的。

接下来我们来举例（以Firefox为例）：

看到下面的标签，有读者就要问为什么没有反斜杠？很简单啊，浏览器识别一个标签我们在0×02部分讲到的，只需要<作为标签的开始，并且>作为标签的结束，所以不一定需要有</tagname>，在HTML解析条件下也可以识别标签

我们在记事本中输入这六个标签，读者可以来猜一下哪些可以弹窗，哪些不能？

很显然第一第二是完全可以的。

第三个没有明显写明边界，实际上这个和第二个的边界处理是一样的，默认了边界，（我们可以姑且认为=和>是独立的token，那么也就是说即使不用单引号或者双引号或者反引号照样可以起到边界的作用，事实上却是如此）

第四个人为加上了边界，所以当然是可以的，

第五个&#34就是引号，这里的引号在数据区，也就相当于onerror=”’ alert(1)’”

第六个，我们知道在非Data state段是不会HTML编码解码的，所以第六个破坏了属性的结构。

特殊模式：<style><script><textarea><xmp>这四个标签的text段按理说也是Data state但是没办法进行HTML编码的解析，原因就是他们处于特殊模式，在这个模式中，相当于是启动了别的解析器，也就是为了处理别的代码或者特定文本，关闭了HTML编码的解析。

接下来我们尝试一下HTML到底能不能在<script>中解析：

大家看到了，源码是这样的，显然是没有办法解析HTML编码的。

作为对比我们再看一下下面的情况

这样我们就发现了普通条件下的在标签的text段的确是发生了HTML编码的解析。

0×04 常见误区

我既然写在普通的Data State段，而且提示也提示出了<script>alert(1)<script>但是为什么不会弹框呢？可能有读者还是会有这个问题。

这里需要提醒大家的是：HTML编码（HTML实体编码）的出现，是为了防止保留符号与显示字符的冲突。

那么我们解析原因就很简单了：也就是说<script>alert(1)</script>这个字符串实际上只为了显示，而不执行，js代码的执行是放在HTML编码之后，而且必须位于可以执行的地方对么？大家想一下，如果放在<a>标签内，没人指示执行JS代码，而且显示<script>alert(1)</script>这个时候HTML解析器只是把它显示出来并不会执行（如果读者这里有点懵逼，那么请返回看0×01部分）。

然后为什么标签属性值的部分是可以执行的呢？很简单，因为onxxxx的函数都是时间处理函数，的确属于HTML标准的属性值，但是大家可以理解为这是JS特定函数或者特定功能的执行入口，那么在解析的时候，首先把HTML标签属性的值当作数据解析以后（解析HTML代码），然后交给JS引擎，然后执行。这样就可以得到JS的执行结果。

0×05 浏览器有趣的容错行为

我们接下来还是以一个标签为例。来总结一下浏览器是有多么强大的容错性。

对于这样一个标签，我们多多少少看起来还有点别扭。但是经过0×02的讲解，我相信大家脑子里应该是已经把它分解成了很多个token，而且，可以很轻易的分辨出这个tag是完全可以正常工作的。首先我们从开头一点一点来解释：

1. 在IE浏览器中，你可以在img中间加入NULL字符，而且还可以解析成功。
2. 在img和src还有src=s和title之间的两个边界，你完全可以用别的符号来替换边界

有图为证：

换成\t仍然可以解析成功，也就是并不是必须用空格或者\t的对吧。换成\n照样可以成功：

至于还有什么符号还可以，嗯哼，这就需要读者自己尝试了（什么难道你要自己一个一个试？）

1. 大家注意我在onerror和class参数之间没有空格或者其他分隔符，但是仍然可以执行成功，为什么？这个问题我在前面部分多次提到。
2. 属性的值的边界应该用什么来确定？单引号，双引号，反引号，还有呢？这里也是读者可以自己动手去尝试的。

0×06 结语

读者要明白，浏览器之间都是有差异的，尤其是IE和其他类型的浏览器，那么具体的差异的内容，大家可以fuzz一下，当然有一些资料推荐给大家使用的：《web application obfuscation》，《web之困》。本文简单谈一谈HTML编码这些问题就已经有了这么长的篇幅。如果有机会，笔者将在以后的文章中为大家讲解一下其他的编码部分（URL编码和JS编码）

arkdown 基础语法

概述

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。千万不要被「标记」、「语言」吓到，Markdown的语法十分简单，常用的标记符号不超过十个，用于日常写作记录绰绰有余，不到半小时就能完全掌握。就是这十个不到的标记符号，却能让人优雅地沉浸式记录，专注内容而不是纠结排版，达到「心中无尘，码字入神」的境界。

标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法	HTML	预览效果
# Heading level 1	<h1>Heading level 1</h1>	Heading level 1
# Heading level 2	<h2>Heading level 2</h2>	Heading level 2
# Heading level 3	<h3>Heading level 3</h3>	Heading level 3
# Heading level 4	<h4>Heading level 4</h4>	Heading level 4
# Heading level 5	<h5>Heading level 5</h5>	Heading level 5
# Heading level 6	<h6>Heading level 6</h6>	Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法	HTML	预览效果
# Heading level 1	<h1>Heading level 1</h1>	Heading level 1
# Heading level 2	<h2>Heading level 2</h2>	Heading level 2

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

段落语法

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法	HTML	预览效果
I really like using Markdown.	<p>I really like using Markdown.</p>	I really like using Markdown.

不要用空格（spaces）或制表符（ tabs）缩进段落。

换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)。

Markdown语法	HTML	预览效果
I really like using Markdown.	<p>I really like using Markdown.</p>	I really like using Markdown. sfjlsdjflds

换行最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的
标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的
标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 () 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

强调语法

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法	HTML	预览效果
I just love bold text.	I just love <strong>bold text</strong>.	I just love bold text
I just love __bold text__.	I just love <strong>bold text</strong>.	I just love bold text
Loveisbold	Love<strong>is</strong>bold	Loveisbold

粗体（Bold）用法最佳实践 Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请使用星号（*）。

斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（*）或下划线（_）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法	HTML	预览效果
I just love Italicized text.	I just love <em>Italicized text</em>.	I just love Italicized text
I just love _Italicized text_.	I just love <em>Italicized text</em>.	I just love Italicized text
Loveisbold	Love<em>is</em>bold	Loveisbold

斜体（Italic）用法的最佳实践要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加三个星号或下划线。要加粗并用斜体显示单词或短语的中间部分，请在要突出显示的部分前后各添加三个星号，中间不要带空格。

粗体（Bold）和斜体（Italic）

要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加三个星号或下划线。要加粗并用斜体显示单词或短语的中间部分，请在要突出显示的部分前后各添加三个星号，中间不要带空格。

Markdown语法	HTML	预览效果
This text is *really important*.	This text is <strong><em>really important</em></strong>.	This text is really important
This text is ___really important___.	This text is <strong><em>really important</em></strong>.	This text is really important
This text is __really important__.	This text is <strong><em>really important</em></strong>	This text is really important.
This text is _really important_.	This text is <strong><em>really important</em></strong>	This text is really important.
This is really*very*important text.	This is really<strong><em>very</em></strong>important text	This is reallyveryimportant text.

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

引用语法

要创建块引用，请在段落前添加一个 > 符号。

> Dorothy followed her through many of the beautiful rooms in her castle.

渲染效果如下所示：

Dorothy followed her through many of the beautiful rooms in her castle.

多个段落的块引用

块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.
The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

嵌套块引用

块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.
The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

带有其它元素的块引用

块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

渲染效果如下：

The quarterly results look great!Revenue was off the chart.Profits were higher than ever.
Everything is going according to plan.

列表语法

可以将多个条目组织成有序或无序列表。

有序列表

要创建有序列表，请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。

无序列表

要创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。

在列表中嵌套其他元素

要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符，如下例所示：

段落

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

渲染效果如下：

This is the first list item.

Here's the second list item.

I need to add another paragraph below the second list item.

And here's the third list item.

引用块

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

渲染效果如下：

This is the first list item.

Here's the second list item.

A blockquote would look great below the second list item.

And here's the third list item.

代码块

代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时，请将它们缩进八个空格或两个制表符。

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

渲染效果如下：

Open the file.

Find the following code block on line 21:

Update the title to match the name of your website.

图片

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![百度](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)

3.  Close the file.

渲染效果如下：

Open the file containing the Linux mascot.

Marvel at its beauty.

Close the file.

代码语法

要将单词或短语表示为代码，请将其包裹在反引号 (`) 中。

转义反引号

如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(``)中。

Markdown语法	HTML	预览效果
Use `code` in your Markdown file.	Use code in your Markdown file.	Use `code` in your Markdown file.

代码块

要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符。

     <html>
          <head>
          </head>
    </html>

渲染效果如下：

 <html>
      <head>
      </head>
</html>

Note: 要创建不用缩进的代码块，请使用围栏式代码块

分割线语法

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

***

---

_________________

以上三个分隔线的渲染效果看起来都一样：

为了兼容性，请在分隔线的前后均添加空白行。

链接语法

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。

超链接Markdown语法代码：[超链接显示名](超链接地址 "超链接title")

对应的HTML代码：<a href="超链接地址" title="超链接title">超链接显示名</a>

这是一个链接 [Markdown语法](https://www.example.com)。

渲染效果如下：

这是一个链接 Markdown语法。

给链接增加 Title

链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址之间以空格分隔。

这是一个链接 [Markdown语法](https://www.example.com "最好的markdown教程")。

渲染效果如下：这是一个链接 Markdown语法。

网址和Email地址

使用尖括号可以很方便地把URL或者email地址变成可点击的链接。

<https://www.example.com>
<fake@example.com>

渲染效果如下： https://www.example.com fake@example.com

带格式化的链接

强调链接, 在链接语法前后增加星号。要将链接表示为代码，请在方括号中添加反引号。

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.example.com)*.
See the section on [`code`](#code).

渲染效果如下： I love supporting the EFF. This is the Markdown Guide. See the section on code.

引用类型链接

引用样式链接是一种特殊的链接，它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。

链接的第一部分格式

引用类型的链接的第一部分使用两组括号进行格式设置。第一组方括号包围应显示为链接的文本。第二组括号显示了一个标签，该标签用于指向您存储在文档其他位置的链接。

尽管不是必需的，可以在第一组和第二组括号之间包含一个空格。第二组括号中的标签不区分大小写，可以包含字母，数字，空格或标点符号。

以下示例格式对于链接的第一部分效果相同：

[hobbit-hole][1]
[hobbit-hole] [1]

链接的第二部分格式

引用类型链接的第二部分使用以下属性设置格式：

放在括号中的标签，其后紧跟一个冒号和至少一个空格（例如[label]:）。链接的URL，可以选择将其括在尖括号中。链接的可选标题，可以将其括在双引号，单引号或括号中。以下示例格式对于链接的第二部分效果相同：

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles) 可以将链接的第二部分放在Markdown文档中的任何位置。有些人将它们放在出现的段落之后，有些人则将它们放在文档的末尾（例如尾注或脚注）。

不同的 Markdown 应用程序处理URL中间的空格方式不一样。为了兼容性，请尽量使用%20代替空格。

图片语法

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。

插入图片Markdown语法代码：![图片alt](图片链接 "图片title")。

对应的HTML代码：<img src="图片链接" alt="图片alt" title="图片title">

![这是图片](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "百度")

渲染效果如下：

链接图片

给图片增加链接，请将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。

[![百度图片](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "百度")](https://www.baidu.com)

渲染效果如下：

转义字符语法

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 \ 。

\* Without the backslash, this would be a bullet in an unordered list.

渲染效果如下：

* Without the backslash, this would be a bullet in an unordered list.

可做转义的字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

Character	Name
\	backslash
`	backtick
*	asterisk
_	underscore
{ }	curly braces
[ ]	brackets
( )	parentheses
#	pound sign
+	plus sign
-	minus sign (hyphen)
.	dot
!	exclamation mark
\|	pipe

特殊字符自动转义

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 < 和 &。

& 符号其实很容易让写作网页文件的人感到困扰，如果你要打「AT&T」，你必须要写成「AT&T」，还得转换网址内的 & 符号，如果你要链接到：

http://images.google.com/images?num=30&q=larry+bird

你必须要把网址转成：

http://images.google.com/images?num=30&q=larry+bird

才能放到链接标签的 href 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。

Markdown 允许你直接使用这些符号，它帮你自动转义字符。如果你使用 & 符号的作为 HTML 实体的一部分，那么它不会被转换，而在其它情况下，它则会被转换成 &。所以你如果要在文件中插入一个著作权的符号，你可以这样写：

©

Markdown 将不会对这段文字做修改，但是如果你这样写：

AT&T

Markdown 就会将它转为：

AT&T

类似的状况也会发生在 < 符号上，因为 Markdown 支持行内 HTML ，如果你使用 < 符号作为 HTML 标签的分隔符，那 Markdown 也不会对它做任何转换，但是如果你是写：

4 < 5

Markdown 将会把它转换为：

4 < 5

需要特别注意的是，在 Markdown 的块级元素和内联元素中， < 和 & 两个符号都会被自动转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML。（在 HTML 语法中，你要手动把所有的 < 和 & 都转换为 HTML 实体。）

内嵌HTML标签

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

行级內联标签

HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。例如：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时（例如为文本指定颜色或更改图像的宽度），使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同，在內联标签的范围内， Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

渲染效果如下： This word is bold. This word is italic.

区块标签

区块元素──比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的

标签。

例如，在 Markdown 文件里加上一段 HTML 表格：

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，你无法在 HTML 区块内使用 Markdown 形式的*强调*。

提示：出于安全原因，并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问，请查看相应 Markdown 应用程序的手册。某些应用程序只支持 HTML 标签的子集。

对于 HTML 的块级元素 <div>、<table>、<pre> 和 <p>，请在其前后使用空行（blank lines）与其它内容进行分隔。尽量不要使用制表符（tabs）或空格（spaces）对 HTML 标签做缩进，否则将影响格式。

在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p> 将不起作用。

扩展语法

原始设计文档中概述的基本语法主要是为了应付大多数情况下的日常所需元素，但对于某些人来说还不够，这就是扩展语法的用武之地。

一些个人和组织开始通过添加其他元素（例如表，代码块，语法突出显示，URL自动链接和脚注）来扩展基本语法。可以通过使用基于基本Markdown语法的轻量级标记语言，或通过向兼容的Markdown处理器添加扩展来启用这些元素。

表格

要添加表，请使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列。您可以选择在表的任一端添加管道。

| 语法 | 描述 |
| ---- | ---- |
| 头部 | 标题 |
| 段落 | 文本 |

呈现的输出如下所示：

语法	描述
头部	标题
段落	文本

单元格宽度可以变化，如下所示。呈现的输出将看起来相同。

| 语法 | 描述 |
| ---| ------ |
| 头部 | 标题 |
| 段落 | 文本 |

Tip: 使用连字符和管道创建表可能很麻烦。 #### 对齐

您可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。

| 语法      | 描述 | 测试文本     |
| :---        |    :----:   |          ---: |
| 头部      | 标题       | 你好   |
| 段落   | 文本        | 更好      |

呈现的输出如下所示：

语法	描述	测试文本
头部	标题	你好
段落	文本	更好

格式化表格中的文字

您可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调。

您不能添加标题，块引用，列表，水平规则，图像或HTML标签。

在表中转义管道字符

您可以使用表格的HTML字符代码（|）在表中显示竖线（|）字符。

围栏代码块

Markdown基本语法允许您通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便，请尝试使用受保护的代码块。根据Markdown处理器或编辑器的不同，您将在代码块之前和之后的行上使用三个反引号（(```）或三个波浪号（~~~）。

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

呈现的输出如下所示：

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

语法高亮

许多Markdown处理器都支持受围栏代码块的语法突出显示。使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的反引号旁边指定一种语言。

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

呈现的输出如下所示：

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

脚注

脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。

要创建脚注参考，请在方括号（[^1]）内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注参考与脚注本身相关联-在输出中，脚注按顺序编号。

在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本（[^1]: My footnote.）。您不必在文档末尾添加脚注。您可以将它们放在除列表，块引号和表之类的其他元素之外的任何位置。

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

呈现的输出如下所示：

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

标题编号

许多Markdown处理器支持标题的自定义ID - 一些Markdown处理器会自动添加它们。添加自定义ID允许您直接链接到标题并使用CSS对其进行修改。要添加自定义标题ID，请在与标题相同的行上用大括号括起该自定义ID。

### My Great Heading {#custom-id}

HTML看起来像这样：

<h3 id="custom-id">My Great Heading</h3>

链接到标题ID (#headid)

通过创建带有数字符号（#）和自定义标题ID的标准链接，可以链接到文件中具有自定义ID的标题。

Markdown	HTML	预览效果
Heading IDs	Heading IDs	Heading IDs

其他网站可以通过将自定义标题ID添加到网页的完整URL（例如[Heading IDs](https://www.example.com/heading-ids.html#headid)）来链接到标题。

定义列表

一些Markdown处理器允许您创建术语及其对应定义的定义列表。要创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

HTML看起来像这样：

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

呈现的输出如下所示：

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term. This is another definition of the second term.

删除线

您可以通过在单词中心放置一条水平线来删除单词。结果看起来像这样。此功能使您可以指示某些单词是一个错误，要从文档中删除。若要删除单词，请在单词前后使用两个波浪号~~。

~~2023年很卷~~ ，希望2024世界更加美好。

呈现的输出如下所示：

~~2023年很卷~~ ，希望2024世界更加美好。

任务列表语法

任务列表使您可以创建带有复选框的项目列表。在支持任务列表的Markdown应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。要选择一个复选框，请在方括号[x]之间添加 x 。示例代码：

- [x] 列表1
- [ ] 列表2
- [ ] 列表3

呈现的输出如下所示：

列表1
列表2
列表3

使用Emoji表情

有两种方法可以将表情符号添加到Markdown文件中：将表情符号复制并粘贴到Markdown格式的文本中，或者键入emoji shortcodes。

复制和粘贴表情符号

在大多数情况下，您可以简单地从Emojipedia 等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

Tip: 如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。

使用表情符号简码

一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。

欢迎阅读此文 :tent: 如对你有帮助，动动小手指点个赞吧，给博主一点鼓励 :heart: 。

哈哈哈！

呈现的输出如下所示：

欢迎阅读此文 :tent: 如对你有帮助，动动小手指点个赞吧，给博主一点鼓励 :heart: 。

哈哈哈！

Note: 注意：您可以使用此表情符号简码列表，但请记住，表情符号简码因应用程序而异。多个单词的简码用 _ 来连接，且简码必须是小写。

自动网址链接

许多Markdown处理器会自动将URL转换为链接。这意味着如果您输入http://www.example.com，即使您未使用方括号(`[]`)，您的Markdown处理器也会自动将其转换为链接。

呈现的输出如下所示：

http://www.example.com

禁用自动URL链接

如果您不希望自动链接URL，则可以通过将URL表示为带反引号的代码来删除该链接。

`http://www.example.com`

呈现的输出如下所示： http://www.example.com

在线咨询

上一篇：Adobe XD出来这么久了，你确定了解它？
下一篇：初级web前端必会知识点：HTML部分

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端工程师必须遵守的高质量的前端代码规范，你写代码是这样做吗？

arkdown 基础语法

概述

标题语法

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

可选语法

Heading level 1

Heading level 2

段落语法

换行语法

换行最佳实践

强调语法

粗体（Bold）

斜体（Italic）

粗体（Bold）和斜体（Italic）

粗体（Bold）和斜体（Italic）用法的最佳实践

引用语法

多个段落的块引用

嵌套块引用

带有其它元素的块引用

列表语法

有序列表

无序列表

在列表中嵌套其他元素

段落

引用块

代码块

图片

代码语法

转义反引号

代码块

分割线语法

链接语法

给链接增加 Title

网址和Email地址

带格式化的链接

引用类型链接

链接的第一部分格式

链接的第二部分格式

图片语法

链接图片

转义字符语法

可做转义的字符

特殊字符自动转义

内嵌HTML标签

行级內联标签

区块标签

扩展语法

表格

Tip: 使用连字符和管道创建表可能很麻烦。 #### 对齐

格式化表格中的文字

在表中转义管道字符

围栏代码块

语法高亮

脚注

标题编号

链接到标题ID (#headid)

定义列表

删除线

任务列表语法

使用Emoji表情

复制和粘贴表情符号

使用表情符号简码

自动网址链接

禁用自动URL链接

您的项目需求