-
Notifications
You must be signed in to change notification settings - Fork 1
/
language-tags-in-html.html
781 lines (436 loc) · 30.6 KB
/
language-tags-in-html.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
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
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
<!doctype html>
<html class="theme-next mist use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="前端,lang,html," />
<link rel="alternate" href="/atom.xml" title="清风轩" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />
<meta name="description" content="很多网站中，都会对html标签设置一个lang属性，用来指定网页采用的语言类型。英文网站中，这个值通常是en，即&lt;html lang=&quot;en&quot;&gt;，而在中文网站中，这个值就变得光怪陆离了。在以前，最常见的两个设置方式是&lt;html lang=&quot;zh&quot;&gt;和&lt;html lang=&quot;zh-cn&quot;&gt;，那么，这究竟是">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML的lang标记">
<meta property="og:url" content="http://xovel.cn/article/language-tags-in-html.html">
<meta property="og:site_name" content="清风轩">
<meta property="og:description" content="很多网站中，都会对html标签设置一个lang属性，用来指定网页采用的语言类型。英文网站中，这个值通常是en，即&lt;html lang=&quot;en&quot;&gt;，而在中文网站中，这个值就变得光怪陆离了。在以前，最常见的两个设置方式是&lt;html lang=&quot;zh&quot;&gt;和&lt;html lang=&quot;zh-cn&quot;&gt;，那么，这究竟是">
<meta property="og:updated_time" content="2016-11-18T07:00:40.092Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML的lang标记">
<meta name="twitter:description" content="很多网站中，都会对html标签设置一个lang属性，用来指定网页采用的语言类型。英文网站中，这个值通常是en，即&lt;html lang=&quot;en&quot;&gt;，而在中文网站中，这个值就变得光怪陆离了。在以前，最常见的两个设置方式是&lt;html lang=&quot;zh&quot;&gt;和&lt;html lang=&quot;zh-cn&quot;&gt;，那么，这究竟是">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Mist',
sidebar: {"position":"left","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: 0,
author: '博主'
}
};
</script>
<title> HTML的lang标记 | 清风轩 </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div style="display: none;">
<script src="http://s6.cnzz.com/stat.php?id=1259096563&web_id=1259096563" type="text/javascript"></script>
</div>
<div class="container one-collumn sidebar-position-left page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">清风轩</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">清风轩居 - 引仙阁</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
<li class="menu-item menu-item-garden">
<a href="/garden" rel="section">
<i class="menu-item-icon fa fa-fw fa-life-ring"></i> <br />
花园
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
HTML的lang标记
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2016-05-24T10:58:41+08:00" content="2016-05-24">
2016-05-24
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/web/" itemprop="url" rel="index">
<span itemprop="name">WEB</span>
</a>
</span>
，
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/web/html/" itemprop="url" rel="index">
<span itemprop="name">HTML</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>很多网站中，都会对html标签设置一个lang属性，用来指定网页采用的语言类型。英文网站中，这个值通常是en，即<code><html lang="en"></code>，而在中文网站中，这个值就变得光怪陆离了。在以前，最常见的两个设置方式是<code><html lang="zh"></code>和<code><html lang="zh-cn"></code>，那么，这究竟是怎么一回事呢？</p>
<a id="more"></a>
<p>知乎上有一个针对这个问题进行过细致讨论的页面：<a href="https://www.zhihu.com/question/20797118" target="_blank" rel="external">网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”？</a>。本文将根据这个问题的各个答案进行一个综合整理，记录HTML中这些有意思的东西。</p>
<h3 id="HTML标签的lang属性"><a href="#HTML标签的lang属性" class="headerlink" title="HTML标签的lang属性"></a>HTML标签的lang属性</h3><p>HTML标签的lang属性将指定对应元素内容的语言。<blockquote><p>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.</p>
<footer><strong>The lang and xml:lang attributes</strong><cite><a href="https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes" target="_blank" rel="external">www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes</a></cite></footer></blockquote><br>大多数情况下，直接对<code>html</code>标签指定lang属性，表示当前文档显示的语言。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"ar"</span>></span></div></pre></td></tr></table></figure>
<p>以上代码意味着该网页的内容显示文本为阿拉伯语。</p>
<p>在一些HTML4/XHTML的页面中，则有使用这样的方式进行指定的：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/1999/xhtml"</span> <span class="attr">lang</span>=<span class="string">"en"</span> <span class="attr">xml:lang</span>=<span class="string">"en"</span>></span></div><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/1999/xhtml"</span> <span class="attr">lang</span>=<span class="string">"zh-CN"</span> <span class="attr">xml:lang</span>=<span class="string">"zh-CN"</span>></span></div></pre></td></tr></table></figure>
<ul>
<li>en定义语言为英语</li><li>zh-CN定义语言为中文</li></ul>
<p>也有一些多语言的页面会对指定元素的lang属性进行设置，如：</p>
<figure class="highlight html"><figcaption><span>指定该p标签的语言为德语</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">p</span> <span class="attr">lang</span>=<span class="string">"de"</span>></span>Ich bin der brennende Komet<span class="tag"></<span class="name">p</span>></span></div></pre></td></tr></table></figure>
<h4 id="指定lang属性的益处"><a href="#指定lang属性的益处" class="headerlink" title="指定lang属性的益处"></a>指定lang属性的益处</h4><ol>
<li>协助搜索引擎</li><li>协助语音合成</li><li>协助选择符号异体字用于高品质的印刷</li><li>协助选择一套引号</li><li>协助解决连字符、绑定和空格</li><li>协助进行拼写检查和语法检查</li></ol>
<h3 id="语言文字标签书写顺序"><a href="#语言文字标签书写顺序" class="headerlink" title="语言文字标签书写顺序"></a>语言文字标签书写顺序</h3><p>规定语言标签按以下形式排列：<blockquote><p>language-extlang-script-region-variant-extension-privateuse</p>
<footer><strong>该顺序由RFC 5646也就是BCP 47指定</strong></footer></blockquote></p>
<ul>
<li>language 语言种类</li><li>extlang 扩展语言</li><li>script 书写格式</li><li>region 国家和地区</li><li>variant 变体</li><li>extension 扩展</li><li>privateuse 私有</li></ul>
<p>所有语言标签都是大小写无关的，但是通常约定language标签全部小写，region标签全部大写，script标签只有首字母大写。不同标签之间用连字号-连接。</p>
<h3 id="复杂的汉语体系"><a href="#复杂的汉语体系" class="headerlink" title="复杂的汉语体系"></a>复杂的汉语体系</h3><p>汉语演进到当今的情形，已经变得十分繁杂，有简体、繁体、各地方言，不同地区的不同汉语也不尽相同，比如东南亚的新加坡、马来西亚等地的汉语，在使用上与其他地方有一定的差异性。在中国，各地方言体系更加繁杂，如普通话、吴语、闽南语、粤语、客家话等。</p>
<p>在2007年公布的ISO标准中，指定了汉语为一个宏语言（macrolanguage），也可以叫做大语种。以下表格列出了13个主要的语种：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>释义</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cmn</td>
<td>普通话</td>
<td>北方话、国语</td>
</tr>
<tr>
<td>wuu</td>
<td>吴语</td>
<td>江浙话、上海话</td>
</tr>
<tr>
<td>czh</td>
<td>徽语</td>
<td>徽州话、严州话、吴语-徽严片</td>
</tr>
<tr>
<td>hak</td>
<td>客家语</td>
<td></td>
</tr>
<tr>
<td>yue</td>
<td>粤语</td>
<td>广东话</td>
</tr>
<tr>
<td>nan</td>
<td>闽南语</td>
<td>福建话、台语</td>
</tr>
<tr>
<td>cpx</td>
<td>莆仙话</td>
<td>莆田话、兴化语</td>
</tr>
<tr>
<td>cdo</td>
<td>闽东语</td>
<td></td>
</tr>
<tr>
<td>mnp</td>
<td>闽北语</td>
<td></td>
</tr>
<tr>
<td>zco</td>
<td>闽中语</td>
<td></td>
</tr>
<tr>
<td>gan</td>
<td>赣语</td>
<td>江西话</td>
</tr>
<tr>
<td>hsn</td>
<td>湘语</td>
<td>湖南话</td>
</tr>
<tr>
<td>cjy</td>
<td>晋语</td>
<td>山西话、陕北话</td>
</tr>
</tbody>
</table>
<p>看一看BCP 47的解释：<blockquote><p>For example, the macro language Chinese (‘zh’) encompasses a number of languages. For compatibility reasons, each of these languages has both a primary and extended language subtag in the registry. A few selected examples of these include Gan Chinese (‘gan’), Cantonese Chinese (‘yue’), and Mandarin Chinese (‘cmn’). Each is encompassed by the macro language ‘zh’ (Chinese). Therefore, they each have the prefix “zh” in their registry records. Thus, Gan Chinese is represented with tags beginning “zh-gan” or “gan”, Cantonese with tags beginning either “yue” or “zh-yue”, and Mandarin Chinese with “zh-cmn” or “cmn”. The language subtag ‘zh’ can still be used without an extended language subtag to label a resource as some unspecified variety of Chinese, while the primary language subtag (‘gan’, ‘yue’, ‘cmn’) is preferred to using the extended language form (“zh-gan”, “zh-yue”, “zh-cmn”).</p>
<footer><strong>BCP 47</strong><cite><a href="https://tools.ietf.org/html/bcp47#section-2.2.2" target="_blank" rel="external">tools.ietf.org/html/bcp47#section-2.2.2</a></cite></footer></blockquote><br>大意为汉语这个语系太大了，包含了许多语种，为了兼容性与精确性，将之分为一些不同的小语种。所以就出现了形如 <code>zh-gan</code>/<code>gan</code>、<code>zh-yue</code>/<code>yue</code>、<code>zh-cmn</code>/<code>cmn</code>这样的标记方法。推荐使用后者，即不带<code>zh-</code>的。</p>
<h3 id="到底用哪一个？"><a href="#到底用哪一个？" class="headerlink" title="到底用哪一个？"></a>到底用哪一个？</h3><p>既然汉语语种如此之多，在实际运用中我们到底应该怎么处理呢？</p>
<p>之前提到的知乎上的问题：<a href="https://www.zhihu.com/question/20797118" target="_blank" rel="external">网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”？</a>，里面的大部分回答者都表示题主提到的两种方式已经不赞成被继续使用了。</p>
<p>根据IANA的语言标准注册记录<a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank" rel="external">language-subtag-registry</a>，诸如<code>zh-Hans, zh-Hans-CN, zh-cmn, zh-cmn-Hans, zh-cmn-Hant, zh-wuu, zh-yue, zh-gan</code>这些都已经变成了Deprecated状态了。</p>
<p>然而，为了照顾兼容性，很多网页依旧保留了这样的方式。</p>
<p>在BCF 47的文档中，并没有提出形如<code>lang="zh"</code>、<code>lang="zh-CN"</code>、<code>lang="zh-cmn-Hans"</code>这类表述方式不符合要求。如大名鼎鼎的<a href="https://zh.wikipedia.org/" target="_blank" rel="external">维基百科</a>，<a href="https://www.zhihu.com/" target="_blank" rel="external">知乎平台</a>，更有如今已经被墙的科技巨头的谷歌中文站点，其网页的语言类型使用的都是<code>lang="zh-CN"</code>。</p>
<p>关于被废弃（deprecated）的写法，BCP 47里面也做了相应的介绍：<blockquote><p>Many of these registered tags were made redundant by the advent of either RFC 4646 or this document. A redundant tag is a grandfathered registration whose individual subtags appear with the same semantic meaning in the registry. For example, the tag “zh-Hant” (Traditional Chinese) can now be composed from the subtags ‘zh’ (Chinese) and ‘Hant’ (Han script traditional variant). These redundant tags are maintained in the registry as records of type ‘redundant’, mostly as a matter of historical curiosity.</p>
<footer><strong>BCP 47</strong><cite><a href="http://tools.ietf.org/html/bcp47#section-2.2.8" target="_blank" rel="external">tools.ietf.org/html/bcp47#section-2.2.8</a></cite></footer></blockquote><br>大致意思是因为<code>zh</code>和<code>Hans</code>已经被收录了，再来一个<code>zh-Hans</code>就显得有点多余（redundant）了；然而真正使用<code>lang="zh-Hans"</code>也是没有什么问题的。</p>
<p>以下列举一下所谓的<em>符合规范</em>的写法：</p>
<ul>
<li>cms-Hans: 简体普通话，用规范汉子写下来，如“它是一个刮胡刀”，为了兼容，可以使用<code>zh-cmn-Hans</code>。</li><li>yue-Hans：粤语用规范汉字写下来，比如“佢系一个须刨嚟嘅”，没必要为兼容而使用<code>zh-yue-Hans</code>，因为看得懂<code>zh-CN</code>的人，看不懂这些字。</li><li>yue-Hant：粤语用國字写下来，比如“佢係一個鬚刨嚟嘅”。</li><li>lzh-Hans：文言文用规范汉字写下来，比如“驴不胜怒，蹄之”。</li><li>lzh-Hant：文言文用國字写下来，比如“驢不勝怒，蹄之”。</li></ul>
<p>以上示例摘自知乎作者<a href="https://www.zhihu.com/question/20797118/answer/81543429" target="_blank" rel="external">杨周</a>的回答。</p>
<p>突然想起了一句诗词（<del>内心思想还真是天马行空呐</del>）：<blockquote><p>本是同根生，相煎何太急。</p>
<footer><strong>曹植</strong><cite>七步诗</cite></footer></blockquote></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>针对这个问题，我忍不住翻越了大量的资料，到头来发现自己更加懵懂了。之前我设计网页的时候已经习惯了采用<code><html lang="zh-cmn-Hans"></code>和<code><html lang="zh-CN"></code>了；但是现在更多时候是不指定lang属性。</p>
<p><del>前端是个纷杂的世界，具体需要采用哪一种值，只要<strong>不是太令人费解</strong>，都是可以接受的。</del></p>
<p>有的时候为了照顾兼容性，不得不舍弃了新特性，想想也真是人在江湖，身不由己。有些问题有时候也是一个历史遗留问题，是没有良好的解决办法的，总不能直接全部推倒重来吧。然而社会在往前走，科技也在逐渐更新换代，比如最新的CSS选择器草案里面，已经把之前<del>不起眼</del>的<a href="https://drafts.csswg.org/selectors/#lang-pseudo" target="_blank" rel="external">:lang选择器</a>加入了关于BCP 47的高级匹配算法支持。</p>
<hr>
<p>本文到此结束，以下有诸多资料，诸君自行阅读。</p>
<h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><ul>
<li><a href="https://www.zhihu.com/question/20797118" target="_blank" rel="external">网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”？</a></li><li><a href="http://tools.ietf.org/html/bcp47" target="_blank" rel="external">BCP47 - Tags for Identifying Languages</a></li><li><a href="https://www.w3.org/International/articles/language-tags/" target="_blank" rel="external">Language tags in HTML and XML</a></li><li><a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank" rel="external">Language Subtag Registry</a></li><li><a href="https://en.wikipedia.org/wiki/IETF_language_tag" target="_blank" rel="external">IETF language tag - Wikipedia</a></li><li><a href="https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes" target="_blank" rel="external">3 Semantics, structure, and APIs of HTML documents</a></li><li><a href="https://www.w3.org/TR/html4/types.html#h-6.8" target="_blank" rel="external">Basic HTML data types</a></li><li><a href="https://en.wikipedia.org/wiki/ISO_639_macrolanguage" target="_blank" rel="external">ISO 639 macrolanguage</a></li><li><a href="http://www.ruanyifeng.com/blog/2008/02/codes_for_language_names.html" target="_blank" rel="external">语种名称代码</a></li><li><a href="https://www.w3.org/International/articles/bcp47/" target="_blank" rel="external">Understanding the New Language Tags</a></li></ul>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/frontend/" rel="tag">#前端</a>
<a href="/tags/lang/" rel="tag">#lang</a>
<a href="/tags/html/" rel="tag">#html</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/article/things-about-display.html" rel="next" title="一探究竟：display">
<i class="fa fa-chevron-left"></i> 一探究竟：display
</a>
</div>
<div class="post-nav-prev post-nav-item">
<a href="/article/how-technology-hijacks-poeples-minds.html" rel="prev" title="科技公司如何用“方便”绑架了你的生活？">
科技公司如何用“方便”绑架了你的生活？ <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</article>
<div class="post-spread">
</div>
</div>
</div>
<div class="comments" id="comments">
<div class="ds-thread" data-thread-key="article/language-tags-in-html.html"
data-title="HTML的lang标记" data-url="http://xovel.cn/article/language-tags-in-html.html">
</div>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
文章目录
</li>
<li class="sidebar-nav-overview" data-target="site-overview">
站点概览
</li>
</ul>
<section class="site-overview sidebar-panel ">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/xovel.jpg"
alt="xovel" />
<p class="site-author-name" itemprop="name">xovel</p>
<p class="site-description motion-element" itemprop="description">缓缓之间，风云静变</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">46</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories">
<span class="site-state-item-count">15</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags">
<span class="site-state-item-count">117</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
<div class="feed-link motion-element">
<a href="/atom.xml" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/xovel" target="_blank" title="github">
<i class="fa fa-fw fa-github"></i>
github
</a>
</span>
<span class="links-of-author-item">
<a href="http://hdk4.com" target="_blank" title="hdk4.com">
<i class="fa fa-fw fa-adjust"></i>
hdk4.com
</a>
</span>
</div>
<div class="cc-license motion-element" itemprop="license">
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0" class="cc-opacity" target="_blank">
<img src="/images/cc-by-nc-sa.svg" alt="Creative Commons" />
</a>
</div>
</section>
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">
<div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML标签的lang属性"><span class="nav-number">1.</span> <span class="nav-text">HTML标签的lang属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#指定lang属性的益处"><span class="nav-number">1.1.</span> <span class="nav-text">指定lang属性的益处</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#语言文字标签书写顺序"><span class="nav-number">2.</span> <span class="nav-text">语言文字标签书写顺序</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#复杂的汉语体系"><span class="nav-number">3.</span> <span class="nav-text">复杂的汉语体系</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#到底用哪一个？"><span class="nav-number">4.</span> <span class="nav-text">到底用哪一个？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#总结"><span class="nav-number">5.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考资料"><span class="nav-number">6.</span> <span class="nav-text">参考资料</span></a></li></ol></div>
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
©
<span itemprop="copyrightYear">2016</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">xovel</span>
</div>
<div class="powered-by">
由 <a class="theme-link" href="http://hexo.io" rel="external nofollow" target="_blank">Hexo</a> 强力驱动
</div>
<div class="theme-info">
主题 -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow" target="_blank">
NexT.Mist
</a>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>
<script type="text/javascript">
var duoshuoQuery = {short_name:"xovel"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.id = 'duoshuo-script';
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
</body>
</html>