-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhtml5-diff-20141209.html
More file actions
1871 lines (1313 loc) · 159 KB
/
html5-diff-20141209.html
File metadata and controls
1871 lines (1313 loc) · 159 KB
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
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang="en-US"><head>
<meta charset="utf-8">
<title>HTML5 Differences from HTML4</title>
<style>
@media screen { code { color: #D93B00; } code :link, code :visited { color: inherit; } }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
</style>
<style>
.bad { color: gray; }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-WG-NOTE" rel="stylesheet">
</head>
<body>
<!--
Editor's checklist for stuff to fix for publication:
* Previous Versions links
Applied search/replace:
* https://html\.spec\.whatwg\.org/multipage/[^#]+# -> http://www.w3.org/TR/html5/single-page.html#
* isindex-2 -> isindex-0
* colour -> color
* http://www.w3.org/html/wg/drafts/html/CR/ -> http://www.w3.org/TR/2014/REC-html5-20141028/
* //html.spec.whatwg.org/multipage/embedded-content.html#alt -> http://www.w3.org/TR/html5/single-page.html#alt
* //html.spec.whatwg.org/multipage/embedded-content.html#events-2 -> http://www.w3.org/TR/html5/single-page.html#events-0
* removed link to latest editor's draft
-->
<div class="head">
<div>
<!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<!--end-logo--></div>
<div>
<h1>HTML5与HTML4 的差异</h1>
<h2 class="no-num no-toc" id="w3c-doctype">W3C 工作组笔记 2013年12月9日</h2>
</div>
<dl>
<dt>当前版本:</dt>
<dd class="not-draft"><a href="http://www.w3.org/TR/2014/NOTE-html5-diff-20141209/">http://www.w3.org/TR/2014/NOTE-html5-diff-20141209/</a></dd>
<dt class="not-draft">最新版本:</dt>
<dd class="not-draft"><a href="http://www.w3.org/TR/html5-diff/">http://www.w3.org/TR/html5-diff/</a></dd>
<dt>参与:</dt>
<dd><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=HTML5%20differences%20from%20HTML4">归档bug</a>
(<a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=HTML%20WG&component=HTML5%20differences%20from%20HTML4&resolution=---">开放的bug</a>)
<dt>版本历史:
<dd><a href="https://github.com/whatwg/html-differences/commits">https://github.com/whatwg/html-differences/commits</a>
<dt>之前的版本:</dt>
<dd><a href="http://www.w3.org/TR/2014/WD-html5-diff-20140918/">http://www.w3.org/TR/2014/WD-html5-diff-20140918/</a></dd>
<dd><a href="http://www.w3.org/TR/2013/WD-html5-diff-20130528/">http://www.w3.org/TR/2013/WD-html5-diff-20130528/</a></dd>
<dd><a href="http://www.w3.org/TR/2012/WD-html5-diff-20121025/">http://www.w3.org/TR/2012/WD-html5-diff-20121025/</a></dd>
<dd><a href="http://www.w3.org/TR/2012/WD-html5-diff-20120329/">http://www.w3.org/TR/2012/WD-html5-diff-20120329/</a></dd>
<dd><a href="http://www.w3.org/TR/2011/WD-html5-diff-20110525/">http://www.w3.org/TR/2011/WD-html5-diff-20110525/</a></dd>
<dd><a href="http://www.w3.org/TR/2011/WD-html5-diff-20110405/">http://www.w3.org/TR/2011/WD-html5-diff-20110405/</a></dd>
<dd><a href="http://www.w3.org/TR/2011/WD-html5-diff-20110113/">http://www.w3.org/TR/2011/WD-html5-diff-20110113/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html5-diff-20101019/">http://www.w3.org/TR/2010/WD-html5-diff-20101019/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html5-diff-20100624/">http://www.w3.org/TR/2010/WD-html5-diff-20100624/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html5-diff-20100304/">http://www.w3.org/TR/2010/WD-html5-diff-20100304/</a></dd>
<dd><a href="http://www.w3.org/TR/2009/WD-html5-diff-20090825/">http://www.w3.org/TR/2009/WD-html5-diff-20090825/</a></dd>
<dd><a href="http://www.w3.org/TR/2009/WD-html5-diff-20090423/">http://www.w3.org/TR/2009/WD-html5-diff-20090423/</a></dd>
<dd><a href="http://www.w3.org/TR/2009/WD-html5-diff-20090212/">http://www.w3.org/TR/2009/WD-html5-diff-20090212/</a></dd>
<dd><a href="http://www.w3.org/TR/2008/WD-html5-diff-20080610/">http://www.w3.org/TR/2008/WD-html5-diff-20080610/</a></dd>
<dd><a href="http://www.w3.org/TR/2008/WD-html5-diff-20080122/">http://www.w3.org/TR/2008/WD-html5-diff-20080122/</a></dd>
<dt>编者:</dt>
<dd>Simon Pieters
(<a href="http://www.opera.com/">Opera Software ASA</a>)
<<a href="mailto:simonp@opera.com">simonp@opera.com</a>></dd>
<dt>之前的编者:</dt>
<dd><a href="https://annevankesteren.nl/">Anne van Kesteren</a>
<<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>></dd>
</dl>
<div>
<!--begin-copyright-->
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">版权所有</a> © 2014 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>©</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>),保留所有权利。适用 W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">责任</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">商标</a> 及 <a href="http://www.w3.org/Consortium/Legal/copyright-documents">文档使用</a> 规则。</p>
<!--end-copyright--></div>
</div>
<hr>
<h2 class="no-num no-toc" id="abstract">摘要</h2>
<p>"HTML5与HTML4 的差异" 描述了HTML5规范中那些与HTML4中的差异。</p>
<div>
<h2 class="no-num no-toc" id="sotd">本文档的状态</h2>
<p><i>本节描述了本文档在其出版时的状态。其他文档也可能取代本文档。当前W3C的发布列表,以及本技术报告的最新修订,可以在<a href="http://www.w3.org/TR/">W3C技术报告索引</a>中找到,网址是 http://www.w3.org/TR/.</i></p>
<p>这是一份由<a href="http://www.w3.org/html/wg/">HTML工作组</a>产生的2014年12月9日的W3C工作组笔记,其作为<a href="http://www.w3.org/MarkUp/Activity">HTML活动</a>的一部分,工作组打算将这份文档作为<a href="http://www.w3.org/2005/10/Process-20051014/#WGNote">工作组笔记</a>发布。征求意见的对应论坛是
<a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=HTML5%20differences%20from%20HTML4">W3C
Bugzilla</a>。 (<a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a>,
这个伴随着<a href="http://lists.w3.org/Archives/Public/public-html-comments/" title="Archive for HTML comments mailing-list">公共档案</a>的邮件列表,不再作为追踪评论使用。)</p>
<p>作为一份工作组笔记公布并不意味着W3C成员的认可。这是一个草案文件,并随时可能会被其他文档更新、取代或者废弃。在进程中的工作外引用此文档是不恰当的。</p>
<p>本文档是由一个小组根据
<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">2004年2月5日W3C专利政策</a>
操作并生成。 W3C维护了一个<a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">专利披露的公开名单</a>,用来将小组的交付相连。
该页还包括披露专利的说明。拥有专利实际知识的个人,如果个人相信此专利包含<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">必要的申明</a>,则必须按照<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">W3C专利政策的第6条</a>来披露信息。</p>
<p>
本文档受制于<a href="http://www.w3.org/2005/10/Process-20051014/" id="w3c_process_revision">2005年10月14日万维网联盟流程文档</a>.
</p>
</div>
<h2 class="no-num no-toc" id="toc">内容表</h2>
<!--begin-toc-->
<ul class="toc">
<li><a href="#introduction"><span class="secno">1 </span>简介</a>
<ul class="toc">
<li><a href="#scope"><span class="secno">1.1 </span>本文档的范围</a></li>
<li><a href="#history"><span class="secno">1.2 </span>HTML的历史</a></li>
<li><a href="#open-issues"><span class="secno">1.3 </span>开放的问题</a></li>
<li><a href="#backward-compatibility"><span class="secno">1.4 </span>向后兼容</a></ul></li>
<li><a href="#syntax"><span class="secno">2 </span>语法</a>
<ul class="toc">
<li><a href="#character-encoding"><span class="secno">2.1 </span>字符编码</a></li>
<li><a href="#doctype"><span class="secno">2.2 </span>Doctype</a></li>
<li><a href="#mathml-svg"><span class="secno">2.3 </span>MathML和SVG</a></li>
<li><a href="#syntax-misc"><span class="secno">2.4 </span>杂项</a></ul></li>
<li><a href="#language"><span class="secno">3 </span>语言</a>
<ul class="toc">
<li><a href="#new-elements"><span class="secno">3.1 </span>新元素</a></li>
<li><a href="#new-attributes"><span class="secno">3.2 </span>新属性</a></li>
<li><a href="#changed-elements"><span class="secno">3.3 </span>变更的元素</a></li>
<li><a href="#changed-attributes"><span class="secno">3.4 </span>变更的属性</a></li>
<li><a href="#obsolete-elements"><span class="secno">3.5 </span>废弃的元素</a></li>
<li><a href="#obsolete-attributes"><span class="secno">3.6 </span>废弃的属性</a></ul></li>
<li><a href="#content-model"><span class="secno">4 </span>内容模型</a></li>
<li><a href="#apis"><span class="secno">5 </span>API</a>
<ul class="toc">
<li><a href="#new-apis"><span class="secno">5.1 </span>新API</a></li>
<li><a href="#changed-apis"><span class="secno">5.2 </span>变更的API</a></li>
<li><a href="#document-extensions"><span class="secno">5.3 </span><code>Document</code>扩展</a></li>
<li><a href="#htmlelement-extensions"><span class="secno">5.4 </span><code>HTMLElement</code>扩展</a></li>
<li><a href="#other-extensions"><span class="secno">5.5 </span>其他接口扩展</a></li>
<li><a href="#obsolete-apis"><span class="secno">5.6 </span>废弃的API</a></ul></li>
<li><a class="no-num" href="#acknowledgments">致谢</a></li>
<li><a class="no-num" href="#references">参考文献</a></ul>
<!--end-toc-->
<h2 id="introduction"><span class="secno">1 </span>简介</h2>
<h3 id="scope"><span class="secno">1.1 </span>本文档的范围</h3>
<p>本文档涵盖W3C HTML5规范。但不涵盖W3C HTML5.1规范或WHATWG HTML标准。
<a href="#refsHTML5">[HTML5]</a>
<a href="#refsHTML5NIGHTLY">[HTML5NIGHTLY]</a>
<a href="#refsHTML">[HTML]</a></p>
<h3 id="history"><span class="secno">1.2 </span>HTML的历史</h3>
<p>HTML自从90年代初被引入到互联网以来一直在不断发展。某些特性被规范引入;其他则被软件的发布引入。在某些方面,实现以及web开发者的实践不仅相互融合,也与规范与标准融合,但在其他方面它们也有所偏离</p>
<p>HTML4在1997年成为W3C推荐标准。虽然它继续作为诸多HTML的核心功能的粗略的指南,但它并没有提供足够的用以构建相互操作的实现信息,更重要的是,也没有提供用以操作的Web内容的实现信息。定义了HTML4的XML序列化的XHTML1,以及为HTML和XHTML定义了JavaScript API的DOM Level 2 HTML也是同样的情况,HTML会取代这些文档。 <a href="#refsDOM2HTML">[DOM2HTML]</a>
<a href="#refsHTML4">[HTML4]</a>
<a href="#refsXHTML1">[XHTML1]</a>
<p>HTML规范反映了自2004年开始的研究当代HTML实现及Web内容的努力。规范:</p>
<ol>
<li><p>定义了单一的语言叫做HTML,它可以用HTML或者XML的语法书写。</li>
<li><p>定义详细的处理模式,以促进互操作的实现。</li>
<li><p>为文档改进标记。</li>
<li><p>为新兴词语引入标记和API,如Web应用。</li>
</ol>
<h3 id="open-issues"><span class="secno">1.3 </span>开放的问题</h3>
<p>请查看HTML5规范中“本文档的状态”章节。
<h3 id="backward-compatibility"><span class="secno">1.4 </span>向后兼容</h3>
<p>HTML被定义为与用户代理处理内容的方式向后兼容。为了对Web开发者保持语言的相对简单,一些旧的元素和属性不再被包含在内,它们会在文档的其他小节列出,比如表示样式的元素用CSS来处理会更好。</p>
<p>当然用户代理将会总是支持这些老的元素和属性。这就是为什么HTML规范清楚地分离对Web开发者(在规范中被称为作者)和用户代理的要求的原因。
例如,这意味着Web开发者不能再使用 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#isindex-0">isindex</a></code> 或者 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#plaintext">plaintext</a></code>
元素,但是用户代理为了兼容Web内容,而被要求以兼容这些元素如何表现的方式支持它们。</p>
<p>因为HTML已经分离了对作者和用户代理的一致性要求,所以不再需要用“废弃(deprecated)”去标记一个已过时的功能。</p>
<h2 id="syntax"><span class="secno">2 </span>语法</h2>
<p>HTML定义了一种语法,被称为HTML语法,其几乎兼容在web上已发布的HTML4和XHTML1文档,但不兼容更为深奥的HTML4的SGML特性。
比如
<a href="http://www.w3.org/TR/1999/REC-html401-19991224/appendix/notes.html#h-B.3.6">处理指令</a>
和
<a href="http://www.w3.org/TR/1999/REC-html401-19991224/appendix/notes.html#h-B.3.7">速记标记</a>,因为大多数用户代理都不支持这些。使用HTML语法的文件的媒体类型是 <code>text/html</code>。</p>
<p>HTML也为这个很大程度上与HTML4时代的实现相兼容的语法定义了详细的解析规则(包括“错误处理”),用户代理必须对有 <code>text/html</code> 媒体类型的资源使用这些规则。这里是一个符合HTML语法的范例文件:</p>
<pre><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html></pre>
<p>另一种可以被用作HTML的语法是XML。此语法与XHTML1的文件和实现相兼容。使用这种语法的文件需使用XML媒体类型(比如 <code>application/xhtml+xml</code>
或 <code>application/xml</code>),并且元素需被放进 <code>http://www.w3.org/1999/xhtml</code> 命名空间并遵循XML规范中规定的规则
<a href="#refsXML">[XML]</a> <a href="#refsXMLNS">[XMLNS]</a>
<p>下面是一个符合HTML的XML语法的范例文件:</p>
<pre><?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html></pre>
<h3 id="character-encoding"><span class="secno">2.1 </span>字符编码</h3>
<p>对于HTML语法,要求Web开发者声明字符编码。有三种设置的方法:</p>
<ul>
<li><p>在传输层;例如通过使用HTTP <code>Content-Type</code> 头。</li>
<li><p>在文件的开头使用字节顺序标记(BOM)字符。这些字符提供了所使用编码的签名。</li>
<li><p>使用一个带有 <code class="external" title="attr-meta-charset"><a href="http://www.w3.org/TR/html5/single-page.html#attr-meta-charset">charset</a></code>
属性的
<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-meta-element">meta</a></code>
元素,在该文件的前1024字节里,指定编码。例如,可以使用 <code><meta charset="UTF-8"></code>
来指定UTF-8编码。这取代了原来的 <code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></code>,尽管后者仍然有效。</li>
</ul>
<p>对于XML语法而言,Web开发者必须使用XML规范中规定的规则来设置字符编码。</p>
<h3 id="doctype"><span class="secno">2.2 </span>Doctype</h3>
<p>HTML语法要求定义一个doctype来确保浏览器使用标准模式渲染页面。doctype没有其他目的。 <a href="#refsDOCTYPE">[DOCTYPE]</a>
<p>HTML语法的doctype声明是 <code><!DOCTYPE html></code>,且不区分大小写。之前版本的HTML的doctype要更长,那是因为HTML语言基于SGML,因此需要一个DTD的引用。现在已经不再是这种情况,并且需要doctype只是为使用HTML语法撰写的文档启用标准模式。浏览器已经为 <code><!DOCTYPE html></code> 做到了这一点。</p>
<p>为了支持不能产生首选简短doctype的遗留的标记生成器,doctype <code><!DOCTYPE html SYSTEM
"about:legacy-compat"></code> 在HTML语法里是被允许的。
<p>HTML 4.0,HTML 4.01,,XHTML 1.0以及XHTML 1.1的严格型(strict) doctypes在HTML语法里也是被允许的(但不鼓励这么做)。
<p>在XML语法里,可以使用任何doctype声明,或者也可以一起忽略。以XML为媒体类型的文档总是在标准模式中处理。
<h3 id="mathml-svg"><span class="secno">2.3 </span>MathML和SVG</h3>
<p>HTML语法允许在文档中使用MathML和SVG元素。<code>math</code> 或者 <code>svg</code> 开始标签会使HTML解析器切换到一个特殊的插入模式,此模式將元素和属性放到合适的命名空间,修正有混合情况的元素和属性,并支持如XML中的空元素语法。语法仍然不区分大小写并且属性允许与HTML元素相同的语法。命名空间声明会被省过。CDATA部分则会在插入模式中被支持。
<p>一些MathML和SVG元素会使解析器切换回“HTML模式”,例如,<code>mtext</code> 和 <code>foreignObject</code>,这样你就可以使用HTML元素或新的 <code>math</code> 或 <code>svg</code> 元素。
<p>例如,一个非常简单的使用一些最少的语法特性的文档看起来像这样:</p>
<pre><!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<strong><svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></strong>
</p></pre>
<h3 id="syntax-misc"><span class="secno">2.4 </span>杂项</h3>
<p>还有一些其他HTML语法的变化值得一提:</p>
<ul>
<li><p><code>&lang;</code> 和 <code>&rang;</code> 命名字符引用现在从 U+2329 和 U+232A(左/右点尖括号)分别扩大到 U+27E8 和 U+27E9(数学的左/右尖括号)
<li><p>添加了许多新的命名字符引用,包括所有来自MathML的字符
<li><p>允许Void元素(在HTML4中被称为"EMPTY")有结尾斜杠(trailing slash)
<li><p>在更多的情况下,与符号 (<code>&</code>) 相比HTML4,会保持不转义
<li><p>属性间必须被至少1个空白字符分隔
<li><p>空值的属性可以只写属性名而省略等号和值,即使属性不是布尔属性。(人们普遍认为HTML4允许省略布尔属性的值,然而事实是,对于枚举属性,HTML4允许只用属性 <em>value</em> 并省略属性名,但这一点浏览器并不支持。)
<li><p>允许对值省略引号的属性使用比HTML4更大的字符集
<li><p>HTML解析器不做任何属性值空白的标准化;比如,<code class="external" title="attr-id"><a href="http://www.w3.org/TR/html5/single-page.html#the-id-attribute">id</a></code> 属性中的开头和结尾空白不会被忽略(从而导致无效),并且在 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code> 的 <code class="external" title="attr-input-value"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-value">value</a></code> 属性中可以不必使用字符引用,而使用换行符。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-optgroup-element">optgroup</a></code> 结束标签现在是可选项
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-colgroup-element">colgroup</a></code> 开始标签现在是可选项并且由HTML解析器推断出来
</ul>
<h2 id="language"><span class="secno">3 </span>语言</h2>
<p>这部分被分割成几个小节来更清楚地阐述相对于HTML4的各种不同。</p>
<h3 id="new-elements"><span class="secno">3.1 </span>新元素</h3>
<p>为了更好的结构化,引入下面这些元素:</p>
<ul>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-section-element">section</a></code>
代表一个通用的文件或应用部分。 它<span title="">应该</span>和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h1-element">h1</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h2-element">h2</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h3-element">h3</a></code>,
<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h4-element">h4</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h5-element">h5</a></code>, 以及 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-h6-element">h6</a></code> 元素<a class="external" href="http://www.w3.org/TR/html5/single-page.html#headings-and-sections" title="Headings and sections">同时使用</a>来表明文档的结构。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-article-element">article</a></code>
代表了一个文档内容的独立片段,比如博客条目或报纸文章。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-main-element">main</a></code>
<span title="">代表了文档或应用的主体内容。</span></li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-aside-element">aside</a></code>
代表了一段与页面的其余部分稍有关联的内容。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-header-element">header</a></code>
代表一组介绍或导航辅助。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-footer-element">footer</a></code>
代表一个部分(section)的尾(footer)并可以容纳关于作者、版权等信息。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-nav-element">nav</a></code>
代表了用于导航目的的文档的一部分。</li>
<li>
<p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-figure-element">figure</a></code>
代表一个独立的流内容片段,通常作为一个文档主流的独立单元。</p>
<pre><figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</figure></pre>
<p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-figcaption-element">figcaption</a></code> 被用作标题 (它是可选的)。</p>
</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-template-element">template</a></code>
可被用于声明HTML片段,其会被脚本复制以及插入到文档中。
</ul>
<p>还有其他一些新的元素:</p>
<ul>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-video-element">video</a></code> 和
<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-audio-element">audio</a></code> 用于多媒体内容。 两者都提供了一个API使得Web开发者可以编写他们自己的用户界面,但也有一种方法触发由用户代理提供的用户界面。如果有各种类型的可用流,<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-source-element">source</a></code> 被与这些元素放在一起使用。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-track-element">track</a></code> 提供了 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-video-element">video</a></code> 元素的文本轨道。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-embed-element">embed</a></code> 用于插件内容。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-mark-element">mark</a></code> 代表一连串文档中用作参考的被备注和高亮的文本,由于其在另一个上下文相关。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-progress-element">progress</a></code> 代表一个任务完成度,比如下载或者执行一系列耗时的操作。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-meter-element">meter</a></code> 代表一个度量,比如磁盘使用情况。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-time-element">time</a></code> 表示日期和(或)时间。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-ruby-element">ruby</a></code>,
<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-rt-element">rt</a></code>, 以及
<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-rp-element">rp</a></code> 用来标注ruby注释
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-bdi-element">bdi</a></code> 代表从其周围独立出来的一段文本,目的是要使用双向文本格式
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-wbr-element">wbr</a></code> 代表一个换行时机
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-canvas-element">canvas</a></code> 用来渲染即时创建的动态位图,比如图表和游戏。</li>
<li>
<p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-datalist-element">datalist</a></code>
与 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>
的新属性 <code class="external" title="attr-input-list"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-list">list</a></code> 一起使用可以创建组合框:</p>
<pre><input <strong>list="browsers"</strong>>
<datalist <strong>id="browsers"</strong>>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist></pre>
</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-keygen-element">keygen</a></code>
代表了密钥对的生成控制。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-output-element">output</a></code>
代表了一些输出类型,比如表单里的通过脚本的计算结果。</li>
</ul>
<p>The <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code> element's <code class="external" title="attr-input-type"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-type">type</a></code> attribute now has the
following new values:</p>
<ul class="brief">
<li><code class="external" title="attr-input-type-tel"><a href="http://www.w3.org/TR/html5/single-page.html#telephone-state-(type=tel)">tel</a></code>
<li><code class="external" title="attr-input-type-search"><a href="http://www.w3.org/TR/html5/single-page.html#text-(type=text)-state-and-search-state-(type=search)">search</a></code>
<li><code class="external" title="attr-input-type-url"><a href="http://www.w3.org/TR/html5/single-page.html#url-state-(type=url)">url</a></code>
<li><code class="external" title="attr-input-type-email"><a href="http://www.w3.org/TR/html5/single-page.html#e-mail-state-(type=email)">email</a></code>
<li><code class="external" title="attr-input-type-date"><a href="http://www.w3.org/TR/html5/single-page.html#date-state-(type=date)">date</a></code>
<li><code class="external" title="attr-input-type-time"><a href="http://www.w3.org/TR/html5/single-page.html#time-state-(type=time)">time</a></code>
<li><code class="external" title="attr-input-type-number"><a href="http://www.w3.org/TR/html5/single-page.html#number-state-(type=number)">number</a></code>
<li><code class="external" title="attr-input-type-range"><a href="http://www.w3.org/TR/html5/single-page.html#range-state-(type=range)">range</a></code>
<li><code class="external" title="attr-input-type-color"><a href="http://www.w3.org/TR/html5/single-page.html#color-state-(type=color)">color</a></code>
</ul>
<p>新增这些类型的想法,是用户代理可以提供用户界面,比如一个日历日期选择器或用户的地址簿的整合,并提交一个确定的格式到服务器。这给了用户更好的体验,因为他的输入在发送到服务器前被检查,这意味着更少的等待反馈的时间。</p>
<h3 id="new-attributes"><span class="secno">3.2 </span>新属性</h3>
<p>几个新属性被引入到了已经是HTML4一部分的各种元素上:</p>
<ul>
<li><p>为了和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-a-element">a</a></code>
和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-link-element">link</a></code>
元素的一致性,<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-area-element">area</a></code>
元素现在也有了<code class="external" title="attr-hyperlink-hreflang"><a href="http://www.w3.org/TR/html5/single-page.html#attr-hyperlink-hreflang">hreflang</a></code>, <code class="external" title="attr-hyperlink-type"><a href="http://www.w3.org/TR/html5/single-page.html#attr-hyperlink-type">type</a></code>
和 <code class="external" title="attr-hyperlink-rel"><a href="http://www.w3.org/TR/html5/single-page.html#attr-hyperlink-rel">rel</a></code> 属性。
<li><p>主要为了和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-a-element">a</a></code> 元素的一致性,<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-base-element">base</a></code>
元素也有了 <code class="external" title="attr-base-target"><a href="http://www.w3.org/TR/html5/single-page.html#attr-base-target">target</a></code> 属性。(这已被广泛支持)
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-meta-element">meta</a></code>
元素现在有了 <code class="external" title="attr-meta-charset"><a href="http://www.w3.org/TR/html5/single-page.html#attr-meta-charset">charset</a></code>
属性,因为这已经被广泛支持并且提供了一个定义文档字符编码(<a href="#character-encoding">character encoding</a>)的好方法。
<li><p>可以在 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>
(除了当 <code class="external" title="attr-input-type"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-type">type</a></code>
属性为 <code class="external" title="attr-input-type-hidden"><a href="http://www.w3.org/TR/html5/single-page.html#hidden-state-(type=hidden)">hidden</a></code>
时), <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-select-element">select</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code>
和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-button-element">button</a></code> 元素上定义一个新的 <code class="external" title="attr-fe-autofocus"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fe-autofocus">autofocus</a></code>
属性。它提供了一种页面加载时聚焦表单控件的声明方式。相比使用脚本聚焦元素,使用这个特性可以提升用户体验,比如,如果用户不喜欢可以关闭它。
<li>
<p>可以在 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>
和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code>
元素上定义一个新的 <code class="external" title="attr-input-placeholder"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-placeholder">placeholder</a></code>
属性。它代表了一个提示,旨在帮助用户数据录入。</p>
<pre><input type=search name=q <strong>placeholder="Enter search phrase..."</strong>> <button>Search</button></pre>
<pre><label>Email <input type=email name=email <strong>placeholder="john@example.com"</strong>></label></pre>
<p><code class="external" title="attr-input-placeholder"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-placeholder">placeholder</a></code>
属性不该被用作 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-label-element">label</a></code> 元素的替代。
<pre class="bad"><!-- Do not do this: -->
<input type=email name=email placeholder="Email"></pre>
</li>
<li>
<p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-output-element">output</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-select-element">select</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-button-element">button</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-label-element">label</a></code>, <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-object-element">object</a></code> 和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-fieldset-element">fieldset</a></code> 元素有了新的 <code class="external" title="attr-fae-form"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fae-form">form</a></code>
属性,允许控件关联一个表单。现在这些元素可以放置在页面的任何地方,它们仍和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-form-element">form</a></code> 关联,而不是只能作为 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-form-element">form</a></code> 元素的子元素。</p>
<pre><table>
<tr>
<th>Key
<th>Value
<th>Action
<tr>
<td><form <strong>id=1</strong>><input name=1-key></form>
<td><input <strong>form=1</strong> name=1-value>
<td><button <strong>form=1</strong> name=1-action value=save>?</button>
<button <strong>form=1</strong> name=1-action value=delete>?</button>
...
</table></pre>
</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code> (除了 <code class="external" title="attr-input-type"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-type">type</a></code>
属性值是 <code class="external" title="attr-input-type-hidden"><a href="http://www.w3.org/TR/html5/single-page.html#hidden-state-(type=hidden)">hidden</a></code> , <code class="external" title="attr-input-type-image"><a href="http://www.w3.org/TR/html5/single-page.html#image-button-state-(type=image)">image</a></code>
或一些按钮类型比如 <code class="external" title="attr-input-type-submit"><a href="http://www.w3.org/TR/html5/single-page.html#submit-button-state-(type=submit)">submit</a></code>
外), <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-select-element">select</a></code>
和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code> 有了新的 <code class="external" title="attr-input-required"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-required">required</a></code>
属性,它提示用户为了能够提交表单而必须填入一个值。对于 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-select-element">select</a></code> 来说,第一个 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-option-element">option</a></code> 元素必须以一个空值占位。
<pre><label>Color: <select name=color <strong>required</strong>>
<option <strong>value=""</strong>>Choose one
<option>Red
<option>Green
<option>Blue
</select></label></pre>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-fieldset-element">fieldset</a></code>
元素现在允许用 <code class="external" title="attr-fieldset-disabled"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fieldset-disabled">disabled</a></code>
属性来禁用所有子元素的控制(不包括那些 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-legend-element">legend</a></code> 元素的子元素),并允许用 <code class="external" title="attr-fe-name"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fe-name">name</a></code> 属性作脚本访问。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>
元素有几个新的属性来来指定约束: <code class="external" title="attr-fe-autocomplete"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fe-autocomplete">autocomplete</a></code>, <code class="external" title="attr-input-min"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-min">min</a></code>, <code class="external" title="attr-input-max"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-max">max</a></code>, <code class="external" title="attr-input-multiple"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-multiple">multiple</a></code>, <code class="external" title="attr-input-pattern"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-pattern">pattern</a></code> 和 <code class="external" title="attr-input-step"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-step">step</a></code>。之前已经提到,它还有一个与 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-datalist-element">datalist</a></code> 元素一起使用的新的 <code class="external" title="attr-input-list"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-list">list</a></code> 属性。当使用 <code>type=image</code> 时,它也有 <code class="external" title="attr-dim-width"><a href="http://www.w3.org/TR/html5/single-page.html#attr-dim-width">width</a></code> 和 <code class="external" title="attr-dim-height"><a href="http://www.w3.org/TR/html5/single-page.html#attr-dim-height">height</a></code> 属性来指定图像的尺寸。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code> 和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code> 元素有了一个新元素 <code class="external" title="attr-fe-dirname"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fe-dirname">dirname</a></code>,用于用户所设置的提交的方向性的控制
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-textarea-element">textarea</a></code> 元素也多了三个新属性,<code class="external" title="attr-textarea-maxlength"><a href="http://www.w3.org/TR/html5/single-page.html#attr-textarea-maxlength">maxlength</a></code>, <code class="external" title="attr-textarea-minlength"><a href="http://www.w3.org/TR/html5/single-page.html#attr-textarea-minlength">minlength</a></code> 和 <code class="external" title="attr-textarea-wrap"><a href="http://www.w3.org/TR/html5/single-page.html#attr-textarea-wrap">wrap</a></code>,分别用来控制最大输入长度和提交的换行行为。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-form-element">form</a></code> 元素有了 <code class="external" title="attr-fs-novalidate"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-novalidate">novalidate</a></code> 属性,可以用来禁用表单验证提交(即表单总是可以被提交)。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code> 和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-button-element">button</a></code> 元素有了新属性 <code class="external" title="attr-fs-formaction"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-formaction">formaction</a></code>, <code class="external" title="attr-fs-formenctype"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-formenctype">formenctype</a></code>, <code class="external" title="attr-fs-formmethod"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-formmethod">formmethod</a></code>, <code class="external" title="attr-fs-formnovalidate"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-formnovalidate">formnovalidate</a></code>, 和 <code class="external" title="attr-fs-formtarget"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-formtarget">formtarget</a></code>。如果存在,它们覆盖 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-form-element">form</a></code> 元素上的 <code class="external" title="attr-fs-action"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-action">action</a></code>, <code class="external" title="attr-fs-enctype"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-enctype">enctype</a></code>, <code class="external" title="attr-fs-method"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-method">method</a></code>, <code class="external" title="attr-fs-novalidate"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-novalidate">novalidate</a></code>, 和 <code class="external" title="attr-fs-target"><a href="http://www.w3.org/TR/html5/single-page.html#attr-fs-target">target</a></code> 属性。</p>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-input-element">input</a></code>元素也有了一个新属性 <code class="external" title="attr-input-minlength"><a href="http://www.w3.org/TR/html5/single-page.html#attr-input-minlength">minlength</a></code>。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-script-element">script</a></code>
元素有了一个新属性 <code class="external" title="attr-script-async"><a href="http://www.w3.org/TR/html5/single-page.html#attr-script-async">async</a></code>,可以影响脚本的加载和执行。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-html-element">html</a></code> 元素有了一个新属性 <code class="external" title="attr-html-manifest"><a href="http://www.w3.org/TR/html5/single-page.html#attr-html-manifest">manifest</a></code>,指向一个用于结合离线Web应用API的应用程序缓存清单。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-link-element">link</a></code> 元素有了一个新的属性 <code class="external" title="attr-link-sizes"><a href="http://www.w3.org/TR/html5/single-page.html#attr-link-sizes">sizes</a></code> 。可以结合 <code class="external" title="rel-icon"><a href="http://www.w3.org/TR/html5/single-page.html#rel-icon">icon</a></code> 的关系(通过设置 <code class="external" title="attr-link-rel"><a href="http://www.w3.org/TR/html5/single-page.html#attr-link-rel">rel</a></code> 属性,可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-ol-element">ol</a></code> 元素有了一个新属性 <code class="external" title="attr-ol-reversed"><a href="http://www.w3.org/TR/html5/single-page.html#attr-ol-reversed">reversed</a></code> 。当其存在时,代表列表中的顺序为降序。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-iframe-element">iframe</a></code> 元素有了新属性分别是 <code class="external" title="attr-iframe-sandbox"><a href="http://www.w3.org/TR/html5/single-page.html#attr-iframe-sandbox">sandbox</a></code> 和 <code class="external" title="attr-iframe-srcdoc"><a href="http://www.w3.org/TR/html5/single-page.html#attr-iframe-srcdoc">srcdoc</a></code>,用以允许沙箱内容,例如,博客评论。</li>
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-object-element">object</a></code> 元素有一个新的属性叫做 <code class="external" title="attr-object-typemustmatch"><a href="http://www.w3.org/TR/html5/single-page.html#attr-object-typemustmatch">typemustmatch</a></code>, 其允许更安全的嵌入外部资源。
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-img-element">img</a></code> 元素有了一个新属性叫做 <code class="external" title="attr-img-crossorigin"><a href="http://www.w3.org/TR/html5/single-page.html#attr-img-crossorigin">crossorigin</a></code> 用来在获取过程中使用CORS并且如果成功的话,允许图像数据被 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-canvas-element">canvas</a></code> API 读取。
</ul>
<p>一些HTML4的属性现在被应用到所有的元素。这些属性被称为全局属性(global attributes): <code class="external" title="attr-accesskey"><a href="http://www.w3.org/TR/html5/single-page.html#the-accesskey-attribute">accesskey</a></code>, <code class="external" title="attr-class"><a href="http://www.w3.org/TR/html5/single-page.html#classes">class</a></code>, <code class="external" title="attr-dir"><a href="http://www.w3.org/TR/html5/single-page.html#the-dir-attribute">dir</a></code>, <code class="external" title="attr-id"><a href="http://www.w3.org/TR/html5/single-page.html#the-id-attribute">id</a></code>, <code class="external" title="attr-dir"><a href="http://www.w3.org/TR/html5/single-page.html#the-dir-attribute">lang</a></code>, <code class="external" title="attr-style"><a href="http://www.w3.org/TR/html5/single-page.html#the-style-attribute">style</a></code>, <code class="external" title="attr-tabindex"><a href="http://www.w3.org/TR/html5/single-page.html#attr-tabindex">tabindex</a></code> 和 <code class="external" title="attr-title"><a href="http://www.w3.org/TR/html5/single-page.html#the-title-attribute">title</a></code>。此外,XHTML 1.0 只在一些元素上允许 <code>xml:space</code>,现在它被允许用在XHTML文档所有的元素上。</p>
<p>也有一些新的全局属性:</p>
<ul>
<li><p><code class="external" title="attr-contenteditable"><a href="http://www.w3.org/TR/html5/single-page.html#attr-contenteditable">contenteditable</a></code> 属性表明元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。
<li><p>Web开发者定义的 <code class="external" title="attr-data-*"><a href="http://www.w3.org/TR/html5/single-page.html#attr-data-*">data-<var>*</var></a></code> 集合。Web开发者可以定义他们想要的任何属性只要他们在其之前加上 <code>data-</code> 前缀来避免与将来版本的HTML的冲突。这些属性是用作存储Web页面或应用自身消耗的自定义数据的。而<em>不是</em>用来给其他各方(比如用户代理)消耗的。
<li><p><code class="external" title="attr-hidden"><a href="http://www.w3.org/TR/html5/single-page.html#the-hidden-attribute">hidden</a></code> 属性表示一个元素尚未,或不再有所关联
<li><p><code class="external" title="wai-aria"><a href="http://www.w3.org/TR/html5/single-page.html#wai-aria">role</a></code> 和 <code class="external" title="wai-aria"><a href="http://www.w3.org/TR/html5/single-page.html#wai-aria">aria-<var>*</var></a></code> 集合属性用来指导辅助技术。
<li><p><code class="external" title="attr-spellcheck"><a href="http://www.w3.org/TR/html5/single-page.html#attr-spellcheck">spellcheck</a></code> 属性允许暗示是否内容可以被拼写检查。
<li><p><code class="external" title="attr-translate"><a href="http://www.w3.org/TR/html5/single-page.html#attr-translate">translate</a></code> 属性给了翻译器内容是否应该被翻译的提示。
</ul>
<p>HTML也使得所有来自HTML4的事件处理属性(那些形如 <code>on<var>event</var></code> 的属性)变成全局属性,并为其定义的新的事件添加了几个新的时间处理属性。比如,媒体元素(<code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-video-element">video</a></code> 和 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-audio-element">audio</a></code>)API所使用的 <code class="external" title="event-media-play"><a href="http://www.w3.org/TR/html5/single-page.html#event-media-play">play</a></code> 事件的 <code class="external" title="handler-onplay"><a href="http://www.w3.org/TR/html5/single-page.html#handler-onplay">onplay</a></code> 事件处理器。规范有一份<a href="http://www.w3.org/TR/html5/single-page.html#events-0">所有事件的索引</a>。</p>
<h3 id="changed-elements"><span class="secno">3.3 </span>变更的元素</h3>
<p>这些元素在HTML里被略微修改了含义,这是为了更好的反应它们如何被使用在Web上或者让它们变得更有用:</p>
<ul>
<!--
<li><p>The <code data-anolis-spec=html>a</code> element without an
<code data-anolis-spec=html title=attr-hyperlink-href>href</code>
attribute now represents a placeholder for where a link otherwise
might have been placed.</p></li>
html4:
Each A element defines an anchor
1. The A element's content defines the position of the anchor.
2. The name attribute names the anchor so that it may be the destination
of zero or more links (see also anchors with id).
3. The href attribute makes this anchor the source anchor of exactly one
link.
Authors may also create an A element that specifies no anchors, i.e., that
doesn't specify href, name, or id. Values for these attributes may be set
at a later time through scripts.
html:
If the a element has an href attribute, then it represents a hyperlink (a
hypertext anchor).
If the a element has no href attribute, then the element represents a
placeholder for where a link might otherwise have been placed, if it had
been relevant.
Both basically say that <a> without href is a "placeholder", so this isn't
really a change.
-->
<!--
<li><p>The <code data-anolis-spec=html>abbr</code> element now represents
an abbreviation <em>or</em> an acronym.
html4:
Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
html:
The abbr element represents an abbreviation or acronym, optionally with
its expansion.
Not a major change (technically acronym is a form of abbreviation anyway),
and this document says to use abbr instead of acronym already.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-address-element">address</a></code> 元素现在被最近的祖先 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-article-element">article</a></code> 或 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-body-element">body</a></code> 元素限定了作用范围。</li>
<!--
AREA
html4 doesn't really have a definition of area, but html does, but that's
hardly worth calling out here.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-b-element">b</a></code> 元素现在代表一段文本,这段文本仅仅出于功利的目的被提请注意,这种目的里没有传达任何额外的重要性,也没有交替的语言和心情的意味,比如文档摘要的关键字,审查中的产品名,文本驱动的交互软件的可操作词,或文章的导引。</li>
<!--
BASE
html4:
The BASE element allows authors to specify a document's base URI
explicitly.
html:
The base element allows authors to specify the document base URL for the
purposes of resolving relative URLs, and the name of the default browsing
context for the purposes of following hyperlinks. The element does not
represent any content beyond this information.
-->
<!--
BDO
html4:
The BDO element allows authors to turn off the bidirectional algorithm for
selected fragments of text.
html:
The bdo element represents explicit text directionality formatting control
for its children. It allows authors to override the Unicode bidirectional
algorithm by explicitly specifying a direction override.
-->
<!--
<li><p>The <code data-anolis-spec=html>blockquote</code> element now
represents a section that is quoted <em>from another source</em> (and that
is not necessarily "long").
html4:
These two elements designate quoted text. BLOCKQUOTE is for long
quotations (block-level content)
html:
The blockquote element represents a section that is quoted from another
source.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-blockquote-element">blockquote</a></code>元素仍旧代表从引自其他来源的内容,但现在也允许包含在 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-footer-element">footer</a></code> 或 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-cite-element">cite</a></code>元素中的引文,以及行间的变化比如注解和缩写。</li>
<!--
BODY
html4:
The body of a document contains the document's content.
html:
The body element represents the main content of the document.
-->
<!--
BR
html4:
The BR element forcibly breaks (ends) the current line of text.
html:
The br element represents a line break.
-->
<!--
BUTTON
html4:
Buttons created with the BUTTON element function just like buttons created
with the INPUT element
html:
The button element represents a button.
-->
<!--
CAPTION
html4:
When present, the CAPTION element's text should describe the nature of the
table.
html:
The caption element represents the title of the table that is its parent,
if it has a parent and that is a table element.
-->
<!--
CODE
html4:
Designates a fragment of computer code.
html:
The code element represents a fragment of computer code.
-->
<!--
COL
html4:
The COL element allows authors to group together attribute specifications
for table columns.
html:
If a col element has a parent and that is a colgroup element that itself
has a parent that is a table element, then the col element represents one
or more columns in the column group represented by that colgroup.
-->
<!--
COLGROUP
html4:
The COLGROUP element creates an explicit column group.
html:
The colgroup element represents a group of one or more columns in the
table that is its parent, if it has a parent and that is a table element.
-->
<!--
DD
covered by dl
-->
<!--
DEL
html4:
INS and DEL are used to markup sections of the document that have been
inserted or deleted with respect to a different version of a document
html:
The del element represents a removal from the document.
-->
<!--
DFN
html4:
Indicates that this is the defining instance of the enclosed term.
html:
The dfn element represents the defining instance of a term.
-->
<!--
DIV
html4:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV) but
impose no other presentational idioms on the content. Thus, authors may
use these elements in conjunction with style sheets, the lang attribute,
etc., to tailor HTML to their own needs and tastes.
html:
The div element has no special meaning at all. It represents its children.
It can be used with the class, lang, and title attributes to mark up
semantics common to a group of consecutive elements.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-dl-element">dl</a></code> 元素现在代表一组名称-值的关联列表,并且不再适用于对话。</li>
<!--
DT
covered by dl
-->
<!--
EM
html4:
Indicates emphasis.
html:
The em element represents stress emphasis of its contents.
-->
<!--
FIELDSET
html4:
The FIELDSET element allows authors to group thematically related controls
and labels.
html:
The fieldset element represents a set of form controls optionally grouped
under a common name.
-->
<!--
FORM
html4:
The FORM element acts as a container for controls.
html:
The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
-->
<!--
<li><p>The <code data-anolis-spec=html>h1</code>-<code
data-anolis-spec=html>h6</code> elements in HTML4 are said to have
different importance. In HTML, they are said to have different <span
data-anolis-spec=html>ranks</span>, which affect the outline algorithm,
but do not affect importance.
html4:
A heading element briefly describes the topic of the section it
introduces. Heading information may be used by user agents, for example,
to construct a table of contents for a document automatically.
There are six levels of headings in HTML with H1 as the most important and
H6 as the least. Visual browsers usually render more important headings in
larger fonts than less important ones.
html:
These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on
headings and sections.
These elements have a rank given by the number in their name. The h1
element is said to have the highest rank, the h6 element has the lowest
rank, and two elements with the same name have equal rank.
well, they intend the same semantics, basically.
-->
<!--
HEAD
html4:
The HEAD element contains information about the current document, such as
its title, keywords that may be useful to search engines, and other data
that is not considered document content.
html:
The head element represents a collection of metadata for the Document.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-hr-element">hr</a></code> 元素现在代表一个段级专题间断(paragraph-level thematic break)。
<!--
HTML
html4:
After document type declaration, the remainder of an HTML document is
contained by the HTML element.
html:
The html element represents the root of an HTML document.
-->
<li><p><code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-i-element">i</a></code> 元素现在代表一段有着交替的语言和心情意味的文本,或者,以表明一种不同的文本质量的方式偏离平常的散文,比如分类命名,技术术语,其它语言的惯用短语,一个念头,或西文的船名。</li>
<!--
IFRAME
html4:
The IFRAME element allows authors to insert a frame within a block of
text. Inserting an inline frame within a section of text is much like
inserting an object via the OBJECT element: they both allow you to insert
an HTML document in the middle of another, they may both be aligned with
surrounding text, etc.
html:
The iframe element represents a nested browsing context.
-->
<!--
IMG
html4:
The IMG element embeds an image in the current document at the location
of the element's definition.
html:
An img element represents an image.
-->
<!--
INPUT
type html4 html
text Creates a single-line text input control.
Text with no line breaks; A text field. The
input element represents a one line plain text
edit control for the element's value.
password Like "text", but the input text is rendered in such a way as
to hide the characters
Text with no line breaks (sensitive
information); A text field that obscures data
entry. The input element represents a one line
plain text edit control for the element's
value. The user agent should obscure the value
so that people other than the user cannot see
it.
checkbox Checkboxes are on/off switches that may be toggled by the
user.
A set of zero or more values from a predefined
list; A checkbox. The input element represents
a two-state control that represents the
element's checkedness state.
radio Radio buttons are like checkboxes except that when several
share the same control name, they are mutually exclusive
An enumerated value; A radio button. The input
element represents a control that, when used in
conjunction with other input elements, forms a
radio button group in which only one control
can have its checkedness state set to true.
submit When activated, a submit button submits a form. A form may
contain more than one submit button.
An enumerated value, with the extra semantic
that it must be the last value selected and
initiates form submission; A button. The input
element represents a button that, when
activated, submits the form.
image Creates a graphical submit button.
A coordinate, relative to a particular image's
size, with the extra semantic that it must be
the last value selected and initiates form
submission; Either a clickable image, or a
button. The input element represents either an
image from which a user can select a coordinate
and submit the form, or alternatively a button
from which the user can submit the form. The
element is a button, specifically a submit
button.
reset When activated, a reset button resets all controls to their
initial values.
n/a; A button. The input element represents a
button that, when activated, resets the form.
button Push buttons have no default behavior.
n/a; A button. The input element represents a
button with no default behavior.
hidden Authors may create controls that are not rendered but whose
values are submitted with a form. Authors generally use this
control type to store information between client/server
exchanges that would otherwise be lost due to the stateless
nature of HTTP (see [RFC2616]). The INPUT element is used to
create a hidden control.
An arbitrary string; n/a. The input element
represents a value that is not intended to be
examined or manipulated by the user.
file This control type allows the user to select files so that
their contents may be submitted with a form. The INPUT
element is used to create a file select control.
Zero or more files each with a MIME type and
optionally a file name; A label and a button.
The input element represents a list of selected
files, each file consisting of a file name, a
file type, and a file body (the contents of the
file).
-->
<!--
INS
see DEL above
-->
<!--
KBD
html4:
Indicates text to be entered by the user.
html:
The kbd element represents user input (typically keyboard input, although
it may also be used to represent other input, such as voice commands).
-->
<li><p>对于 <code class="external"><a href="http://www.w3.org/TR/html5/single-page.html#the-label-element">label</a></code> 元素,浏览器不应该再将焦点从标签移动到控件上,除非这种行为对于底层平台的用户界面是标准的。</li>
<!--
LEGEND
html4:
The LEGEND element allows authors to assign a caption to a FIELDSET.
html:
The legend element represents a caption for the rest of the contents of
the legend element's parent fieldset element, if any.
-->