VIM学习笔记 网页开发-输入网页标签(Input HTML Tags)

在编写HTML代码时，重复录入标签显然是相当低效的。我制作了HTML-Editor插件，通过快捷键和菜单项来提高输入HTML标签的效率。

安装配置插件

请在vimrc中添加以下命令，以便在“Insert (paste)”状态下正常使用快捷键：

:set nopaste

如果侦测文件类型为XHTML，那么将自动使用小写的标签。也可以定义以下变量，以强制使用小写标签：

:let g:do_xhtml_mappings = 'yes'

在插入模式下，输入以“;”开头的关键词，比如“;pp”，将自动扩展为完整的段落标签；使用以下命令，可以修改默认的前缀键为逗号：

:let g:html_map_leader = ','

假设使用;ah快捷键，输入以下链接标签。光标将自动定位到href属性的引号之内；输入链接地址之后，点击Tab键将移动至title属性的引号之内；输入链接标题之后，点击Tab键将移动至</a>标签之前。也就是说，使用Tab键可以快速跳转至下一标签属性，进一步提高输入HTML代码的效率。

如果您需要输入真正的Tab制表符，那么可以使用;Tab快捷键。

如果您希望恢复通常的Tab键操作行为，那么请设置以下变量：

let g:no_html_tab_mapping = 'yes'

利用快捷键输入标签

以下表格列示了在插入模式和可视化模式下，用于输入HTML标签的快捷键：

快捷键	输入代码
;;	插入字符“;”
;&	插入字符“&”[1]
;4	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
;s4	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
;ab	<abbr title=""></abbr>
;ad	<address></address>
;ah	<a href="" title=""></a>
;an	<a id=""></a>
;bd	<body><CR></body>
;bh	<base href="" />
;bl	<blockquote><CR></blockquote>
;br	<br />
;bu	<input type="button" name="" value="" />
;ca	<caption></caption>
;ch	<input type="checkbox" name="" value="" />
;ci	<cite></cite>
;cm	<!-- -->
;co	<code></code>
;cs	<style type="text/css"><!--<CR>--></style>
;ct	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> [2]
;dd	<dd></dd>
;de	<del></del>
;df	<dfn></dfn>
;dl	<dl><CR></dl>
;dt	<dt></dt>
;dv	<div><CR></div>
;eb	<embed type="" src="" width="" height="" />
;em	<em></em>
;fi	<input type="file" name="" value="" size="20" />
;fm	<form action=""><CR></form>
;h1	<h1></h1>
;h2	<h2></h2>
;h3	<h3></h3>
;h4	<h4></h4>
;h5	<h5></h5>
;h6	<h6></h6>
;he	<head><CR></head>
;hi	<input type="hidden" name="" value="" />
;hr	<hr />
;ht	<html xmlns="http://www.w3.org/1999/xhtml"><CR></html>
;if	<iframe src=""><CR></iframe>
;im	<img src="" alt="" />
;in	<ins></ins>
;it	<i></i>
;js	<script type="text/javascript"><!--<CR>//--></script>
;la	<label for=""></label>
;li	<li></li>
;lk	<link href="" />
;ls	<link rel="stylesheet" type="text/css" href="" />
;me	<meta name="" content="" />
;mh	<meta http-equiv="" content="" />
;mi	<img src="" width="" height="" alt="" /> [3]
;ms	<select name="" multiple><CR></select>
;ns	<noscript><CR></noscript>
;ob	<object data="" width="" height=""><CR></object>
;og	<optgroup label=""><CR></optgroup>
;ol	<ol><CR></ol>
;op	<option></option>
;pa	<input type="password" name="" value="" size="20" />
;pm	<param name="" value="" />
;pp	<p></p>
;pr	<pre><CR></pre>
;qu	<q></q>
;ra	<input type="radio" name="" value="" />
;re	<input type="reset" value="Reset" />
;sa	<samp></samp>
;sb	<sub></sub>
;se	<select name=""><CR></select>
;sj	<script src="" type="text/javascript"></script>
;sm	<small></small>
;sn	<span></span>
;sp	<sup></sup>
;st	<strong></strong>
;su	<input type="submit" value="Submit" />
;ta	<table><CR></table>
;tA	在常规模式或可视化模式下，提示输入行列数，并自动生成表格代码
;tb	<tbody><CR></tbody>
;td	<td></td>
;te	<input type="text" name="" value="" size="20" />
;tf	<tfoot><CR></tfoot>
;th	<th></th>
;tH	<thead><CR></thead>
;ti	<title></title>
;tr	<tr></tr>
;tx	<textarea name="" rows="10" cols="50"><CR></textarea>
;ul	<ul><CR></ul>

请注意：

1. 由于“&”作为前缀键用于输入字符实体(Character Entity)，所以定义快捷键用来输入此特殊字符；
2. charset属性根据文件的'fileencoding'或'encoding'属性自动判断；您也可以通过g:html_default_charset变量进行强制定义；
3. 点击;mi将查找src指定的图片文件，然后将获得的图片尺寸信息更新到width和height属性中；
4. 代码列中的“<CR>”，代表换行符；
5. 在可视化模式下选则文本然后点击快捷键，将插入标签并将选中的文本放置在name、value或content属性中；
6. 对于<acronym>,<big>,<center>,<font>,<isindex>,<strike>,<tt>,<frame>,<frameset>,<noframes>,<b>,<u>等等已废弃的标签，不建议继续使用；
7. 关于完整的HTML标签索引，请参考HTML Elements Index。

利用菜单输入标签

您也可以使用“HTML”菜单来输入HTML标签；

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 网页开发-转义字符实体(Escape Character Entity)

在输入字符实体(Input Character Entity)章节中，已经介绍了利用HTML-Editor插件来快速输入HTML字符实体。本节将介绍，如何在字符实体和实际文本之间相互转换。

在vimrc配置文件中，定义以下函数：

function! HtmlEntities(line1, line2, action)
let search = @/
let range = 'silent ' . a:line1 . ',' . a:line2
if a:action == 0 " must convert & last
 execute range . 'sno/&lt;/</eg'
 execute range . 'sno/&gt;/>/eg'
 execute range . 'sno/&amp;/&/eg'else " must convert & first
 execute range . 'sno/&/&amp;/eg'
 execute range . 'sno/</&lt;/eg'
 execute range . 'sno/>/&gt;/eg'
endif
nohl
let @/ = search
endfunction

映射以下自定义命令：

command! -range -nargs=1 HEntities call HtmlEntities(<line1>, <line2>, <args>)

转义（Escape）字符实体

定义以下快捷键，用于将当前行中的特殊字符转义为字符实体代码：

noremap <silent> <Leader>he :HEntities 1<CR>

您也可以在HTML Escape网页上，实现相同的功能。

反转义（Unescape）字符实体

定义以下快捷键，用于将当前行中的字符实体代码反转义为特殊字符：

noremap <silent> <Leader>hu :HEntities 0<CR>

您也可以在HTML un-escape网页上，实现相同的功能。

以上快捷键和命令，均可在可视化模式和选择模式下使用。例如进入可视化模式或者用鼠标选中多行代码之后，点击<Leader>he快捷键，可以转义已选中的多行文本。

我们也可以在命令中，指定进行转义的文本范围。例如使用以下命令，针对当前行及之后3行进行反转义：

:.,.+3HEntities 0

使用以下命令，则可以针对整个文件进行字符转义：

:%Entities 1

请注意，以上代码只是实现了<、>和&三个常用字符实体的转义。您可以自行扩展代码，以实现更多字符实体的转义功能。

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 网页开发-输入字符实体(Input Character Entity)

字符实体（Character Entity），也称为转义字符串（Escape Sequence），主要用于在HTML代码中，输入如“<”和“>”等标签关键字，以及如“©”等在ASCII字符集中没有定义的需要转义的特殊符号。当解释程序遇到此类字符串时，将会解释并在网页中显示为真实的字符。

对于同一个字符实体，可以使用名称和数字两种引用方式。

名称引用方式为&name;，并且严格区分大小写。比如α代表小写希腊字母“α”；而Α则代表大写希腊字母“Α”。

数字引用，又可以使用十进制（decimal）和十六进制（hexadecimal）两种格式。十进制引用格式为&#number;。十六进制引用格式为&#xnumber;。例如©和©均代表版权符号“©”。

关于字符实体的更多信息，请参考Character Entity Reference。

HTML-Editor插件

我在Christian J Robinson开发的HTML插件的基础之上，制作了HTML-Editor插件，通过快捷键和菜单项来提高编写HTML代码的效率，并提供代码模板、色彩选择和网页预览等功能。

在插入模式下，使用以&开头的快捷键，可以自动输入相对应的字符实体。例如点击&&快捷键，将自动扩展为“&”：

通过在载入插件之前设置g:html_map_entity_leader变量，可以指定其它前缀键：

:let g:html_map_entity_leader = '\'

您也可以在HTML->Character Entities菜单中选择输入字符实体：

以下表格将列出字符实体的名称和数字代码，以及在HTML-Editor插件中定义的快捷键。请注意：

• 除非在描述中指明HTML5，否则均是在HTML4中的定义；
• 如果快捷键列为空，则说明插件中并没有定义相应的快捷键；
• 如果Entity列为空，则说明该字符并没有名称，而只能使用数字引用格式。

特殊实体

字符	描述	Entity	Decimal	Hex	快捷键
	non-breaking space	&nbsp;	&#160;	&#xA0;	&<space>
"	quotation mark = APL quote	&quot;	&#34;	&#x22;	&'
&	ampersand	&amp;	&#38;	&#x26;	&&
<	less-than sign	&lt;	&#60;	&#x3C;	&<
>	greater-than sign	&gt;	&#62;	&#x3E;	&>
™	trade mark sign	&trade;	&#8482;	&#x2122;	&tm
¡	inverted exclamation mark	&iexcl;	&#161;	&#xA1;	&!
¢	cent sign	&cent;	&#162;	&#xA2;	&c|
£	pound sign	&pound;	&#163;	&#xA3;	&#
¥	yen sign = yuan sign	&yen;	&#165;	&#xA5;	&Y=
€	euro sign	&euro;	&#8364;	&#x20AC;	&E=
¦	broken vertical bar	&brvbar;	&#166;	&#xA6;	&bb
§	section sign	&sect;	&#167;	&#xA7;	&se
¨	diaeresis = spacing diaeresis	&uml;	&#168;	&#xA8;	&_"
©	copyright sign	&copy;	&#169;	&#xA9;	&cO
®	registered trade mark sign	&reg;	&#174;	&#xAE;	&rO
µ	micro sign	&micro;	&#181;	&#xB5;	&mi
¶	pilcrow sign = paragraph sign	&para;	&#182;	&#xB6;	&pa
·	middle dot = Georgian comma	&middot;	&#183;	&#xB7;	&.
¿	inverted/turned question mark	&iquest;	&#191;	&#xBF;	&?

箭头符号

字符	描述	Entity	Decimal	Hex	快捷键
←	leftwards single arrow	←	←	←	&la
↑	upwards single arrow	↑	↑	↑	&ua
→	rightwards single arrow	→	→	→	&ra
↓	downwards single arrow	↓	↓	↓	&da
↔	left right single arrow	↔	↔	↔	&ha
↵	carriage return	↵	↵	↵	&cr
⇐	leftwards double arrow	⇐	⇐	⇐	&lA
⇑	upwards double arrow	⇑	⇑	⇑	&uA
⇒	rightwards double arrow	⇒	⇒	⇒	&rA
⇓	downwards double arrow	⇓	⇓	⇓	&dA
⇔	left right double arrow	⇔	⇔	⇔	&hA

标点符号

字符	描述	Entity	Decimal	Hex	快捷键
–	en dash	–	–	–	&n-
—	em dash	—	—	—	&m-
‘	left single quotation mark	‘	‘	‘
’	right single quotation mark	’	’	’
‚	single low-9 quotation mark	‚	‚	‚
“	left double quotation mark	“	“	“	&ld
”	right double quotation mark	”	”	”	&rd
„	double low-9 quotation mark	„	„	„
†	dagger	†	†	†
‡	double dagger	‡	‡	‡
‰	per mille sign	‰	‰	‰
‹	single left angle quotation mark	‹	‹	‹
›	single right angle quotation mark	›	›	›
•	bullet = black small circle	•	•	•	&*
…	horizontal ellipsis = three dot leader	…	…	…	&3.
«	left double angle quotation mark	&laquo;	&#171;	&#xAB;	&2<
»	right double angle quotation mark	&raquo;	&#187;	&#xBB;	&2>
′	prime = minutes = feet	&prime;	&#8242;	&#x2032;
″	double prime = seconds = inches	&Prime;	&#8243;	&#x2033;
‾	overline = spacing overscore	&oline;	&#8254;	&#x203E;
⁄	fraction slash	&frasl;	&#8260;	&#x2044;

希腊字母

字符	描述	Entity	Decimal	Hex	快捷键
Α	Greek capital letter alpha	Α	Α	Α	&Al
Β	Greek capital letter beta	Β	Β	Β	&Be
Γ	Greek capital letter gamma	Γ	Γ	Γ	&Ga
Δ	Greek capital letter delta	Δ	Δ	Δ	&De
Ε	Greek capital letter epsilon	Ε	Ε	Ε	&Ep
Ζ	Greek capital letter zeta	Ζ	Ζ	Ζ	&Ze
Η	Greek capital letter eta	Η	Η	Η	&Et
Θ	Greek capital letter theta	Θ	Θ	Θ	&Th
Ι	Greek capital letter iota	Ι	Ι	Ι	&Io
Κ	Greek capital letter kappa	Κ	Κ	Κ	&Ka
Λ	Greek capital letter lambda	Λ	Λ	Λ	&Lm
Μ	Greek capital letter mu	Μ	Μ	Μ	&Mu
Ν	Greek capital letter nu	Ν	Ν	Ν	&Nu
Ξ	Greek capital letter xi	Ξ	Ξ	Ξ	&Xi
Ο	Greek capital letter omicron	Ο	Ο	Ο	&Oc
Π	Greek capital letter pi	Π	Π	Π	&Pi
Ρ	Greek capital letter rho	Ρ	Ρ	Ρ	&Rh
Σ	Greek capital letter sigma	Σ	Σ	Σ	&Si
Τ	Greek capital letter tau	Τ	Τ	Τ	&Ta
Υ	Greek capital letter upsilon	Υ	Υ	Υ	&Up
Φ	Greek capital letter phi	Φ	Φ	Φ	&Ph
Χ	Greek capital letter chi	Χ	Χ	Χ	&Ch
Ψ	Greek capital letter psi	Ψ	Ψ	Ψ	&Ps
Ω	Greek capital letter omega	Ω	Ω	Ω	&Og
α	Greek small letter alpha	α	α	α	&al
β	Greek small letter beta	β	β	β	&be
γ	Greek small letter gamma	γ	γ	γ	&ga
δ	Greek small letter delta	δ	δ	δ	&de
ε	Greek small letter epsilon	ε	ε	ε	&ep
ζ	Greek small letter zeta	ζ	ζ	ζ	&ze
η	Greek small letter eta	η	η	η	&et
θ	Greek small letter theta	θ	θ	θ	&th
ι	Greek small letter iota	ι	ι	ι	&io
κ	Greek small letter kappa	κ	κ	κ	&ka
λ	Greek small letter lambda	λ	λ	λ	&lm
μ	Greek small letter mu	μ	μ	μ	&mu
ν	Greek small letter nu	ν	ν	ν	&nu
ξ	Greek small letter xi	ξ	ξ	ξ	&xi
ο	Greek small letter omicron	ο	ο	ο	&oc
π	Greek small letter pi	π	π	π	&pi
ρ	Greek small letter rho	ρ	ρ	ρ	&rh
ς	Greek small letter final sigma	ς	ς	ς	&sf
σ	Greek small letter sigma	σ	σ	σ	&si
τ	Greek small letter tau	τ	τ	τ	&ta
υ	Greek small letter upsilon	υ	υ	υ	&up
φ	Greek small letter phi	φ	φ	φ	&ph
χ	Greek small letter chi	χ	χ	χ	&ch
ψ	Greek small letter psi	ψ	ψ	ψ	&ps
ω	Greek small letter omega	ω	ω	ω	&og
ϑ	Greek small letter theta symbol	ϑ	ϑ	ϑ	&ts
ϒ	Greek upsilon with hook symbol	ϒ	ϒ	ϒ	&uh
ϖ	Greek pi symbol	ϖ	ϖ	ϖ	&pv

拉丁字母

字符	描述	Entity	Decimal	Hex	快捷键
Š	Latin capital letter S with caron	Š	Š	Š	&Sc
Ÿ	Latin capital letter Y with diaeresis	Ÿ	Ÿ	Ÿ	&Y"
À	Latin capital letter A with grave	À	À	À	&A`
Á	Latin capital letter A with acute	Á	Á	Á	&A'
Â	Latin capital letter A with circumflex	Â	Â	Â	&A^
Ã	Latin capital letter A with tilde	Ã	Ã	Ã	&A~
Ä	Latin capital letter A with diaeresis	Ä	Ä	Ä	&A"
Å	Latin capital letter A with ring above	Å	Å	Å	&Ao
Æ	Latin capital letter AE	Æ	Æ	Æ	&AE
Ç	Latin capital letter C with cedilla	Ç	Ç	Ç	&C,
È	Latin capital letter E with grave	È	È	È	&E`
É	Latin capital letter E with acute	É	É	É	&E'
Ê	Latin capital letter E with circumflex	Ê	Ê	Ê	&E^
Ë	Latin capital letter E with diaeresis	Ë	Ë	Ë	&E"
Ì	Latin capital letter I with grave	Ì	Ì	Ì	&I`
Í	Latin capital letter I with acute	Í	Í	Í	&I'
Î	Latin capital letter I with circumflex	Î	Î	Î	&I^
Ï	Latin capital letter I with diaeresis	Ï	Ï	Ï	&I"
Ð	Latin capital letter ETH	Ð	Ð	Ð
Ñ	Latin capital letter N with tilde	Ñ	Ñ	Ñ	&N~
Ò	Latin capital letter O with grave	Ò	Ò	Ò	&O`
Ó	Latin capital letter O with acute	Ó	Ó	Ó	&O'
Ô	Latin capital letter O with circumflex	Ô	Ô	Ô	&O^
Õ	Latin capital letter O with tilde	Õ	Õ	Õ	&O~
Ö	Latin capital letter O with diaeresis	Ö	Ö	Ö	&O"
Ø	Latin capital letter O with stroke	Ø	Ø	Ø	&O/
Ù	Latin capital letter U with grave	Ù	Ù	Ù	&U`
Ú	Latin capital letter U with acute	Ú	Ú	Ú	&U'
Û	Latin capital letter U with circumflex	Û	Û	Û	&U^
Ü	Latin capital letter U with diaeresis	Ü	Ü	Ü	&U"
Ý	Latin capital letter Y with acute	Ý	Ý	Ý	&Y'
Þ	Latin capital letter THORN	Þ	Þ	Þ
š	Latin small letter s with caron	š	š	š	&sc
ß	Latin small letter sharp s = ess-zed	ß	ß	ß	&sz
à	Latin small letter a with grave	à	à	à	&a`
á	Latin small letter a with acute	á	á	á	&a'
â	Latin small letter a with circumflex	â	â	â	&a^
ã	Latin small letter a with tilde	ã	ã	ã	&a~
ä	Latin small letter a with diaeresis	ä	ä	ä	&a"
å	Latin small letter a with ring above	å	å	å	&ao
æ	Latin small letter ae	æ	æ	æ	&ae
ç	Latin small letter c with cedilla	ç	ç	ç	&c,
è	Latin small letter e with grave	è	è	è	&e`
é	Latin small letter e with acute	é	é	é	&e'
ê	Latin small letter e with circumflex	ê	ê	ê	&e^
ë	Latin small letter e with diaeresis	ë	ë	ë	&e"
ì	Latin small letter i with grave	ì	ì	ì	&i`
í	Latin small letter i with acute	í	í	í	&i'
î	Latin small letter i with circumflex	î	î	î	&i^
ï	Latin small letter i with diaeresis	ï	ï	ï	&i"
ð	Latin small letter eth	ð	ð	ð
ñ	Latin small letter n with tilde	ñ	ñ	ñ	&n~
ò	Latin small letter o with grave	ò	ò	ò	&o`
ó	Latin small letter o with acute	ó	ó	ó	&o'
ô	Latin small letter o with circumflex	ô	ô	ô	&o^
õ	Latin small letter o with tilde	õ	õ	õ	&o~
ö	Latin small letter o with diaeresis	ö	ö	ö	&o"
ø	Latin small letter o with stroke	ø	ø	ø	&o/
ù	Latin small letter u with grave	ù	ù	ù	&u`
ú	Latin small letter u with acute	ú	ú	ú	&u'
û	Latin small letter u with circumflex	û	û	û	&u^
ü	Latin small letter u with diaeresis	ü	ü	ü	&u"
ý	Latin small letter y with acute	ý	ý	ý	&y'
ÿ	Latin small letter y with diaeresis	ÿ	ÿ	ÿ	&y"
þ	Latin small letter thorn	þ	þ	þ

罗马数字

字符	描述	Entity	Decimal	Hex	快捷键
Ⅰ	Roman Numeral One		Ⅰ	Ⅰ	&R1
Ⅱ	Roman Numeral Two		Ⅱ	Ⅱ	&R2
Ⅲ	Roman Numeral Three		Ⅲ	Ⅲ	&R3
Ⅳ	Roman Numeral Four		Ⅳ	Ⅳ	&R4
Ⅴ	Roman Numeral Five		Ⅴ	Ⅴ	&R5
Ⅵ	Roman Numeral Six		Ⅵ	Ⅵ	&R6
Ⅶ	Roman Numeral Seven		Ⅶ	Ⅶ	&R7
Ⅷ	Roman Numeral Eight		Ⅷ	Ⅷ	&R8
Ⅸ	Roman Numeral Nine		Ⅸ	Ⅸ	&R9
Ⅹ	Roman Numeral Ten		Ⅹ	Ⅹ	&R10
Ⅺ	Roman Numeral Eleven		Ⅺ	Ⅺ	&R11
Ⅻ	Roman Numeral Twelve		Ⅻ	Ⅻ	&R12
Ⅼ	Roman Numeral Fifty		Ⅼ	Ⅼ	&R50
Ⅽ	Roman Numeral One Hundred		Ⅽ	Ⅽ	&R100
Ⅾ	Roman Numeral Five Hundred		Ⅾ	Ⅾ	&R500
Ⅿ	Roman Numeral One Thousand		Ⅿ	Ⅿ	&R1000
ⅰ	Small Roman Numeral One		ⅰ	ⅰ	&r1
ⅱ	Small Roman Numeral Two		ⅱ	ⅱ	&r2
ⅲ	Small Roman Numeral Three		ⅲ	ⅲ	&r3
ⅳ	Small Roman Numeral Four		ⅳ	ⅳ	&r4
ⅴ	Small Roman Numeral Five		ⅴ	ⅴ	&r5
ⅵ	Small Roman Numeral Six		ⅵ	ⅵ	&r6
ⅶ	Small Roman Numeral Seven		ⅶ	ⅶ	&r7
ⅷ	Small Roman Numeral Eight		ⅷ	ⅷ	&r8
ⅸ	Small Roman Numeral Nine		ⅸ	ⅸ	&r9
ⅹ	Small Roman Numeral Ten		ⅹ	ⅹ	&r10
ⅺ	Small Roman Numeral Eleven		ⅺ	ⅺ	&r11
ⅻ	Small Roman Numeral Twelve		ⅻ	ⅻ	&r12
ⅼ	Small Roman Numeral Fifty		ⅼ	ⅼ	&r50
ⅽ	Small Roman Numeral One Hundred		ⅽ	ⅽ	&r100
ⅾ	Small Roman Numeral Five Hundred		ⅾ	ⅾ	&r500
ⅿ	Small Roman Numeral OneThousand		ⅿ	ⅿ	&r1000

数学符号

字符	描述	Entity	Decimal	Hex	快捷键
°	degree sign	°	°	°	&dg
±	plus-minus sign	±	±	±	&+-
×	multiplication sign	×	×	×	&x
÷	division sign	÷	÷	÷	&/
∼	tilde = varies with = similar to	∼	∼	∼
≅	approximately equal to	≅	≅	≅
≈	almost equal to = asymptotic to	≈	≈	≈
≠	not equal to	≠	≠	≠
≡	identical to	≡	≡	≡
≤	less-than or equal to	≤	≤	≤
≥	greater-than or equal to	≥	≥	≥
⊂	subset of	⊂	⊂	⊂
⊃	superset of	⊃	⊃	⊃
⊄	not a subset of	⊄	⊄	⊄
⊆	subset of or equal to	⊆	⊆	⊆
⊇	superset of or equal to	⊇	⊇	⊇
⊕	circled plus = direct sum	⊕	⊕	⊕
⊗	circled times = vector product	⊗	⊗	⊗
⊥	up tack = orthogonal/perpendicular	⊥	⊥	⊥
⋅	dot operator	⋅	⋅	⋅
∀	for all	∀	∀	∀
∂	partial differential	∂	∂	∂
∃	there exists	∃	∃	∃
∅	empty set = null set = diameter	∅	∅	∅
∇	nabla = backward difference	∇	∇	∇
∈	element of	∈	∈	∈
∉	not an element of	∉	∉	∉
∋	contains as member	∋	∋	∋
∏	n-ary product = product sign	∏	∏	∏
∑	n-ary sumation	∑	∑	∑
−	minus sign	−	−	−
∗	asterisk operator	∗	∗	∗
√	square root = radical sign	√	√	√
∝	proportional to	∝	∝	∝
∞	infinity	∞	∞	∞
∠	angle	∠	∠	∠
∧	logical and = wedge	∧	∧	∧
∨	logical or = vee	∨	∨	∨
∩	intersection = cap	∩	∩	∩
∪	union = cup	∪	∪	∪
∫	integral	∫	∫	∫
∴	therefore	∴	∴	∴
¹	superscript digit one	¹	¹	¹	&1^
²	superscript digit two = squared	²	²	²	&2^
³	superscript digit three = cubed	³	³	³	&3^
ƒ	Latin small f with hook = function	ƒ	ƒ	ƒ	&fn
¼	vulgar fraction one quarter	¼	¼	¼	&14
½	vulgar fraction one half	½	½	½	&12
¾	vulgar fraction three quarters	¾	¾	¾	&34
⅓	vulgar fraction one third (HTML5)	⅓	⅓	⅓	&13
⅔	vulgar fraction two thirds (HTML5)	⅔	⅔	⅔	&23
⅕	vulgar fraction one fifth (HTML5)	⅕	⅕	⅕	&15
⅖	vulgar fraction two fifths (HTML5)	⅖	⅖	⅖	&25
⅗	vulgar fraction three fifths (HTML5)	⅗	⅗	⅗	&35
⅘	vulgar fraction four fifths (HTML5)	⅘	⅘	⅘	&45
⅙	vulgar fraction one sixth (HTML5)	⅙	⅙	⅙	&16
⅚	vulgar fraction five sixths (HTML5)	⅚	⅚	⅚	&56
⅛	vulgar fraction one eigth (HTML5)	⅛	⅛	⅛	&18
⅜	vulgar fraction three eigths (HTML5)	⅜	⅜	⅜	&38
⅝	vulgar fraction five eigths (HTML5)	⅝	⅝	⅝	&58
⅞	vulgar fraction seven eigths (HTML5)	⅞	⅞	⅞	&78

其它符号

字符	描述	Entity	Decimal	Hex	快捷键
	en space	 	 	 
	em space	 	 	 
	thin space	 	 	 
‌	zero width non-joiner	‌	‌	‌
‍	zero width joiner	‍	‍	‍
‎	left-to-right mark	‎	‎	‎
‏	right-to-left mark	‏	‏	‏
ˆ	modifier letter circumflex accent	ˆ	ˆ	ˆ
˜	small tilde	˜	˜	˜
℘	script capital P = Weierstrass p	℘	℘	℘
ℑ	blackletter capital I = imaginary part	ℑ	ℑ	ℑ
ℜ	blackletter capital R = real part	ℜ	ℜ	ℜ
ℵ	alef symbol = first transfinite cardinal	ℵ	ℵ	ℵ
⌈	left ceiling = APL upstile	⌈	⌈	⌈
⌉	right ceiling	⌉	⌉	⌉
⌊	left floor = APL downstile	⌊	⌊	⌊
⌋	right floor	⌋	⌋	⌋
⟨	left-pointing angle bracket = bra	⟨	〈	〈
⟩	right-pointing angle bracket = ket	⟩	〉	〉
◊	lozenge	◊	◊	◊
♠	black spade suit	♠	♠	♠
♣	black club suit = shamrock	♣	♣	♣
♥	black heart suit = valentine	♥	♥	♥
♦	black diamond suit	♦	♦	♦

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 工具箱-Qutebrowser浏览器

如果您正在寻找一款使用Vim风格的键盘操作的浏览器，那么开源的Qutebrowser将会是个不错的选择。

Qutebrowser使用QtWebEngine展现引擎，而QtWebEngine则是基于Google's Chromium的。使用:version命令，可以查看Qutebrowser的版本信息，以及其依赖的相关组件。

浏览操作

对于Qutebrowser的第一印象，必然是其极简风格的图形界面。除了顶部的标签页和底部的状态栏，甚至没有菜单栏、工具栏和地址栏。所以，您将拥有最大化的屏幕空间以聚焦于网页内容本身。

您可以使用键盘来完成通常的浏览操作。比如使用f键，将在链接上显示快捷键，点击相应快捷键即可打开链接：如果点击Ctrl+r键再点击快捷键，则会在后台新建标签页并打开链接。假设您正在通过搜索引擎查找信息，那么则可以在后台打开多个搜索结果，而在当前页面不受打扰地继续搜索。

你将会发现大部分快捷键，都是与Vim像类似的。比如使用j和k键，上下滚动屏幕；使用H和L键，返回前一页或后一页；使用/键，查找文本；使用:bind命令，可以查看快捷键列表。

命令行模式

像Vim一样，点击:键将进入命令行模式，可以使用命令来下载文件（:download）、查看历史纪录（:history）、管理收藏夹（:bookmark-add）和缩放屏幕（:zoom）等。

您可以在命令列表中，查看各种命令的使用方法。

系统配置

使用:set命令，可以修改Qutebrowser的配置选项。

例如可以将速查表设置为首页，然后使用:save命令来保存设置。

帮助信息

使用:help命令，可以查看帮助信息。

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 网页开发-Firefox浏览器

在编写VIM学习笔记的过程中，我需要在Firefox中不断预览并验证手工编写的网页；同时也用于预览Markdown格式的Readme文档。

以下将介绍我常用的几款Firefox扩展。

Firefox Screenshots

使用内置的Firefox Screenshots，可以很方便地截取网页。通过鼠标拖拽，就能够滚动屏幕以截取超过当前屏显的较长网页。

Hides scrollbars

窗口的纵向和横向滚动条，除了占用屏幕空间之外，实在想不出还有什么用处？安装Hides scrollbars之后，将自动隐藏滚动条。当然你也可以点击工具栏上的按钮，来重新显示滚动条。

Scroll Progress New

在隐藏滚动条之后，如果你希望了解当前所处的网页位置，那么可以使用Scroll Progress New扩展，在滚动屏幕时显示相对于完整网页的百分比。

相对于冰冷无趣的滚动条，数字化的标识显然更加清晰直观。而且你还可以自定义百分比的显示效果：比如屏幕位置、字体大小、字体颜色和透明度等。

Web Developer

Web Developer可以说是网页开发的瑞士军刀，其提供的辅助工具可以大大提高网页开发和调试的效率。其功能非常丰富，比如检视网页元素、调试CSS、清理Cookie和调整窗口尺寸等等。关于更多功能的介绍，请查看chrispederick.com。

Html Validator

符合标准的网页开发，可谓是不作恶的底线了。通过生产具有可读性的高质量代码，促成在不同浏览器中达成一致的显示效果，并且关照不同用户群体的可访问性（accessibility）。

Html Validator是基于Tidy和OpenSP开发的，用于在本地验证网页是否符合W3C标准。

使用CTRL+SHIFT+I快捷键打开“Developer Tools”面板，然后点击“HTML Validator”页，将检查当前网页并显示存在的错误及原因。

GitLab Markdown Viewer

我不是Markdown的fans，我也不太明白：为什么有了HTML这样完整的标签体系，还需要再发明一个类似功能的子集。但是为了编写Readme文档，我还是需要利用GitLab Markdown Viewer来预览Markdown格式的文档。

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 自动命令-实例(autocmd-examples)

以下实例，将为您使用自动命令提高编辑效率提供灵感。关于自动命令的创建和管理，请参阅自动命令(autocmd)章节。

例如以下自动命令，将在离开Vim编辑器时，自动保存文件：

autocmd FocusLost * :wa

根据文件类型执行自动命令

可以根据文件类型，执行特定命令。例如以下自动命令，将删除php文件行尾的空格：

autocmd BufEnter *.php :%s/[ \t\r]\+$//e

可以根据文件类型，载入相关插件：

autocmd Filetype html,xml,xsl source $VIM/vimfile/plugin/closetag.vim

可以根据文件类型，设置键盘映射：

autocmd bufenter *.tex map <F1> :!latex %<CR>

可以根据文件类型，设置不同的选项：

autocmd FileType ruby setlocal ts=2 sts=2 sw=2 expandtab

自动创建目录

定义以下自动命令，将在保存文件时，检查所指定的目录是否存在：

augroup vimrc-auto-mkdir
  autocmd!
  autocmd BufWritePre * call s:auto_mkdir(expand('<afile>:p:h'), v:cmdbang)
  function! s:auto_mkdir(dir, force)
    if !isdirectory(a:dir)
          \   && (a:force
          \       || input("'" . a:dir . "' does not exist. Create? [y/N]") =~? '^y\%[es]$')
      call mkdir(iconv(a:dir, &encoding, &termencoding), 'p')
    endif
  endfunction
augroup END

如果使用:w命令保存文件时，引用了不存在的目录，那么将显示以下询问信息：
'XXXXX' does not exist. Create? [y/N]
你可以输入“y”，以自动创建目录并保存文件。
如果使用:w!命令保存文件时，引用了不存在的目录，那么将不会显示询问信息，而直接创建目录并保存文件。

自动应用配置文件

在保存vimrc配置文件时，将自动重载并生效变更之后设置，而免去了关闭并重新打开Vim的手工操作：

augroup Reload_Vimrc        " Group name.  Always use a unique name!
    autocmd!                " Clear any preexisting autocommands from this group
    autocmd! BufWritePost $MYVIMRC source % | echom "Reloaded " . $MYVIMRC | redraw
    autocmd! BufWritePost $MYGVIMRC if has('gui_running') | so % | echom "Reloaded " . $MYGVIMRC | endif | redraw
augroup END

自动更新时间戳

利用以下自动命令，将在保存文件时，自动更新文件中的时间戳信息。首先将查找以“This file last updated:”开头的行，然后将“:”之后的时间替换为当前时间。
This file last updated: 12/23/2019 4:05:10 PM

function! UpdateTimestamp ()
  '[,']s/^This file last updated: \zs.*/\= strftime("%c") /
endfunction

augroup TimeStamping
  autocmd!
  autocmd BufWritePre,FileWritePre,FileAppendPre * :call UpdateTimestamp()
augroup END

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 自动命令(autocmd)

自动命令，是在指定事件发生时自动执行的命令。利用自动命令可以将重复的手工操作自动化，以提高编辑效率并减少人为操作的差错。

比如自定义以下函数，用于在文件中插入当前日期：

:function DateInsert()
:    $read !date
:endfunction

使用以下命令，可以手动调用此函数：

:call DateInsert()

而通过以下自动命令，则可以在保存文件时自动执行函数，而不再需要额外的手动操作：

:autocmd FileWritePre * :callDateInsert()<CR>

定义自动命令

可以使用以下格式的autocmd命令，来定义自动命令：

:autocmd [group] events pattern [nested] command

• group，组名是可选项，用于分组管理多条自动命令；
• events，事件参数，用于指明触发命令的一个或多个事件；
• pattern，限定针对符合匹配模式的文件执行命令；
• nested，嵌套标记是可选项，用于允许嵌套自动命令；
• command，指明需要执行的命令、函数或脚本。

events参数

Vim内置了近80个事件，以下表格按照类别列示了较为常用的事件：

类别	事件	触发条件
读取	BufNewFile	编辑一个新文件时
	BufReadPre	读入新缓冲区之前
	BufRead, BufReadPost	读入新缓冲区之后
	BufReadCmd	开始编辑新缓冲区之前
	FileReadPre	使用:read命令读入文件之前
	FileReadPost	使用:read命令读入文件之后
	StdinReadPre	由标准输入设备读入缓冲区之前
	StdinReadPost	由标准输入设备读入缓冲区之后
写入	BufWrite, BufWritePre	将整个缓冲区写入文件时
	BufWritePost	将整个缓冲区写入文件之后
	BufWriteCmd	将整个缓冲区写入文件之前
缓冲区	BufAdd, BufCreate	将缓冲区加入缓冲区列表之后
	BufDelete	从缓冲区列表中移除缓冲区之前
	BufEnter	进入缓冲区之后
	BufLeave	离开缓冲区之前
	BufWinEnter	在窗口中显示缓冲区之后
	BufWinLeave	从窗口中关闭缓冲区之前
	BufNew	创建缓冲区之后
	BufUnload	卸载缓冲区之前
选项	FileType	设置'filetype'选项之后
	Syntax	设置'syntax'选项之后
	EncodingChanged	'encoding'选项改变之后触发命令；
	OptionSet	设置任何选项之后
启动 退出	VimEnter	Vim启动并载入初始化文件之后
	GUIEnter	启动GUI之后
	VimLeavePre	改写viminfo文件之前，退出Vim之前
	VimLeave	改写viminfo文件之后，退出Vim之前
其它	FileChangedShell	当文件的最后修改时间等属性发生改变时
	InsertEnter	进入插入模式时
	InsertLeave	离开插入模式时
	FocusGained	Vim成为当前窗口时
	FocusLost	Vim不再是当前窗口时
	WinEnter	进入窗口时
	WinLeave	离开窗口时
	CursorMoved	在常规模式下移动光标时
	CursorMovedI	在插入模式下移动光标时
	CursorHold	当超过'updatetime'所指定时间用户没有输入时
	vimResized	窗口尺寸变化之后

假设我们打开文件并输入文本，然后保存并退出，那么这些操作将以下顺序触发一系列事件：

操作	事件
启动Vim并创建默认窗口	BufWinEnter
创建默认缓冲区	BufEnter
:edit a.txt	VimEnter
创建新缓冲区	BufNew
将新缓冲区加入到缓冲区列表之中	BufAdd
退出默认缓冲区	BufLeave
退出默认窗口	BufWinLeave
将默认缓冲区从缓冲区列表之中移除	BufUnload
删除默认缓冲区	BufDelete
将a.txt文件读入新缓冲区	BufReadCmd
激活新缓冲区	BufEnter
激活新窗口	BufWinEnter
进入插入模式	InsertEnter
输入文本	CursorMovedI
退出插入模式	InsertLeave
:wq	BufWriteCmd
退出新窗口	BufWinLeave
将新缓冲区从缓冲区列表之中移除	BufUnload
准备退出Vim	VimLeavePre
退出Vim	VimLeave

Source: Event-driven scripting and automation

您可以使用以下命令，获得各个事件的详细说明：

:help autocommand-events

pattern参数

匹配模式用来指定应用自动命令的文件。在匹配模式中，可以使用以下特殊字符：

*	匹配任意长度的任意字符
?	匹配单个字符
\?	匹配字符'?'
.	匹配字符'.'
,	用于分割多个pattern
\,	匹配字符','

可以使用逗号来分割多个模式，以匹配多种类型的文件。例如以下命令，将对于.c和.h文件设置'textwidth'选项：

:autocmd BufRead,BufNewFile *.c,*.h set tw=0

您可以使用以下命令，获得匹配模式的详细说明：

:help autocmd-patterns

nested参数

默认情况下，自动命令并不会嵌套执行。例如在自动命令中执行:e或:w命令，将不会再次触发BufRead和BufWrite事件。而使用nested参数，则可以激活嵌套的事件。

:autocmd FileChangedShell *.c nested e!

查看自动命令

使用以下命令，可以列出所有自动命令：

:autocmd

你会发现自动命令的列表将会非常的长，其中既包括了在vimrc文件中用户定义的自动命令，也包括了各种插件定义的自动命令。

如果在命令中指定了group，那么将会列出所有与指定group相匹配的自动命令；同理，也可以在命令中指定event和pattern，以查看相匹配的自动命令：

:autocmd filetypedetect * *.htm

删除自动命令

使用以下命令，可以删除所有自动命令：

:autocmd!

注意：此操作也将删除插件所定义的自动命令，请谨慎操作。

使用以下命令，可以删除指定组的自动命令：

:autocmd! group

在命令中指定组、事件和匹配模式，可以删除特定的自动命令：

autocmd! Unfocussed FocusLost *.txt

在命令中使用特殊字符“*”来指代所有事件或文件。例如以下命令，将删除Unfocussed组中所有针对txt文件的自动命令：

autocmd! Unfocussed * *.txt

在命令中忽略文件匹配模式，那么所有针对指定事件的针对命令都将被删除。例如以下命令，将删除Unfocussed组在所有针对FocusLost事件的自动命令：

autocmd! Unfocussed FocusLost

自动命令组

通过:augroup命令，可以将多个相关联的自动命令分组管理，以便于按组来查看或删除自动命令。例如以下命令，将C语言开发的相关自动命令，组织在“cprogram”组内：

:augroup cprograms
:    autocmd!
:    autocmd FileReadPost *.c :set cindent
:    autocmd FileReadPost *.cpp :set cindent
:augroup END

如果我们针对同样的文件和同样的事件定义了多条自动命令，那么当满足触发条件时将分别执行多条自动命令。因此，建议在自动命令组的开头增加:autocmd!命令，以确保没有重复的自动命令存在。

您可以使用以下命令，获得自动命令组的帮助信息：

:help :augroup

自动命令选项

通过eventignore选项，可以忽略指定的事件，而不触发自动命令。例如使用以下命令，将忽略进入窗口和离开窗口的事件：

:set eventignore=WinEnter,WinLeave

如果希望忽略所有事件，那么可以使用以下设置：

:set eventignore=all

命令小结

:autocmd	定义/查看自动命令
:autocmd!	删除自动命令
:augroup	定义自动命令组
:set eventignore	设置忽略的事件

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>

VIM学习笔记 语法高亮度-日志文件(Syntax-Logfile)

在系统排错过程中，常常需要在日志文件里大海捞针。面对数量巨大的繁杂信息，如何快速准确地找到线索，就显得格外重要了。

利用语法高亮度(Syntax)，可以突出显示重要的信息，比如：

• 包含“Error”和“Fail”等关键词的报错信息；
• 日期、网址、文件名等对象；
• 数字、字符串、操作符等元素。

定义语法高亮度

首先，定义需要着重显示的文本内容：

匹配指定的关键字：

syn keyword logLevelError error fail failure

匹配特定模式的字符串：

syn match logDate 'd{2}/d{2}/d{4}s*d{2}:d{2}:d{2}'

然后，定义如何显示特定的文本内容：

将以上定义的语法高亮组，链接到配色方案定义过的语法高亮组：

hi def link logLevelError ErrorMsg

也可以直接定义文本的显示色彩：

hi def logLevelError guifg=#ddddff guibg=#444444

配置语法高亮度

首先，将语法高亮文件，放置在以下目录：

Linux: $HOME/.vim/syntax

Windows: $HOME/vimfiles/syntax

然后，在vimrc配置文件中增加以下命令，以侦测.log为后缀名的日志文件并启用语法高亮度：

au BufNewFile,BufRead *.log setfiletype log

语法高亮度效果

关于日志查看的一点想法

• 对于动辄百兆的大型日志文件，Vim并非理想的工具。通常情况下：首先，利用tail和grep等命令，将日志文件截取为较小的片段；然后，再使用Vim进行细致地分析。
• 过多的语法高亮度，不但会影响打开文件的速度，而且还会增加阅读的干扰。应该克制地使用视觉元素，仅仅突出显示最为关键的信息。比如，您可以在语法高亮文件中，注释掉关于日期和网址等元素的定义，而仅仅保留对于报错信息的突出显示。
• 对于日志分析，并没有捷径。虽然vim-logreview等插件，可以移除日志文件中的正常统计输出，而仅仅保留报错信息。但异常事件通常并非孤立的单点问题，而其前后的上下文信息对于建立时间线和还原事件场景都有着极高的价值。对于大多数问题，并不能通过单一的报错信息，直接指向确定的解决方案。
• 由此看来，利用语法高亮度来突出显示报错信息，然后小心厘清来龙去脉，算是现实可行的权宜之计吧？

Ver: 2.0 | YYQ<上一篇 | 目录 | 下一篇>