Hypertext Links and URLs Links can contain images and other inline elements (i.e.,
<div id="placeholder-for-ajax"></div> <input id="firstNameField" name="..."/>class A stylesheet class name
<p class="warning">...</p>This will have no effect unless the “warning” name is defined in your CSS file.
style An inline style
<p style="color: red; font-size: 18px;">Warning!</p>JavaScript event handlers onclick, onchange, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onkeypress, onkeydown, onkeyup These are used so that JavaScript can be invoked when the user takes certain actions
<input type="button" value="Click Me" onclick="doSomethingCool()"/>Lots more detail in the jQuery sections
pre: Preformatted Paragraphs
Characteristics Line wrapping disabled Whitespace no longer ignored Fixed-width font used Problem: Special Characters
<pre> if (a<b) { doThis(); } else { doThat(); } </pre>List ol: Ordered (Numbered) Lists Nested Ordered Lists
<ol type="I"> <li>Headings</li> <li>Basic Text Sections</li> <li>Lists <ol type="A"> <li>Ordered <ol type="1"> <li>The ol tag <ol type="a"> <li>type</li> <li>start</li> <li>compact</li> </ol></li> <li>The li tag</li> </ol></li> <li>Unordered ... </li> <li>Definition ... </li> </ol></li> <li>Miscellaneous</li> </ol>ul: Unordered (Bulleted) Lists
Inline (Text-Level) Elements(Font-Like Elements) Physical character styles b, i, tt, u, sub, sup, small, big, strike, s, blink Logical character styles: idea Tag name describes the type of content. Browser or CSS determines the look. Logical character styles em, strong, code, samp, kbd, dfn, var, cite Images img src (required), alt, align, width, height, hspace, vspace, border, usemap, ismap usemap: click on different can handle different things
Rows ( elements) Can contain (table heading) or (table data) elements Unless you use colspan or rowspan, each row normally contains the same number of elements width, height Specifies the width or height of the table, either in pixels (
) or, for width only, as a percentage of the current browser window width ( ) cellspacing The space in pixels between adjacent cells. Drawn as a 3D line if border is nonzero, otherwise empty space in the background color is used The default is usually about 3 cellpadding The empty space, in pixels, between the cell’s border and the table element The default is usually about 1JavaScript buttons
<input type="button" onclick="javaScriptFunction()" …/>Reset buttons
<input type="reset" .../>Check Boxes
<br/> <input type="checkbox" name="noEmail" checked="checked"/> Check here if you do <i>not</i> want to get our email newsletterRadio Buttons
<dl> <dt>Credit Card:</dt> <dd><input type="radio" name="creditCard" value="visa"/> Visa</dd> <dd>… <dd><input type="radio" name="creditCard" value="java" checked="checked"/> Java Smart Card</dd> … </dl>Select Boxes (Dropdown Menus)
<select name="language"> <option value="c">C</option> <option value="c++">C++</option> <option value="java" selected="selected">Java</option> <option value="javascript">JavaScript</option> <option value="perl">Perl</option> <option value="ruby">Ruby</option> </select> ``` **Multi-Select List Boxes** <div class="se-preview-section-delimiter"></div>这里写代码片 “`
“` C C++ Java JavaScript Perl Ruby
“`
Grouping Elements: fieldset and legend Idea Grouping all or part of a form inside fieldset draws attention to it and separates it from the rest of the page Using style sheets for the legend is particularly useful Not restricted to forms: you can surround arbitrary HTML with fieldset/legend to put the content in an etched box
Syntax
<fieldset> <legend>Title of the Etched Border</legend> … (stuff to put inside the box) … </fieldset>hr
– horizontal rule Draws a horizontal etched/shaded line
