HTML BASIC

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

Part 2

Table

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 1

form

<form action="http://localhost:8088/SomeProgram">  First name: <input name="firstName" value="J. Random"/><br/>  Last name: <input name="lastName" value="Hacker"/><br/>  <input type="submit" value="Submit Form"/></form>

Push Buttons

JavaScript 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 newsletter

Radio 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>```![这里写图片描述](http://img.blog.csdn.net/20170607101201472?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVvX3F1ZWVm/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)**Multi-Select List Boxes**<div class="se-preview-section-delimiter"></div>

这里写代码片
“`

“`

C
C++
Java
JavaScript
Perl
Ruby

“`

Miscellaneous Elements

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

---

A thematic break in the page content
May be displayed visually as a horizontal line
Attributes
not supported
use style or CSS