Html Inline Selector Property DOM manipulation JavaScript events

HTML Tags:

I. General label (General label)

1. Format Control tab

<font color= "#6699aa" face= "italic" size= "> Text </font>
<b> Bold </b>
<i> Tilt </i>
<u> Underline </u>
<br/> Line Break * *
&nbsp; Spaces * *
<center> Center </center> *

2. Content Label

<p> paragraph </p> *
<div></div> layer label, default line * *
<span></span> Layer Labels * *
<ol> the Sequence table Type property can be selected by ordinal method, each list item is <li> *
<ul> unordered list, each list item is <li> * *

II: Common Labels

<a href= "http://www.baidu.com" > This is a hyperlink </a> * *
* *

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> Form Labels * *

Table: Width: widths; border: border; align: alignment; bgcolor: background color; rowspan: merge rows; colspan: Merge columns

Anchor Point:

1. Set the anchor point: Add a name attribute to the a tag to declare the name of the anchor point
<a name= "" > Content </a>

2. Set up a jump hyperlink
<a href= "#锚点名" > Hyperlink content </a>

input type with this
Option option type Use this

Target: How hyperlinks are opened
A picture in the alt:img tag replaces text

Several properties of the body:
Background: Background image
bgcolor: Background color
Text: Font Color

.. /Upper Directory

Form form:

<form name= "Zhuce" method= "post" action= "untitled-2.html" >
</form>
Method= "" Submission method, generally divided into post or get
Action= "" submit to which page to process

I. Text input

1.<input type= "text" value= "" Name= ""/> Single line text input box
2.<input type= "password" value= "" name= ""/> Password box
3.<textarea rows= "value=" "Name=" "></textarea> text field
4.<input type= "hidden" value= "name=" "/> Hidden Fields

Two. button

1.<input type= "Submit" value= "register" name= ""/> Submit button
2.<input type= "reset" value= "reset" name= ""/> reset button
3.<input type= "button" value= "Check" name= ""/> Normal button
4.<input type= "image" src= "width=" "height=" "value=" "name=" "/> Picture" button

Three. Select the input

1.<input type= "Radio" name= "Sex" checked= "checked" value= "true"/> radio button
If you make multiple radio buttons a group, set their name value to the same value.

2.<input type= "checkbox" value= "Name=" "/> Multi-select button

3.<select name= "" >
<option value= > Zhang San </option>
<option value= > John Doe </option>
<option value= > Harry </option>
</select>
Drop-down list, each option is a list item, plus the attribute multiple= "multiple" becomes a multi-select list

4.<input type= "file" name= ""/> Select file, upload file

CSS: Cascading style sheets, which are useful for beautifying Web pages

Style format: Style name: style value; style name: Style value;

/* Comment Statement */

Classification:

1. Inline, write directly in the label style= ""
<div style= "" ></div>

2. Embedded, written in head
<style type= "Text/css" >
*
{
font-size:36px;
}

</style>

3. External style
Create a new style sheet file that is referenced in the Web page with an attached style sheet

Selector:

One: General Selector

1. Tag Selector: Select element control style with tag name
div{
font-size:48px;
}
2.class Selector
. aa{
font-size:48px;
}

3.id Selector, unique
#aa
{
font-size:48px;
}

4. * Representing all

Priority: ID Selector--class Selector--Tag Selector--*

Two: Composite Selector

1. Use, separate #aa, #cc tie-up relationship

2. Separate #aa div descendant relationships with spaces

3. Use the. Separate DIV.BC filter to filter the class-BC label inside the DIV

Style:

A: Background and prospects
Background-color: Background color
Background-image: Background image
Background-repeat: Background Picture Layout method
Background-size: Background size
Background-attachment:fixed The background image is fixed
Background-attachment:scroll Scrolling of background images
Background-position:center Center
Background-position:top left Upper Corner
Background-position:top 10px left 50px distance 10 pixels away 50 pixels

Font-family: Font
Font-size: Font Size
Font-weight: bold Bold font weight
Font-style: Text style italic tilt
Color: Font Color
Text-decoration:underline underline overline underline Line-through strikethrough
Text-indent: How many pixels are indented in the first line

Two: Align the way
Text-align: Horizontal alignment center left and right in the play
Vertical-align: Vertical alignment middle Center bottom bottom Top
Line-height: Row Height

Third: Other
Display:none Hide block Display
Overflow:hidden out of hidden scroll out of section scroll bar

Four: Lists and blocks

Width,height (top.bottom.lefr.right) only works in absolute coordinates

List-style:none Cancel Serial Number

List-style:circle sequence number into a circle

List-style-image:url (image address): Picture to do serial number

List-style-position:outside serial number inside and outside

List-style-position:inside: Serial number with content

Five: Borders and Borders

Border (table border, style sheet), margin (off-table spacing), padding (content and cell indirect)

border:5px Solod Blue: Four border 5 pixel width solid line blues

Margin:auto Live top Upper bottom left right

Padding:top on bottom left right

Iv. format and layout
(i) Flow-type layout
Float:left/right
Clear:both
Once the float is up, it will be out of the original page level. After that there is no float up the top of the layer up.
1. Parallel arrangement:
A. Assume that there is a float-up layer in the middle that does not affect the front, but will affect the back of the (will go to the top);
B. Add an empty <div style= "Clear:both" ></div> to the corresponding location, and truncate the streaming layout.

2. Nesting arrangement:
A. General rules for nesting float:
By default, the inner layer will open up the outer layers;
When the inner layers float up, the outer layer is not float and the outer layer is not open.
If the inner layer, the outer layers are float up, the inner layer can open the outer layers.

B. How to set the center of the layout?
The first step: set up an outermost div. Width is 100%
The second step: in the last div inside, set a center div. Set width (960-980), Margin:auto
Step three: Edit the page content in the DIV in the second step.
(b) Positioning layout
P
{
width:62px;
height:19px;
padding-top:7px;
Font-weight:normal;
Color: #F00;
Float:left;
}
#shuru
{
Float:right;
Width:195ox;
height:26px;
Background-color: #999;
Color: #FFF;

}
Tupian
{
Float:left;
width:25;
height:25px;
}

Avascript:
Several questions:
What's a 1.JavaScript thing? --scripting language.
Javascript,java,jscript
Sun/oracle Java
Netscape Netscape
Microsoft Win98 IE3

2. What is a scripting language?
Cannot run independently and must be embedded in the host file in order to run the language.

Embedding syntax:
<script language= "JavaScript" >

</script>

First, type and variable
Data type: String, Integer, float, Boolean, Date Time, object type
Variable type: Only one variable type-generic type

Weak type of language.
Explains the language of the run.

To force type conversions:
1. Other types turn into integers:
var a = "5";
A = parseint (a);

2. Turn the other types into decimals:
var a = "5.2";
A = parsefloat (a);

3. Determine if it is a number:
IsNaN (a)--to determine if it is a valid number, return bool type
true--is not a number; false--is a number.

Second, operator
(i) Arithmetic operators 7
+ - * / % ++ --
(ii) Relational operators 6
= = = > < >= <=
(iii) Logical operators 3
&& | | !
(iv) Other operators
= ?: += -= *= /= %=

Third, the statement
(i) Order
(ii) Branch
1.if (expression) {}
2.if (expression) {} else {}
3.if (expression) {} else if (expression) {}....else{}
4.if (expression) {if (expression) {}}
Example:
1. Determine if a leap year
2. Blind Date
3. Height and weight
4. The case of a unary two-time method root

(iii) Circulation
Four elements: initial conditions, cyclic conditions, cyclic bodies, state changes
for (initial condition; cyclic condition; state change)
{
Circulation body;
}
for (Var i=0;i<10;i++)
{
Alert ("Hello");
}
Two major types of problems: exhaustive and iterative
Exhaustive: For all numbers related to 7 within 100
Iteration: Ask for all numbers within 100 and

Example:
1. Draw an asterisk
2. Buy something
3. Hundred Ma Baishi
4. Against the coin
5. Match equation
6. Scout
7. Monkeys Eat Peach
8. Age
9. Origami
10. The Board of Food

Four, array

Five, function

One: window.open () Open a window

Four parameters:

1. The Web address to open
2. Open mode
3. Open Page Properties settings

Two: Window.close () Close the window

Window.opener.close (); Close source window

Three: Interval and delay

var one = Window.setinterval ("Openone ()", 1000); 1 seconds interval Execution of the Openone () function, always executed

Window.clserinterval (one); Clear Interval execution

var AA = Window.settimeout ("Openone ()", 1000); 1 seconds Delay execute openone () function, execute once

Window.cleartimeout (AA); Clear deferred execution

Four: Adjust the page

Window.navigate () jump page
Window.moveto (x, y) move page to coordinates x, y
Window.resizeto (width, height) resizing the page
Window.scrollto (x, y) scrolling page

V: Modal dialog and non modal dialog box

window.showModalDialog (); Open modal dialog box
Window.showmodelessdialog (); Open the Non-modal dialog box

Six: Window.history

Window.history.back (); back
Window.history.forward (); advance

Window.history.go (n); If n is a positive number, forward n pages if n is negative then back n pages

Seven: Window.location

WINDOW.LOCATION.HREF Get page address
Window.location.href= ""; Jump page

Eight: Window.status

Window.status= ""; Setting the status bar display

Window object:
Alert ()--Show Warning window
Confirm ()--Show Confirmation window, return bool type
Open ()--Opens a new page window--three parameters, which returns the opened window.
Close ()--close window
SetTimeout (code, number of milliseconds)-how long after the specified code is executed
SetInterval (code, number of milliseconds)--how often to execute the specified code
Resizeto (), MoveTo (), ScrollTo () ....


The History object. The Location object. The Document object. Status Object
History object:
Go (integer value)
Location object:
Reload ()--Reload page
href--the URL address of the specified page url--Uniform Resource Locator
Status object:

Document object:
First, locate the specified element.
1. Find the element by ID--Find a
2. Find an element by name--Find a group
3. Find the element by tag name--Find a group
Ii. Elements of Operation
(i), Operation properties
1. Get attribute values
2. Add/Modify Properties
3. Delete Attributes
(b), Operation style
1. Direct manipulation of style properties
A. Getting the value of a style property
B. Setting or modifying the value of a style property

2. Class of the operating element
A. Obtaining class
B. Set class

(iii), Operation content
1. Form elements
A. Taking a value
B. Assignment
2. Non-form elements
A. Taking a value
B. Assignment

(iv), elements of the overall operation
1. Create
2. Add
3. Copying
4. Replace
5. Delete
Iii. related elements
Peer
Child generation
Fathers

Action elements:
(i) locating the associated element:
parentnode--Direct Parent Element
ChildNodes-all direct child elements
NextSibling-Next brother Element--pay attention to enter
PreviousSibling-Last sibling element--pay attention to enter

Case:
1. Manipulate the parent element:
var t = document.getElementById ("tt");
T.parentnode.classname= "Y"; Manipulating parent elements

2. Operators and elements:
var t = document.getElementById ("tt");
var cs = T.childnodes;
for (Var i=0;i<cs.length;i++)
{
Cs[i].classname= "Y";
}
3. Manipulating sibling elements:
var t = document.getElementById ("tt");
T.nextsibling.classname= "Y";
(ii) manipulating element objects
Create
var a = document.createelement ("tag name");

Add to
var d = document.getElementById ("dd");
D.appendchild (a);

Delete
var t = document.getElementById ("tt");
var d = document.getElementById ("dd");
T.removechild (d);

Copy
var d = document.getElementById ("dd");
var s = D.clonenode ();

Replace
var t = document.getElementById ("tt")
var d = document.getElementById ("dd");
var n = document.createelement ("div");
T.replacechild (N,D);

Html Inline Selector Property DOM manipulation JavaScript events