关于HTML的一些知识

1.了解基础HTML就可以回答以下问题了：

1.什么是HTML语义化？对于标题，图片，表格，表单，如何更好地实现这些方面的语义化？
2.什么是外边距叠加？出现外边距叠加的根本原因是什么？
3.在CSS中，关于命名，书写以及注释都有哪些规范（便于团队开发和后期维护）
4.说一下display这几个属性的区别：block，inline，inline-block，table-cell。
5.你深入了解过text-align，text-indent，line-height以及vertical-align这几个属性么？
它们都有哪些高级技巧。
6. 为什么overflow：hidden 可以清除浮动？
7. 如何使用CSS实现各种图形效果，例如三角标，圆，椭圆等？
8. 解释一下这几个概率：包含块，BFC和IFC，层叠上下文。

2.下面关于HTML的一些进阶知识

1.版本介绍：HTML5和CSS2.1
XHTML是扩展的HTML，语法上更加严格，XHTML和HTML的区别主要是：
1. XHTML标签必须闭合，空标签也需要闭合
2. XHTML标签以及属性必须小写
3. XHTML标签属性必须用引号
4. XHTML标签用id属性代替name属性

1.1 div 和span的区别
div 是块元素，可以包含人就会块元素和行内元素，不会和其他元素位于同一行；span是行内元素，可以与其他行内元素位于同一行。
div常用于页面中较大块的结构划分，然后配合CSS来操作；span一般用来包含文字等，它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS操作
div和span是无语义标签，但label是有语义标签。label只适用于表单中，用于显示在输入控件旁边的说明性文字
1.2 关于id和class
id和class是HTML元素中两个最基本的公共属性。id属性具有唯一性，W3C建议，对于页面关键的结构或者大结构，才用id，因此id不要随意用，特别是对搜索引擎优化而言。对于一些小地方，还是建议使用class属性（类似类的含义）；如果要为2个或2个以上元素定义相同的样式，建议使用class属性。
1.3关于各个标签的含义
前端最核心的技术是HTML，CSS和JavaScript这三种。其中HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。
1.3.1 关于标题h1-h6，图片，表单
搜索引擎对h1_{h6标签比较敏感，尤其是h1和h2.一个语义良好的页面，h1}h6应该是完整有序而没有出现断层的。应该注意以下4个方面：
1. 一个页面只能有一个h1标签
2. h1~h6之间不要断层
3. 不要用h1~h6来定义样式
4. 不要用div来代替h1~h6,因为div是无语义标签，如果代替，后期维护比较难，而且对搜索影响很大。
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会查看HTML代码，通过
img 标签的alt属性或页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。alt属性是img 标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。figure元素用于包含图片和图注，figcaption元素用于表示图注文字。
label 标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。（用for 和id连在一起，for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性）
表单中我们还可以使用fieldset标签来给表单元素进行分组。其中，legend标签用于定义某一组表单的标题，fieldset元素的disable属性来禁用整个组中的表单元素。
关于标签只适合用于p元素内部的换行，不能用于其他标签。
在实际开发中，对于列表型的数据，大多数情况使用无序列表，因为有序列表前面的数字外观是固定的。
2.关于CSS
2.1 ！important可以成为最大优先级。在CSS中，如果那些行内样式不合适，修改时用！important可以覆盖那些行内样式。多个！important，也遵从后来者居上原则。
2.2 在实际开发过程中，一般外部样式多用于公有样式，内部样式多用于私有样式，而行内样式更多用于小修改或者优先级方面。
关于CSS文件命名规范：以下一些关键字有特殊含义不能命名。
reset.css 重置样式，重置元素默认样式
global.css 全局样式，全站公用，定义页面基本样式
themes,css 主题样式，用来实现换肤功能
module.css 模块样式，用于模块的样式
master.css 母版样式，用于母版页的样式
columns.css 专栏样式，用于专栏的样式
forms.css 表单样式，用于表单的样式
mend.css 补丁样式，用于维护，修改的样式
print.css 打印样式，用于打印的样式
2.3 关于 border：0 与border：none的区别：
虽然页面上都看不到，但border：0 会占内存，border：none不会占内存。
关于外边距叠加情况：
2.4 外边距叠加是指当两个垂直外边距相遇时，这两个外边距将会合并为一个外边距，即“二变一”。其中，叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
外边距叠加的三种情况：1.同级元素（最常见）；2.父子元素（当一个元素包含在另一个元素中时，假如没有内边距padding或边框border把外边距分隔开 的话，父元素和子元素的相邻上下外边距也会发生合并）；3.空元素（指的是没有子元素或者文字内容的元素）。
对于外边距叠加需要注意以下几点：
1.水平方向外边距永远不会有叠加
2.垂直外边距只会在以上三种情况下叠加
3.外边距的叠加针对的是block以及inner-block元素，不包含行内元素，因为行内元素的margin设置无效。
当margin为负数的时候，对普通文档流元素和对浮动元素的影响是不一样的，负margin对普通文档流元素的影响，分为两种情况。
1》当元素的margin-top 或者margin-left为负数时，“当前元素”会被拉向指定方向。
2》当元素的margin-bottom或者margin-right为负数时，“后续元素”会被拉向指定方向。
负margin的技巧（使用场景）：
1.图片与文字对齐
当图片与文字排在一起的时候，在底部水平方向上往往都是不对齐的，这是因为图片与文字默认是基线对齐（vartical-align:baseline）.如果想要实现图片与文字底部水平方向对齐，除了使用“vertical-align：text-bottom”这个方法之外，还可以使用兼容性比较好的负margin来实现。（“img{margin:0 3px -3px 0}”）这样的设置可以当成公式，一般都可以实现图片文字对齐，记住它就行。
2.自适应两列布局
自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。如果使用float，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。可以用于防止浏览器可视宽度不足时发生文本重叠。
3.元素垂直居中
想要实现元素的垂直居中一般来说比较麻烦，bug有一个经典的方法，就是使用position结合 负margin 来实现。具体做法是：首先给父元素写上：“position：relative”，这样做是为了给子元素添加“position：absolute”的时候不会定位到“外太空”去。然后给子元素添加如下属性： 语法如下
------------------------------------------------------------------
父元素
{ position:relative;
}
子元素
{
position:absolute;
top: 50%；
left: 50%;
margin-top:height 值一半的负值；
margin-left：width值一半的负值；
}
--------------------------------------------------------------------------------------
4.tab 选项卡
tab选项卡效果是一种十分节省页面空间的方式，在实际开发中经常会用到。关键是
使用 margin-top：-1px ； 从而使tab选项卡仅仅挨着上边缘。
2.5 关于盒模型 以及 overflow
w3c标准指出，通常一个盒子的内容是被限制在盒子边框之内的。但是有时也会产生溢出，也就是部分或全部内容跑到盒子边框之外。
在CSS中我们可以使用overflow属性来定义当内容溢出元素边框时发生的事情。
overflow：visible 默认值，若内容溢出，则溢出内容可见
overflow：hidden 若内容溢出，则溢出内容隐藏
overflow：scroll 若内容溢出，则显示滚动条
overflow：auto 与scroll类似
overflow：hidden 会使得超出元素的部分自动隐藏，这样处理不好的一点就是这部分的内容显示不完全，比如图片只显示了一部分。不过“overflow：hidden”使得内容超出时不会影响页面整体布局，这是它的好处。
2.6 display：none display：table-cell
在CSS中，我们可以使用“display：none”来隐藏元素。“display：none”用得很多，如二级导航，tab选项卡等地方都用到。不过一般情况下，“display：none”都是配合JavaScript来动态隐藏元素的。
对于“display：none”，我们需要注意以下两点。
1. “display：none” 一般用于JavaScript动态隐藏元素，被隐藏的 元素不占据原来的位置空间。
2. “display：none” 不推荐用来隐藏一些对SEO关键的部分。因为对于搜索引擎来说，它会直接忽略“display：none”隐藏的内容，不把“display：none”隐藏的内容加入权重考虑。
“display：none” 与“visibility:hidden”的区别
在CSS中如果想要隐藏一个元素，以上两种方法都可，但他们之间有本质的区别
（1）“display：none” 的元素被隐藏之后，不占据原来的位置。也就是彻底消失了，看不见也摸不着。
（2）“visibility:hidden”的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着。
在CSS中 ，“display：table-cell ”可以让元素以表格单元格的形式呈现，也就是说 table-cell类型的元素具备td元素的特点。
“display：table-cell ” 非常强大，可以实现以下三种功能。
（1）图片垂直居中于元素
我们可以使用 “display：table-cell ”和“vertical-align：center”来实现大小不固定的图片的垂直居中效果。 语法如下：
---------------------------------------------------------
父元素{
display：table-cell；
vertical-align：center；
}
子元素{
vertical-align：center；
}
--------------------------------------------------------
图片的水平居中可以“display：table-cell ”和“text-align：center”来实现
图片的垂直居中可以“display：table-cell ”和“vertical-align：center”来实现
（2） 高等布局
像好友动态页中的两栏布局就可以用到这种高等自适应布局。它是左右两栏都不定义高度，而是由内容撑起来，左右两栏的高度都相同。左拦只有图像，右栏是内容，右栏中又是由几个div {display：table-cell} 来实现内容垂直居中于元素。 这个技巧非常实用，建议一定要掌握
（3） 自动平均划分元素
如果我们想要ul 来实现下面这种布局，一般都会用float来实现，并且还得精准计算每一个li 的宽度。但是如果给每个li 元素都定义“display：table-cell”，就可很方便实现。而且自动平均划分元素，并在一行显示。语法如下：
-------------------------------------------------------
父元素{ display：table }
子元素{ display：table-ceil ；}，如果给父元素一定宽度，父元素宽度就好根据子元素的个数 进行自动平均划分。

2.7 去除inline-block 元素的间距
行内元素之间是有间距的，大多数情况下为了不影响布局，我们需要去除inline-block元素之间的间距。在css中，我们可以使用 父元素{font-size：0} 来解决
如果想要去除inline-block 元素的间距，除了使用 “font-size：0 ”，还可以使用负margin，letter-spacing字距，word-spacing词距 等方法来实现。

3 文本效果
3.1 有开发经验的小伙伴们，或多或少会见过“text-indent：-9999px；” 这种写法。这种写法一般应用于LOGO部分。在搜索引擎优化中，h1是非常重要的标签，一般情况下，我们都是把网站的LOGO图片放到h1标签中。不过我们知道，搜索引擎无法识别图片，只能识别文字。为了更好的优化SEO，那该怎么办呢？
一个很好的解决方法就是：指定h1元素的长度与LOGO图片的长度一样，然后定义h1的背景图片（background-image）为LOGO图片，然后使用“text-indent：-9999px；”来隐藏h1 的文字内容。
虽然在h1上设置 display：none 也可以达到同样的页面效果来隐藏h1的文字内容，但是搜索引擎一般把display：none隐藏的文字内容当作垃圾信息而忽略，此时h1的权重会丢失。所有不建议使用这种方式。
为何定义“text-indent”为 -9999px；”而不是999 ，因为一般电脑屏幕宽度有为1024px，1366px等，之所以定义成这，那是为了让文字的缩进足够大，就算是大分辨率电脑也看不到文字。
3.2 text-align 起作用的元素
text-align 对文字，inline元素（行内元素） 以及 inline-block（行内块元素）元素起作用，但对块元素不起作用。
我们知道div 是块元素，如果想要使用水平居中div元素，可以先使用“display：inline-block” 来将div 转化为inline-block 元素，然后再使用“text-align：center”。
text-align：center 与“margin：0 auto；” 的区别：
（1） “text-align：center；” 实现的是文字，inline元素（行内元素） 以及 inline-block（行内块元素）元素 的水平居中；
（2） “margin：0 auto；” 实现的是块元素的水平居中。
（3） “text-align：center；” 在父元素中定义； “margin：0 auto；” 在当前元素中定义。
3.3 height和line-height
一行文字 的高度是由 line-height 决定的，而不是由height 决定。 在CSS中我们可以定义height 和 line-height 这两个属性值相等，从而实现单行文字的垂直居中。这是经常使用的技巧。
3.4vertical-align 属性取值有三种情况：负值 ，百分比 和关键字
1. 负值
vartical-align 属性取值可以为负值，和百分比值。例如“vartical-align ：-2px” 表示元素对于基线向下偏移2px.此方法常用于解决单选框与文字垂直对齐的问题。

		2. 百分比（这个百分比是对当前元素所继承的line-height 属性值决定的）
		3.关键字（top，middle，baseline，bottom,text-top,text-buttom,super,sub等）
		根据w3c 定义,vertical-align属性用于定义周围文字,inline元素或inline-block元素的基线相对于该元素的基线的垂直对齐方式.
	 		1.vertical-align属性应用
	 			以下分别介绍其在inline-block元素,inline元素和块元素,table-cell元素中的应用
	 			1.1 在inline元素和inline-block元素中应用
	 				在HTML中,常见的inline-block元素有两个:img元素和input 元素.对于这两个inline-block元素,我们一定要记住`:
	 				vertical-align属性对inline元素,inline-block元素和table-cell元素有效,对块元素无效.举例如下:
	 				<body>
	 					<div id="1">绿叶学习网<img src="images/girl.png" alt="">绿叶学习网(<strong>middle</strong>)</div>
	 					<div id="2"><img src="images/girl.png" alt=""></div>
	 				</body>
						<style >
							#1 >img{vertical-align:middle}
							#2 >img{vertical-align:middle}
						</style>
						浏览器效果发现,对#2的样式设定,vertical-align设置无效.如果想要在div中实现图片的垂直居中,我们可以先为div定义display:table-cell,
						也就是将块元素转化为table-cell元素(表格单元格),然后再使用vertical-align:middle就可以实现了.
						注意:table-cell元素和inline,inline-block元素使用vertical-align是有很大区别的.
							(1).inline元素和inline-block元素的vertical-align是针对周围的元素而言的,vertical定义的是周围元素相对于当前元素的对齐方式.
							(2)table-cell元素的vertical-align属性是针对自身而言.vertical-align定义的是内部元素对自身的对齐方式.

3 表单效果

3.1 深入radio 和CheckBox
单选框复选框和文字垂直居中对齐,我们分两种情况考虑:
1) 当文字大小为12px时,我们给单选框或复选框定义"vertical-align:-3px" 即可解决对齐问题
2)当文字大小为14px时,我们给单选框或复选框定义"vertical-align:-2px" 即可解决对齐问题.
其中,vertical-align:-3px 表示的是相对于继续向下便宜3px.如果你的页面文字大小为15px,16px等,
办法也是一样的.我们只需要稍微调整一下vertical-align属性的数值,直到效果满意即可,很简单.

3.2 深入textarea
textarea指的是稳步.对应textarea,我们有两个方面需要深入学习.
1)固定大小,禁用拖动. 在主流浏览器中,会发现textarea右下角有一个小三角.当用鼠标拖曳小三角的时候,我们会发现
textarea可以放大或缩小,IE浏览器没这个功能,谷歌有.其实这个功能是浏览器给用户添加的,因为前端开发人员在
设计页面布局时,一般会给textarea设定一个固定的长度.有了这个小三角拖曳功能,用户就可以自己调整合适的大
小.但是如果用户过渡拖动textarea的大小会影响页面布局,使得页面不美观.因此在实际开发过程中我们往往都是
设定固定大小或者禁止拖曳
固定大小：在css中我们可以使用 min-width和min-height来定义textarea的最小宽度和最大宽度,也可以使用max-width和
max-height来定义textarea的最大宽度和最大高度.
禁止拖动:如果我们想彻底禁止用户拖动小三角来改变textarea元素大小,我们可以使用CSS中的resize属性来实现.
textarea {width:100px;height:80px;resize:none} 这种方式更简单更值得推荐.
2) 在Chrome,Firefox和IE实现相同的外观
textarea元素有cols和rows两个属性.其中cols用来控制列数(也就是每行文字个数),rows用来控制行数.但是他们在不同浏览器
下外观是不同的,因为默认情况下,IE是有滚动条的,而Chrome(或Firefox)是没有滚动条的,要达到不同浏览器具有相同的外观
效果方法有两个:
1)使用CSS的width和height来定义textarea的大小
2)使用"overflow:auto"来定义textarea的滚动条自适应
textarea {width:100px;height:80px;over-flow:auto;resize:none}

3.3 表单对齐
在表单操作中,很多情况是左边是文字,右边是表单元素.表单元素排列很整齐,非常美观.为了实现对齐,很大大型网站用如下方式实现:
(1) 每一行表单分为左栏加若干右栏. 所有行的左栏长度相等,所有行的右栏所有盒子长度之和相等.左栏一般是一个label,右栏是若干个文本框.
(2)所有左栏盒子和右栏盒子都设置为左浮动
(3)左栏text-align 属性定义为right,使得文字右对齐
(4) 最重要一点,每一行中左栏长度和右栏所有盒子的总长度之和等于行宽.这里的盒子是包括width,padding,border和margin的.
举例如下:

手机号

密码

验证码

如果在页面布局中碰到问题,建议多去看大型网站源码中的解决方案. ## 4. 浮动布局 文档流:简单来说,就是指元素在页面中出现的先后顺序. 正常文档流:将一个页面从上到下分为一行一行,其中宽元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行排满的布局 (默认情况下的布局) 脱离文档流:指的是脱离正常文档流.一般使用两种方法就会变成脱离文档流:浮动和定位. float属性很简单,只有三个取值:left,right 和none.但是浮动涉及的理论知识却非常多,其中包括:块元素和行内元素,CSS盒子模型,脱离文档流,BFC,层叠上下文.设置浮动造成影响: (1) 对自身的影响:当一个元素定义了"float:left" 或 "float:right" 时,不管这个元素之前是inline,inline-block或者其他类型,都会变成block类型. 就可以设置宽高了. (2)对父元素的影响:如果一个元素设置了浮动,它会脱离正常文档流.如果浮动元素的高度height大于父元素的高度height,就会出现父元素高度塌陷.父元素不能高度为空,从而导致边框不能撑开,背景色无法显示.办法就是:"overflow:hidden".在实际开发过程中,如果我们因为写了某段CSS之后,突然发现页面布局错乱十分严重,此时我们首先应该想到是浮动带来的负作用,然后认真检查一下是否没有清除浮动. 在CSS中清除浮动方法有三种:clear:both(它清除元素会增加多余标签) overflow:hidden(应用于浮动元素的父元素,清除浮动会使得超出父元素的部分隐藏) 标签名::after (after与before就是常见的伪元素,比较推荐,因为没有其他方法的两种影响) ## 5.深入定位 对于定位布局我们需要注意以下几点. 1)默认情况下,固定定位元素和绝对定位元素的位置是相对于浏览器而言,而相对定位元素的位置是相对原始位置而言. 2)position属性一般配合top,bottom,left和right来使用.只有元素定义position属性(除了static)之后,top,bottom,left和right属性才能生效. 3)top,bottom,left和right这四个属性不一定全部都用到. 4)"position:absolute" 会将元素转换为块元素. 如果想要实现子元素相对父元素定位,我们都是给父元素定义"position:relative;" ,然后给子元素定义"position:absolute;"(一层层传递含义),之后配合top,bottom,left和right来定位.这个技巧在实际开发中大量使用,它也是定位布局的精髓之一. 子元素相对祖先元素定位 语法(同子元素相对父元素定位是一样的道理) : ------------------------------------------------------------------------------------------------------- 祖先元素 {position:relative} 子元素{position:absolute; /* 定义top,bottom,left 和right */ } ----------------------------------------------------------------------------------------------------------------- 记住:绝对定位元素是相对于外层第一个设置了"position:relative;" "position:absolute"或"position:fixed" 的祖先元素来进行定位. ### 5.2 z-index 属性 虽然网页是平面的,但实际上是三维结构.除了x轴,y轴,它还有z 轴.z轴默认状态下处于不激活状态..也就是在默认情况下,设置元素 z-index属性无效.z-index属性只有在元素定义"position:relative" "position:absolute"或"position:fixed" 时才会被激活.z-index属性 是控制堆叠元素的顺序的.z-index属性取值有:auto(默认值,堆叠顺序与父元素相等),number,inherit(表从父元素继承z-index属性的值) z-index值较大的元素会叠加在z-index值较小的元素之上.如果z-index 值相同,则遵循"后来者居上"规则来叠加.

6. CSS制作图标

	CSS实现图形一般适合于展示,并不适合用于JavaScript动态操作.如果想要实现便于JavaScript操作的图形,搭建可以去了解canvas或SVG
	CSS实现三角标的原理:将一个元素的width和height定义为0,然后为它设置较粗的边框,并且将其中任意三条边框或者两条边的颜色定义为transparent.
	制作带边框三角标思路:是使用两个三角形来实现,一个作为背景色(内层三角形),一个作为边框色(外层三角形),通过定位布局重叠在一起.注意,两个三角形定位要相差1像素
	CSS实现圆角:border-radius属性来实现,可以取值(px,百分比,长度值)
	css实现半圆和圆:上半圆实现原理:把高度height设为宽度width的一半,并且左上角和右上角的圆角半径定义与元素的高度一致,而右下角和左下角的圆角半径定义为0.		圆的实现: width 和height 属性值相同,border-radius属性值为width(或height)的一半.
	椭圆:border-radius属性取值可以是一个值,也可以是两个值.,取一个值时如"border-radius:30px"其实质等价于"border-radius:30px/30px" ,当两个值不一致时就是椭圆.

7.css性能优化

###7.1 属性缩写
在css中,很多属性是可以缩写的.属性缩写可以减少字符数,使得CSS代码量更少.主要从4个方面进行优化.
(1) 盒模型缩写
(2)背景缩写(缩写取值顺序:背景颜色,背景图片,背景重复,背景图片是固定还是滚动,背景图片的定位)–>可以省略任意位置参数取值
(3)字体缩写(缩写取值顺序:字体类型,字体大小,字体粗细,行高)–>一般要指定font-family,和font-size属性;font-size值和line-height值之间
是需要加入斜杠"/“的.
(4) 颜色值缩写
###7.2 压缩工具
css文件分为"开发版"和"发布版”.发布版是将开发版进行合并和压缩之后,在网站运行时使用的.css压缩工具有在线版,本地版和编辑器插件三种.推荐在线版的两个工具:css compressor 和 YUI Compressor
css compressor网址:http://www.csscompressor.com
YUI Compressor网址:http://tools.oschina.net/jscompress
压缩软件可以自动对css 文件执行如下操作:
1.删除所有注释 2.删除无用的空白符 3.删除结尾分号 4.删除属性值为0的单位 5.删除属性值以0开头的小数前的0
6.将相似属性合并…
图片压缩:图片传输量在一个页面中占比较高时记得对图片进行压缩.图片压缩的在线工具ImageOptim(可以实现缩放和拖放功能)
TinyPNG,JPEGmimi等工具.
选择器在浏览器的解析原理:规则是从右到左进行解析的;不同解析器解析速率不同,id选择器>class选择器>元素选择器>相邻选择器…
选择器最后不要超过三层,位置靠右的选择条件尽可能精确; 避免使用后代选择器,尽量少用子选择器.
css精灵 (css Spire)的使用:推荐CSS Sprite Generator和Sprite Cow
iconfont是国内功能很强大且图标内容很丰富的矢量图标库,iconfont官网:http://www.iconfont.cn/

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎