-
Notifications
You must be signed in to change notification settings - Fork 74
/
Copy pathEscapeSequence.html
243 lines (229 loc) · 11.5 KB
/
EscapeSequence.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML转义字符串
</title>
<style type="text/css">
.demo-title{ text-align: center; }
.table-f-one { width:25%; border-right: 1px solid #ccc; }
.table-f-one-first, .table-f-one-last{ border-right: 0px; }
.table-l { width: 30%;font-weight: bold; }
.table-r { width: 70%; font-weight: bold; }
.demo-cont{ width:80%; margin: 10px auto; }
.table-h{ color: blue; }
.demo-cont table{ width:100%; border:1px solid #ccc; border-collapse: collapse; }
.demo-cont tr{ line-height: 2em; border: 1px solid #ccc; }
.demo-cont tr:hover{ background-color: #f5f5f5; }
.demo-cont td{ padding-left:10px; }
td:first-child{ border-right: 1px solid #ccc; }
td.no-border{ border-right: 0px; }
.nav-btns{ text-align:center; margin:0 0 35px 0; height:50px; line-height: 50px; padding:0px; }
.nav-btn{ list-style-type:none;float:left; width:20%; }
.nav-btn a{ border-bottom:1px solid #ddd; border-radius:4px 4px 0 0; text-align:center; display:block; padding:10px 15px; color:#337ab7; text-decoration: none; }
.nav-btn.active a{ border:1px solid #ddd; border-bottom-color:#fff; color:#555; cursor:default; background-color:#fff; }
.nav-btn a:hover{ background-color:#eee; }
.nav-btn.active a:hover{ border-bottom-color:#fff; color:#555; cursor:default; background-color:#fff; }
.table-1-wrap {
width: 100%;
}
.table-1-wrap .title {
text-align: center;
}
</style>
<script src="lib/rainbow/rainbow.js"></script>
<link href="lib/rainbow/rainbow.css" ref="stylesheet" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- http://114.xixik.com/character/ -->
<div class="demo-cont">
<ul class="nav-btns" id="navBtns">
<li class="nav-btn active" data-id="1"><a href="#">转义字符列表</a></li>
<li class="nav-btn" data-id="2"><a href="#">转义字符串使用场景</a></li>
<li class="nav-btn" data-id="3"><a href="#">转义字符串的组成</a></li>
<li class="nav-btn" data-id="4"><a href="#">显示空格</a></li>
<li class="nav-btn" data-id="5"><a href="#">编码转换</a></li>
</ul>
<div class="table-panel table-1-wrap" id="table_1">
<table>
<h4 class="title">最常用的字符实体（Character Entities）</h4>
<tr class="table-h">
<td class="table-f-one table-f-one-first">显示</td>
<td class="table-f-one">说明</td>
<td class="table-f-one">实体名称</td>
<td class="table-f-one table-f-one-last">实体编号</td>
</tr>
<tr>
<td class="table-f-one table-f-one-first"> </td>
<td class="table-f-one">半方大的空白</td>
<td class="table-f-one">&ensp;</td>
<td class="table-f-one table-f-one-last">&#8194;</td>
</tr>
<tr>
<td class="table-f-one"> </td>
<td class="table-f-one">全方大的空白</td>
<td class="table-f-one">&emsp;</td>
<td class="table-f-one table-f-one-last">&#8195;</td>
</tr>
<tr>
<td class="table-f-one"> </td>
<td class="table-f-one">不断行的空白格</td>
<td class="table-f-one">&nbsp;</td>
<td class="table-f-one table-f-one-last">&#160;</td>
</tr>
<tr>
<td class="table-f-one"><</td>
<td class="table-f-one">小于</td>
<td class="table-f-one">&lt;</td>
<td class="table-f-one table-f-one-last">&#60;</td>
</tr>
<tr>
<td class="table-f-one">></td>
<td class="table-f-one">大于</td>
<td class="table-f-one">&gt;</td>
<td class="table-f-one table-f-one-last">&#62;</td>
</tr>
<tr>
<td class="table-f-one">&</td>
<td class="table-f-one">&符号</td>
<td class="table-f-one">&amp;</td>
<td class="table-f-one table-f-one-last">&#38;</td>
</tr>
<tr>
<td class="table-f-one">"</td>
<td class="table-f-one">双引号</td>
<td class="table-f-one">&quot;</td>
<td class="table-f-one table-f-one-last">&#34;</td>
</tr>
<tr>
<td class="table-f-one">©</td>
<td class="table-f-one">版权</td>
<td class="table-f-one">&copy;</td>
<td class="table-f-one table-f-one-last">&#169;</td>
</tr>
<tr>
<td class="table-f-one">®</td>
<td class="table-f-one">已注册商标</td>
<td class="table-f-one">&reg;</td>
<td class="table-f-one table-f-one-last">&#174;</td>
</tr>
<tr>
<td class="table-f-one">™</td>
<td class="table-f-one">商标（美国）</td>
<td class="table-f-one">™</td>
<td class="table-f-one table-f-one-last">&#8482;</td>
</tr>
<tr>
<td class="table-f-one">×</td>
<td class="table-f-one">乘号</td>
<td class="table-f-one">&times;</td>
<td class="table-f-one table-f-one-last">&#215;</td>
</tr>
<tr>
<td class="table-f-one">÷</td>
<td class="table-f-one">除号</td>
<td class="table-f-one">&divide;</td>
<td class="table-f-one table-f-one-last">&#247;</td>
</tr>
</table>
</div>
<table class="table-panel" id="table_2">
<tr class="table-h">
<td class="table-l no-border">为什么要用转义字符串？</td>
</tr>
<tr>
<td class="no-border">
HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？<br/>
这就要说到HTML转义字符串（Escape Sequence）了。<br/>
转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：<br/>
第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。<br/>
第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。
</td>
</tr>
</table>
<table class="table-panel" id="table_3">
<tr class="table-h">
<td class="table-l no-border">转义字符串的组成</td>
</tr>
<tr>
<td class="no-border">
转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。<br/>
比如，要显示小于号（<），就可以写 &lt; 或者 &#60; 。<br />
用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。<br />
提示：实体名称（Entity）是区分大小写的。 <br />
备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。
</td>
</tr>
</table>
<table class="table-panel" id="table_4">
<tr class="table-h">
<td class="table-l no-border">如何显示空格？</td>
</tr>
<tr>
<td class="no-border">
通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用&nbsp;表示空格。
</td>
</tr>
</table>
<table class="table-panel" id="table_5">
<tr>
<td>
<pre><code data-language="python">def openFile(path):
file = open(path, "r")
content = file.read()
file.close()
return content</code></pre>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="utils/base.js"></script>
<script>
init();
function init() {
var navBtns = document.getElementById('navBtns'),
navLis = navBtns.getElementsByTagName('li'),
i, navLi, len;
for(i = 0, len = navLis.length; i < len; i++) {
navLi = navLis[i];
navLi.onclick = navEvent;
}
// 显示第一张表
showTable(1);
function navEvent() {
var navNo = this.getAttribute('data-id'),
len, i, navLi;
navNo = parseInt(navNo, 10);
for(i = 0, len = navLis.length; i < len; i++) {
navLi = navLis[i];
if ( i != navNo - 1) {
removeClass(navLi, 'active');
} else {
addClass(navLi, 'active');
}
}
showTable(navNo);
}
}
function showTable(tableNo) {
var tId = 'table_' + tableNo,
table = document.getElementById(tId);
hideTables();
if (table) {
table.style.display = 'table';
}
}
function hideTables(){
var tables = document.getElementsByClassName('table-panel'),
i, len, table;
for (i = 0, len = tables.length; i < len; i++) {
table = tables[i];
table.style.display = 'none';
}
}
</script>
</body>
</html>