forked from ethantw/Han
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
347 lines (294 loc) · 15.6 KB
/
test.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
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
<!DOCTYPE HTML>
<html lang="zh-Hant" class="han-la han-biaodian-pro han-lab-underline">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Chen Yijun (@ethantw)">
<title>漢字標準格式</title>
<link rel="stylesheet" href="han.css">
<style>
body {
padding-bottom: 10em
}
</style>
</head>
<body>
<section>
<h1 id="grouping-content">內容群組類</h1>
<h2 id="p-ol-ul">段落、清單</h2>
<p>好們論紅，手卻策下使住收否人人！大獲及是告另子維持力本清長先陽不？社相此國學風中麼很解：治子上己施一見，有的是，用關快家所的字時情：品好居……朋裡義四時，校叫洲；運細種！眼失媽母身古慢管用、上開家問不難成的裝望麼年單代，操會人得？人人傳在善美故全、推兩少關心求，下看同目國往成氣；一廣機親得飛先始們於觀他使難以該因口發汽機人都領了過大廣場不食收西物早社報子們看、賣像師對好情的神？在史評，來深放表觀。還人的西路盡熱程當人長質此中民龍證說念背生外，間今經氣門此都！把相的公去底動！</p>
<p>頭性空風後上他根；然任他在，社拉布會言了來石賽親支……情拉術北然使來路請放數坐燈麼象成一畫專雨，是我長無等愛五化客可雜有雨。</p>
<h3 id="p-poem-like">詩篇段落</h3>
<p class="poem-like">
只領不致中此因和之術黑顧同後到，<br>
血媽人山歷操發一我利終心沒文了事問藝來<br>
生能唱起語在，樹來課他——<br>
小中觀給告北戲樹意，人消歌受，生會影……<br>
動他腦它利離府頭始也
</p>
<h4>地址格式</h4>
<p class="poem-like">
王小明 啓<br>
台灣 新北市板橋路十九段555號<br>
20245
</p>
<h3 id="ol">有序清單</h3>
<ol>
<li>一級清單項目</li>
<li>一級清單項目
<ol>
<li>二級清單項目</li>
<li>二級清單項目
<ol>
<li>三級清單項目</li>
<li>三級清單項目</li>
</ol>
</li>
</ol>
</li>
<li>一級清單項目</li>
<li>一級清單項目</li>
</ol>
<h3 id="ul">無序清單</h3>
<ul>
<li>一級清單項目</li>
<li>一級清單項目
<ul>
<li>二級清單項目</li>
<li>二級清單項目
<ul>
<li>三級清單項目</li>
<li>三級清單項目</li>
</ul>
</li>
</ul>
</li>
<li>一級清單項目</li>
<li>一級清單項目</li>
</ul>
<h2 id="blockquote">引用區塊</h2>
<blockquote>
<p>如事時決行入同是我表統支樂了先年、人目也月老過人，斷弟進石給了，服去孩沒性就能。邊年排不決廣之例。長收滿導無！</p>
<footer>
——<u class="pn">姜慶</u>《石人碼頭》
</footer>
</blockquote>
<h3 id="blockquote-no-p">未使用段落元素的引用區塊</h3>
<blockquote>
時來數期沒道反先美別所金企感企媽失對談。
<footer>
——<u class="pn">新器急</u>
</footer>
</blockquote>
<h3 id="blockquote-blockquote">引用區塊中的引用區塊</h3>
<blockquote>
<p>洲此境眼……方空車形、四用廠出先作，管濟所唱步取的成正候社取開取高，理景龍知子起配做心正道動。出令正或？家國前保嚴輕朋化下而府裡、基之稱失！等園華行……政生著曾，們然變不發甚故，些長小華從不代應頭資？</p>
<blockquote>
<p>以滿傷都片復利反，爾麼生任常弟但岸過年在；院投工變愛世總甚？天其有爸個：後輕取，在克的山知中識高於過叫行出面不大開受個說自經公目，學們灣。合好巴地盡性士面最產張子新容得實：眼不日野一，克節上人黨到有沒，她果以的是到影的請自人長、表本究政快的且造的推色究聽場廣人形！深了叫！</p>
</blockquote>
</blockquote>
<h3 id="figure-blockquote">圖表內的引用區塊</h3>
<figure>
<blockquote>
<p>令會過作加身。管常雖：質灣人坐洋半以人問一文……上灣之會的面長東商實對了上修法或便紙界去定辦緊現生影都合否陸一片子處用上很。</p>
</blockquote>
<figcaption>這是圖表解說元素<code><figcaption></code>內的解說。</figcaption>
</figure>
<h2 id="pre">格式預處理文字區塊</h2>
<pre>國寫親下二好灣整機生土、是看老排讓和保藝車市。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
是除學圖寶濟候收。們性者位遠另象內未院清外了以共……
長明期事生合了中文新等麼科出過能意等件教求加，
樓日里大下果個來。
球者們？方綠電後，果或錯老際聲可特少保期全動帶東北建，似保助先走她合也的。神我興治的保保學果車易麼連學水小西一！而視可些化。</pre>
<h2 id="pre-code">代碼區塊</h2>
<pre><code>;(function(window, undefined){
// 代碼區塊示例
var a, b, c=typeof undefined, d=window, e=document, f=e.documentElement, _f=window.han, a, b, c=typeof undefined, d=window, e=document, f=e.documentElement, _f=window.han, a, b, c=typeof undefined, d=window, e=document, f=e.documentElement, _f=window.han, a, b, c=typeof undefined, d=window, e=document, f=e.documentElement, _f=window.han
})(window)</code></pre>
</section>
<section>
<article>
<h1 id="sections">章節類</h1>
<h2 id="article">文章區塊元素</h2>
<h3 id="article-p-ol-ul">文章區塊內的段落、清單</h3>
<p>務用界種設是自水教臺保再計見所灣們民各、外超是人外每方後發他濟中；義生了出這失究式回值氣苦我花聲位香還場、外國的醫門！</p>
<h4 id="article-p-poem-like">詩篇段落</h3>
<p class="poem-like">
只領不致中此因和之術黑顧同後到，<br>
血媽人山歷操發一我利終心沒文了事問藝來<br>
生能唱起語在，樹來課他——<br>
小中觀給告北戲樹意，人消歌受，生會影……<br>
動他腦它利離府頭始也
</p>
<h4 id="article-ol-ul">清單</h3>
<ul>
<li>清單項目子</li>
<li>清單項目丑</li>
</ul>
<h3 id="article-strong">文章區塊內的重點</h3>
<p>不做則中心與的說很筆分士：<strong>校此訴平是裡春家善客總外公；做南多中。</strong>足酒臉理特指第常三緊資現工們家化民，公政我熱良，中以家是。</p>
<h3 id="article-figure">文章區塊內的圖表引用區塊</h3>
<figure>
<blockquote>
<p>令會過作加身。管常雖：質灣人坐洋半以人問一文……上灣之會的面長東商實對了上修法或便紙界去定辦緊現生影都合否陸一片子處用上很。</p>
</blockquote>
<figcaption>這是文章內圖表解說元素<code><figcaption></code>的解說。</figcaption>
</figure>
<h3>文章區塊內的變音文字</h3>
<p>來化相據取愛統單商商半是否，<i>的媽沒種試此助來精人是灣，價種下落有，</i>機信際，作假灣，心行程官這是運價車年都人強國農：特行解金產拉口……</p>
<h3 id="article-blockquote">文章內的引用區塊</h3>
<blockquote>
<p>火說定好就用樹，表母微時藝出北親雙表人事為放爸車奇列長農時教產得地何高的舉度們她李力內體古見業選一香音種。</p>
<p>務用界種設是自水教臺保再計見所灣們民各、外超是人外每方後發他濟中；義生了出這失究式回值氣苦我花聲位香還場、外國的醫門！</p>
</blockquote>
<h4 id="article-blockquote-blockquote">文章內引用區塊中的引用區塊</h4>
<blockquote>
<p>洲此境眼……方空車形、四用廠出先作，管濟所唱步取的成正候社取開取高，理景龍知子起配做心正道動。出令正或？家國前保嚴輕朋化下而府裡、基之稱失！等園華行……政生著曾，們然變不發甚故，些長小華從不代應頭資？</p>
<blockquote>
<p>以滿傷都片復利反，爾麼生任常弟但岸過年在；院投工變愛世總甚？天其有爸個：後輕取，在克的山知中識高於過叫行出面不大開受個說自經公目，學們灣。合好巴地盡性士面最產張子新容得實：眼不日野一，克節上人黨到有沒，她果以的是到影的請自人長、表本究政快的且造的推色究聽場廣人形！深了叫！</p>
</blockquote>
</blockquote>
<h4 id="article-blockquote-strong">文章引用區塊內的重點</h4>
<blockquote>
<p>不做則中心與的說很筆分士：<strong>校此訴平是裡春家善客總外公；做南多中。</strong>足酒臉理特指第常三緊資現工們家化民，公政我熱良，中以家是。</p>
</blockquote>
<h4 id="article-blockquote-i">文章引用區塊內的變音文字</h4>
<blockquote>
<p>來化相據取愛統單商商半是否，<i>的媽沒種試此助來精人是灣，價種下落有，</i>機信際，作假灣，心行程官這是運價車年都人強國農：特行解金產拉口……</p>
</blockquote>
</article>
</section>
<section>
<h1 id="text-level-semantics">字級語意類</h1>
<a href="#">超連結元素a</a>示例<br>
<u>註記元素u</u>示例<br>
<u>註記元素甲</u><u>註記元素乙</u>一般文字節點<u>註記元素丙</u>一般文字節點<u>註記元素丁</u>。<br>
<cite>來源元素cite</cite>示例<br>
<dfn>術語元素dfn</dfn>示例<br>
<em>強調元素em</em>示例<br>
<i>變音文字元素i</i>示例<br>
<var>變數元素var</var>示例<br>
<q>引用元素q及<q>子引用q</q>元素</q>示例<br>
<code>代碼元素code</code>示例<br>
<kbd>輸入鍵元素kbd</kbd>示例<br>
<samp>計算機輸出示例元素samp</samp>示例<br>
<ruby>小字標注元素<rt>ruby annotation</rt></ruby>示例<br>
複合式<ruby class="complex">
<rbc>
<rb>小字</rb><!--
--><rb>標注</rb><!--
--><rb>元素</rb>
</rbc>
<rtc class="annotation" lang="en-GB">
<rt rbspan="3">ruby annotation</rt>
</rtc>
<rtc class="pinyin" lang="zh-latn">
<rt rbspan="1">xiaozi</rt>
<rt rbspan="1">biaozhu</rt>
<rt rbspan="1">yuansu</rt>
</rtc>
</ruby><br>
直角<ruby class="rightangle">
<rbc>
<rb>小</rb><!--
--><rb>字</rb><!--
--><rb>標</rb><!--
--><rb>注</rb><!--
--><rb>元</rb><!--
--><rb>素</rb>
</rbc>
<rtc class="annotation" lang="en-GB">
<rt rbspan="6">ruby annotation</rt>
</rtc>
<rtc class="zhuyin">
<rt>ㄒㄧㄠˇ</rt>
<rt>ㄗˋ</rt>
<rt>ㄅㄧㄠ</rt>
<rt>ㄓㄨˋ</rt>
<rt>ㄩㄢˊ</rt>
<rt>ㄙㄨˋ</rt>
</rtc>
</ruby>
<h2 id="text-level-semantics-other">其他</h2>
<s>訛訊元素s</s>示例<br>
<abbr>縮寫元素abbr</abbr>及<abbr title="abbreviation">包含標題屬性的縮寫元素abbr</abbr>示例<br>
<b>關鍵字元素b</b>示例<br>
<mark>凸顯元素mark</mark>示例<br>
<small>批注元素small</small>示例<br>
<span>文字範圍元素span</span>示例<br>
<strong>重點元素strong</strong>示例<br>
<sub>下標元素sub</sub>示例<br>
<sup>上標元素sup</sup>示例
</section>
<section>
<h1 id="edits">修訂類</h1>
<ins>增訂元素ins</ins>示例<br>
<ins>增訂元素甲</ins><ins>增訂元素乙</ins>一般文字節點<ins>增訂元素丙</ins>一般文字節點<ins>增訂元素丁</ins>。<br>
<del>刪訂元素del</del>示例
</section>
<section>
<h1 id="typography">特殊排版功能</h1>
<h2 id="han-la">漢字Latin字母間隙</h2>
<p lang="zh-Hans">然而在<span lang="de">Jan Tschichold</span>和他的著作<cite lang="en-GB">Asymmetric Typography</cite>流行之前，直至追溯回<span lang="de">Gutenberg</span>时代，「对称」「齐整」两种古老的视觉审美习惯无处不在。左右并齐的纵栏——我也欣赏这样的传统，一如欣赏古典格律的稳定及优美。</p>
<p class="footer">——<a href="https://twitter.com/laerhsif">钱争予</a>〈<a href="//www.typeisbeautiful.com/2013/12/6983/">纵横对齐不是现代方法</a>〉</p>
<h2>實驗性底線（註記元素）</h2>
<p class="poem-like"><u class="pn">中國</u><u class="pn">北京</u>是<u class="pn">華北地區</u>的主要經濟中心之一。</p>
<h2 id="font-and-biaodian">地區變體字型及標點符號樣式</h2>
<p><strong>註：</strong>此處僅展示黑體，其餘字體樣式請參閱使用手冊。</p>
<h3 id="font-and-biaodian-recommended">舊字形及推薦標點樣式</h3>
<p class="poem-like">
字。字．字，字、字；字：字？字！<br>
「內『內容』容」‘內“內容”容’<br>
《書名》〈篇名〉（內容）<br>
啊——什么内容……丹·布朗<br>
1991－1999年 他／她
</p>
<h3 id="font-and-biaodian-cns">台港式</h3>
<p
class="poem-like"
style="font-family: 'Biaodian Pro Sans CNS', 'Helvetica Neue', Helvetica, Arial, 'Han Heiti CNS', sans-serif;">
字。字．字，字、字；字：字？字！<br>
「內『內容』容」‘內“內容”容’<br>
《書名》〈篇名〉（內容）<br>
啊——什么内容……丹·布朗<br>
1991－1999年 他／她
</p>
<h3 id="font-and-biaodian-gb">中國國標式</h3>
<p
class="poem-like"
style="font-family: 'Biaodian Pro Sans GB', 'Helvetica Neue', Helvetica, Arial, 'Han Heiti GB', sans-serif;">
字。字．字，字、字；字：字？字！<br>
「内『内容』容」‘内“内容”容’<br>
《书名》〈篇名〉（内容）<br>
啊——什么内容……丹·布朗<br>
1991－1999年 他／她
</p>
<h2 id="checked-tones">
<ruby class="rightangle">
<rbc>
<rb>入</rb><rb>聲</rb>韻
</rbc>
<rtc class="annotation" lang="nan-Latn">
<rt rbspan="2">ji̍p-siann</rt>
</rtc>
<rtc class="zhuyin">
<rt>ㆢㄧㆴ͘</rt>
<rt>ㄒㄧㆩ</rt>
</rtc>
</ruby>
</h2>
<p class="poem-like"><span style="
font-family: 'Zhuyin Kaiti', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-moz-font-feature-settings: 'liga, dlig';
-ms-font-feature-settings: 'liga', 'dlig';
-webkit-font-feature-settings: 'liga', 'dlig';
font-feature-settings: 'liga', 'dlig';
">
aeioua̍e̍i̍o̍u̍ ㆴㆵㆶㆷㆴ͘ㆵ͘ㆶ͘ㆷ͘
</span></p>
</section>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/han.js"></script>
</body>
</html>