一、 HTML
1.超文本标记语言不是一种编程语言，是一种描述性的标记语言,用于描述超文本中内容的显示方式（文件扩展名为.html或.htm）
基本格式：
<html>
<head><title></title></head>
<body></body>
</html>
html: 放在html文件的开头，但没有实质性的功能，即使没有这个标记，
浏览器在碰到其他的html标记时也一样会进行解析。浏览器内置了html语言 的解析器.可以设置默认打开浏览器:工具—文件夹选项-文件类型
head:头标记，放置关于此html文件的信息，如提供索引，定义css等。
title:标题标记，包含在head标记内，它的作用是设定网页的标题。
body:主体标记，网页所需要显示的内容都放在这个标记内。
2. HTML中常见的标签
注释标签：<!-- -->
标题标签： <hx> hx的取值是从h1-h6,字体从大到小
文字粗体标签： <b>
文字斜体标签： <i>
下划线标签： <u>
换行标签： <br> 换行标签是单个使用的标记
段落标签： <p> 段落标签除换行外，还会增加一行空白
空格标签：
font:设置字体的color颜色size文字大小(1-7)7种层次的大小，face 设置字体。
特殊字符
如果要在网页上显示一些特殊符号,比如 <,>,&等.
因为这些符号在代码中会被浏览器识别并解释.所以用特殊方式表示
< : < > :> & : &
nbsp是空格字符 sup:为上标标记 sub:为下标标记
<marquee></marquee> 滚动标签
bgcolor 背景颜色
Direction 滚动方向 left、right、up、down
Behavior 滚动方式scroll滚动、silde滑动、alternate摆动
loop设定滚动次数，-1为一直滚动。
注意：<marquee></marquee>内只能用<br>换行，不能用<p>
dl,dt,dd,ul,li的用法
如下例子：
<dl>
<dt>学科名称 </dt>
<dd> 语文</dd>
<dd>数学</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>人事部</dd>
</dl>
a标签：
例如：<a href=”http://sina.com.cn”>新浪网站</a>
注意：当没有指定具体的协议时，浏览器会启动默认的file协议引擎来解析href的值
<ahref=”mailto:abc:@sina.com”>联系我们</a>
当你点击时，会弹出一个邮件对话框。
<aname=”top”>顶部位置</a>
<ahref=”#top”>回到顶部</a>
<ahref=”javascript:alert(‘sdfd’)”>一个对话框</a>
表格：
如下例子：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格嵌套页面</title>
</head>
<body>
<table bordercolor="#666666"cellpadding="0"cellspacing="0" border="1" width="500px"height="300px" >
<tr >
<td colspan="4"align="center">
1
</td>
</tr>
<tr>
<td align="center"width="40px">
2
</td>
<td align="center"width="40px" >
3
</td>
<tdalign="center" width="40px">
4
</td>
<tdalign="center" width="90px">
5
</td>
</tr>
<tr >
<td colspan="4">
<table border="1" cellpadding="0"cellspacing="0" width="470px" height="100px" align="center"bordercolor="#666666">
<tr height="53px">
<td colspan="3"align="center">
1
</td>
</tr>
<tr>
<tdalign="center">
2
</td>
<tdrowspan="2" align="center" >
3
</td>
<tdalign="center">
4
</td>
</tr>
<tr>
<tdalign="center">
5
</td>
<tdalign="center">
6
</td>
</table>
<br/>
<table bordercolor="#666666"align="center"cellpadding="0" cellspacing="0" border="1" height="42px"width="470px">
<tr>
<tdwidth="70" align="center">
1
</td>
<td width="70"align="center">
2
</td>
<tdwidth="70" align="center">
3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>运行效果图为：
注意的是：当你想要合并单元格时：可以设置：colspan=”2”,或rowspan=”2”;
框架：<frameset></frameset>
<framesetrows="30%" name="top" noresize="noresize"border="yes">
<frameset cols="30%">
<frame src="1.html"name="left" noresize="noresize"/>
<frame src="2.html" name="right"noresize="noresize"/>
</frameset>
</frameset>
这里面的1.html表示连接的一个页面，2.html连接的另外一个页面
注意：要想让框线不可以随意拖动的话，加上noresize="noresize"属性。
表单的使用：
如下例子是表单中的各个标签的使用：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格</title>
</head>
<body>
<table border="1"width="450px" cellpadding="0" cellspacing="0" >
<tr height="150px">
<td align="center"width="150px" >
<inputtype="submit" value="提交" name="sub"/>
</td>
<td bgcolor="#FF0000"align="center" width="150px" >
<textareacols="20px" rows="10px">...............</textarea>
<br/>
<input type="button" value="清除" name="res"/>
</td>
<tdalign="center" >
<inputtype="image" src="image/1.GIF" width="150px" >
</td>
</tr>
<tr>
<tdbgcolor="#66FFCC" width="175px" height="60px"align="center">
<inputtype="radio" name="date1"/>1<input type="radio"name="date1"/>2<input type="radio"name="date1">3
</td>
<td bgcolor="#66FFCC"width="175px" height="60px" align="center">
<inputtype="checkbox" name="date2"/>1<inputtype="checkbox"name="date2"/>2<inputtype="checkbox" name="date2">3
</td>
<td>
<selectmultiple="multiple" size="3">
<optionvalue="1"> 1</option>
<option value="2"> 2</option>
<optionvalue="3"> 3</option>
<option value="4"selected="selected"> 4</option>
</select>
<select size="1">
<optionvalue="1">1</option>
<option value="2"selected="selected">2</option>
</select>
<selectmultiple="multiple" size="2">
<optionvalue="1">1</option>
<optionselected="selected" value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<inputtype="text" size="5"width="50px" name="text1" maxlength="2"disabled=" " ><br/>maxlength值为2所以只能输入2个字符,因为disable所以文本无法输入<br/>
<inputtype="passwrod" name="password1" value="" size="5"maxlength="2">passwoed密码输入功能<br/>
<input type="hidden"name="hidden1" value="sdf" size="5"maxlength="2">1
<input type="hidden"name="hidden2" value="sdf" size="5"maxlength="2">11
</td>
<td width="150px">
8
</td>
<td>
<ahref="http://www.sina.com.cn">新浪</a><br/>
<ahref="http://www.baidu.com.cn">百度</a><br/>
<ahref="http://www.tengxun.com.cn">腾讯</a><br/>
</td>
</tr>
<tr>
<td>
<fontcolor="#00CC00" face="宋体">字体设置</font>
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
</table>
</body>
</html>结果如下：
注意：form表单的两种提交方式的区别
get：会将提交的信息显示在地址栏上。对于敏感信息不安全。因为显示在地址栏。因为显示在地址栏，而地址栏的信息数据量是有限的，所以不可以提交大数据。会将信息封装到请求行，也就是http请求消息头之前
post: 不会将提交的信息显示在地址栏。对于敏感信息安全。因为不显示会将信息封装到请求体，也就是http请求消息头之后。请求体和请求头之间是通过空行来进行分隔的可以提交大体积的数据
以后在进行表单 提交时：建议使用post提交。
Meta标签
例如：<metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>
表示打开此页面3秒后自动转到新浪页面。
3.基本架构
C/S结构 Client /Server
(1) 开发者需要编写两个端点，一个是客户端程序，一个是服务端程序。举例：QQ,360.
(2) 需要在客户机安装客户端的部分。
(3) 弊端：客户端维护较为麻烦。机器只要一重装，就需要重新安装该软件。
升级也比较麻烦。后期有了一个解决方案：对于升级，可以通过网络升级的形式完成。
(4) 好处：客户端的出现，可以减轻服务端的运算压力。
B/S结构 Browser /Server
(1) 这种结构，程序员只需要编写服务端。而客户端只需要有浏览器即可，
只要装有操作系统的机器都自带浏览器。
这是web技术的流行。导致这种结果的流行。
(2) 不用开发客户端，相对省事很多。而且操作也比较简单，只要能上网，
就可以进行象浏览网页一样进行功能的使用。
(3) b/s运行全在服务端。
对于大数据量的运算就会很慢。虽然现在也有网页网游，但是使用flash完成的。它的数据量相对较小。而且flash也是在客户端由浏览器启动
练习：注册表单
<HTML>
<HEAD>
<TITLE> 注册页面 </TITLE>
</HEAD>
<BODY>
<form method="post">
<table border="1"cellpadding="0" cellspacing="0" width="598px"height="548px" align="center">
<tr>
<th colspan="2" align="center">
<font size="+7" face="宋体">注册页面
</th>
</tr>
<tr>
<td align="right">
用户名：
</td>
<td>
<inputtype="text" name="name">
<fontcolor="#FF0000">*</font>
</td>
</tr>
<tr>
<td align="right">
密码：
</td>
<td>
<input type="password" name="psw">
<fontcolor="#FF0000">*</font>
</td>
</tr>
<tr>
<td align="right">
性别：
</td>
<td>
<inputtype="radio" name="sex">男<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td align="right">
出生日期：
</td>
<td>
<selectname="birthDate">
<option>1990</option>
<option>1991</option>
<option>19D92</option>
<option>1989</option>
<option>1987</option>
<option>1988</option>
</select>年
<select name="birthDate">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>月
<select name="birthDate">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
</select>日
</td>
</tr>
<tr>
<td align="right">
爱好：
</td>
<td>
<inputtype="checkbox"/>足球<input type="checkbox"/>篮球<inputtype="checkbox"/>游泳<inputtype="checkbox"/>跑步
</td>
</tr>
<tr>
<td align="right">
籍贯：
</td>
<td>
<select name="contry">
<option>江苏</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北省</option>
</select>省
<select name="contry">
<option>无锡</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>沧州</option>
</select>市
</td>
</tr>
<tr>
<td align="right">
个人介绍：
</td>
<td>
<textareacols="20" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">
公司网址：
</td>
<td>
<ahref="http://www.daiwenjuan.com">http://www.daiwenjuan.com</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>运行效果：
4.CSS
其实是CSS将网页内容和显示样式进行分离，提高了显示功能。并且提供了更多的 属性的设置
CSS和HTML结合的方式
style属性方式：利用标签中style属性来改变每个标签的显示样式。
例：<pstyle="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head> <style type=”text/css”> p {color:#FF0000;} </style> </head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
导入方式：前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，
那么就用到这种方式。例：<styletype="text/css"> @import url(css_3.css);
div { color:#FF0000;} </style>
注意：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
链接方式：通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。
例：<linkrel="stylesheet" type="text/css" href="css_3.css"/>
注：可以通过多个link标签链接进来多个CSS文件。
CSS选择器
CSS选择器的类型
html标签名选择器。使用的就是html的标签名
class选择器。其实使用的标签中的class属性
id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，
方便对标签进行操作。在定义的中，多个标签的class属性值可以相同，
而id值要唯一，因为JavaScript中经常用。
class选择器：
在标签中定义class属性并赋值.通过 标签名.class值 对该标签进行样 式设置。
id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。
一般情况下id都定义成唯一的。
CSS扩展选择器
关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
注：多个不同选择器要用逗号分隔开。
伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H – A
5.JavaScript
JavaScript代码和HTML的结合
JS代码存放在标签对 <script></script>中。
当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
只要在script标签的src属性,引入一个js文件。（方便后期维护，扩展）
javascript和html的结合方式
想要将其他代码融入到Html中，都是以标签的形式。
当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<scriptsrc=”test.js” type=”text/javascript”></script>
JS弹出框
(1) 警告框 用法：alert(...);
(2) 确认框 用法：confirm(...);
(3) 提示框 用法：prompt("",""); 前者为提示信息，后者为默认值
JavaScript语法-变量
JavaScript是一种弱类型语言。
通过关键字var来定义
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，
该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特 点。
而且有些情况是必须写分号的，如：var x =3 ; var y =5
如果两条语句写在同一行，就需要分号隔开。
JavaScript语法-运算符
Javascript中的运算符和Java大致相同。只是运算过程中需要注意几点：
var x = 3120/1000; x = 3
var x = 2.4+3.6 ; x=6
var x = “12” + 1; x=13
特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
JavaScript语法-语句
判断结构(if语句) 注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
document的write方法。可以写字符串，也可以写出html标签。
JavaScript语法-函数
A 一般函数
格式：function 函数名(形式参数...) {
执行语句；
return 返回值； }
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，
或者调用没有参数的函数，给其传值，该函数也一样运行。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
动态函数 通过Js的内置对象Function实现。
例：var demo = newFunction(“x,y”;”alert(x+y);”);
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
匿名函数
格式：function(){...}
例：var demo = function(){...} demo();
通常在定义事件属性的行为时较为常用。
例： function test() {
alert(“load ok”);
}
window.onload = test;
可以写成匿名函数的形式：
window.onload = function()
{
alert(“load ok”);
}
匿名函数就是一种简写格式
JavaScript语法-数组
格式：var arr = [元素1，元素2，元素3...];
注意：其中的元素可以使任意类型，但是，推荐使用同一种类型。
var arr = new Array();
var arr = new Array(3);
JavaScript自定义对象
Js是基于对象的，不是面向对象的。但是我们可以通过函数来模拟对象的使用。
用js的函数模拟对象并使用, 用js的函数模拟对象的成员变量及方法
JavaScript用于操作对象的语句
with语句。 格式：with(对象){ }
当调用一个对象中多个成员时,为了简化调用,避免"对象."这种格式的重复书写。
var p = new Person(“zhangsan”,20);
alert(p.name+”,”+p.age);
可以写成：var p = newPerson(“zhangsan”,20);
with(p) { alert(name+”,”+age); }
with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
for...in语句 用于遍历对象属性。
例：var p = newPerson(“zhangsan”,20);
for(x in p) {
alert(x);//结果是两个对话框，一个是name，一个是age。
alert(x+”:”+p[x]);
//可以得到属性与属性的值。p[x]:p对象就是个数组，要通
过指定的元素名获取元素的值。
}
JavaScript对象的高级特性
prototype属性
js给已有对象提供了一个特殊的属性,prototype属性.原型属性.
它的作用:获取该对象的原型引用. 这里可以理解为一个父类.
原型的出现,可以获取到该对象的父类的引用.
当给带对象的父类添加新属性和行为时,该对象也会具备这些属性和行为.
所以,原型的出现,可以给已有的对象进行新功能的扩展.
为了方便理解:照猫画虎.
照猫画虎. 虎怎么来的,我是照着猫画来的,这个时候,我们就可以说虎的原型是猫.
也就是说: 虎.prototype = 猫.
如果,我们在猫上加了一个方法 猫.play = function(){alert("play run")}
这个时候,虎具备play这个方法了吗,具备了吗.
虎的原型是猫吗.可以看出猫是虎的父类吗.
5.BOM概述
BOM:Browser Object Model 浏览器对象模型
浏览器本身是一个窗体,所以它有一个windows对象.windows包含如下对象
navigator ：包含关于 Web 浏览器的信息。
history：包含了用户已浏览的 URL 的信息。
location：包含关于当前 URL 的信息。
document:代表给定浏览器窗口中的 HTML 文档。也就是我们的DOM对象。
DOM:Document Object Model 文档对象模型.
该技术的出现,将标记型文档封装成了对象.
并将该标记型文档中的所有内容(标签,属性,文本)都封装成了对象.
DOM解析.
当标记型文档被DOM解析器解析后，会按照标签的层次关系，产生一颗dom树结构。
这个树的每个分支被称为一个节点。
6. DHTML概述
它不是一个语言,它是多个技术的综合体简称. 这里包含的技术有html,css,dom,javascript
这四种技术在DHTML编程中所处的角色呢:
html: 提供了标签用于封装数据.它是基础.没标签,什么都做不了.
css: 提供了样式,可以对标签封装的内容进行样式的操作.
dom: 将html文档封装成了对象.并将文档中的内容都封装成了对象.
对象中都定义了更多的属性和行为.方便于对象的操作.
javascript: 提供了逻辑性很强的程序设计语言来负责页面的行为.
7. DOM获取节点的方式
getElementById：通过该标签的id属性值来获取该标签节点对象.
getElementsByName：通过标签的name属性值来获取对象.
而且返回的不是一个节点对象.而是多个节点对象,用数组表示的.
getElementsByName：通过标签名称获取节点对象.
但是标签很容易重复.所以返回的是一个节点数组.
document对象作为html文档的对象,可以获取页面中任意一个节点.
节点本身是个对象,它具备三个属性:
1:nodeName 节点名称
2:nodeType 节点类型
3:nodeValue 节点值
设置获取节点的值
1：value
2：innerHTML,innerText
节点间的层级关系
1:parentNode:父节点 是唯一的
2:childNodes:子节点 可以有多个
3:兄弟节点
上一个兄弟节点 previousSibling
下一个兄弟节点 nextSibling
7. 取消超链接的默认点击效果.
方式1:通过给href属性的值定义一个'#'.
这是借用了定位标记的原理.不指定具体的位置.
这样就取消了超链接的效果.但是会启动file引擎,不够专业.
方式2:可以定义:javascript:void(0);启动js引擎,运行一个函数.
void(0) 这个函数什么都不做.
超链接的默认事件被取消了.需哟自定义事件完成超链接的点击效果
下面例子是一个改变字体大小和颜色的例子：
代码如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<styletype="text/css">
a:link,a:visited{
color:#0099CC;
text-decoration:none;
font-size:14px;
}
a:hover{
color:#0033FF;
}
.newStyle{
border:#9900CC 1px solid;
font-size:16px;
width:350px;
color:#0033FF
}
.max{
color:#6633FF;
background-color:#99FF66
width:350px;
}
.min{
color:#FFFF66;
background-color:#9900CC;
width:350px;
}
</style>
<scripttype="text/javascript">
functionchangFont(size,newStyle)
{
var divNode=document.getElementById("newstext");
divNode.style.fontSize=size
divNode.className=newsstext
}
functionchangFont_1(styleName)
{
var divNode=document.getElementById("newstext");
divNode.className=styleName;
}
</script>
</head>
<body>
<h2>这是一个大新闻</h2>
<ahref="javascript:void(0)" οnclick="changFont_1('max')" >大字体</a>
<ahref="javascript:void(0)" οnclick="changFont_1('newStyle')">中字体</a>
<ahref="javascript:void(0)" οnclick="changFont_1('min')">小字体</a>
<divid="newstext" class="newStyle">
可搜到了明基噩梦费劲速度费<br/>
都深速度才能健身卡的三国杀感<br/>
僧都发生撒粉底诶可可什么躲<br/>
电风扇男佛朋克风摩配啊发顺丰<br/>
</div>
</body>
</html>总结：改变字体大小，定义一个函数通过Id来获取这个节点，在定义函数时设置一个参数，为了不让用户自己瞎改变大小，可以在传入字体的大小值改变字体颜色时，要先预先定义好几个样式，然后通过传参数的方式传进来。这样写代码有利于修改，并提高了复用性
注意：不要用id属性来设置样式，这样的话就改变不了了。
下面例子是用于演示开关的
代码如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<!--
演示展开闭合效果
布局属性overflow
-->
<styletype="text/css">
div{
overflow:hidden;
color:#FF0066;}
</style>
<scripttype="text/javascript">
functionlist()
{
vardivNode=document.getElementsByTagName("div")[0];
with(divNode.style)
{
//alert(overflow=="visible");
overflow=(overflow=="visible")?"hidden":"visible";
}
}
</script>
</head>
<body>
<divοnclick="list()" style="height:10px">
gfjeroafmkjo<br/>
fjneawae ve vg<br/>
fcdewmvfireohjtoier<br/>
fh3ewoiafmn3jfg<br/>
</div>
</body>
</html>
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
