Tài liệu HTML & CSS: The Complete Reference- P5 doc

176 P a r t I : C o r e M a r k u p 176 P a r t I : C o r e M a r k u p <p>The new HTML5 specification is in the works. While many features are not currently implemented or even well defined yet, progress is being made. Stay tuned to see more new HTML elements added to your Web documents in the years to come.</p> </article> <p>There are other things in this page.</p> Compatibility HTML5 Not currently supported by any browser, but can be addressed with a custom element. Notes • Early versions of this tag supported pubdate and cite attributes but these were removed later in favor of nested <time> tags. • It is possible to nest <article> tags and the relationship should logically relate to the parent <article> subject matter. • This element is not directly implemented in any browser. However, given that most browsers can handle custom elements, it is easy enough to simulate the idea of it and even apply a CSS display property for it. <aside> (Aside) This HTML5 element defines a section of a document that encloses content that is tangentially related to the other content the element may be associated with. A simple example of this element in action might be to specify sidebar content. HTML5 Standard Syntax <aside accesskey="spaced list of accelerator key(s)" class="class name(s)" contenteditable="true | false | inherit" contextmenu="id of menu" data-X="user-defined data" dir="ltr | rtl" draggable="true | false | auto" hidden="hidden" id="unique alphanumeric identifier" itemid="microdata id in URL format" itemprop="microdata value" itemref="space-separated list of IDs that may contain microdata" itemscope="itemscope" itemtype="microdata type in URL format" lang="language code" spellcheck="true | false" style="style information" tabindex="number" title="advisory text"> </aside> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 177 C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 177 PART I HTML5 Event Attributes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting Example <p>This is the main point I am trying to make.</p> <aside>This is an aside I don't really know how important it is to make, but I love to make asides.</aside> <p>Ok now back to the point I was making.</p> Compatibility HTML5 Not currently supported by any browser, but can be addressed with a custom element. Notes • This element is not yet directly implemented in any browser. However, given that most browsers can handle custom elements, it is easy enough to simulate the idea of it and even apply a CSS display property for it. • This element will affect HTML5’s outlining algorithm; see Chapter 2 for an example of this scheme. <audio> (Audio) This HTML5 element includes audio in a document. HTML5 Standard Syntax <audio accesskey="spaced list of accelerator key(s)" autobuffer="autobuffer" autoplay="autoplay" class="class name(s)" contenteditable="true | false | inherit" contextmenu="id of menu" controls="controls" data-X="user-defined data" dir="ltr | rtl" draggable="true | false | auto" hidden="hidden" id="unique alphanumeric identifier" itemid="microdata id in URL format" itemprop="microdata value" itemref="space-separated list of IDs that may contain microdata" itemscope="itemscope" Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 178 P a r t I : C o r e M a r k u p 178 P a r t I : C o r e M a r k u p itemtype="microdata type in URL format" lang="language code" loop="loop" spellcheck="true | false" style="style information" tabindex="number" title="advisory text"> </audio> HTML5 Event Attributes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting Element-Specific Attributes autobuffer This Boolean attribute indicates whether or not the browser should begin buffering audio right away. It is often set when it is believed that the audio will be played. This is valuable when autoplay is not set, but the attribute has no meaning if autoplay is set since the browser will play the audio as soon as it can. autoplay This Boolean attribute indicates the browser should begin playing the audio as soon after page load once it has loaded enough of the audio to avoid pausing. controls This Boolean attribute is set to indicate whether or not the browser should present the controls for audio, such as playback, pause, volume, and seek. If not present, no controls will be shown and it will be up to the developer to script the control of the media playback. When no controls are present, the audio element will not be visually presented. loop This Boolean attribute, if present, indicates that the audio should loop. src This attribute is set to the URL of the audio to show. Examples <audio src="music.ogg" autoplay> <p>No support for HTML5 <code>audio</code> element.</p> </audio> <audio src="music.ogg" loop controls> <p>No support for HTML5 <code>audio</code> element.</p> </audio> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 179 C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 179 PART I <audio id="audio3"> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3"> <p>No support for HTML5 <code>audio</code> element.</p> </audio> <! Trick to make sound in IE browsers > <audio src="music.wav"> <bgsound src="music.wav"> </audio> Compatibility HTML5 Firefox 3.5+, Safari 3.1+ Notes • Alternate content should be placed inside of the audio element for browsers that do not support it. • Having the correct MIME types on hosted media files is key for playback. You should also make sure the media types used work in the browsers targeted, because currently this varies even when the audio element is supported. • Flash will often be used to avoid cross-browser audio concerns. Until this element is widely supported, developers are advised to continue to use Flash or to rely on elements like bgsound. <b> (Bold) This inline element indicates that the enclosed text should be displayed in boldface. Standard Syntax <b class="class name(s)" dir="ltr | rtl" id="unique alphanumeric identifier" lang="language code" style="style information" title="advisory text"> </b> Attributes Introduced by HTML5 accesskey="spaced list of accelerator key(s)" contenteditable="true | false | inherit" contextmenu="id of menu" data-X="user-defined data" draggable="true | false | auto" hidden="hidden" itemid="microdata id in URL format" itemprop="microdata value" itemref="space-separated list of IDs that may contain microdata" Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 180 P a r t I : C o r e M a r k u p 180 P a r t I : C o r e M a r k u p itemscope="itemscope" itemtype="microdata type in URL format" spellcheck="true | false" tabindex="number" Attributes Defined by Internet Explorer accesskey="key" (5.5) contenteditable="false | true | inherit" (5.5) disabled="false | true" (5.5) hidefocus="true | false" (5.5) language="javascript | jscript | vbs | vbscript" (4) tabindex="number" (5.5) unselectable="off | on" (5.5) HTML 4 Event Attributes onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup HTML5 Event Attributes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting Events Defined by Internet Explorer onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart, ontimeerror Example <p>This text is <b>bold</b> for some reason.</p> Compatibility HTML 2, 3.2, 4, 4.01, 5 XHTML 1.0, 1.1 Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+ Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 181 C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 181 PART I Notes • HTML 2 and 3.2 do not define any attributes for this element. • Modern markup specifications encourage developers to use a <strong> tag instead of <b>. <base> (Base URL) This empty element found within the head element specifies the base URL stem to be used for all relative URLs contained within a document. Standard Syntax <base href="URL" target="frame or window name | _blank | _parent | _self | _top" (transitional only)> Attributes Introduced by HTML5 accesskey="spaced list of accelerator key(s)" contenteditable="true | false | inherit" contextmenu="id of menu" data-X="user-defined data" draggable="true | false | auto" hidden="hidden" itemid="microdata id in URL format" itemprop="microdata value" itemref="space-separated list of IDs that may contain microdata" itemscope="itemscope" itemtype="microdata type in URL format" spellcheck="true | false" tabindex="number" Attributes Defined by Internet Explorer id="unique alphanumeric identifier" (4) HTML5 Event Attributes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting Events Defined by Internet Explorer onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 182 P a r t I : C o r e M a r k u p 182 P a r t I : C o r e M a r k u p Element-Specific Attributes href This attribute specifies the base URL to be used throughout the document for relative URL addresses. target For documents containing frames, this attribute specifies the default target window for every link that does not have an explicit target reference. Aside from named frames or windows, several special values exist. A value of _blank indicates a new window. A value of _parent indicates the parent frame set containing the source link. A value of _self indicates the frame containing the source link. A value of _top indicates the full browser window. Examples <! standard HTML syntax > <base href="http://www.htmlref.com/"> < XHTML syntax > <base href="http://www.htmlref.com/" /> <! with frames > <base target="_blank" href="http://www.htmlref.com/"> Compatibility HTML 2, 3.2, 4, 4.01, 5 XHTML 1.0, 1.1, Basic Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 4+, Safari 1+ Notes • This element should only occur within the head element. • HTML 2.0 and 3.2 define only the href attribute. • Under XHTML variants and HTML5 using XML-syntax, this empty element requires a trailing slash: <base />. • HTML5’s current draft specification specifies all common attributes and events, but frankly many of these make little sense for this element. HTML 4 did not define them for good reason, so it is likely this may be modified back to a syntax closer to that of the HTML 4 specification. <basefont> (Base Font) This element establishes a default font size for a document. Font size then can be varied relative to the base font size by using the font element. Standard Syntax (Transitional Only) <basefont color="color name | #RRGGBB" face="font name(s)" id="unique alphanumeric identifier" size="1-7 | +/-int"> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 183 C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 183 PART I Attributes Defined by Internet Explorer id="unique alphanumeric identifier" (4) Events Defined by Internet Explorer onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange Element-Specific Attributes color This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. face This attribute contains a list of one or more font names. The document text in the default style is rendered in the first font face that the client’s browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system. size This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7, with 1 being the smallest and 3 the default. Relative values start with + or –, followed by a digit, and modify the current size appropriately. Resulting values above 7 become 7 and below 1 become 1. Example <! Standard HTML syntax > <basefont color="#ff0000" face="Helvetica" size="+2"> <! XHTML style syntax > <basefont color="#ff0000" face="Helvetica" size="+2" /> Compatibility HTML 2, 3.2, 4, 4.01 (transitional) XHTML 1.0 (transitional) Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 4+, Safari 1+ Notes • HTML 3.2 supports the basefont element but only with the size attribute. • The (X)HTML strict and HTML5 specifications do not support this element. • This element can be imitated with a CSS rule on the body element. • Transitional XHTML 1.0 requires a trailing slash for this empty element: <basefont />. <bdo> (Bidirectional Override) This element is used to override the current directionality of text. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 184 P a r t I : C o r e M a r k u p 184 P a r t I : C o r e M a r k u p Standard Syntax <bdo class="class name(s)" dir="ltr | rtl" id="unique alphanumeric identifier" lang="language code" style="style information" title="advisory text"> </bdo> Attributes Introduced by HTML5 accesskey="spaced list of accelerator key(s)" contenteditable="true | false | inherit" contextmenu="id of menu" data-X="user-defined data" draggable="true | false | auto" hidden="hidden" itemid="microdata id in URL format" itemprop="microdata value" itemref="space-separated list of IDs that may contain microdata" itemscope="itemscope" itemtype="microdata type in URL format" spellcheck="true | false" tabindex="number" Attributes Defined by Internet Explorer accesskey="key" (5.5) contenteditable="inherit | false | true" (5.5) disabled="false | true" (5.5) hidefocus="true | false" (5.5) language="javascript | jscript | vbs | vbscript | xml" (5.0) tabindex="number" (5.5) unselectable="off | on" (5.5) HTML 4 Event Attributes onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup HTML5 Event Attributes onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 185 C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e 185 PART I Events Defined by Internet Explorer onactivate, onafterupdate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onbeforeupdate, onblur, oncellchange, oncontextmenu, oncontrolselect, onclick, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onscroll, onselectstart Example <! Switch text direction > <p>Some other text here <bdo dir="rtl">This text will go right to left in a browser that supports this element</bdo> some more text here.</p> Compatibility HTML 4, 4.01, 5 XHTML 1.0, 1.1 Firefox 1+, Internet Explorer 5+, Netscape 6+, Opera 7+, Safari 2+ Note • The HTML 4 specification did not specify events for this element; they were added later, so this likely was simply an oversight. <bgsound> (Background Sound) This Internet Explorer element associates a background sound with a page. Common Syntax (Defined by Internet Explorer) <bgsound balance="number" id="unique alphanumeric identifier" loop="number" src="URL of sound file" volume="number"> Events Defined by Internet Explorer onlayoutcomplete, onmouseenter, onmouseleave, onreadystatechange Element-Specific Attributes balance This attribute defines a number between –10,000 and +10,000 that determines how the volume will be divided between the speakers. loop This attribute indicates the number of times a sound is to be played and has either a positive numeric value or –1 to specify that it will continuously loop. The keyword infinite is also supported in many Internet Explorer implementations. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Sets the type of endings that are put on lines The choices are butt, round, and square A value of butt indicates that there is a flat edge at the end of the specified line A value of round adds a semicircle with a diameter the width of the line to the end of the line A value of square adds a rectangle with a width half of the line’s width and a length equal to the line’s width at the end of the line The. .. defined by radius The start point is defined as the point on the arc where the angle is startAngle, and the end point is the point on the arc where the angle is endAngle The actual arc is drawn along the circumference between the two points either clockwise or counterclockwise depending on the setting context.arc(115,120,5,0, Math.PI*2,true); arcTo (x1, y1, x2, y2, radius) Draws an arc with the radius radius... or off The default value is yes text This attribute sets the text color for the document Its value can be either a named color like red or a color specified using the hexadecimal #RRGGBB format The CSS property color should be used on the body element instead of this attribute topmargin This Internet Explorer–specific attribute sets the top margin for the document, in pixels If set to 0 or "", the top... defaults set by the user • Under the strict HTML and XHTML definitions as well as HTML5 , CSS should be used in place of presentation attributes like alink, background, bgcolor, link, text, and vlink • This element must be present in all documents except those declaring a frame set • Under XHTML, the closing tag is mandatory • HTML5 returns to the old style of making the element optional • HTML5 currently... sets the color for active links within the document Active links represent the state of a link as it is being clicked The value of the attribute can be either a named color like red or a color specified in the hexadecimal #RRGGBB format like #FF0000 The CSS pseudo-class a:active should be used instead background This attribute contains a URL for an image file, which will be tiled to provide the document... one form to trigger actions in others formaction This HTML5 attribute specifies a URL to target when the button is clicked, similar to the use of the action attribute on a form element formenctype Under HTML5 this attribute is set to the MIME type for how data should be transmitted to the URL specified in the action attribute Common values include Chapter 3: HTML and XHTML Element Reference 197 application/x-www-form-urlencoded... hyperlinks within the document that have not yet been visited Its value can be either a browser-dependent named color or a color specified using the hexadecimal #RRGGBB format The CSS pseudo-class a:link should be used instead marginheight This Netscape-specific attribute sets the top margin for the document, in pixels If set to 0 or "", the top margin will be exactly on the top edge of the window or frame... until they meet A value of round indicates that corners should be rounded when lines meet The arc has a diameter equal to the width of the line The default is miter context.lineJoin = "round"; lineWidth Sets the width of the lines The default value is 1 context.lineWidth = 5; miterLimit Sets the max length that a line will be extended if lineJoin is set to miter If the length necessary to join the lines... than the miterLimit, the join will not occur The default is 10 context.miterLimit = 1; TABLE 3-16 canvas Line Properties Name Description Example shadowBlur Sets the size of the blurring effect The default value is 0 context.shadowBlur = 4; shadowColor Sets the color of the shadow The default is transparent black context.shadowColor = "rgba(255, 48, 48, 0.5)"; shadowOffsetX Sets the distance that the. .. Attributes cite The value of this attribute should be a URL for the document in which the information cited can be found Example We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable rights, that among these are life, liberty and the pursuit of . line.</p> <p>XHTML<br />syntax!</p> <address> PINT Inc.<br> 2105 Garnet Ave<br> San Diego, CA 92109<br> </address> Compatibility HTML. link="blue" vlink="red" text="black"> </body> <body onload="myLoadFunction()"> </body> <body>