HTML
1.特殊符号
假如要在浏览器中显示这些符号，就必须用：
＆nbsp；来显示一个半角的空隔符号
＆ｌｔ；来显示小于符号
＆ｇｔ；来显示大于符号
＆ａｍｐ；来显示＆符号
＆ｑｕｏｔ；来显示双引号
2.注解
HTML 中的批注是
<!-- 这里可以写你要的批注 -->
<!--
批注同时也可以换行
写多少都可以
-->
3.图片
<img src="路径/图文件文件名" alt="找不到图档时出现的内容, 当鼠标移到图片上方时也会出现该内容" width=XX显示时的宽度 height=XX显示时的高度 border="边框大小">
例:<img src=“images/tree.jpg” alt=“树”>
4.CSS Style
属性
color : 文字的颜色
font-size : 文字大小
background : 背景颜色
display : 显示/隐藏
width : 宽度 (for DIV Element)
height : 高度(for DIV Element)
border : 边界(for DIV Element)
用法举例；<p style=“font-size:14pt;color:red”>style</p>
把 style 集中管理
<style type=“text/css”>
.styleOne {font-size:14pt; color:red}
.styleTwo {background:black; color:white}
</style>
<p class=“styleOne”>
段落内的文字…………
</p>
5.div的用法
<div>……</div>
外观 : 没有显示效果，除了用style来控制。
作用 : 可以把一群 element 包裹起来一起控制。
例 :
<div class=“styleTwo”>
<a href=http://www.sina.com.cn>新浪網</a>
<pre>一些文字</pre>
</div>
Div 的 Style Attribute
position : absolute ; top:30px; left : 60px ; 200px ; height: 200px; overflow-y:auto;
Overflow-y:auto=>内容超过边界时，会自动加一个 vertical scrollbar 在旁边。(x表示水平)
6.Input - Text
写法
<input type=“text” name=“compName” value=“ICSC”>
其它 attribute
value : 字段中的值
size : 字段显示出来的长度
maxlength : 最多能录入的文字数
7.Input - Hidden
隐藏的字段，网页上不会显示出来，只用能辅助背后逻辑处理。如(会员代号)
用法
<input type=“hidden” name=“orderNo” value=“2”>
8.Textarea
用在大量文字数据时，如留言版，意见栏等。
用法
<textarea>字段内容….</textarea>
attribute
name : 字段名字
rows
cols
9.Input - Radio
用在多选一的时候，如性别。
用法
<input type=“radio” name=“sex”> (名字相同与不同的区别)
attribute
name : jsp 将会依此名字取得 value，若是多选一时，一组 radio button 的name 要相同
value : jsp 依 name 取得的值
checked : 默认为被打勾
10.Input - Checkbox
允许多选多，彼此间不会互斥
用法
<input type=“checkbox”>
属性
name : jsp 将会依此名字取得 value，一组选项，中通常每个 checkbox 名称会一样。
value : jsp 依 name 取得的值
checked : 默认为被打勾
11.Select
下拉式选单
用法
<select name=“myName”><option>选项一</option></select>
属性
name : 下拉选单的名字
size : 设定下拉式选单的高度
multiple : 可以多选
定义下拉选单中的数据选项
用法:
<select name=“num”>
<option value=“1”>one （1的作用）
<option value=“2”>two
</select>
属性
value : 设定数据所传回给 JSP 的值
selected : 被选取 （设定默认的）
12.Input - Submit
用法
<input type=“submit” value=“送出表单”>
<input type=“button” value=“一般按钮”>
属性
name : JSP依此名称来接数据
disabled : 让按钮不能按
13.FORM
把数据从 client 送到 server 的重要组件。所有被送到 server 的数据均以 form 为单位。
<form name=“form1” action=“process.jsp” method=“post”>
<input type=“text” name=“empName”>
……………
</form>
Action后面加地址
action : 要被送至处理的 jsp或servlet或其它cgi
method : 被传送时的方法, 分 get, post 。
get : 被附在网址后面 (如: process.jsp?empName=李小明&..)
（没有字数限制）
post : 数据被隐藏在后面传送
target : 表单送出后server 处理完毕 response 回来的网页显示的地方，通常是 frame 的 名字或 window 的名字
14.IFRAME
被镶在网页中的另一个世界。有如在原来的网页中挖了一个洞，洞里可以浏览别的网页。
<iframe name=“fr” width=800 height=600></iframe>
attribute
name : 用作form submit 时的target 设定
width/height : frame 的宽度/ frame 的高度
src : frame 里面的网址
1.取得Object
var obj=document.getElementsById("tab")
<div id="tab"> ....</div>
var names=document.getElementsByNames("empName")
for(var i=0; i<names.length;i++){
var obj=names[i];
}
<input type=text name="empName"....>
name可重复 id不可以重复。
2.Div 功能
将欲控制的项目包裹在一起统一控制，省却一个一个项目控制的锁碎事情
<input type=“text” name=“one”>
<input type=“text” name=“two”>
form1.one.style.display=“none” // 隐藏栏位
form1.two.style.display=“none” // 隐藏栏位
用div处理
<div id=“f”>
<input type=“text” name=“one”>
<input type=“text” name=“two”>
</div>
document.getElementById(“f”).style.display=“none”
3.Style Class 的用法
document.getElementsById("f").style.display="none"
document.getElementsById("f").style.fontSize="16"
document.getElementsById("f").style.background="pink"
<style>
.change{display:none; front-size:16;background:pink}
</style>
table{ front-size:16;background:pink}
document.getElementsById("f").style.className="change"
点的用法：
<div class="change">......</div>
table的用法：
<table> <tr> <td> .....</td> </tr> </table>
4.下拉菜单激活function的event
<select onchange="triggerEvent()">
<option value="....">..
</select>
<script>
function triggerEvent(){
//....
}
</script>
5.选中下拉式菜单 取得下来菜单的值
<form name="form1">
<select name=“docType” >
<option value=“01”>会议通知单
<option value=“02” selected>草稿
</select>
</form>
<script>
form1.docType.options[form1.docType.selectedIndex].value 得到? “02”
form1.docType.options[form1.docType.selectedIndex].text 得到? “草稿”
</script>
欲显示、隐藏的栏位，需用 div 将之包裹，
建立下拉菜单option value与显示隐藏内容的关系
即将 Div 的 id 与 option value 建立关系，
如:
<select name=“docType”>
<option value=“01”>…
<option value=“02”>…
<option value=“03”>…
</select>
<div id=“t01”>吉钢<input value=“”>字第…</div>
<div id=“t02”>会议<input value=“”>字第…</div>
<div id=“t03”>函<input value=“”>字第…</div>
6.当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。
例：
<html>
<head>
</head>
<body>
<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>
</body>
</html>
7.单击事件onClick
当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：
button（按钮对象）
checkbox（复选框）或（检查列表框）
radio （单选钮）
reset buttons（重要按钮）
submit buttons（提交按钮）
一切文本和图片
例：可通过下列按钮激活alert()：
<html>
<head>
</head>
<body>
<Form>
<Input type="button" Value="你好 " onClick="alert('你好！我是JavaScript')">
</Form>
</body>
</html>
8.设定JAVA_HOME 步骤
右击我的电脑?内容?高级?环境变量?「系统变量」?新增?[变量名称: JAVA_HOME, 变量数值: JDK安装位置]
打开 d:/tomcat/webapps/examples/jsp/
创建目录 xx
创建 d:/tomcat/webapps/examples/jsp/xx/xxjj01.jsp
運行 xxjj01.jsp
http://localhost:8080/examples/jsp/xx/xxjj01.jsp
9.JSP產生的JAVA及CLASS所在
D:/tomcat/work/Standalone/localhost/examples/jsp/xx/
xxjj01_jsp.java
xxjj01_jsp.class
5.Class组合实现Div+CSS布局
现在编写xhtml，我们强烈不推荐此种方法，应该是id，class综合应用。此文章只是讲述一种思维，并非建站过程中的方法！
用标准件的方式来组装网页DIV布局。我把class分为2种：布局class；风格class。
布局class是骨架，风格class是衣服。
举个例子：比如布局中的左栏。首先它的属性有：是左栏，宽度，背景颜色，字体颜色等。
1、首先会定义一个class,比如:.layout,主要用来控制页面整个的大小
.layout{98%;margin:0 auto;text-align:left;}
2、然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{auto}
.r{float:right}
我把2栏布局也归类于3栏布局，因为3栏布局中，左右栏的宽度分别为0的时候，3栏就变成了2栏．
我们写基本布局代码的时候，最好还是写成3栏格式．
3、对应布局Class，定义需要的风格Class，比如宽度，高度，背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;140px;}
布局class只有一套，风格class可以定义很多。比如，要中栏里面在做一个小的2栏布局，就可以再定义一个风格class。
.mid_l{background:#ff0;margin-right: -100px;100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}
4、将布局class和风格class结合起来，在代码这样引用：
<div class="l class＿l"></div>
<div class="l mid_l"></div>
将2个class都引用，中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用，如果需要再特殊定义，你可以给这个div取一个id来定义。
其他的一些常用的风格class也可以写成通用的，比如隐含可以定义为
.hide{display:none} 然后需要的时候，class="xxx hide"来引用。
示例代码浏览：http://tech.ddvip.com/yssl/29811/29815_1.html
6.JavaScript实例教程（十一）显示一个动态的时钟
前面说的显示当前时间日期是静态的，我们这里来实现一个动态的时钟。
在<head>和</head>之间插入下列代码：
<script>
//定义时钟显示的函数
function displayTime() {
var today = new Date();
// 定义日期对象
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// 从日期对象中中获得时间信息
minutes = fixTime(minutes);
seconds = fixTime(seconds);
// 引入fixTime（）函数，使分和秒可以正常显示，对于小于10的数字则在该数字前加一个0
var the_time = hours + ":" + minutes + ":" + seconds;
//将时间字符串组合在一起并写出
window.document.the_form.the_text.value = the_time;
//把表格的值重新写一遍，相当于刷新时间
the_timeout= setTimeout('displayTime();',500);
//每半秒钟执行一次该函数,即500毫秒
}
function fixTime(the_time)
{if (the_time <10) { the_time = "0" + the_time; } return the_time; }
</script>
把<body>改为<body onload=displayTime()>
再在<body>标签间输入
欢迎光临5D多媒体 现在是北京时间：
<form name="the_form">
<p><font face="宋体"><input type="text" name="the_text" size="16"> </form>
运行，可以看到浏览器显示如下：