Some summary about client-side XHTML, CSS and JavaScript

Author：Eve Cole Update Time：2009-06-12 17:47:51

This week we are learning the three parts of the client, the grammatical basis of xhtml, css and javascript.

First: Regarding the attributes (marks) of xhtml -

1. Form attributes <form action="form handler url" method="gei/post">

2. <id="" name="">These two attributes It is the unique identification number and difference of the form name. According to my personal homework and usage this week, it is mostly used in controls such as <form> <input>.

3. Control attributes <input>, <select> and <option>, <textarea>;

<input> is a control defined differently from the type attribute. There are 10 types in total, including text box, multi-select, radio selection, and password box. Submit and cancel etc. Used for different controls according to different needs.

<select> and <option> are used together to control drop-down menus. Basic format:

</select>

<textarea> is used to create a multi-line text box.

4. Commonly used definition attributes: font-family: define the font style of the entire page; font-size: font size; width: width; height: height; colspan: ""number of merged columns; align: position; <br />Empty line&nbps ;Empty space

second: css control page

1. Style rules: In using css style layout, the basic format is as follows

selector {

attribute 1: value 1;

attribute 2: value 2;

.....

}

and in <head > Adding <style type="text/css"> to </head> will call css related functions

2. Selectors: element selector, class selector, id selector, inclusion selector, wildcard selector and pseudo selector Class and pseudo-element selectors. (For the functions and usage of each selector, please refer to Book 54-56)

3. Style rule position:

There are three forms in total - external, inline and embedded.

External connection is to create a .css file in the same level file of the generated page file, and then write the effective attribute code in the form of text in the .css.

And

it is called

with <link rel="stylesheet" type="text/css" ref="style sheet url"> in the page file

. This method is suitable for multiple pages to use the same style.

Embedding is a commonly used css attribute, that is, adding <style type="text/css"> to <head></head> and using

the selector {

attribute 1: value 1;

attribute 2: value 2;

.... .

}

is used in this form.

Inline means using the style attribute after the element to mark the style when displayed. Basically most html tags have style attribute.

4.css box template and overlap

(1) margin: margin border: border padding: border distance (see book 53 for details)

(2) css attribute unit: (see pages 57-65 of the book for details)

(3) div-css Page layout:

This is the key point. Not only the <table> attribute can layout the entire page, but the commonly used <div> is more convenient and concise.

Third:

There are only three points that need to be mastered

in the basic and advanced syntax of JavaScript

1. <script type="text/javascript"> This is the same as calling css attributes.

document.write("Hello") is equivalent to the meaning of printf in C language, and can also be replaced by alert.

2. Event handler: There are 4 points in this knowledge point, and there are more. Please refer to the detailed introduction on pages 81-95 in the tree.

3. Advanced syntax: It is similar to data types, loops, sequences, and selection in C language. There are just a few differences:

(1) To define the data type, there is no need to explicitly define it, just use var.

(2) The calculation of different types of data is not as clear as C language. For example, var 'a' b, a character type and a data type, can also calculate c='a'-b.

(3) Added string operators.

4. Function call: This is similar to the C language. I will use an example to illustrate:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.w3.org /tr/xhtml1/dtd/xhtml1-transitional.dtd ">

<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<head>
<title>javascript summation</title>

<script type="text/javascript">

function sum1(m){
var i ,n=1;
for(i=1;i<=m;i++){
n=1/i*n;
}
return n;
}
function sum(n){
var i,s=0;
for(i=1;i<=n;i++){
s=s+sum1(i);
}
alert(s);
}

</script>
</head>
<body>
<form action="#" method="get">
1+1/2!+1/3!+1/4!....1/10!=
<input type="button" value="Sum" onclick="sum(10);" />
</form>

</body>
</html>

This question uses function calls to calculate the sum. Everyone should be able to understand it - -! Our homework.

Okay, this is my summary for this week. I hope it will be helpful to everyone. It is definitely not comprehensive and is only for reference!