关于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,图片,表单
搜索引擎对h1h6标签比较敏感,尤其是h1和h2.一个语义良好的页面,h1h6应该是完整有序而没有出现断层的。应该注意以下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元素有效,对块元素无效.举例如下:
	 				
	 					
绿叶学习网绿叶学习网(middle)
浏览器效果发现,对#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语法1 功能;
  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语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

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

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

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

// 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

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML

KaTeX数学公式

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

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

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

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

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法,参考 这儿,

UML 图表

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

张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆角长方形
菱形
  • 关于 Mermaid 语法,参考 这儿,

FLowchart流程图

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

Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no
  • 关于 Flowchart流程图 语法,参考 这儿.

导出与导入

导出

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

导入

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


  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

你可能感兴趣的:(UI)