HTML+CSS+JAVASCRIPT 总结
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[] = "sbba"
mycars[] = "Volvo"
mycars[] = "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() // 从 第 个, 截到最后
var colors = colors.slice(, ) // 从 第 个, 截到第 个 // 数组 插入, 删除
splice(, ) // 0表示下标位置, 2表示删除 个
splice(, , "red", "green") // 2表示下标位置, 表示需要删除几个, 后边两项表示要增加内容
splice(, , "red", "green") // 同样, 只不过这次先删除了 个内容, 给出一种替换的效果 // 时间类型
var date = new Nate(Date.UTC(, , , , , )) // 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!");
}, ); clearTimeout(timeoutId);
// 间歇调用, 在指定间隔内, 反复调用
var intervalId = setInterval(function(){
alert("Hello,world!");
}, ) clearInterval(intervalId);
// 实际开发环境中很少使用间歇调用, 因为有可能两个间歇调用之间时间会掌握不好
// 一般可以是用超时调用, 加循环来实现间歇调用 // ==============================================================================================
document.getElementById() // 很好用, 用来定位 HTML 标签 document.forms // <form>
var fisrtForm = document.forms[]; // 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=; 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(), new Array(), new Array());
var seats = [ [false, true],
[false, true],
[false, true] ]; // 正则表达式, 说的不错
// 正则表达式, 很有用, 比如可以用它来确认用户输入的表单内容, 是否符合你自己要求的格式, 比如输入的日期型
HTML+CSS+JAVASCRIPT 总结的更多相关文章
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- Umbraco（3） - CSS & Javascript（翻译文档）
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.
- CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
Preloading images is a great way to improve the user experience. When images are preloaded in the br ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
随机推荐
- win8.1 环境下搭建PHP5.5.6+Apache2.4.7
本文主要阐述在windows8及win8.1 环境下搭建PHP5.5.6+Apache2.4.7. 1.软件准备 apache 2.4.7:http://pan.baidu.com/s/1iUPif ...
- Spring.net Could not load type from string value
最近有点懒了啊,都没有按时上来博客园更新下,个人觉得遇到难题的时候在这里留下脚印也亦造福他人,进来 晓镜水月 被项目围的团团转,asp.net MVC项目来的,但是我还是不务正业啊,在弄网络爬虫,这个 ...
- iOS常见各种ID
//CFUUID CFUUIDRef cfuuid = CFUUIDCreate(kCFAllocatorDefault); NSString *cfuuidString = (NSString*)C ...
- 使用行为树(Behavior Tree)实现网游奖励掉落系统
原地址:http://blog.csdn.net/akara/article/details/6165421 [原创]使用行为树(Behavior Tree)实现网游奖励掉落系统by AKara 20 ...
- HDU 2674 N！Again（数学思维水题）
题目 //行开始看被吓一跳,那么大,没有头绪, //看了解题报告,发现这是一道大大大的水题,,,,,//2009 = 7 * 7 * 41//对2009分解,看它有哪些质因子,它最大的质因子是41,那 ...
- LCIS 最长公共上升子序列
这个博客好久没写了,这几天为了准备清华交叉研究院的夏令营,在复习大一大二ACM训练时的一些基础算法,正好碰到LICS,发现没有写在博客里,那就顺便记录一下好了. 参考链接:http://blog.cs ...
- sqoop导入hdfs上的数据到oracle
/opt/sqoop-/bin/sqoop export --table mytablename --connect jdbc:oracle:thin:@**.**.**.**:***:dbasena ...
- Nginx状态监控
通过配置nginx.conf文件来实现对Nginx状态信息的监控. 1.配置nginx.conf vim /usr/local/nginx/conf/nginx.conf 再server块配置项中添加 ...
- java 继承类与接口问题
java 先extends 继承类,再implements 继承接口 public class DataBase extends ClassBase implements Ijiekou { }// ...
- windows JDK 版本切换
windows JDK 版本切换1. HKEY_LOCAL_MACHINE“SOFTWARE“JavaSoft“Java Runtime Environment“CurrentVersion, 把这个 ...