HTML+CSS+JAVASCRIPT 总结

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_34417814

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量114

点赞数

文章标签： javascript 数据结构与算法 ViewUI

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:                              οnkeypress="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:                                  οnchange="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] ];


// 正则表达式, 说的不错
// 正则表达式, 很有用, 比如可以用它来确认用户输入的表单内容, 是否符合你自己要求的格式, 比如输入的日期型