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

HTML5 Event Attributesonabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, on

Trang 1

• The facilities of this element are better handled using the CSS multicolumn properties discussed in Chapter 6.

<nav> (Navigation) This HTML5 element represents a group of links to other locations either inside or outside

of a document.

HTML5 Standard Syntax

<nav accesskey="spaced list of accelerator key(s)"

id="unique alphanumeric identifier"

itemid="microdata id in URL format"

Trang 2

• Links are not restricted to occur solely within <nav> tags The intent of this element

is that it collects navigation together often as a unit; commonly this would be primary

or secondary site navigation or possibly page-related links.

• While this element is not yet supported, it is easily simulated by using a custom tag

or using a <div> tag with a special class.

<nobr> (No Line Breaks) This proprietary element renders enclosed text without line breaks Break points for where text may wrap can be inserted using the wbr element or related workarounds.

Common Syntax

<nobr class="class name(s)"

disabled="false | true" (5.5) unselectable="on | off" (5.5)Events Defined by Internet Exploreronbeforeactivate, onbeforecopy, onbeforecut, onbeforeedit, onbeforepaste, oncopy, oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocusin, onfocusout, onhelp, onlosecapture, onmouseenter, onmouseleave, onmousewheel, onpaste, onpropertychange, onreadystatechange, onscroll, onselectstart

Trang 3

<nobr>This really long text will not be broken.</nobr>

<nobr>With this element it is often important to hint where a line may

be broken using <wbr>.<wbr> This element acts as a soft return.</

nobr>

Compatibility

No standards support Firefox 1+, Internet Explorer 4+, Netscape 1.1+, Opera 4+

Notes

• While many browsers support this attribute, it is not part of any W3C standard.

• See the “<wbr> (Word Break)” section later in the chapter for a discussion of how to implement soft-break functionality without the proprietary wbr element.

<noembed> (No Embedded Media Support) This Netscape-introduced element is used to indicate alternative content to be displayed on browsers that cannot support an embedded media object It should occur in conjunction with the embed element.

Proprietary Syntax (Initially Defined by Netscape)

<noembed class="class name"

Example

<embed src="trailer.mov" height="300" width="300">

<noembed>

<img src="error.gif" alt="Error">

<p>This browser is not configured to display video</p>

Trang 4

Note

• Even if other browsers do not support the tag and render the contents of a

unknown elements.

<noframes> (No Frame Support Content) This element is used to indicate alternative content to be displayed on browsers that do not support frames.

Standard Syntax

<noframes class="class name(s)"

Event Defined by Internet Exploreronreadystatechange

Example

<frameset rows="100,*">

<frame name="nav" src="controls.html">

<frame name="body" src="content.html">

• This element should be used within the scope of the frameset element.

• This element has no inclusion under HTML5 because standard frames are not included in that specification.

Trang 5

• The benefit of events and sophisticated attributes, such as style, is unclear for browsers that would use content within <noframes>, given that older browsers that don’t support frames probably would not support these features.

Syntax

contenteditable="true | false | inherit"

HTML5 Event Attributesonabort, 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

Trang 6

Firefox 1+, Internet Explorer 3+, Netscape 2+, Opera 4+, Safari 1+

Note

• Besides using the noscript element, it may be wise to employ a comment mask around any script code that is embedded rather than linked Oddly, under HTML 4

is allowed, though with a limited set of content within it and is not defined when XML syntax is used.

Standard Syntax

border="percentage | pixels" (transitional only)

Trang 7

name="unique alphanumeric name"

standby="standby text string"

HTML 4 Event Attributesonclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

Trang 8

Events Defined by Internet Exploreronactivate, onbeforedeactivate, onbeforeeditfocus, onblur, oncellchange, onclick, oncontrolselect, ondataavailable, ondatasetchanged,

ondatasetcomplete, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onlosecapture, onmove, onmoveend, onmovestart, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onrowenter, onrowexit, onrowsdelete, onrowsinserted, onscroll, onselectstart

Element-Specific Attributes align This attribute aligns the object with respect to the surrounding text The default is

left The HTML specification defines bottom, middle, right, and top, as well Browsers might provide an even richer set of alignment values The behavior of alignment for objects

is similar to images Under the strict HTML and XHTML specifications, the object element does not support this attribute.

archive This attribute contains a URL for the location of an archive file An archive file typically is used to contain multiple object files to improve the efficiency of access.

border This attribute specifies the width of the object’s borders, in pixels or as a percentage.

classid This attribute contains a URL for an object’s implementation The URL syntax depends upon the object’s type With ActiveX controls, the value of this attribute does not appear to be a URL but something of the form CLSID: object-id; for example, CLSID:

code Under the old Microsoft implementation, this attribute contains the URL referencing

a Java applet class file The way to access a Java applet under the HTML/XHTML specification is to use <object classid="java: classname.class"> The pseudo-URL

this style, so code should not be used.

codebase This attribute contains a URL to use as a relative base to access the object specified by the classid attribute.

codetype This attribute specifies an object’s MIME type Do not confuse this attribute with

type, which specifies the MIME type of the data the object may use, as defined by the data

attribute.

Trang 9

data This attribute contains a URL for data required by an object.

declare This attribute declares an object without instantiating it This is useful when the object will be a parameter to another object In traditional HTML, this attribute takes no value; under XHTML, set it equal to declare.

name Under the older forms of HTML, this attribute defines the name of the control so that scripting can access it The id attribute should be used if possible.

standby This attribute contains a text message to be displayed while the object is loading.

type This attribute specifies the MIME type for the object’s data This is different from

usemap This attribute contains the URL of the image map to be used with the object Typically, the URL will be a fragment identifier referencing a map element somewhere else within the file The presence of this attribute indicates that the type of object being included

is an image.

vspace This attribute indicates the vertical space, in pixels or as a percentage, between the object and surrounding text.

Examples

<! Using XHTML syntax with trailing slashes here >

<object id="IeLabel1" width="325" height="65"

classid="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">

<param name="_ExtentX" value="6879" />

<param name ="_ExtentY" value="1376" />

<param name="Caption" value="Hello World" />

<param name="Alignment" value="4" />

<param name="Mode" value="1" />

<param name="ForeColor" value="#FF0000" />

<param name="FontName" value="Arial" />

<param name="FontSize" value="36" />

<b>Hello World for non-ActiveX users!</b>

value="Java is fun, exciting, and new.">

<param name="speed" value="2">

This will display in non-Java-aware or -enabled browsers

Trang 10

Compatibility

HTML 4, 4.01, 5 XHTML 1.0, 1.1, Basic

Notes

• Under the strict HTML and XHTML specifications, the object element loses most

of its presentation attributes, including align, border, height, hspace, vspace,

• The HTML 4.01 specification reserves the datafld, dataformatas, and datasrc

attributes for future use However, these attributes were dropped in XHTML, though they are well supported by Internet Explorer 4 and beyond.

• Alternative content should be defined within an <object> tag after any enclosed

• The object element is still mainly used to include multimedia binaries in pages

Although the specification defines that it can load in HTML files, insert a variety of other objects, and create image maps, not every browser supports this, and few developers are aware of these features In theory, this very versatile tag should take over duties from the venerable <img> tag in future specifications, though given the media-specific element trends of HTML5, this seems unlikely to happen.

<ol> (Ordered List) This element is used to define an ordered or numbered list of items The numbering style comes in many forms, including letters, Roman numerals, and regular numerals The individual items within the list are specified by li elements included with the ol element.

Standard Syntax

<ol class="class name(s)"

compact="compact" (transitional only) dir="ltr | rtl"

contextmenu="id of menu"

data-X="user-defined data"

Trang 11

draggable="true | false | auto"

hidefocus="true | false" (5.5) language="javascript | jscript | vbs | vbscript" (4) tabindex="number" (5.5)

unselectable="on | off" (5.5)HTML 4 Event Attributes

onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

Events Defined by Internet Exploreronactivate, 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, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart, ontimeerror

Element-Specific Attributes compact This attribute indicates that the list should be rendered in a compact style Few browsers actually change the rendering of the list, regardless of the presence of this attribute The compact attribute requires no value under traditional HTML but under XHTML should be set to compact.

Trang 12

reversed This HTML5 Boolean attribute specifies that the counting of the list should go in reverse order CSS counters provide much more functionality than this attribute, but it is useful in the absence of this more complicated syntax.

start This attribute specifies the start value for numbering the individual list items

Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number To start numbering elements

from the letter C, use <ol type="A" start="3">.

type This attribute indicates the numbering type: a indicates lowercase letters, A indicates uppercase letters, i indicates lowercase Roman numerals, I indicates uppercase Roman numerals, and 1 indicates numbers Type set in an ol element is used for the entire list unless a type attribute is used within an enclosed li element.

Examples

<ol type="1">

<li>First step

<ol>

<li>Watch nested lists</li>

<li>Often closed wrong</li>

Notes

• Under the strict HTML and XHTML specifications, the ol element no longer supports the compact, start, and type attributes These aspects of lists can be controlled with style sheet rules.

Trang 13

• HTML5 returns the start attribute to ordered lists and adds the reversed

attribute.

• Under the XHTML 1.0 specification, the compact attribute must have a quoted attribute value: <ol compact="compact">.

• The HTML 3.2 specification supports only the compact, start, and type attributes.

• The HTML 2.0 specification supports only the compact attribute.

<optgroup> (Option Grouping) This element specifies a grouping of items in a selection list defined by option elements so that the menu choices can be presented in a hierarchical menu or similar alternative fashion

to improve access through nonvisual browsers.

Standard Syntax

<optgroup class="class name(s)"

HTML5 Event Attributesonabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,

Trang 14

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 disabled Occurrence of this attribute indicates that the enclosed set of options is disabled.

label This attribute contains a short label to use when the selection list is rendered as items

<option id="choice1" value="Hong Kong">Hong Kong</option>

<optgroup label="South Pacific">

<option id="choice2" label="Australia" value="Australia">

Australia</option>

<option id="choice3" label="Fiji" value="Fiji">

Wakaya (Fiji Islands)</option>

<option id="choice4" value="New Zealand">

Notes

• This element should occur only within the context of a select element.

• The visual presentation of this element may vary slightly between browsers.

<option> (Option in Selection List) This element specifies an item in a selection list defined by a select element.

Standard Syntax

<option class="class name(s)"

dir="ltr | rtl"

disabled="disabled"

Trang 15

Events Defined by Internet Exploreronlayoutcomplete, onlosecapture, onpropertychange, onreadystatechange, onselectstart, ontimeerror

Element-Specific Attributes disabled Presence of this attribute indicates that the particular item is not selectable Traditional HTML did not require a value for this attribute, but it should be set to disabled

under XHTML.

Trang 16

value This attribute indicates the value to be included with the form result when the item

<option value="Mini Schnauzer" selected>Tucker</option>

<option value="Australian Shepard">Sabrina</option>

<option value="German Shepard">Lucky</option>

</select>

</p>

Compatibility

HTML 2, 3.2 4, 4.01, 5 XHTML 1.0, 1.1, Basic

Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+

Notes

• Under HTML specifications, the closing tag for <option> is optional However, for XHTML compatibility, the closing tag </option> is required.

• This element should occur only within the context of a select element.

• The HTML 2.0 and 3.2 specifications define only the selected and value attributes for this element.

<output> (Form Output) This HTML5 block element defines a region that will be used to display output from some calculation or form control.

<output accesskey="spaced list of accelerator key(s)"

draggable="true | false | auto"

for="list of spaced id values of related elements"

Trang 17

form="id of related form element"

hidden="hidden"

Element-Specific Attributes for This attribute should be set to the id value(s) of the elements that target this element.

form This attribute should be set to the id value of the form element that the output

element is associated with; otherwise, the nearest parent form is used.

name This attribute should set the name to be used in a name/value pair if the element is used in form submission.

Examples

<form action="#" method="get" id="testform">

<p><input type="date" id="year"

Trang 18

<p> (Paragraph) This block element is used to define a paragraph of text.

Standard Syntax

<p align="center | justify | left | right" (transitional only) class="class name(s)"

unselectable="on | off" (5.5)HTML 4 Event Attributes

Trang 19

Element-Specific Attribute align This attribute specifies the alignment of text within a paragraph The default value is

left The transitional specification of HTML 4.01 also defines center, justify, and

handled through the CSS property text-align.

Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+

Notes

• Because p is a block element, browsers typically insert a blank line, but this rendering should not be assumed, given the rise of style sheets, which can use the display property to override this action.

• Under the strict (X)HTML and HTML5 specifications, the align attribute is not supported Alignment of text can instead be accomplished using CSS properties like

Trang 20

• The closing tag for the <p> tag is optional under the HTML specification; however, under the XHTML 1.0 specification, the closing tag </p> is required for XHTML compatibility.

• As a logical element, empty paragraphs are ignored by browsers, so do not try to use multiple <p> tags in a row, like <p><p><p><p>, to add blank lines to a Web page.

• Often, nonbreaking space entities are used to hold open empty paragraphs, like so:

• The HTML 3.2 specification supports only the align attribute with values of

• The HTML 2.0 specification supports no attributes for the p element.

<param> (Object Parameter) This element specifies a parameter to be passed to an embedded object that is specified with

these elements.

Standard Syntax

<param id="unique alphanumeric identifier"

Trang 21

Element-Specific Attributes name This attribute contains the parameter’s name The name of the parameter depends

on the particular object being inserted into the page, and it is assumed that the object knows how to handle the passed data Do not confuse the name attribute for this element with the

name attribute used for form elements In the latter case, the name attribute does not have a similar meaning to id, but rather specifies the name of the data to be passed to an enclosing

type When the valuetype attribute is set to ref, the type attribute can be used to indicate the type of information to be retrieved Legal values for this attribute are in the form of MIME types, such as text/html.

value This attribute contains the parameter’s value The actual content of this attribute depends on the object and the particular parameter being passed in, as determined by the

name attribute.

valuetype This attribute specifies the type of the value attribute being passed in Possible values for this attribute include data, object, and ref A value of data specifies that the information passed in through the value parameter should be treated just as data A value

of ref indicates that the information being passed in is a URL that indicates where the data

to be used is located The information is not retrieved, but the URL is passed to the object, which then can retrieve the information if necessary The last value, object, indicates that the value being passed in is the name of an object as set by its id attribute In practice, the

data attribute is used by default.

Examples

<applet code="plot.class">

<param name="min" value="5">

<param name="max" value="30">

<param name="ticks" value=".5">

<param name="line-style" value="dotted">

Trang 22

<param id="param1" name="Movie" value="SplashLogo.swf" />

<param id="param2" name="Play" value="True" />

</object>

Compatibility

HTML 3.2, 4, 4.01, 5 XHTML 1.0, 1.1, Basic

HTML standard and should never be used.

Syntax (HTML 2; Deprecated Under HTML 4)

Attributes Defined by Internet Explorer accesskey="key" (5.5) class="class name(s)" (4) contenteditable="false | true | inherit" (5.5) disabled="false | true" (5.5)

dir="ltr | rtl" (4) hidefocus="true | false" (5.5) id="unique alphanumeric identifier" (4) lang="language code" (4)

language="javascript | jscript | vbs | vbscript" (4) style="style information" (4)

tabindex="number" (5.5) title="advisory text" (4)Example

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Even though this is supposed to be <b>bold</b>, the tags still show

There is no way to turn plain text off once it is on </plaintext>

does nothing to help Even </body> and </html> will show up.

Trang 23

Standard Syntax

<pre class="class name(s)"

Trang 24

Attributes Defined by Internet Explorer accesskey="key" (5.5) contenteditable="false | true | inherit" (5.5) disabled="false | true" (5.5)

wrap="soft | hard | off" (4)HTML 4 Event Attributes

Element-Specific Attributes width This attribute should be set to the width of the preformatted region The value of the attribute should be the number of characters to display In practice, this attribute is not supported and is dropped under the strict HTML 4.01 specification.

wrap In some versions of Microsoft browsers, this attribute controls word wrap behavior within a <pre> tag The default value of off for the attribute forces the element not to wrap text, so the viewer must manually enter line breaks A value of hard or soft causes word wrap and sets different types of line breaks in the wrapped text Given the nature of the pre

element, the value of this attribute is limited.

xml:space This attribute is included from XHTML 1.0 and is used to set whether spaces need

to be preserved within the element or the default whitespace handling should be employed

Trang 25

It is curious that an element defined to override traditional whitespace rules would allow such an attribute, and in practice this attribute is not used by developers.

Example

<pre>

Within PREFORMATTED text A L L formatting IS PRESERVED

NO m a t t e r how wild it is Remember that some

<b>HTML</b> markup is allowed within the <PRE> element

</pre>

Compatibility

HTML 2, 3.2, 4, 4.01, 5 XHTML 1.0, 1.1, Basic

Notes

• The HTML 4.01 and XHTML 1.0 transitional specifications state that the applet,

within a <pre> tag The strict HTML and XHTML specifications state that only the

the strict specification Although these elements should not be used, it appears that the more popular browsers will render them anyway.

• The strict HTML and XHTML specifications drop support for the width attribute, which was not well supported anyway.

• The HTML 2.0 and 3.2 specifications support only the width attribute for the pre

element.

<progress> (Progress Indicator) This HTML5 element defines completion progress for a task It is often thought to represent the percentage from 0 to 100% of some task, such as loading to be completed, though the range and the unit value are arbitrary.

<progress accesskey="spaced list of accelerator key(s)"

itemprop="microdata value"

itemref="space-separated list of IDs that may contain microdata" itemscope="itemscope"

Tiêu đề	HTML and XHTML Element Reference
Trường học	University of Information Technology
Chuyên ngành	HTML & CSS
Thể loại	reference book
Năm xuất bản	2024
Thành phố	Hanoi

Định dạng
Số trang	50
Dung lượng	409,48 KB