html5 css3 toàn tập

HTML5 (including next generation additions still in development) Draft Standard — 7 April 2010 You can take part in this work. Join the working group's discussion list. Web designers! We have a FAQ, a forum, and a help mailing list for you! Multiple-page version: http://whatwg.org/html5 One-page version: http://www.whatwg.org/specs/web-apps/current-work/ PDF print versions: A4: http://www.whatwg.org/specs/web-apps/current-work/html5-a4.pdf Letter: http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf Version history: Twitter messages (non-editorial changes only): http://twitter.com/WHATWG Commit-Watchers mailing list: http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org Interactive Web interface: http://html5.org/tools/web-apps-tracker Subversion interface: http://svn.whatwg.org/ Issues: To send feedback: whatwg@whatwg.org To view and vote on feedback: http://www.whatwg.org/issues/ Editor: Ian Hickson, Google, ian@hixie.ch © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document. Abstract This specication evolves HTML and its related APIs to ease the authoring of Web-based applications. The most recent additions include a device p401 element to enable video conferencing, as well as all the features added as part of the earlier HTML5 eort. 1 Status of this document This is a work in progress! This document is changing on a daily if not hourly basis in response to comments and as a general part of its development process. Comments are very welcome, please send them to whatwg@whatwg.org. Thank you. Outstanding feedback is tracked; all e-mails sent to the list above receive a reply. The level of outstanding feedback is charted to allow progress to be evaluated. Implementors should be aware that this specication is not stable. Implementors who are not taking part in the discussions are likely to nd the specication changing out from under them in incompatible ways. Vendors interested in implementing this specication before it eventually reaches the call for implementations should join the WHATWG mailing list and take part in the discussions. This specication is intended to replace (be the new version of) what was previously the HTML5, HTML4, XHTML1, and DOM2 HTML specications. 2 Table of contents 1 Introduction 16 1.1 Is this HTML5? 16 1.2 Background 16 1.3 Audience 16 1.4 Scope . 17 1.5 History . 17 1.6 Design notes 18 1.6.1 Serializability of script execution 18 1.6.2 Compliance with other specications 18 1.7 HTML vs XHTML . 19 1.8 Structure of this specication 19 1.8.1 How to read this specication .20 1.8.2 Typographic conventions 20 1.9 A quick introduction to HTML . 20 1.10 Conformance requirements for authors .22 1.10.1 Presentational markup 23 1.10.2 Syntax errors 23 1.10.3 Restrictions on content models and on attribute values .25 1.11 Recommended reading 27 2 Common infrastructure 28 2.1 Terminology . 28 2.1.1 Resources . 28 2.1.2 XML . 28 2.1.3 DOM trees . 29 2.1.4 Scripting 29 2.1.5 Plugins 29 2.1.6 Character encodings . 30 2.2 Conformance requirements . 30 2.2.1 Dependencies . 33 2.2.2 Extensibility 34 2.3 Case-sensitivity and string comparison . 35 2.4 Common microsyntaxes 36 2.4.1 Common parser idioms . 36 2.4.2 Boolean attributes 37 2.4.3 Keywords and enumerated attributes .37 2.4.4 Numbers . 37 2.4.4.1 Non-negative integers 37 2.4.4.2 Signed integers 38 2.4.4.3 Real numbers . 38 2.4.4.4 Percentages and lengths 40 2.4.4.5 Lists of integers 41 2.4.4.6 Lists of dimensions . 42 2.4.5 Dates and times 43 2.4.5.1 Months . 43 2.4.5.2 Dates 44 2.4.5.3 Times . 45 2.4.5.4 Local dates and times 46 2.4.5.5 Global dates and times 46 2.4.5.6 Weeks . 48 2.4.5.7 Vaguer moments in time 49 2.4.6 Colors 50 2.4.7 Space-separated tokens 52 2.4.8 Comma-separated tokens .53 2.4.9 References 54 2.4.10 Media queries . 54 2.5 URLs 54 2.5.1 Terminology 54 2.5.2 Dynamic changes to base URLs 56 2.5.3 Interfaces for URL manipulation 56 2.6 Fetching resources . 58 2.6.1 Protocol concepts 60 3 2.6.2 Encrypted HTTP and related security concerns .60 2.6.3 Determining the type of a resource 61 2.7 Common DOM interfaces . 61 2.7.1 Reecting content attributes in IDL attributes 61 2.7.2 Collections 63 2.7.2.1 HTMLCollection . 63 2.7.2.2 HTMLAllCollection . 64 2.7.2.3 HTMLFormControlsCollection 65 2.7.2.4 HTMLOptionsCollection 66 2.7.2.5 HTMLPropertiesCollection . 68 2.7.3 DOMTokenList 69 2.7.4 DOMSettableTokenList 71 2.7.5 Safe passing of structured data 71 2.7.6 DOMStringMap 72 2.7.7 DOM feature strings 73 2.7.8 Exceptions 74 2.7.9 Garbage collection 74 2.8 Namespaces 74 3 Semantics, structure, and APIs of HTML documents . 75 3.1 Documents 75 3.1.1 Documents in the DOM . 75 3.1.2 Security . 77 3.1.3 Resource metadata management . 77 3.1.4 DOM tree accessors 80 3.1.5 Creating documents 83 3.2 Elements 84 3.2.1 Semantics . 84 3.2.2 Elements in the DOM 85 3.2.3 Global attributes . 87 3.2.3.1 The id attribute . 89 3.2.3.2 The title attribute 89 3.2.3.3 The lang and xml:lang attributes .89 3.2.3.4 The xml:base attribute (XML only) 90 3.2.3.5 The dir attribute 90 3.2.3.6 The class attribute 91 3.2.3.7 The style attribute 91 3.2.3.8 Embedding custom non-visible data 92 3.2.4 Element denitions . 94 3.2.5 Content models . 94 3.2.5.1 Kinds of content . 95 3.2.5.1.1 Metadata content 95 3.2.5.1.2 Flow content 96 3.2.5.1.3 Sectioning content . 96 3.2.5.1.4 Heading content 96 3.2.5.1.5 Phrasing content . 96 3.2.5.1.6 Embedded content 97 3.2.5.1.7 Interactive content 97 3.2.5.2 Transparent content models . 98 3.2.5.3 Paragraphs . 98 3.2.6 Annotations for assistive technology products (ARIA) .100 3.3 APIs in HTML documents 103 3.4 Interactions with XPath and XSLT . 104 3.5 Dynamic markup insertion . 105 3.5.1 Opening the input stream . 105 3.5.2 Closing the input stream . 106 3.5.3 document.write() . 107 3.5.4 document.writeln() . 108 3.5.5 innerHTML . 108 3.5.6 outerHTML . 109 3.5.7 insertAdjacentHTML() 109 4 The elements of HTML 112 4.1 The root element . 112 4.1.1 The html element . 112 4 4.2 Document metadata 112 4.2.1 The head element . 112 4.2.2 The title element . 113 4.2.3 The base element . 114 4.2.4 The link element . 115 4.2.5 The meta element . 119 4.2.5.1 Standard metadata names . 120 4.2.5.2 Other metadata names 121 4.2.5.3 Pragma directives 122 4.2.5.4 Other pragma directives 125 4.2.5.5 Specifying the document's character encoding .125 4.2.6 The style element . 126 4.2.7 Styling . 128 4.3 Scripting 129 4.3.1 The script element . 129 4.3.1.1 Scripting languages 134 4.3.1.2 Restrictions for contents of script elements 135 4.3.1.3 Inline documentation for external scripts . 136 4.3.2 The noscript element 136 4.4 Sections . 138 4.4.1 The body element . 138 4.4.2 The section element . 140 4.4.3 The nav element . 142 4.4.4 The article element . 144 4.4.5 The aside element . 145 4.4.6 The h1, h2, h3, h4, h5, and h6 elements . 147 4.4.7 The hgroup element . 148 4.4.8 The header element . 148 4.4.9 The footer element . 150 4.4.10 The address element . 151 4.4.11 Headings and sections 152 4.4.11.1 Creating an outline . 153 4.5 Grouping content . 157 4.5.1 The p element . 157 4.5.2 The hr element . 158 4.5.3 The pre element . 158 4.5.4 The blockquote element 159 4.5.5 The ol element . 161 4.5.6 The ul element . 162 4.5.7 The li element . 163 4.5.8 The dl element . 164 4.5.9 The dt element . 166 4.5.10 The dd element . 166 4.5.11 The figure element . 167 4.5.12 The figcaption element 168 4.5.13 The div element . 168 4.6 Text-level semantics 169 4.6.1 The a element . 169 4.6.2 The em element . 171 4.6.3 The strong element . 172 4.6.4 The small element . 173 4.6.5 The cite element . 174 4.6.6 The q element . 175 4.6.7 The dfn element . 176 4.6.8 The abbr element . 177 4.6.9 The time element . 178 4.6.10 The code element . 181 4.6.11 The var element . 182 4.6.12 The samp element . 182 4.6.13 The kbd element . 183 4.6.14 The sub and sup elements 184 4.6.15 The i element . 184 4.6.16 The b element . 185 4.6.17 The mark element . 186 4.6.18 The ruby element . 188 5 4.6.19 The rt element . 189 4.6.20 The rp element . 189 4.6.21 The bdo element . 190 4.6.22 The span element . 191 4.6.23 The br element . 191 4.6.24 The wbr element . 192 4.6.25 Usage summary 192 4.7 Edits . 193 4.7.1 The ins element . 193 4.7.2 The del element . 194 4.7.3 Attributes common to ins and del elements .195 4.7.4 Edits and paragraphs 195 4.7.5 Edits and lists 196 4.8 Embedded content 196 4.8.1 The img element . 196 4.8.1.1 Requirements for providing text to act as an alternative for images .202 4.8.1.1.1 A link or button containing nothing but the image 202 4.8.1.1.2 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations 202 4.8.1.1.3 A short phrase or label with an alternative graphical representation: icons, logos .203 4.8.1.1.4 Text that has been rendered to a graphic for typographical eect 204 4.8.1.1.5 A graphical representation of some of the surrounding text . 205 4.8.1.1.6 A purely decorative image that doesn't add any information .206 4.8.1.1.7 A group of images that form a single larger picture with no links 206 4.8.1.1.8 A group of images that form a single larger picture with links 206 4.8.1.1.9 A key part of the content . 207 4.8.1.1.10 An image not intended for the user .209 4.8.1.1.11 An image in an e-mail or private document intended for a specic person who is known to be able to view images .209 4.8.1.1.12 General guidelines .210 4.8.1.1.13 Guidance for markup generators .210 4.8.1.1.14 Guidance for conformance checkers .210 4.8.2 The iframe element . 211 4.8.3 The embed element . 217 4.8.4 The object element . 220 4.8.5 The param element . 224 4.8.6 The video element . 225 4.8.7 The audio element . 228 4.8.8 The source element . 229 4.8.9 Media elements . 231 4.8.9.1 Error codes . 232 4.8.9.2 Location of the media resource 232 4.8.9.3 MIME types .233 4.8.9.4 Network states . 234 4.8.9.5 Loading the media resource . 234 4.8.9.6 Osets into the media resource .241 4.8.9.7 The ready states 242 4.8.9.8 Playing the media resource 244 4.8.9.9 Seeking 247 4.8.9.10 User interface . 248 4.8.9.11 Time ranges . 249 4.8.9.12 Event summary 249 4.8.9.13 Security and privacy considerations 251 4.8.10 The canvas element . 251 4.8.10.1 The 2D context . 254 4.8.10.1.1 The canvas state . 256 4.8.10.1.2 Transformations . 257 4.8.10.1.3 Compositing 257 4.8.10.1.4 Colors and styles .259 6 4.8.10.1.5 Line styles . 261 4.8.10.1.6 Shadows 263 4.8.10.1.7 Simple shapes (rectangles) .264 4.8.10.1.8 Complex shapes (paths) 264 4.8.10.1.9 Focus management .267 4.8.10.1.10 Text 269 4.8.10.1.11 Images . 272 4.8.10.1.12 Pixel manipulation . 274 4.8.10.1.13 Drawing model 277 4.8.10.1.14 Examples .278 4.8.10.2 Color spaces and color correction 278 4.8.10.3 Security with canvas elements 279 4.8.11 The map element . 279 4.8.12 The area element . 280 4.8.13 Image maps 282 4.8.13.1 Authoring . 282 4.8.13.2 Processing model . 283 4.8.14 MathML . 285 4.8.15 SVG . 285 4.8.16 Dimension attributes 286 4.9 Tabular data . 286 4.9.1 The table element . 286 4.9.2 The caption element . 292 4.9.3 The colgroup element 293 4.9.4 The col element . 294 4.9.5 The tbody element . 294 4.9.6 The thead element . 295 4.9.7 The tfoot element . 296 4.9.8 The tr element . 296 4.9.9 The td element . 298 4.9.10 The th element . 298 4.9.11 Attributes common to td and th elements . 300 4.9.12 Processing model 301 4.9.12.1 Forming a table 301 4.9.12.2 Forming relationships between data cells and header cells .305 4.9.13 Examples 306 4.10 Forms . 309 4.10.1 Introduction . 309 4.10.1.1 Writing a form's user interface .309 4.10.1.2 Implementing the server-side processing for a form 311 4.10.1.3 Conguring a form to communicate with a server .311 4.10.1.4 Client-side form validation . 312 4.10.2 Categories . 313 4.10.3 The form element . 314 4.10.4 The fieldset element 317 4.10.5 The legend element . 318 4.10.6 The label element . 319 4.10.7 The input element . 320 4.10.7.1 States of the type attribute . 324 4.10.7.1.1 Hidden state 324 4.10.7.1.2 Text state and Search state .325 4.10.7.1.3 Telephone state .325 4.10.7.1.4 URL state .326 4.10.7.1.5 E-mail state . 327 4.10.7.1.6 Password state 327 4.10.7.1.7 Date and Time state 328 4.10.7.1.8 Date state 329 4.10.7.1.9 Month state . 330 4.10.7.1.10 Week state . 330 4.10.7.1.11 Time state . 331 4.10.7.1.12 Local Date and Time state .332 4.10.7.1.13 Number state 333 4.10.7.1.14 Range state . 334 4.10.7.1.15 Color state . 336 4.10.7.1.16 Checkbox state 336 7 4.10.7.1.17 Radio Button state .337 4.10.7.1.18 File Upload state 338 4.10.7.1.19 Submit Button state 339 4.10.7.1.20 Image Button state 339 4.10.7.1.21 Reset Button state . 341 4.10.7.1.22 Button state .341 4.10.7.2 Common input element attributes 342 4.10.7.2.1 The autocomplete attribute 342 4.10.7.2.2 The list attribute .342 4.10.7.2.3 The readonly attribute .344 4.10.7.2.4 The size attribute .344 4.10.7.2.5 The required attribute .344 4.10.7.2.6 The multiple attribute .345 4.10.7.2.7 The maxlength attribute .346 4.10.7.2.8 The pattern attribute . 346 4.10.7.2.9 The min and max attributes 346 4.10.7.2.10 The step attribute .347 4.10.7.2.11 The placeholder attribute 348 4.10.7.3 Common input element APIs . 348 4.10.7.4 Common event behaviors 350 4.10.8 The button element . 351 4.10.9 The select element . 353 4.10.10 The datalist element 356 4.10.11 The optgroup element 357 4.10.12 The option element . 358 4.10.13 The textarea element 360 4.10.14 The keygen element . 363 4.10.15 The output element . 366 4.10.16 The progress element 367 4.10.17 The meter element . 369 4.10.18 Association of controls and forms . 373 4.10.19 Attributes common to form controls .374 4.10.19.1 Naming form controls . 374 4.10.19.2 Enabling and disabling form controls .374 4.10.19.3 A form control's value 374 4.10.19.4 Autofocusing a form control .374 4.10.19.5 Limiting user input length 375 4.10.19.6 Form submission 375 4.10.20 Constraints 376 4.10.20.1 Denitions 376 4.10.20.2 Constraint validation 377 4.10.20.3 The constraint validation API 378 4.10.20.4 Security 380 4.10.21 Form submission . 380 4.10.21.1 Introduction 380 4.10.21.2 Implicit submission . 381 4.10.21.3 Form submission algorithm 381 4.10.21.4 URL-encoded form data 385 4.10.21.5 Multipart form data 386 4.10.21.6 Plain text form data 386 4.10.22 Resetting a form . 387 4.10.23 Event dispatch 387 4.11 Interactive elements 387 4.11.1 The details element . 387 4.11.2 The summary element . 390 4.11.3 The command element . 391 4.11.4 The menu element . 393 4.11.4.1 Introduction 393 4.11.4.2 Building menus and toolbars 394 4.11.4.3 Context menus .395 4.11.4.4 Toolbars 396 4.11.5 Commands 396 4.11.5.1 Using the a element to dene a command 398 4.11.5.2 Using the button element to dene a command .398 4.11.5.3 Using the input element to dene a command .398 8 4.11.5.4 Using the option element to dene a command .399 4.11.5.5 Using the command element to dene a command .399 4.11.5.6 Using the accesskey attribute on a label element to dene a command . 400 4.11.5.7 Using the accesskey attribute on a legend element to dene a command . 400 4.11.5.8 Using the accesskey attribute to dene a command on other elements 401 4.11.6 The device element . 401 4.11.6.1 Stream API . 402 4.11.6.2 Peer-to-peer connections . 402 4.12 Links 404 4.12.1 Hyperlink elements . 404 4.12.2 Following hyperlinks 405 4.12.2.1 Hyperlink auditing 405 4.12.3 Link types . 406 4.12.3.1 Link type "alternate" . 407 4.12.3.2 Link type "archives" . 408 4.12.3.3 Link type "author" . 408 4.12.3.4 Link type "bookmark" . 409 4.12.3.5 Link type "external" . 409 4.12.3.6 Link type "help" . 409 4.12.3.7 Link type "icon" . 409 4.12.3.8 Link type "license" . 410 4.12.3.9 Link type "nofollow" . 411 4.12.3.10 Link type "noreferrer" 411 4.12.3.11 Link type "pingback" . 411 4.12.3.12 Link type "prefetch" . 412 4.12.3.13 Link type "search" . 412 4.12.3.14 Link type "stylesheet" 412 4.12.3.15 Link type "sidebar" . 412 4.12.3.16 Link type "tag" . 412 4.12.3.17 Hierarchical link types 412 4.12.3.17.1 Link type "index" 413 4.12.3.17.2 Link type "up" 413 4.12.3.18 Sequential link types 413 4.12.3.18.1 Link type "first" 414 4.12.3.18.2 Link type "last" 414 4.12.3.18.3 Link type "next" 414 4.12.3.18.4 Link type "prev" 414 4.12.3.19 Other link types 414 4.13 Common idioms without dedicated elements 415 4.13.1 Tag clouds . 415 4.13.2 Conversations . 416 4.13.3 Footnotes 417 4.14 Matching HTML elements using selectors 418 4.14.1 Case-sensitivity . 418 4.14.2 Pseudo-classes 419 5 Microdata . 422 5.1 Introduction . 422 5.1.1 Overview . 422 5.1.2 The basic syntax . 422 5.1.3 Typed items . 424 5.1.4 Global identiers for items 424 5.1.5 Selecting names when dening vocabularies .425 5.1.6 Using the microdata DOM API . 425 5.2 Encoding microdata . 427 5.2.1 The microdata model 427 5.2.2 Items . 427 5.2.3 Names: the itemprop attribute . 428 5.2.4 Values . 429 5.2.5 Associating names with items . 429 5.3 Microdata DOM API 431 5.4 Microdata vocabularies 432 9 5.4.1 vCard 432 5.4.1.1 Conversion to vCard . 441 5.4.1.2 Examples 445 5.4.2 vEvent . 446 5.4.2.1 Conversion to iCalendar . 450 5.4.2.2 Examples 452 5.4.3 Licensing works . 453 5.4.3.1 Conversion to RDF 454 5.4.3.2 Examples 454 5.5 Converting HTML to other formats . 454 5.5.1 JSON 454 5.5.2 RDF . 455 5.5.2.1 Examples 458 5.5.3 Atom . 459 6 Loading Web pages 463 6.1 Browsing contexts . 463 6.1.1 Nested browsing contexts . 463 6.1.1.1 Navigating nested browsing contexts in the DOM 464 6.1.2 Auxiliary browsing contexts 465 6.1.2.1 Navigating auxiliary browsing contexts in the DOM .465 6.1.3 Secondary browsing contexts . 465 6.1.4 Security . 465 6.1.5 Groupings of browsing contexts 465 6.1.6 Browsing context names . 466 6.2 The Window object . 467 6.2.1 Security . 469 6.2.2 APIs for creating and navigating browsing contexts by name .470 6.2.3 Accessing other browsing contexts .471 6.2.4 Named access on the Window object . 471 6.2.5 Garbage collection and browsing contexts .472 6.2.6 Browser interface elements 472 6.2.7 The WindowProxy object . 473 6.3 Origin . 474 6.3.1 Relaxing the same-origin restriction . 476 6.4 Session history and navigation 478 6.4.1 The session history of browsing contexts . 478 6.4.2 The History interface 478 6.4.3 The Location interface . 482 6.4.3.1 Security 483 6.4.4 Implementation notes for session history . 484 6.5 Browsing the Web 484 6.5.1 Navigating across documents . 484 6.5.2 Page load processing model for HTML les . 488 6.5.3 Page load processing model for XML les .488 6.5.4 Page load processing model for text les 489 6.5.5 Page load processing model for images 489 6.5.6 Page load processing model for content that uses plugins .489 6.5.7 Page load processing model for inline content that doesn't have a DOM .490 6.5.8 Navigating to a fragment identier . 490 6.5.9 History traversal . 491 6.5.9.1 Event denitions 492 6.5.10 Unloading documents . 494 6.5.10.1 Event denition 495 6.5.11 Aborting a document load . 495 6.6 Oine Web applications 495 6.6.1 Introduction . 495 6.6.1.1 Event summary 496 6.6.2 Application caches 497 6.6.3 The cache manifest syntax . 498 6.6.3.1 A sample manifest .498 6.6.3.2 Writing cache manifests . 499 6.6.3.3 Parsing cache manifests . 501 6.6.4 Downloading or updating an application cache 503 6.6.5 The application cache selection algorithm 509 10 . (non-editorial changes only): http://twitter .com/ WHATWG Commit-Watchers mailing list: http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org Interactive. if not hourly basis in response to comments and as a general part of its development process. Comments are very welcome, please send them to whatwg@whatwg.org.