-
Notifications
You must be signed in to change notification settings - Fork 28
/
learn-vi-601-WebDesign-HTMLTag-Input.html
140 lines (133 loc) · 14.2 KB
/
learn-vi-601-WebDesign-HTMLTag-Input.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="learn-vi.css" />
<title>VIM学习笔记 网页开发-输入网页标签(Input HTML Tags)</title>
</head>
<body>
<h1>VIM学习笔记 网页开发-输入网页标签(Input HTML Tags)</h1>
<p><a href="https://yyq123.github.io/learn-vim/images/HTML_StartFresh.png" title="HTML_StartFresh"><img src="https://yyq123.github.io/learn-vim/images/HTML_StartFresh.png" alt="HTML_StartFresh" width="550" height="183" /></a></p>
<p>在编写HTML代码时，重复录入标签显然是相当低效的。我制作了<a href="https://github.com/yyq123/HTML-Editor" title="HTML-Editor">HTML-Editor</a>插件，通过快捷键和菜单项来提高输入HTML标签的效率。</p>
<h2 class="article"><a id="HTML-Editor-Config">安装配置插件</a></h2>
<p>请在vimrc中添加以下命令，以便在“Insert (paste)”状态下正常使用快捷键：</p>
<p style="text-indent:2em"><code class="inset">:set nopaste</code></p>
<p>如果侦测文件类型为XHTML，那么将自动使用小写的标签。也可以定义以下变量，以强制使用小写标签：</p>
<p style="text-indent:2em"><code class="inset">:let g:do_xhtml_mappings = 'yes'</code></p>
<p>在插入模式下，输入以“;”开头的关键词，比如“;pp”，将自动扩展为完整的段落标签；使用以下命令，可以修改默认的前缀键为逗号：</p>
<p style="text-indent:2em"><code class="inset">:let g:html_map_leader = ','</code></p>
<p>假设使用<kbd>;ah</kbd>快捷键，输入以下链接标签。光标将自动定位到href属性的引号之内；输入链接地址之后，点击<kbd>Tab</kbd>键将移动至title属性的引号之内；输入链接标题之后，点击<kbd>Tab</kbd>键将移动至</a>标签之前。也就是说，使用<kbd>Tab</kbd>键可以快速跳转至下一标签属性，进一步提高输入HTML代码的效率。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/HTML-Editor-Kbd-Tab.png" title="HTML-Editor-Kbd-Tab"><img src="https://yyq123.github.io/learn-vim/images/HTML-Editor-Kbd-Tab.png" alt="HTML-Editor-Kbd-Tab" width="550" height="88" /></a></p>
<p>如果您需要输入真正的Tab制表符，那么可以使用<kbd>;Tab</kbd>快捷键。</p>
<p>如果您希望恢复通常的<kbd>Tab</kbd>键操作行为，那么请设置以下变量：</p>
<p style="text-indent:2em"><code class="inset">let g:no_html_tab_mapping = 'yes'</code></p>
<h2 class="article"><a id="HTML-Editor-Tags-Input-Kbd">利用快捷键输入标签</a></h2>
<p>以下表格列示了在<a href="http://yyq123.github.io/learn-vim/learn-vi-42-InsertMode.html" title="插入模式(Insert Mode)">插入模式</a>和<a href="http://yyq123.github.io/learn-vim/learn-vi-45-VisualMode.html" title="可视化模式(Visual Mode)">可视化模式</a>下，用于输入HTML标签的快捷键：</p>
<table summary="Commands" border="2" frame="hsides" rules="all" cellspacing="0" cellpadding="3">
<tr><th>快捷键</th><th>输入代码</th></tr>
<tr><td><code class="inset">;;</code></td><td>插入字符“;”</td></tr>
<tr><td><code class="inset">;&</code></td><td>插入字符“&”<sup>[1]</sup></td></tr>
<tr><td rowspan="2"><code class="inset">;4</code></td><td><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br/>"http://www.w3.org/TR/html4/loose.dtd"></td></tr>
<tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></td></tr>
<tr><td rowspan="2"><code class="inset">;s4</code></td><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br/> "http://www.w3.org/TR/html4/strict.dtd"></td></tr>
<tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></td></tr>
<tr><td><code class="inset">;ab</code></td><td><abbr title=""></abbr></td></tr>
<tr><td><code class="inset">;ad</code></td><td><address></address></td></tr>
<tr><td><code class="inset">;ah</code></td><td><a href="" title=""></a></td></tr>
<tr><td><code class="inset">;an</code></td><td><a id=""></a></td></tr>
<tr><td><code class="inset">;bd</code></td><td> <body><CR></body></td></tr>
<tr><td><code class="inset">;bh</code></td><td><base href="" /></td></tr>
<tr><td><code class="inset">;bl</code></td><td><blockquote><CR></blockquote></td></tr>
<tr><td><code class="inset">;br</code></td><td><br /></td></tr>
<tr><td><code class="inset">;bu</code></td><td><input type="button" name="" value="" /></td></tr>
<tr><td><code class="inset">;ca</code></td><td><caption></caption></td></tr>
<tr><td><code class="inset">;ch</code></td><td><input type="checkbox" name="" value="" /></td></tr>
<tr><td><code class="inset">;ci</code></td><td><cite></cite></td></tr>
<tr><td><code class="inset">;cm</code></td><td><!-- --></td></tr>
<tr><td><code class="inset">;co</code></td><td><code></code></td></tr>
<tr><td><code class="inset">;cs</code></td><td><style type="text/css"><!--<CR>--></style></td></tr>
<tr><td><code class="inset">;ct</code></td><td><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <sup>[2]</sup></td></tr>
<tr><td><code class="inset">;dd</code></td><td><dd></dd></td></tr>
<tr><td><code class="inset">;de</code></td><td><del></del></td></tr>
<tr><td><code class="inset">;df</code></td><td><dfn></dfn></td></tr>
<tr><td><code class="inset">;dl</code></td><td><dl><CR></dl></td></tr>
<tr><td><code class="inset">;dt</code></td><td><dt></dt></td></tr>
<tr><td><code class="inset">;dv</code></td><td><div><CR></div></td></tr>
<tr><td><code class="inset">;eb</code></td><td><embed type="" src="" width="" height="" /></td></tr>
<tr><td><code class="inset">;em</code></td><td><em></em></td></tr>
<tr><td><code class="inset">;fi</code></td><td><input type="file" name="" value="" size="20" /></td></tr>
<tr><td><code class="inset">;fm</code></td><td><form action=""><CR></form></td></tr>
<tr><td><code class="inset">;h1</code></td><td><h1></h1></td></tr>
<tr><td><code class="inset">;h2</code></td><td><h2></h2></td></tr>
<tr><td><code class="inset">;h3</code></td><td><h3></h3></td></tr>
<tr><td><code class="inset">;h4</code></td><td><h4></h4></td></tr>
<tr><td><code class="inset">;h5</code></td><td><h5></h5></td></tr>
<tr><td><code class="inset">;h6</code></td><td><h6></h6></td></tr>
<tr><td><code class="inset">;he</code></td><td><head><CR></head></td></tr>
<tr><td><code class="inset">;hi</code></td><td><input type="hidden" name="" value="" /></td></tr>
<tr><td><code class="inset">;hr</code></td><td><hr /></td></tr>
<tr><td><code class="inset">;ht</code></td><td><html xmlns="http://www.w3.org/1999/xhtml"><CR></html></td></tr>
<tr><td><code class="inset">;if</code></td><td><iframe src=""><CR></iframe></td></tr>
<tr><td><code class="inset">;im</code></td><td><img src="" alt="" /></td></tr>
<tr><td><code class="inset">;in</code></td><td><ins></ins></td></tr>
<tr><td><code class="inset">;it</code></td><td><i></i></td></tr>
<tr><td><code class="inset">;js</code></td><td><script type="text/javascript"><!--<CR>//--></script></td></tr>
<tr><td><code class="inset">;la</code></td><td><label for=""></label></td></tr>
<tr><td><code class="inset">;li</code></td><td><li></li></td></tr>
<tr><td><code class="inset">;lk</code></td><td><link href="" /></td></tr>
<tr><td><code class="inset">;ls</code></td><td><link rel="stylesheet" type="text/css" href="" /></td></tr>
<tr><td><code class="inset">;me</code></td><td><meta name="" content="" /></td></tr>
<tr><td><code class="inset">;mh</code></td><td><meta http-equiv="" content="" /></td></tr>
<tr><td><code class="inset">;mi</code></td><td><img src="" width="" height="" alt="" /> <sup>[3]</sup></td></tr>
<tr><td><code class="inset">;ms</code></td><td><select name="" multiple><CR></select></td></tr>
<tr><td><code class="inset">;ns</code></td><td><noscript><CR></noscript></td></tr>
<tr><td><code class="inset">;ob</code></td><td><object data="" width="" height=""><CR></object></td></tr>
<tr><td><code class="inset">;og</code></td><td><optgroup label=""><CR></optgroup></td></tr>
<tr><td><code class="inset">;ol</code></td><td><ol><CR></ol></td></tr>
<tr><td><code class="inset">;op</code></td><td><option></option></td></tr>
<tr><td><code class="inset">;pa</code></td><td><input type="password" name="" value="" size="20" /></td></tr>
<tr><td><code class="inset">;pm</code></td><td><param name="" value="" /></td></tr>
<tr><td><code class="inset">;pp</code></td><td><p></p></td></tr>
<tr><td><code class="inset">;pr</code></td><td><pre><CR></pre></td></tr>
<tr><td><code class="inset">;qu</code></td><td><q></q></td></tr>
<tr><td><code class="inset">;ra</code></td><td><input type="radio" name="" value="" /></td></tr>
<tr><td><code class="inset">;re</code></td><td><input type="reset" value="Reset" /></td></tr>
<tr><td><code class="inset">;sa</code></td><td><samp></samp></td></tr>
<tr><td><code class="inset">;sb</code></td><td><sub></sub></td></tr>
<tr><td><code class="inset">;se</code></td><td><select name=""><CR></select></td></tr>
<tr><td><code class="inset">;sj</code></td><td><script src="" type="text/javascript"></script></td></tr>
<tr><td><code class="inset">;sm</code></td><td><small></small></td></tr>
<tr><td><code class="inset">;sn</code></td><td><span></span></td></tr>
<tr><td><code class="inset">;sp</code></td><td><sup></sup></td></tr>
<tr><td><code class="inset">;st</code></td><td><strong></strong></td></tr>
<tr><td><code class="inset">;su</code></td><td><input type="submit" value="Submit" /></td></tr>
<tr><td><code class="inset">;ta</code></td><td><table><CR></table></td></tr>
<tr><td><code class="inset">;tA</code></td><td>在常规模式或可视化模式下，提示输入行列数，并自动生成表格代码</td></tr>
<tr><td><code class="inset">;tb</code></td><td><tbody><CR></tbody></td></tr>
<tr><td><code class="inset">;td</code></td><td><td></td></td></tr>
<tr><td><code class="inset">;te</code></td><td><input type="text" name="" value="" size="20" /></td></tr>
<tr><td><code class="inset">;tf</code></td><td><tfoot><CR></tfoot></td></tr>
<tr><td><code class="inset">;th</code></td><td><th></th></td></tr>
<tr><td><code class="inset">;tH</code></td><td><thead><CR></thead></td></tr>
<tr><td><code class="inset">;ti</code></td><td><title></title></td></tr>
<tr><td><code class="inset">;tr</code></td><td><tr></tr></td></tr>
<tr><td><code class="inset">;tx</code></td><td><textarea name="" rows="10" cols="50"><CR></textarea></td></tr>
<tr><td><code class="inset">;ul</code></td><td><ul><CR></ul></td></tr>
</table>
<p>请注意：</p>
<ol>
<li><td>由于“&”作为前缀键用于输入<a href="http://yyq123.github.io/learn-vim/learn-vi-602-WebDesign-CharacterEntity.html" title="Input Character Entity">字符实体(Character Entity)</a>，所以定义快捷键用来输入此特殊字符；</td></li>
<li>charset属性根据文件的'fileencoding'或'encoding'属性自动判断；您也可以通过g:html_default_charset变量进行强制定义；</li>
<li>点击<kbd>;mi</kbd>将查找src指定的图片文件，然后将获得的图片尺寸信息更新到width和height属性中；</li>
<li>代码列中的“<CR>”，代表换行符；</li>
<li>在<a href="http://yyq123.github.io/learn-vim/learn-vi-45-VisualMode.html" title="可视化模式(Visual Mode)">可视化模式</a>下选则文本然后点击快捷键，将插入标签并将选中的文本放置在name、value或content属性中；</li>
<li>对于<acronym>,<big>,<center>,<font>,<isindex>,<strike>,<tt>,<frame>,<frameset>,<noframes>,<b>,<u>等等已废弃的标签，不建议继续使用；</li>
<li>关于完整的HTML标签索引，请参考<a href="https://meiert.com/en/indices/html-elements/" title="HTML Elements Index">HTML Elements Index</a>。</li>
</ol>
<h2 class="article"><a id="HTML-Editor-Tags-Input-Menu">利用菜单输入标签</a></h2>
<p>您也可以使用“HTML”菜单来输入HTML标签；</p>
<p><a href="https://yyq123.github.io/learn-vim/images/HTML-Editor-Menu-Tags.png" title="HTML-Editor-Menu-Tags"><img src="https://yyq123.github.io/learn-vim/images/HTML-Editor-Menu-Tags.png" alt="HTML-Editor-Menu-Tags" /></a></p>
<p style="border-top:1px solid lightgray"><span style="float:right">Ver: 2.0 | <a href="mailto:[email protected]">YYQ</a></span><span><<a title="输入字符实体(Input Character Entity)" href="http://yyq123.github.io/learn-vim/learn-vi-602-WebDesign-CharacterEntity.html">上一篇</a> |<a title="笔记列表" href="http://yyq123.github.com/learn-vim/learn-vi-00-00-TOC.html"> 目录 </a>| <a title="转义字符实体(Escape Character Entity)" href="http://yyq123.github.io/learn-vim/learn-vi-603-WebDesign-CharacterEntity-Escape.html">下一篇</a>></span></p>
</body>
</html>