html、javascript的简要笔记
刚发了servlet的一些简要笔记，现在在发一下web的html和javascript的，只是希望能对大家有一点帮助。中秋快乐！
web:
在适用Internet、维护工作量等方面，B/S比C/S要强得多的多；但在运行速度、数据安全、
人机交互等方面，B/S远不如C/S。综合起来可以发现，凡是C/S的强项，便是B/S的弱项，反之亦然
HTML的如下：
1、了解一些html基本常识
（1）什么是html，发展历史
制作网页的标记语言.
Hypertext Markup Language的英文缩写,即超文本标记语言.
是一种标记语言,不需要编译,直接由浏览器执行.
是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
是大小写不敏感的.
HTML是由W3C的维护的(http://www.w3school.com.cn/)
1990年, Tim Berners-Lee 创立了HTML,web之父
1997年, HTML4.0成为W3C标准
（2）w3c、web标准
结构：html,xhtml,xml
表现：CSS
行为：W3C DOM，ECMAScript
（3）xhtml与文档类型声明
EXtensible Hypertext Markup Language，html-->xml 过渡。
常见的文档类型声明
XHTML 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML松散型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（4）主要浏览器
IE浏览器是用户数量最多的浏览器，超过80％的用户使用IE.
Firefox
由Mozilla基金会所开发，市场使用率第二。
Navigator
Netscape通信公司开发，是浏览器的最早的创始者和先驱者。
Google Chrome
Google在2008年新推出的浏览器
2、掌握html基本结构及主要标记的使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--
<meta http-equiv="refresh" content="3;url=http://bbs.tarena.com.cn">
<meta http-equiv="refresh" content="3">
-->
<title>html01</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<h1>欢迎</h1>
<p>欢迎大家来到<a href="http://bbs.tarena.com.cn">这里</a></p>
<h2>在这里，你可以</h2>
<ul>
<li>学java</li>
<li>有机会找到人生的另外一半</li>
</ul>
</body>
</html>
（1）meta
http-equiv="content-type"告知浏览器HTML页面的编码方式。
http-equiv="refresh",指定页面刷新的频率。
name="keywords"，为搜索引擎指定关键字，例如：
<meta name="keywords" content=“tarena","java">
（2）link
（3）列表
ul元素用于创建无号序列表
ol元素用于创建有序号列表
li元素表示列表项目
（4）块级元素与行内元素
div、p 、h1等元素常常被称为“块级元素”（需要另开始一行）；
span、 strong 等元素称为“行内元素” （不需要另开始一行）
3、掌握链接的使用
（1）基本语法
<a href="http://www.sina.com" target="">sina</a>
target属性确定链接页面显示的窗口
_blank(新窗口), _self(原窗口)
（2）文档内导航
<a name="top"/> … … … <a href="#top">to top</a>
（3）发送邮件
<a href="mailto:eric_ct@126.com?subject=hello">发送邮件</a>
（4）图片作为链接
<a href="#"><img border="0" src="img/dl.gif" /></a>
（5）图片区域产生链接
<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，
为各顶点值; 当shape="circle"（圆形）时，为圆心坐 标值和半径值。 coords值依照图片大小的不同
和所希望链接区域的不同而有所不同
</map>
（6）链接中的伪样式
a:link { color: red} 没有访问时
a:visited { color: blue} 访问后
a:active { color: lime} 鼠标点击但还没有放开时
a:hover { color: aqua} 鼠标指向时
4、掌握表格的使用
table元素定义表格
tr元素定义行
td元素单元格
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
align属性用于指明横向对齐方式：left center right
valign属性纵向对齐方式：top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
5、熟练掌握表单的使用
表单的作用
常用属性
action
method
input
text checkbox radio submit reset image button
select textarea
6、了解css，掌握一些比较核心（程序员应该掌握）的css知识
（1）什么是css
Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。
（2）css的基本语法
selector {property:value; property:value; …}
（3）css选择器
简单选择器
例如: h1{color:blue} 针对所有的h1元素
类选择器
例如:.msg {color:red} 针对class属性为msg的元素.
p.msg {color: blue} 只针对class属性为msg的p元素.
ID选择器
例如:#err {background-color:#blue} 针对id属性为err的元素.
派生选择器
例如: #content p {color:blue} 针对id是content元素中的p元素.
li span { font-color: red}针对li中的span元素
（4）选择器分组
可以对选择器进行组合, 这些选择器就可以共享样式,例如:
h1,h2,h3 {color:green}
（5）css继承
子元素将继承父元素的样式而不需要另加指定
（6）样式表的引入与优先级
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
（7）css定位
diplay属性
display：none 不显示
display：block 块级元素
display: inline 行内元素
position属性
static 默认的选项, 按照浏览器默认的方式摆放。
absolute 相对于父元素, 按top和left值指定的值摆放。
relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
（8）盒模型
内容(content)、填充(padding)、边框(border)、边界(margin)
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也
具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西
（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆
放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
内边距相关CSS属性
例如：
h1 {padding: 10px 20px 30px 20%;}
相当于
h1 {
padding-top: 10px;
padding-right:20px;
padding-bottom:30px;
padding-left: 20%;
}
其中padding属性的书写顺序为从top开始顺时针旋转，既top、right、bottom、left；设置为百分数意为相对于父元素的width的百分比。
外边距相关CSS属性
例如：
h1 {margin : 10px 0px 15px 5px} 和padding类似
p {margin : 10%} 相对于父元素的width
body{margin: 0}
边框相关CSS属性
border-style 针对所有边框的样式
border-width 针对所有边框设置宽度
border-color针对所有边框中可见部分的颜色。
也可这样设置：
border:宽度、样式（ashed/solid）、颜色
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
7、框架
<html>
<head>
<frameset cols="50%,*" border="1">
<frame src="left" name="f1" noresize="true" />
<frame src="right" name="f2" marginwidth="50" marginheight="60" />
</frameset>
</head>
</html>
JavaScript的如下：
1、了解javascript的一些常识
（1）什么是javascript
最早由网景公司开发的一种脚本语言, 被浏览器解释执行。
是一个文本文件，后缀为.js
用来向 html页面添加动态的交互行为。
（2）javascript的作用
操作html（包括修改html属性，增加、删除html标记，修改html元素样式等）
ajax核心技术之一，可异步向服务器发送请求。
使用的常见场合：
数据验证
为页面添加动态行为
动态改变页面外观
ajax
2、一个简单的javascript程序。
js的执行过程
基于事件的响应方式
3、掌握javascript脚本引入方式：
（1）页面内部
<script type="text/JavaScript">
alert('hello');
</script>
（2）单独放在文件里
<script type="text/JavaScript" src="js01.js"></script>
（3）嵌入html元素内部
<a href="javascript:alert('hello’);">sayHello</a>
4、掌握常见的数据类型及操作
（1）基本类型
JS有5种基本数据类型
number, string, boolean,null,undefined
几个需要注意的问题：
var a = null; alert(a == undefined);
typeof 用于返回类型
Infinity和NaN
对于number类型Infinity表示无穷, NaN表示非数字
isNaN("aaa")
将字符串转换为数值
parseInt(…),parseFloat()
将数值转换为字符串
toString(…)
字符串的基本属性和方法
length属性 返回字符串的长度
charAt(index) 返回指定位置的字符
substring(from, to) 返回子字符串
indexOf(str) 指定字符串在原字符串中
第一次出现的位置
lastIndexOf(str) 指定字符串在
原字符串中最后一次出现的的位置
match(regexp) 返回匹配指定正则表达式的字符串，返回的结果是一个数组
var str2 = 'asd212abc345';
var reg2 = /[0-9]+/g;
var arr = str2.match(reg2);
search(regexp) 返回按照正则表达式检索
到的字符串位置
str2.search(reg2)
toLowerCase/toUpperCase 返回小写/大写形式
replace(regexp,'abc'); 替换符合reg正则表达式
规定的字符串
str2 = str2.replace(reg2,'888');
（2）复合类型
数组、对象、函数
数组的使用
创建数组, 长度由后期赋值决定
var a = [1,2,3,4,5];
var b = [];
var c = new Array();
length属性返回数组的长度
toString()方法, 返回数组的字符串表示
concat方法, 用于连接两个数组
join方法，用于将数组中的各个元素
连接成字符串。
reverse方法，将数组反转
slice用于截取数组的一部分并以
数组的形式返回
sort()排序，可通过如下形式来重新定义排序方式：
var arr4 = arr3.sort(function(a1,a2){
return -a1.length + a2.length;
});
6、掌握常见事件
onclick 鼠标单击
onchange 内容改变
onfocus 获得焦点
onblur 失去焦点
onload 元素加载显示
onunload 页面关闭
onmouseout 鼠标移出
onDblClick 鼠标双击
7、如何访问页面内元素
getElementByID()
使用prototype
搜索更多相关主题的帖子:
html 笔记 javascript
----------------解决方案--------------------------------------------------------
支持
----------------解决方案--------------------------------------------------------
只能当作是了解，没有多大的意义。
----------------解决方案--------------------------------------------------------