diff --git a/404.html b/404.html index 51ef805f..266d4be3 100644 --- a/404.html +++ b/404.html @@ -62,16 +62,13 @@ - - - + - diff --git a/about/index.html b/about/index.html index d2167c3e..43df4ca6 100644 --- a/about/index.html +++ b/about/index.html @@ -66,7 +66,7 @@ - + @@ -261,7 +261,7 @@
GitHub:xovel
E-mail:xovel@vip.qq.com
因为一些事情,本人搁置了zmd.js
的开发。今天查阅资料时,发现一段代码,针对多行文本进行处理的。
1 | function rTrimInputText(text) { |
|
|
代码来自:https://github.com/showdownjs/showdown/blob/master/dist/showdown.js#L884
去除多行文本中的前置空格。
以下的文本:
-1 | code: |
|
|
在使用上面的一段代码处理后得到的结果为:
-1 | result: |
|
|
即去除了每一行前面的两个空格。
在针对嵌套的语法中,比如嵌套列表,在针对被嵌套的列表进行的解析的时候,就需要先去掉前面的缩进。这一段代码正好可以满足这个需求。
-1 | - list1 |
|
|
乍一看这个需求,显得有点奇特瑰丽,但作为一个前端工程师,是可以想出各种方案来进行实现的。下面就详细讲述一下实现的过程。
首先,我们搭建一个菜单的结构代码如下:
-1 | <div class="nav-menu"> |
|
|
当然,也可以使用<ul><li>...</li></ul>
的方式。这里我们采用div
实现子菜单,避免ul
/li
的自带的样式影响效果。
接着,横向滚动效果的设计与实现。这里分为横向和滚动效果两个。
关于横向布局,网络上有大量的示例参考,使用float
,绝对定位
,inline
,inline-block
。如果直接使用的子元素就是行内元素,则无须考虑横向的问题。
根据需求,在屏幕较小时,菜单为横向滚动,屏幕较大则自适应拉伸。这里就有一个临界值了,那么到底是多大的屏幕才去应用自适应布局呢?这个值是事先预定的。比如这里我们设计了8个菜单项目,经过计算,这8个菜单的长度约摸为440px
,我们就用440px
作为划分临界值进行自适应布局的设计实现。
CSS3提供了一个叫做Media Query
——翻译过来叫做媒体查询
——的高级功能。关于媒体查询的详细资料,请参考Media queries - CSS | MDN。
css代码中我们于是就将自适应效果的代码写成这个样子:
-1 | @media (min-width: 440px) { |
|
|
里面的min-width: 440px
表示花括号里面的代码将在屏幕宽度最小值超过440px时生效。于是,接下来就只剩下一件事情了:拉伸的自适应效果实现。
参考了一下CSS自适应布局,关于自动拉伸的方式,方法众多,比如table
、百分比
、弹性布局
等等。这里我们就使用弹性布局
进行实现。关于弹性布局的说明,近期本人会整理一篇文章专门进行解读。
2016.7.28,文章整理完成,敬请参阅:初识Flex布局。
具体代码如下:
-1 | @media (min-width: 440px) { |
|
|
justify-content: space-around;
指定了元素之间的留白方式为等距离并且两边有留白。
那么,这个菜单我们就设计实现完毕了。完整代码如下:
-1 | <style type="text/css"> |
|
|
演示:一个自适应菜单导航页面
打完收工
现有这个一个需求,编程实现OEIS数列A090078。
这里简单介绍一下数列A090078
,从基数开始,将序号转为二进制,再将二进制中的连在一起的0
进行合并,得到的新的二进制再转换为十进制,便就是该数列的值。
示例:1
2
3
4
5
6
7
81 -> 1 -> 1 -> 1
9 -> 1001 -> 101 -> 5
15 ->1111 -> 1111 -> 15
13 ->1101 -> 1101 -> 13
16 -> 10000 -> 10 -> 2
17 -> 10001 -> 101 -> 5
65535 -> 1111111111111111 -> 1111111111111111 -> 65535
65000 -> 1111110111101000 -> 11111101111010 -> 16250
示例:
我们姑且把这种转换称之为fit
,得到的数值叫做fit number
。那么上面提到的需求就可以描述为:
给定一个值,求该值的
fit number
。
下面就来看看各路大牛各显神通吧!
-1 | dc -e2o?p|tr -s 0|dc -e2i?p |
|
|
仅27字节。
-1 | b00¬:C |
|
|
这简直黑科技中的黑科技,仅仅8个字节就实现了。在线测试。
-05AB1E这门编程语言,本身也是娱乐品,有兴趣的可以点击访问其项目主页。
1 | p |
|
|
仅20个字节。又是一款黑魔法,Jellyfish是一款来自于J
语言的用Python 3
编写的编程语言。
1 | n=>+`0b${n.toString(2).replace(/0+/g,0)}` |
1 | n=>'0b'+n.toString(2).replace(/0+/g,0)-0 |
|
|
|
|
这是ES6的语法,走了个捷径,不能算作是正确答案,因为没有输出语句,看不到结果,不过这里也贴出来。
1 | echo $[2#`bc<<<obase=2\;$1|sed s/00\*/0/g`] |
|
|
传说中的MATLAB,看看:
-1 | BFFOZtXB |
|
|
仅仅只有8个字节
难以置信吧?看看其解读:
-1 | % Implicitly grab input |
|
|
可能你不信,那么请访问在线测试页面。
BoFFOZtXB
o % Convert from logical to double (due to a bug)…有个双精度的BUG
1 | import re |
|
|
简单直接并粗暴,50字节的Python解决方案奉上。
-1 | {:2(.base(2)~~{S:g/0+/0/})} |
解释:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15-> $_ {
# convert from base 2
:2(
# convert to base 2
$_.base(2)
# substitute
.subst(
:global,
/ 0+ /, # all substrings made of 0s
'0' # with one 0
)
)
}
示例:1
2
3
4
5
6
7
8
9
10
11
12
13my &fit-compress = {:2(.base(2)~~{S:g/0+/0/})}
say fit-compress 1; # 1
say fit-compress 9; # 5
say fit-compress 15; # 15
say fit-compress 13; # 13
say fit-compress 16; # 2
say fit-compress 17; # 5
say fit-compress 65535; # 65535
say fit-compress 65000; # 16250
# number created with 「:2( [~] <0 1>.roll: 256 )」
say fit-compress 80794946326210692074631955353531749442835289622757526957697718534769445507500
# 4240335298301026395935723255481812004519990428936918
1 | ->n{eval ("0b%b"%n).squeeze ?0} |
|
|
解释:
示例:
|
|
Ruby的解决方案,31字节实现,在线测试。
-1 | BŒgḄBFḄ |
|
|
黑科技无疑,代码里面有叫不出名字的字母。在线测试。
这个Jelly
是个什么鬼?请参阅其项目主页:DennisMitchell/jelly。
1 | "/0+/",0,decbin($argv[1]))); =bindec(preg_replace( |
|
|
PHP作为一个有逼格的编程语言,自然不能示弱,51字节实现,虽然跟Javascript一样很尴尬。
1 | int x(int x)=>Convert.ToInt32(Regex.Replace(Convert.ToString(x,2),"0+","0"),2); |
1 | int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);} |
|
|
|
|
java不甘寂寞,也来一份,但也只有语法实现,并不能愉快的直接测试。
-测试代码:1
2
3
4
5
6
7
8public class Fit {
int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);}
public static void main(final String... args) {
final Fit x = new Fit();
System.out.println(x.f(65000));
}
}
这里还有一份很短的Java代码:1
interface C{static void main(String[]b){Integer i=0;System.out.print(i.parseInt(i.toString(i.parseInt(b[0]),2).replaceAll("0+","0"),2));}}
1 | [convert]::ToInt32(([convert]::ToString($args[0],2)-replace'0+',0),2) |
测试代码:
这里还有一份很短的Java代码:
|
|
年长的PowerShell同样的不敢寂寞,然而这测试过程也是有点无奈:
-1 | PS C:\Tools\Scripts\golfing> 1,9,15,13,16,17,65535,65000|%{"$_ -> " +(.\output-fit-number.ps1 $_)} |
1 | i:.BQ"0+"\02 |
|
|
|
|
这什么语言瞅着眼熟的很,然而这并不是Python
,该语言的项目主页:Pyth。
代码解释:1
2
3 .BQ # Convert input from base 10 to base 2
: "0+"\0 # Replace multiple zeroes with single zero
i 2 # Convert back from base 2 to base 10
代码解释:
在线测试。
-1 | .+ |
|
|
讲真,我已经目瞪口呆。Retina似乎又是一款自编编程语言。在线测试。
Dyalog APL来露个脸,19字节:
-1 | {2⊥⍵/⍨~0 0⍷⍵}2∘⊥⍣¯1 |
|
|
明显黑科技
1 | q~2b1+0a%0a*);2b |
|
|
代码解释:1
2
3
4
5
6
7q~ read and evaluate the input number
2b convert to base 2 (array of 1s and 0s)
1+ append a 1 to deal with trailing zeros
0a% split by [0], dropping empty pieces; only chunks of 1s are left
0a* join by [0]
); discard the 1 we appended before
2b convert back from base 2
代码解释:
抄了这么多的编程语言的实现之后,颇有一种井底之蛙的感觉。还有很多编程语言也可以很简洁的实现该需求,这里就不再继续贴出了,有兴趣的可自行访问该页面的源地址。
全文完~
diff --git a/article/css-animation.html b/article/css-animation.html index 5de479a6..f97f1848 100644 --- a/article/css-animation.html +++ b/article/css-animation.html @@ -66,7 +66,7 @@ - + @@ -348,15 +348,15 @@selector
可以使用多个进行组合,以逗号,
分隔。
存在多个百分比一样的声明时,以最后一个为准,前面不论设置了什么都将被忽略最新版规范没有对此进行说明,但有部分浏览器已经考虑对其实现了。
使用!important
声明样式时,该声明将被忽略。
格式化语法:
-1 | @keyframes <identifier> { |
|
|
animation
是CSS3中的新特性,浏览器对其的实现并不统一。具体兼容性情形请参阅Can I use
添加浏览器的特定前缀可以使其达到兼容性要求。
-webkit-
,包括诸如Safari、Chrome等众多现代浏览器-moz-
,Firefox内核-o-
,已废弃,Opera之前的内核。Opera内核现在已经转为Blink
,该内核是WebKit系。-ms-
,IE内核诸如-khtml-
、-icab-
诸君可自行搜索。
在上述提到的所有属性以及@keyframes
,可在有必要的情况下添加对应浏览器的私有前缀以实现兼容。
1 | /* @keyframes duration | timing-function | delay | |
1 | p { |
|
|
|
|
diff --git a/article/css-flex.html b/article/css-flex.html index 24ed7a06..9134d7ef 100644 --- a/article/css-flex.html +++ b/article/css-flex.html @@ -75,7 +75,7 @@ - + @@ -338,7 +338,7 @@本人制作的一个错视动画:错视动画演示
决定容器是否为Flex布局元素的定义属性。
-1 | .container{ |
|
|
由于浏览器对该规范的实现并不统一,部分浏览器需要添加相应的私有前缀。比如Webkit内核浏览器,加上
-webkit-
前缀(display: -webkit-flex
)。其他类似。CSS多列属性将在Flex布局中失效。
@@ -346,56 +346,56 @@flex-direction
决定主轴的方向。
-+
1
2
3 .container {
flex-direction: row | row-reverse | column | column-reverse;
}
123 .container {flex-direction: row | row-reverse | column | column-reverse;}
row
,默认值。沿主轴水平正方向。主轴的方向会被ltr
|rtl
影响row-reverse
,沿主轴水平反方向。column
,垂直方向,从上至下方向。column-reverse
,垂直方向,从下至上方向。flex-wrap
指定项目排列换行的方式。
-+
1
2
3 .container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
123 .container{flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap
,默认值。不换行,在同一行内显示。wrap
,换行。wrap-reverse
,换行,顺序相反,第一行在下方。flex-flow
-
flex-direction
和flex-wrap
的简写。默认值为row nowrap
。+
1 flex-flow: <‘flex-direction’> || <‘flex-wrap’>
1 flex-flow: <‘flex-direction’> || <‘flex-wrap’>justify-content
指定项目在主轴上的对齐方式。
-+
1
2
3 .container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
123 .container {justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start
,默认值。左对齐。flex-end
,右对齐。center
,居中。space-between
,两端对齐,项目之间的距离一样。space-around
,每个项目之间的距相等,包括两端。align-items
指定项目在纵轴上的对齐方式。
-+
1
2
3 .container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
123 .container {align-items: flex-start | flex-end | center | baseline | stretch;}
flex-start
,沿纵轴的起点对齐flex-end
,沿纵轴的终点对齐center
,沿纵轴的中点对齐baseline
,沿项目基线对齐stretch
,默认值。拉伸填满整个容器。min-width
/max-width
设置依然有效align-content
定义多根主轴线时的轴线的对齐方式,如果只有一根主轴线,则忽略该值。
-+
1
2
3 .container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
123 .container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
flex-start
,沿纵轴的起点对齐flex-end
,沿纵轴的终点对齐center
,沿纵轴的中点对齐space-between
,与纵轴两端对齐,轴线之间的间隔平均分布space-around
,每根主轴线两侧的间隔都相等。stretch
,默认值。轴线拉伸占满整个剩余空间。项目的属性
order
指定项目的序号。
-+
1
2
3 .item {
order: <integer>;
}
123 .item {order: <integer>;}项目默认按照书写顺序排序。指定序号后按照序号大小从小到大排列。
序号默认值为
0
,可以设置为负值。flex-grow
指定项目的放大比例。
-+
1
2
3 .item {
flex-grow: <number>; /* default 0 */
}
123 .item {flex-grow: <number>; /* default 0 */}默认值为
0
,表示即使存在剩余空间,也不放大。可以设置为小数,但负值视为无效值。如果所有项目的
flex-grow
都为1,则它们将平分剩余空间(如果有的话)。如果一个项目的flex-grow
为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。flex-shrink
指定项目的缩小比例。默认值为
1
。表示在空间不足时,项目进行缩小的程度。设置为0
表示在空间不足时不进行缩小。可以设置小数,但负值视为无效值。flex-basis
指定有剩余空间时项目占据的主轴空间。
-+
1
2
3 .item {
flex-basis: <length> | auto; /* default auto */
}
123 .item {flex-basis: <length> | auto; /* default auto */}浏览器将根据这个值计算主轴是否有剩余空间。默认值为
auto
,即项目本来的大小。flex
-
flex-grow
、flex-shrink
、flex-basis
三个属性的简写。+
1
2
3 .item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
123 .item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}默认为
0 1 auto
。该属性有两个快捷值:auto
(1 1 auto
)和none
(0 0 auto
)。建议使用该合并写法。
align-self
单独指定项目的对齐方式。
-+
1
2
3 .item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
123 .item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}除了
auto
表示继承容器的对齐方式,其他值与align-items
中的解释一样。参考资料
diff --git a/article/css-specificity.html b/article/css-specificity.html index 7edda612..f9fc337f 100644 --- a/article/css-specificity.html +++ b/article/css-specificity.html @@ -66,7 +66,7 @@ - + @@ -390,7 +390,7 @@
- A Complete Guide to Flexbox | CSS-Tricks
- Flex 布局教程:语法篇 - 阮一峰的网络日志
- CSS Flexible Box Layout - CSS | MDN
- Using CSS flexible boxes - CSS | MDN
- CSS Flexible Box Layout Module Level 1
- Can I use - Flexible Box Layout Module
- Flexible Box (“Flexbox”) Layout (Internet Explorer)
- Flexible box (“Flexbox”) layout (Windows)
内联样式的权重值是1000,ID选择器的权重值是100,class选择器的权重值是10,标签选择器的权重值是1。整条规则中的所有选择器权重值相加得到整个样式规则的权重值,数字越大权重值越高。
虽然总结的很不错,但是如果遇到以下的情形,岂不是就懵逼了?
1 | html body article div table tr td p a span i{ color: black; } |
|
|
那么问题来了:如果以上两条选择器对应着同一个元素,那么它的颜色到底是什么呢?
inherite
关于CSS样式继承,由于并非元素本身的样式定义,所以连个优先级都谈不上,其优先级将被直接忽略。
-我们先来看一下一段CSS代码:1
p:first-letter{color:red;}
对应的HTML代码:1
<p><span style="color:cyan;">A</span>BCDEFG</p>
我们先来看一下一段CSS代码:
对应的HTML代码:
那么,这个字母A到底会是什么颜色呢?
伪元素测试:Test 4
diff --git a/article/dom-nodetype.html b/article/dom-nodetype.html index ce8129a0..8a3e249a 100644 --- a/article/dom-nodetype.html +++ b/article/dom-nodetype.html @@ -66,7 +66,7 @@ - + @@ -326,9 +326,9 @@常量
-在DOM4的规范草案中,nodeType属性值
2
、4
、5
、6
、12
均已废弃不再使用。示例
+
1
2
3
4
5
6
7
8
9
10
11 document.nodeType === Node.DOCUMENT_NODE; // true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
var fragment = document.createDocumentFragment();
fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
var p = document.createElement("p");
p.textContent = "Once upon a time...";
p.nodeType === Node.ELEMENT_NODE; // true
p.firstChild.nodeType === Node.TEXT_NODE; // true示例
1234567891011 document.nodeType === Node.DOCUMENT_NODE; // truedocument.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // truevar fragment = document.createDocumentFragment();fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // truevar p = document.createElement("p");p.textContent = "Once upon a time...";p.nodeType === Node.ELEMENT_NODE; // truep.firstChild.nodeType === Node.TEXT_NODE; // true以下示例代码检查文档的第一个节点是否为注释;如果不是,则进行一个提示。
-+
1
2
3 var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT_NODE)
console.log("You should comment your code well!");
123 var node = document.documentElement.firstChild;if (node.nodeType != Node.COMMENT_NODE)console.log("You should comment your code well!");
参考文档:
diff --git a/article/double-eleven-an-ironic-day.html b/article/double-eleven-an-ironic-day.html index 38a81b4b..3c265dc0 100644 --- a/article/double-eleven-an-ironic-day.html +++ b/article/double-eleven-an-ironic-day.html @@ -66,7 +66,7 @@ - + diff --git a/article/equal-loan-payment.html b/article/equal-loan-payment.html index f4ff2696..5d977907 100644 --- a/article/equal-loan-payment.html +++ b/article/equal-loan-payment.html @@ -66,7 +66,7 @@ - + @@ -330,7 +330,7 @@
+
- 等比数列求和公式:$S_n=a_1\cdot\frac{1-q^n}{1-q}=\frac{a_1-a_n*q}{1-q} (q\neq1)$,$a_1$为基数,$q$为等比系数。 ↩
diff --git a/article/excel-even-odd-color.html b/article/excel-even-odd-color.html index f7e26148..29ec5e0d 100644 --- a/article/excel-even-odd-color.html +++ b/article/excel-even-odd-color.html @@ -66,7 +66,7 @@ - + diff --git a/article/flex-compability.html b/article/flex-compability.html index 8f908c5e..897e4fb8 100644 --- a/article/flex-compability.html +++ b/article/flex-compability.html @@ -66,7 +66,7 @@ - + diff --git a/article/how-technology-hijacks-poeples-minds.html b/article/how-technology-hijacks-poeples-minds.html index e5738257..08bac1dd 100644 --- a/article/how-technology-hijacks-poeples-minds.html +++ b/article/how-technology-hijacks-poeples-minds.html @@ -79,7 +79,7 @@ - + diff --git a/article/http-status-code.html b/article/http-status-code.html index e8d3b312..1634fdb1 100644 --- a/article/http-status-code.html +++ b/article/http-status-code.html @@ -66,7 +66,7 @@ - + diff --git a/article/i-am-lost-in-the-colorful-world-2.html b/article/i-am-lost-in-the-colorful-world-2.html index 67e1f0ab..de96ed43 100644 --- a/article/i-am-lost-in-the-colorful-world-2.html +++ b/article/i-am-lost-in-the-colorful-world-2.html @@ -66,7 +66,7 @@ - + diff --git a/article/i-am-lost-in-the-colorful-world-3.html b/article/i-am-lost-in-the-colorful-world-3.html index cf61ab32..407d25d2 100644 --- a/article/i-am-lost-in-the-colorful-world-3.html +++ b/article/i-am-lost-in-the-colorful-world-3.html @@ -66,7 +66,7 @@ - + diff --git a/article/i-am-lost-in-the-colorful-world.html b/article/i-am-lost-in-the-colorful-world.html index 933f3421..4057eb2b 100644 --- a/article/i-am-lost-in-the-colorful-world.html +++ b/article/i-am-lost-in-the-colorful-world.html @@ -66,7 +66,7 @@ - + diff --git a/article/iis-404-mime-type.html b/article/iis-404-mime-type.html index 120514cc..6aa04c54 100644 --- a/article/iis-404-mime-type.html +++ b/article/iis-404-mime-type.html @@ -67,7 +67,7 @@ - + diff --git a/article/js-operator-precedence.html b/article/js-operator-precedence.html index 411fb0b8..cfc897b1 100644 --- a/article/js-operator-precedence.html +++ b/article/js-operator-precedence.html @@ -67,7 +67,7 @@ - + diff --git a/article/language-tags-in-html.html b/article/language-tags-in-html.html index 38303f2c..6ca31163 100644 --- a/article/language-tags-in-html.html +++ b/article/language-tags-in-html.html @@ -42,7 +42,7 @@ - + @@ -66,7 +66,7 @@ - + @@ -320,14 +320,14 @@
- 1.等比数列求和公式:$S_n=a_1\cdot\frac{1-q^n}{1-q}=\frac{a_1-a_n*q}{1-q} (q\neq1)$,$a_1$为基数,$q$为等比系数。 ↩
知乎上有一个针对这个问题进行过细致讨论的页面:网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”?。本文将根据这个问题的各个答案进行一个综合整理,记录HTML中这些有意思的东西。
HTML标签的lang属性
HTML标签的lang属性将指定对应元素内容的语言。
The lang attribute (in no namespace) specifies the primary language for the element’s contents and for any of the element’s attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown.
大多数情况下,直接对html
标签指定lang属性,表示当前文档显示的语言。 -+
1 <html lang="ar">
1 <html lang="ar">以上代码意味着该网页的内容显示文本为阿拉伯语。
在一些HTML4/XHTML的页面中,则有使用这样的方式进行指定的:
-+
1
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
12 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
- en定义语言为英语
- zh-CN定义语言为中文
也有一些多语言的页面会对指定元素的lang属性进行设置,如:
-+指定该p标签的语言为德语
1 <p lang="de">Ich bin der brennende Komet</p>指定该p标签的语言为德语
1 <p lang="de">Ich bin der brennende Komet</p>指定lang属性的益处
- 协助搜索引擎
- 协助语音合成
- 协助选择符号异体字用于高品质的印刷
- 协助选择一套引号
- 协助解决连字符、绑定和空格
- 协助进行拼写检查和语法检查
语言文字标签书写顺序
规定语言标签按以下形式排列:
language-extlang-script-region-variant-extension-privateuse
@@ -456,12 +456,12 @@+ #前端 + #lang #html - #前端 - diff --git a/article/limitation-of-wechat-weapp.html b/article/limitation-of-wechat-weapp.html index 627cb42e..3ab812c4 100644 --- a/article/limitation-of-wechat-weapp.html +++ b/article/limitation-of-wechat-weapp.html @@ -66,7 +66,7 @@ - + diff --git a/article/markdown-syntax.html b/article/markdown-syntax.html index 2273e9bb..cb51744e 100644 --- a/article/markdown-syntax.html +++ b/article/markdown-syntax.html @@ -66,7 +66,7 @@ - + @@ -390,13 +390,13 @@
- 列表项1 - 列表项2
这段代码将被转换成:
-+
1
2
3
4 <ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
1234 <ul><li>列表项1</li><li>列表项2</li></ul>而这段代码
- 列表项1 - 列表项2
将被转换成:
-+
1
2
3
4 <ul>
<li><p>列表项1</p></li>
<li><p>列表项2</p></li>
</ul>
1234 <ul><li><p>列表项1</p></li><li><p>列表项2</p></li></ul>如果列表项内容为多行,对每一行进行缩进即可。段落中有多行的情况时可以一并缩进也可以不用缩进。
列表项的内容可以嵌套其他markdown语法,如块引用,代码块等。
无序列表的三个不同的符号避免在同一列表中交叉使用,不同的符号生成的列表是独立的,这可能会对样式的渲染造成一定的干扰。
@@ -410,7 +410,7 @@这段代码将被转换成:
-+
1
2
3
4 <p>This is a normal paragraph:</p>
<pre><code>This is a code block.
</code></pre>
1234 <p>This is a normal paragraph:</p><pre><code>This is a code block.</code></pre>代码块会对里面的一些符号进行转义,变为HTML实体符:
@@ -470,7 +470,7 @@
- And连接符
&
将被转换为&
- 左尖括号
<
将被转换为<
- 右尖括号
>
将被转换为>
自动链接
文档中的链接可以使用定界符尖括号
<>
实现自动链接效果,不需要额外的链接语法操作。<https://github.com/>
将被转换为:
-+
1 <a href="https://github.com/">https://github.com/</a>
1 <a href="https://github.com/">https://github.com/</a>对于邮箱地址链接,同样有效。
取消转义
使用反斜杠
\
进行语法取消。使用反斜杠可以使得语法相关符号以字面量进行显示,接受以下符号的取消转义:
@@ -491,9 +491,9 @@Emoji
<围栏代码块与语法高亮
使用三个
`
作为定界符,也可以使文本转换为可以代码块。我们可以将之称为围栏代码块。在第一组
-`
后面可以指定高亮采用的语法。+
1
2
3
4
5 ```javascript
var now = function(){
return new Date().getTime()
}
```
12345 ```javascriptvar now = function(){return new Date().getTime()}```以上代码将会以javascript语法的方式对代码进行高亮显示。
-+
1
2
3 var now = function(){
return new Date().getTime()
}
123 var now = function(){return new Date().getTime()}@@ -530,7 +530,7 @@We use Linguist to perform language detection and syntax highlighting. You can find out which keywords are valid in the languages YAML file.
+
1
2
3
4
5
6
7
8 <dl>
<dt>名称1</dt>
<dd>A1</dd>
<dd>A2</dd>
<dt>名称2</dt>
<dd>B1</dd>
</dl>
12345678 <dl><dt>名称1</dt><dd>A1</dd><dd>A2</dd><dt>名称2</dt><dd>B1</dd></dl>参考:
@@ -538,12 +538,12 @@+
1 <p id="para" class="color-red" foo="bar">我是一个段落</p>
1 <p id="para" class="color-red" foo="bar">我是一个段落</p>缩写
可以对指定文本进行缩写提示,转换后对该文本使用
<abbr>
标签包裹,该标签会有一个title
属性指定其详细名称。喜大普奔是一个缩写词。 *[喜大普奔]: 喜闻乐见、大快人心、普天同庆、奔走相告 -
将被转换为:
+
1 <p><abbr title="喜闻乐见、大快人心、普天同庆、奔走相告">喜大普奔</abbr>是一个缩写词。</p>将被转换为:
1 <p><abbr title="喜闻乐见、大快人心、普天同庆、奔走相告">喜大普奔</abbr>是一个缩写词。</p>
*[text]: title
为缩写的描述定义文本语法,text
为缩写,title
为描述,跟链接引用的定义文本类似,可以在文档中的任意位置,最终解析出来的文档将会忽略。脚注
脚注的语法:在需要添加脚注的地方使用语法:
[^x]
,在文档的任意位置放置脚注的定义说明即可,如:[^x]: 我是脚注说明
。参考:
@@ -567,11 +567,11 @@块状数学公式语法:
-
- 一行公式,定界符改为
$$
即可(Mathjax的语法)。- 多行公式,使用类似语法高亮的语法,反引号后跟
math
即可。+
1
2
3 ```math
这里放置具体公式代码
```
123 ```math这里放置具体公式代码```常见数学公式渲染工具:
-流程图、时序图、甘特图
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 流程图:
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
时序图:
```
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
甘特图:
```
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d
```流程图、时序图、甘特图
12345678910111213141516171819202122232425262728 流程图:```graph TD;A-->B;A-->C;B-->D;C-->D;```时序图:```sequenceDiagramAlice->>John: Hello John, how are you?John-->>Alice: Great!```甘特图:```gantttitle A Gantt Diagramsection SectionA task :a1, 2014-01-01, 30dAnother task :after a1 , 20dsection AnotherTask in sec :2014-01-12 , 12danther task : 24d```参考:
diff --git a/article/mathjax-advanced.html b/article/mathjax-advanced.html index 9369849c..4c828f9d 100644 --- a/article/mathjax-advanced.html +++ b/article/mathjax-advanced.html @@ -66,7 +66,7 @@ - + @@ -319,7 +319,7 @@
之前的文章:MathJax基础教程与快速参考,本篇文章将对进阶的MathJax语法做一个简单的介绍。大部分内容来自于MathJax basic tutorial and quick reference一文中后面的评论。
MathJax提供了良好的矩阵支持。矩阵的语法为:$$\begin{matrix}…\end{matrix}$$
,如:
1 | $$ |
|
|
$$
\begin{matrix}
1 & x & x^2 \\
1 & y & y^2 \\
1 & z & z^2 \\
\end{matrix}
$$
关于添加括号,除了在基础教程中提到的\left…\right
方法,还可以使用指定字符串替换上面提到的语法中的matrix
即可:
增广矩阵则使用格式化的表格:
$$
\left[\begin{array}{cc|c}
1&2&3\\
4&5&6
\end{array}\right]
$$
上面的矩阵的具体代码:
-1 | $$ \left[ |
|
|
小型行内矩阵的表示方法为\bigl(\begin{smallmatrix} ... \end{smallmatrix}\bigr)
。例如$\bigl( \begin{smallmatrix} a & b \\ c & d \end{smallmatrix} \bigr)$的代码为:
1 | $\bigl( \begin{smallmatrix} a & b \\ c & d \end{smallmatrix} \bigr)$ |
|
|
很多时候,我们想让方程式对齐以显得更加整齐美观。为了达到这样的目的,我们采用语法\begin{align}…\end{align}
并且在每个换行符\\
之后,添加一个连接符&
即可。
举个例子:
$$
\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
& = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\
& = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}
$$
以上方程式的代码为:
-1 | \begin{align} |
|
|
分段函数使用的语法为:\begin{cases}…\end{cases}
,在带有换行符\\
的一行中,在分段处加入连接符&
。
1 | f(n) = |
|
|
展示为:
$$
f(n) =
\begin{cases}
n/2, & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$
也可以将括号放在右边:
-1 | \left. |
|
|
$$
\left.
\begin{array}{l}
\text{if $n$ is even:}&n/2\\
\text{if $n$ is odd:}&3n+1
\end{array}
\right\}
=f(n)
$$
要使得分段函数中间的空隙更大,可以使用\\[2ex]
替换\\
,如要得到:
$$
f(n) =
\begin{cases}
\frac{n}{2}, & \text{if $n$ is even} \\[2ex]
3n+1, & \text{if $n$ is odd}
\end{cases}
$$
使用以下代码即可:
-1 | f(n) = |
|
|
先看一个例子:
$$
\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 0.24 & 1 & 125 \\
2 & -1 & 189 & -8 \\
3 & -20 & 2000 & 1+10i
\end{array}
$$
其代码为:
-1 | \begin{array}{c|lcr} |
|
|
在上面的矩阵中,提到了格式化表格的方式。格式化代码\begin{array}{c|lcr}
中c
表示居中对齐,l
表示左对齐,r
表示右对齐。\hline
表示横向的水平线。
格式化的数组可以嵌套:
$$
\begin{array}{c}
\begin{array}{cc}
\begin{array}{c|cccc}
\text{min} & 0 & 1 & 2 & 3\\
\hline
0 & 0 & 0 & 0 & 0\\
1 & 0 & 1 & 1 & 1\\
2 & 0 & 1 & 2 & 2\\
3 & 0 & 1 & 2 & 3
\end{array}
&
\begin{array}{c|cccc}
\text{max}&0&1&2&3\\
\hline
0 & 0 & 1 & 2 & 3\\
1 & 1 & 1 & 2 & 3\\
2 & 2 & 2 & 2 & 3\\
3 & 3 & 3 & 3 & 3
\end{array}
\end{array}
\\
\begin{array}{c|cccc}
\Delta&0&1&2&3\\
\hline
0 & 0 & 1 & 2 & 3\\
1 & 1 & 0 & 1 & 2\\
2 & 2 & 1 & 0 & 1\\
3 & 3 & 2 & 1 & 0
\end{array}
\end{array}
$$
$\lim \limits_{x \to 1} \frac{x^2-1}{x-1}$
使用\bbox
可以对方程式进行高亮展示。
如:
-1 | \bbox[yellow] |
|
|
将展示为:
$$ \bbox[yellow] @@ -454,7 +454,7 @@可以添加内边距:
-1 | $$ \bbox[yellow,5px] |
|
|
也可以指定边框:
-1 | $$ \bbox[#1695ea,5px,border:2px solid cyan] |
|
|
另外有一个图片压缩工具,暂未使用:gulp-imagemin
JS压缩工具可以参考:gulp-uglify、UglifyJS2。
-引入各种插件:1
2
3
4
5
6var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
引入各种插件:
本人采用的核心的任务代码如下:
-1 | gulp.task('minify-html', function() { |
|
|
那么,在每一次deploy之前,在Git Bash
下执行一次gulp minify-html
即可对所有的HTML代码进行压缩。
CSS和JS的压缩可以编写类似的代码,这里不再赘述。
-end
diff --git a/article/misunderstood-songs-for-mother.html b/article/misunderstood-songs-for-mother.html index 566fb9fa..397033fc 100644 --- a/article/misunderstood-songs-for-mother.html +++ b/article/misunderstood-songs-for-mother.html @@ -66,7 +66,7 @@ - + diff --git a/article/normalize-cssreset.html b/article/normalize-cssreset.html index 07a28ac4..a593283b 100644 --- a/article/normalize-cssreset.html +++ b/article/normalize-cssreset.html @@ -66,7 +66,7 @@ - + @@ -315,9 +315,9 @@CSS Reset
目的简单而又粗暴:使CSS样式在各种浏览器下呈现的效果一样。
当年的一个黑魔法:1
* { margin: 0; padding: 0; }
CSS Reset
目的简单而又粗暴:使CSS样式在各种浏览器下呈现的效果一样。
当年的一个黑魔法:
这种粗暴的方式曾经给浏览器带来了很大的负荷,它由曾经的红极一时变成现在不受待见。
-后来有了一个更加飘逸的CSS Reset
代码,它是这样写的:1
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0; }
后来有了一个更加飘逸的CSS Reset
代码,它是这样写的:
更有甚者,将前面一堆CSS选择器换成了几乎所有HTML标签,与上一个黑魔法并无二致。
这里引用一下张鑫旭的吐槽:
@@ -338,7 +338,7 @@参考资料
- Normalize.css
- About normalize.css
- 来,让我们谈一谈 Normalize.css
- What is the difference between Normalize.css and Reset CSS?
- Normalize.css 与传统的 CSS Reset 有哪些区别?
- The CSS user agent style sheet and presentational hints
- CSS reset的重新审视 – 避免样式重置
- Reset CSS:只选对的,不选”贵”的
- NEC : 更好的CSS样式解决方案
-
normalize.css v4.1.1
源码+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420 /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
normalize.css v4.1.1
源码diff --git a/article/notes-for-git.html b/article/notes-for-git.html index e1ee7b2d..5dd47ffb 100644 --- a/article/notes-for-git.html +++ b/article/notes-for-git.html @@ -66,7 +66,7 @@ - + @@ -306,7 +306,7 @@
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420 /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css *//*** 1. Change the default font family in all browsers (opinionated).* 2. Prevent adjustments of font size after orientation changes in IE and iOS.*/html {font-family: sans-serif; /* 1 */-ms-text-size-adjust: 100%; /* 2 */-webkit-text-size-adjust: 100%; /* 2 */}/*** Remove the margin in all browsers (opinionated).*/body {margin: 0;}/* HTML5 display definitions========================================================================== *//*** Add the correct display in IE 9-.* 1. Add the correct display in Edge, IE, and Firefox.* 2. Add the correct display in IE.*/article,aside,details, /* 1 */figcaption,figure,footer,header,main, /* 2 */menu,nav,section,summary { /* 1 */display: block;}/*** Add the correct display in IE 9-.*/audio,canvas,progress,video {display: inline-block;}/*** Add the correct display in iOS 4-7.*/audio:not([controls]) {display: none;height: 0;}/*** Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress {vertical-align: baseline;}/*** Add the correct display in IE 10-.* 1. Add the correct display in IE.*/template, /* 1 */[hidden] {display: none;}/* Links========================================================================== *//*** 1. Remove the gray background on active links in IE 10.* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.*/a {background-color: transparent; /* 1 */-webkit-text-decoration-skip: objects; /* 2 */}/*** Remove the outline on focused links when they are also active or hovered* in all browsers (opinionated).*/a:active,a:hover {outline-width: 0;}/* Text-level semantics========================================================================== *//*** 1. Remove the bottom border in Firefox 39-.* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */}/*** Prevent the duplicate application of `bolder` by the next rule in Safari 6.*/b,strong {font-weight: inherit;}/*** Add the correct font weight in Chrome, Edge, and Safari.*/b,strong {font-weight: bolder;}/*** Add the correct font style in Android 4.3-.*/dfn {font-style: italic;}/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/h1 {font-size: 2em;margin: 0.67em 0;}/*** Add the correct background and color in IE 9-.*/mark {background-color: #ff0;color: #000;}/*** Add the correct font size in all browsers.*/small {font-size: 80%;}/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub {bottom: -0.25em;}sup {top: -0.5em;}/* Embedded content========================================================================== *//*** Remove the border on images inside links in IE 10-.*/img {border-style: none;}/*** Hide the overflow in IE.*/svg:not(:root) {overflow: hidden;}/* Grouping content========================================================================== *//*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/code,kbd,pre,samp {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */}/*** Add the correct margin in IE 8.*/figure {margin: 1em 40px;}/*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/hr {box-sizing: content-box; /* 1 */height: 0; /* 1 */overflow: visible; /* 2 */}/* Forms========================================================================== *//*** 1. Change font properties to `inherit` in all browsers (opinionated).* 2. Remove the margin in Firefox and Safari.*/button,input,optgroup,select,textarea {font: inherit; /* 1 */margin: 0; /* 2 */}/*** Restore the font weight unset by the previous rule.*/optgroup {font-weight: bold;}/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/button,input { /* 1 */overflow: visible;}/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/button,select { /* 1 */text-transform: none;}/*** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`* controls in Android 4.* 2. Correct the inability to style clickable types in iOS and Safari.*/button,html [type="button"], /* 1 */[type="reset"],[type="submit"] {-webkit-appearance: button; /* 2 */}/*** Remove the inner border and padding in Firefox.*/button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}/*** Restore the focus styles unset by the previous rule.*/button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}/*** Change the border, margin, and padding in all browsers (opinionated).*/fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out* `fieldset` elements in all browsers.*/legend {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */}/*** Remove the default vertical scrollbar in IE.*/textarea {overflow: auto;}/*** 1. Add the correct box sizing in IE 10-.* 2. Remove the padding in IE 10-.*/[type="checkbox"],[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */}/*** Correct the cursor style of increment and decrement buttons in Chrome.*/[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */}/*** Remove the inner padding and cancel buttons in Chrome and Safari on OS X.*/[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}/*** Correct the text style of placeholders in Chrome, Edge, and Safari.*/::-webkit-input-placeholder {color: inherit;opacity: 0.54;}/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */}
记录一下使用Git过程的一些不大不小的问题。不算全面,只是记录,详细的Git使用教程请参阅下方的参考资料。
创建SSH Key
使用Git时,本地的Git仓库与远程Git仓库(比如Github)之间的传输是通过SSH加密的,故此需要创建一个SSH Key,在
-Shell
/Git Bash
中输入:+
1 $ ssh-keygen -t rsa -C "youremail@example.com"
1 $ ssh-keygen -t rsa -C "youremail@example.com"
youremail@example.com
是你的邮件地址,然后回车。passphrase
是本地密码,如有需要可以进行设置。创建成功之后的加密文件放在用户主目录下的
.ssh
目录下,里面有两个密钥文件:id_rsa
和id_rsa.pub
。前者是私钥,后者是公钥。远程仓库需要添加公钥到账户中。diff --git a/article/object-property-accessor.html b/article/object-property-accessor.html index 27c73793..b226a25f 100644 --- a/article/object-property-accessor.html +++ b/article/object-property-accessor.html @@ -66,7 +66,7 @@ - + @@ -314,7 +314,7 @@
点号 .
能访问对象的属性的名称必须是严格的JS识别符。这个识别符的具体要求跟变量名类似。方括号 []
可以访问包含标准属性在内的一切属性。
可以简单粗暴的认为点号的访问方式是方括号访问方式的一种语法糖数字的点号属性访问不能直接跟在后面,需要使用如下方式进行访问:
-+
1
2
3
4
5
6
7
8
9
10
11 77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity :p
1234567891011 77 .toExponential();// or77.toExponential();// or(77).toExponential();// or77..toExponential();// or77.0.toExponential();// because 77. === 77.0, no ambiguity :p方括号可以访问特殊的属性,如可以使用
arr[1]
可以访问到数组arr的第二个下标的值,但是不能使用arr.1
这种方式。一些非常规的属性诸如
1$
、+66
、.233
,需要使用方括号的形式去访问。阅读过
jQuery
源码的人,应该都见识过Sizzle
的Expr
对象,里面有类似的访问方式:jQuery.expr[ ":" ] = jQuery.expr.pseudos;
参考资料:Property accessors - JavaScript | MDN diff --git a/article/regexp-assertion.html b/article/regexp-assertion.html index 097a72de..07096ea0 100644 --- a/article/regexp-assertion.html +++ b/article/regexp-assertion.html @@ -66,7 +66,7 @@ - + diff --git a/article/rfc2616-is-obsoleted.html b/article/rfc2616-is-obsoleted.html index 088bc09a..dd39f12e 100644 --- a/article/rfc2616-is-obsoleted.html +++ b/article/rfc2616-is-obsoleted.html @@ -66,7 +66,7 @@ - + diff --git a/article/things-about-display.html b/article/things-about-display.html index ff3502c0..8d8f9061 100644 --- a/article/things-about-display.html +++ b/article/things-about-display.html @@ -66,7 +66,7 @@ - + @@ -320,7 +320,7 @@概述
display属性指定元素渲染使用的类型。
语法
display: none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents
-+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 display: none
display: inline
display: block
display: contents
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: ruby
display: ruby-base
display: ruby-text
display: ruby-base-container
display: ruby-text-container
display: run-in
display: inherit
display: initial
display: unset
123456789101112131415161718192021222324252627282930 display: nonedisplay: inlinedisplay: blockdisplay: contentsdisplay: list-itemdisplay: inline-blockdisplay: inline-tabledisplay: tabledisplay: table-celldisplay: table-columndisplay: table-column-groupdisplay: table-footer-groupdisplay: table-header-groupdisplay: table-rowdisplay: table-row-groupdisplay: flexdisplay: inline-flexdisplay: griddisplay: inline-griddisplay: rubydisplay: ruby-basedisplay: ruby-textdisplay: ruby-base-containerdisplay: ruby-text-containerdisplay: run-indisplay: inheritdisplay: initialdisplay: unset取值