1. HTML
1: <!doctype html>
2: <!-- This is a test html for html, css, javascript -->
3: <!-- It will use all html label -->
4: <!-- 大的方向还是想逻辑结构, 逐步细化 -->
5: <html>
6: <head>
7: <link rel="stylesheet" type="text/css" href="practice.css" />
8: <script type="text/javascript" src="./myfwim_1030.js"></script>
9: </head>
10:
11: <body>
12: <div id="front">
13: <a class="red" href="css.asp">Css syntax</a>
14: <table width="100%">
15: <!-- tr 表示增加 1 行, td 表示增加 1 列 -->
16: <tr >
17: <td width="30%" bgcolor="green">
18: <img src="./images/bg2.jpg" width="200" height="100"/>
19: </td>
20: <td width="60%">
21: <table width="100%" >
22: <tr>
23: <td width="30%">111</td>
24: <td width="30%">222</td>
25: <td width="30%">333</td>
26: </tr>
27: <tr>
28: <td width="30%">444</td>
29: <td width="30%">555</td>
30: <td width="30%">666</td>
31: </tr>
32: </table>
33: </td>
34:
35: </tr>
36: </table>
37: </div>
38: <hr />
39: <div id="main" >
40: <table width="100%" class="center">
41: <tr>
42: <td width="30%" bgcolor="yellow">
43: <ol>
44: <li>ol01</li>
45: <li>ol02</li>
46: <li>ol03</li>
47: </ol>
48: <ul>
49: <li>ul01</li>
50: <li>ul02</li>
51: <li>ul03</li>
52: </ul>
53: <dl>
54: <dt>title01</dt>
55: <dd>detail01</dd>
56: <dd>detail02</dd>
57: <dt>title11</dt>
58: <dd>detail11</dd>
59: <dd>detail12</dd>
60: </dl>
61: </td>
62: <td width="60%">
63: <table width="100%">
64: <tr>
65: <td>
66: <select>
67: <optgroup label="Swedish Cars">
68: <option value ="volvo">Volvo</option>
69: <option value ="saab">Saab</option>
70: </optgroup>
71:
72: <optgroup label="German Cars">
73: <option value ="mercedes">Mercedes</option>
74: <option value ="audi">Audi</option>
75: </optgroup>
76: </select>
77: <!-- 上边option标签, value是真实需要传递的值, 括号外边的值是用来显示的 -->
78: </td>
79: <td><textarea></textarea></td>
80: </tr>
81: <tr>
82: <td>
83: <form>
84: <fieldset>
85: <legend>Personalia:</legend>
86: Name: <input type="text" /><br />
87: Email: <input type="text" /><br />
88: Date of birth: <input type="text" />
89: </fieldset>
90: </form>
91: </td>
92: <td>
93: <form>
94: <label for="male">Male</label>
95: <input type="radio" name="sex" id="male" />
96: <br />
97: <label for="female">Female</label>
98: <input type="radio" name="sex" id="female" />
99: </form>
100: </td>
101: </tr>
102: <tr>
103: <td>
104: <image src="./images/2.jpg" width="500" height="300"/>
105: </td>
106: <td>
107: <image src="./images/1.jpg" width="500" height="300"/>
108: </td>
109: </tr>
110: </table>
111: <table>
112: <tr>
113: <td width="300", height="300">
114: <p>List 2</p>
115: </td>
116: <td width="700", height="300">
117: <p>List 3</p>
118: </td>
119: </tr>
120: </table>
121:
122: </td>
123: </tr>
124:
125: </table>
126: </div>
127: <hr />
128: <div id="bottom">
129: <table width="100%">
130: <tr>
131: <td width="30%" bgcolor="blue">
132: <image src="./images/4.jpg" />
133: </td>
134: <td width="60%" bgcolor="green">
135: <p>List 3</p>
136: </td>
137: </tr>
138: </table>
139: </div>
140: </body>
141:
142: </html>
2. -----------------------------
1: <!doctype html>
2: <html>
3: <head>
4: <script type="text/javascript" src="./myfwim_1030.js"></script>
5: </head>
6: <body bgcolor="#FFFFFF" text="#000000">
7: <form name="form1">
8: <input type="hidden" name="type">
9: <input type="hidden" name="selFlag" value="<%=selFlag%>">
10: <input type="hidden" name="b_bl_no" value="<%=h_bl_no%>">
11:
12: <table width="98%" border="0" cellspacing="0" cellpadding="0">
13: <tr>
14: <td></td>
15: </tr>
16: </table>
17:
18: <table width="98%" border="0" cellspacing="0" cellpadding="0">
19: <tr>
20: <td width="15%" class="cell_title">
21: <div align="left">MAWB No.</div>
22: </td>
23: <td width="35%" class="cell_data">
24: <input type="text" name="m_bl_no" value="" class="inputsubmit" size="20" maxlength="20"
25: onBlur="javascript:this.value=this.value.toUpperCase();"
26: onkeypress="return handleEnter_gubun(event);"> <!-- Question -->
27:
28: <a href="javascript: searchNo(setMBLNo)">
29: <img src="./images/butt_popup_query.gif" border="0" >
30: </a>
31: </td>
32: <td width="15%" class="cell_title">HAWB No. List</td>
33: <td class="cell_data" height="2">
34: <div align="left">
35: <select name="h_bl_no_list" tabindex="230" class="input_re_red"
36: onchange="javascript:goHBL(this)">
37: <optgroup label="1 group">
38: <option value="1aa">aa</option>
39: <option value="1bb">bb</option>
40: </optgroup>
41: <optgroup label="2 group">
42: <option value="2cc">cc</option>
43: <option value="2dd">dd</option>
44: </optgroup>
45: </select>
46: </div>
47: </td>
48: <td class="cell_data" align="right">
49: <script>btn("amend()", "Amend Request");</script>
50: </td>
51: </tr>
52: </table>
53: <table width="98%" border="0" cellspacing="0" cellpadding="0">
54: <tr>
55: <td align="left" valign="bottom" width="17%">
56: <input type="button" value="Send" class="input1" onClick="Pre_send()">
57: </td>
58:
59: <td align="right" height="30" >
60: <a href="javascript:getProposePopup()">
61: <img src="./images/butt_hbl_pro.gif" align="absmiddle" border="0">
62: </a>
63: <a href="javascript: getPop()">
64: <img src="./images/butt_search.gif" align="absmiddle" border="0">
65: </a>
66: </td>
67:
68: </tr>
69:
70: </table>
71: <table width="98%" border="0" cellspacing="0" cellpadding="0">
72: <tr>
73: <td width="15%" class="cell3_title">
74: <div align="left">Shipper</div>
75: </td>
76: <td class="cell3_data" colspan="3">
77: <div align="left">
78: <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">
79: <a href="aa" colspan="3" border="0">
80: <img src="./images/butt_popup_query.gif">
81: </a>
82: <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">
83: </div>
84: <div align="left">
85: <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">
86: </div>
87: <div align="left">TEL<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
88: FAX<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
89: </div>
90: </td>
91: </tr>
92: </table>
93:
94: <table width="98%" border="0" cellspacing="0" cellpadding="0">
95: <tr>
96: <td width="15%" class="cell3_title">
97: <div align="left">Consignee</div>
98: </td>
99: <td class="cell3_data" colspan="3">
100: <div align="left">
101: <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">
102: <a href="aa" colspan="3" border="0">
103: <img src="./images/butt_popup_query.gif">
104: </a>
105: <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">
106: </div>
107: <div align="left">
108: <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">
109: </div>
110: <div align="left">TEL<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
111: FAX<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
112: </div>
113: </td>
114: </tr>
115: </table>
116:
117: <table width="98%" border="0" cellspacing="0" cellpadding="0">
118: <tr>
119: <td width="15%" class="cell3_title">
120: <div align="left">Notify</div>
121: </td>
122: <td class="cell3_data" colspan="3">
123: <div align="left">
124: <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">
125: <a href="aa" colspan="3" border="0">
126: <img src="./images/butt_popup_query.gif">
127: </a>
128: <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">
129: </div>
130: <div align="left">
131: <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">
132: </div>
133: <div align="left">TEL<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
134: FAX<input type="text" name="view_code2" value="" class="input1" size="30" maxlength="30">
135: </div>
136: </td>
137: </tr>
138: </table>
139:
140: <div align="left">[Shipping information]</div>
141:
142: <table width="98%" border="0" cellspacing="0" cellpadding="0">
143: <tr>
144: <td width="15%" class="cell3_title"><div align="left">Carrier(AirLine)</div></td>
145: <td width="35%">
146: <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">
147: <a href="aaa">
148: <img src="./images/butt_popup_query.gif">
149: </a>
150: </td>
151: <td width="15%" class="cell4_title"><div align="left">Co-Loader</div></td>
152: <td width="35%">
153: <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">
154: <a href="aaa">
155: <img src="./images/butt_popup_query.gif">
156: </a>
157: </td>
158: </tr>
159: <tr>
160: <td width="15%" class="cell3_title"><div align="left">Flight No.(AirLine)</div></td>
161: <td width="35%">
162: <input type="text" name="carrier" value="" class="input1" size="20" maxlength="20">
163: </td>
164: <td width="15%" class="cell4_title"><div align="left">Cur.</div></td>
165: <td width="35%">
166: <select>
167: <option>aaa</option>
168: <option>bbb</option>
169: <option>ccc</option>
170: </select>
171: </td>
172: </tr>
173:
174: <tr>
175: <td width="15%" class="cell3_title"><div align="left">Port of Departure</div></td>
176: <td width="35%">
177: <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">
178: <a href="aaa">
179: <img src="./images/butt_popup_query.gif">
180: </a>
181: <input type="text" name="depart_port_name"
182: maxlength="100" value="<%=depart_port_name%>" class="input_data3"
183: size="28">
184: </td>
185: <td width="15%" class="cell4_title"><div align="left">Port of Destination</div></td>
186: <td width="35%">
187: <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">
188: <a href="aaa">
189: <img src="./images/butt_popup_query.gif">
190: </a>
191: <input type="text" name="depart_port_name"
192: maxlength="100" value="" class="input_data3"
193: size="28" >
194: </td>
195: </tr>
196: </table>
197: <div align="left">[Cargo Information]</div>
198: </table>
199:
200: </form>
201: </body>
202: </html>
2. css
body {
color: brown;
}
h1, h2, h3, h4, h5, h6 {
color: blue;
font-size: 20px;
}
p {
color: green;
font-size: 15px;
font-family: "sans serif";
text-align: center;
background-color: gray;
padding: 10px;
}
/* id 唯一 */
#front {
color: red;
}
/* class 类别 */
.center {
color: brown;
}
/* */
h1.center {
color: red;
}
/* 属性, 对于所有带 dir 属性的标签起作用 */
[dir] {
color: yellow;
}
[type=text] {
color: blue;
}
/* 后代选择器, 可以有间隔 */
h1 em {
color: red;
}
/* 子选择器, 只能直接继承 */
h1 > strong {
color: red;
}
/* 注意, 以下内容顺序不能变 */
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:focus {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
a.red: visited {color:#FF0000}
3. JAVASCRIPT
/* 变量声明, 立刻就要初始化 */ var x = "" var mycars = new Array() mycars[0] = "sbba" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write[mycars[x] + "<br/>"] } document.write("hello world" ); /* data type: undefined, Null, Boolean, Number, String, */ // ============================== Array ======================================================== var colors = ["red", "blue", "yellow"] alert(colors.length); colors[colors.length] = "black"; /* 增加了数组的长度, 因为下标是从 0 开始, 所以以上本来数组长度是3, 增加了一个就变成 4 了*/ colors.toString() // 返回结果为 red,blue,yellow,black // 数组可以自动实现 "栈" 数据结构 var count = colors.push("white","brown") // 可以一次性入栈多个 var item = colors.pop(); // 出栈 // 数组自动实现 " 队列 " 数据结构 var count = colors.push(); // 从队尾入 var count = colors.shift(); // 队头出 // 数组实现循环队列 var count = colors.unshift() // 从队头入 var count = colors.pop() // 队尾出 // 数组内容元素排序 // 默认情况, 将数组内元素都调用 toString(), 进行比较, 10 会比 5 小 colors.sort() // 也可以调用比较函数来进行比较 colors.sort(compare) function compare(value1, value2) { if (value1 < value2) return -1; else if (value1 > value2) return 1; else return 0; } // 数组元素 concat() 结合 var colors2 = colors.concat("yellow") // 数组元素 截取 var colors2 = colors.slice(1) // 从 第 1 个, 截到最后 var colors = colors.slice(1, 3) // 从 第 1 个, 截到第 3 个 // 数组 插入, 删除 splice(0, 2) // 0表示下标位置, 2表示删除 2 个 splice(2, 0, "red", "green") // 2表示下标位置, 0 表示需要删除几个, 后边两项表示要增加内容 splice(2, 1, "red", "green") // 同样, 只不过这次先删除了 1 个内容, 给出一种替换的效果 // 时间类型 var date = new Nate(Date.UTC(2005, 4, 5, 17, 55, 55)) // 2005年5月5日17时55分55秒 //============================================================================================ // 定义对象s /* 不想要被原型链共享的内容, 写在构造函数中 */ function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = ["shely", "count"]; } Person.prototype = { constructor: Person, sayName : function() { alert(this.name); } }; // 继承的方法, 组合继承(经典继承) function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype = { constructor: SuperType, sayName : function() { alert(this.name); } } function SubType(name, age) { SuperType.call(this, name); this.age = age; } SubType.prototype = new SuperType(); // 子类原型链继承了是父类的一个实例 // 因为父类的实例, 会继承父类自己原型链中的方法和变量 // 从而实现了子类继承父类 // 函数内部不能再定义一个函数, 使用闭包, 可以使内部函数访问到外部函数的作用域内的变量 // 内部函数说白了, 其实就是一个将函数作为一个值, 但是这样做有很大的灵活性, 例如 // ============================================================================================= // 块级作用域 ( function() { // 这里是块级别作用域 } )(); // ============================================================================================= // 超时调用, 在指定时间后, 调用一次 var timeoutId = setTimeout(function(){ alert("Hello, world!"); }, 1000); clearTimeout(timeoutId); // 间歇调用, 在指定间隔内, 反复调用 var intervalId = setInterval(function(){ alert("Hello,world!"); }, 10000) clearInterval(intervalId); // 实际开发环境中很少使用间歇调用, 因为有可能两个间歇调用之间时间会掌握不好 // 一般可以是用超时调用, 加循环来实现间歇调用 // ============================================================================================== document.getElementById() // 很好用, 用来定位 HTML 标签 document.forms // <form> var fisrtForm = document.forms[0]; // html 中的第一个表单 var myForm = document.forms["form2"] // 名字为 form2 的表单 // 提交表单的方法, html 中 <input type="submit" value="Submit Form"> <button type="submit">Submit Form</button> <input type="submit" src="graphic.gif"> // javascript 中提交表单 var form = document.getElementById("myForm"); form.submit(); // ====================== Event ================================================================ var btn = document.getElementByid("myBtn") btn.onclick = function() { alert("Click"); }; btn.onclick = null; // 删除事件处理程序 // ==================== Head First javascript ================================================== var cookies = document.cookie.split(';'); for (var i=0; i<cookies.length; i++) { var c = cookies[i]; while (c.charAt(0) == '') c = c.substring(1, c.length); if (c.indexOf(searchName) == 0) return c.substring(searchName.length, c.length); } // 二维数组 var seats = new Array(new Array(9), new Array(9), new Array(9)); var seats = [ [false, true], [false, true], [false, true] ]; // 正则表达式, 说的不错 // 正则表达式, 很有用, 比如可以用它来确认用户输入的表单内容, 是否符合你自己要求的格式, 比如输入的日期型