资源描述
网页编程
第四章
一、工作原理
在地址栏中输入URL-------->internet----->服务器
IE解释HTML编码变成网页
二、HTML:标记语言以<开头,以>结束
语法：
<标记名>
<标记名 属性名="值">
<标记名>内容</标记名>
<标记名 属性名="值"> 内容 </标记名>
注：1、</..> 标记结束
2、属性要写<>内
3、值可用"",'',省略。建议用双引号
4、不区分大小写
5、<!--注释-->
常用标记
1. <html>...</html> ：网页的开始和结束标记
注：所有标记都位于中间
2. <head> ...</head> : 网页的头，放设立代码
3. <body>...</body> : 网页的主体,放网页的重要内容
4. <title>...</title> :设立网页标题栏上的文字
注：放在<head>
5. <meta> 描述信息
注：放在<head>
例：
<meta http-equiv="refresh" content="2"> 2秒后自动刷新网页
<meta http-equiv="refresh" content="2;url=c:">2秒后刷新到C:
附加：
<body>属性:
bgcolor="背景色",
background="背景图片",
bgproperties="fixed" 背景图片固定
6.<p> </p> 段落
属性：align=left/center/right 对齐方式(左中右)
注：</p>可以省略,碰到第二个<p>，认为该段结束
7.<h1>到<h6>标题
注：1.<h1>字号最大，<h6>字号最小
2.有align
3.标题与段落，标题与标题区别只有字号区别
8.<br> 回车
注：<p>与<br>区别为<p>多一个空行
9.<pre> </pre> :按预定格式输出，原样显示
10.字符格式化
<I> </I>斜体
<b> </b>加粗
<u> </u>带下划线
<sup> </sup>上标
<sub> </sub>下标
11.<ul></ul>无序列表
12.<ol></ol>有序列表
13.<li>列表项
注： a.有序列表<li>可以加type=1/A/a/I/i（数字/大字母...）
b. <ol>有start属性，可以指定起始编号
14.<hr>水平线
属性: size="粗细",width="宽度",noshade无阴影,color="颜色"
align="对齐方式"
注：宽度可以使用比例
15.<font></font>字体
属性：size="大小",color="颜色",face="字体类型"
16.<img>插图片
src="图片位置",align="bottom/middle/top" 对齐方式
alt="提醒文字"
注：a.对齐方式是指与图片同行的文字的对齐方式
b.提醒文字指图片不正常显示，则显示文字。另鼠标悬停时 文字
17.<embed src="途径" width="宽度">插声音和视频
18.<a> </a>超链接
属性：name="锚名称" href="途径"
格式：<a href="链接的页面或位置">提醒文字或图片</a>
第一种：<A href="1.html">进入</A> 链接某页面
第二种：<a name="xue">雪山飞狐</a> 为目的取名
<a href="#xue">雪</a> 链接到名为xue的位置
第三种：<a href="1.html#xue">雪</a> 跳到另一网页的某个位置
第四种：<a href="mailto:邮箱">联系我</a> 用outLook发邮件
第五章
第五章
表格:显示数据和布局
组成:表格-->行-->单元格
标记:<table>表格
<tr> 行
<td> 单元格
<th> 列标题
<caption> 表标题
1.<table>
属性: align 对齐方式(指表格的位置),width 宽, height高,bgcolor 背景色,background 背景图,
bordercolor 边框色, border 边框的粗细
cellspacing 单元格之间的间隔,默认为1,cellpadding 内容与边框的间隔
2. <tr>
属性:
align 对齐方式(行内容的位置)(left/center/right)
bgcolor 背景色,bordercolor 边框的颜色,valign 垂直对齐方式(bottom/middle/top)
3.<td>
属性:align,valign,width,height, bgcolor,bordercolor,background
colspan合并列,rowspan合并行
4.<th> 列标题
注:相称于<td>,只是<th>中的内容自动加粗居中
5.<caption>表标题
注:位于表格上方,居中, 编码时需要写在<table>标记里面
表单
1、表单标记
<form>
注：所有的表单元素(组件)放在<form>标记中
属性：
a.method="post/get" 提交方式
post在地址栏中不显示提交内容（表单元素的名称及值）
get 显示提交内容
b.action提交页面
2.表单元素相关标记
a.<input>
属性：
type
文本框 text
密码框 password
提交按钮 submit 单击后会跳转到action所规定的提交页面
重置按钮 reset 清空，使表单元素回到初始状态
普通按钮 button
图片提交 image 功能相称于submit
单选框 radio
复选框 checkbox
文献 file
隐藏域 hidden
name 表单元素的名称
value 值
size 文本框的宽度
maxlength 文本框最大字符数
checked 选中(单选和复选)
src 图片提交按钮的途径
操作细节
1.<input type="image">与<a><img></a>的区别:
前者为图片提交，将所有表单元素的名字及值上传到服务器
后者为页面跳转，只是简朴的超链接。
2.单选框和复选框分组，只需要将name即名字设立为同样就OK
3.单复框有提交值与提醒值之分
<input type="radio" value="nan">男
value为提交值，提交时上传服务器
标记后的男会显示在页面上，起提醒作用,跟提交无关
4.列表框和文本域不能使用input标记
5.单复框用checked，列表框用selected选中
6.按钮可以用<input>也可以用<button>标记,但<button>可以改变字体或在按钮上加图片
b.<select>和<option> 列表框及列表项
<select>
<option > 高中</option>
<option selected> 大专</option>
</select>
属性：
size :框的大小（行）
multiple:是否可以选择多项
c. <textArea>文本域
属性：
cols 总列数
rows 总行数
<textArea >我喜欢</textArea> 没有value属性，值必须放在中间
附:
<input type="submit/reset/button" value="按钮">等同于
<button type="submit/reset/button">按钮</button>
但
<button type="submit"><font color="red">按钮</font></button>
<button type="submit"><img src="">按钮</button>
第一，二章
专业术语:
万维网,协议,UrL,HTML,网站,网页,静态网页,动态网页
Dreamweaver 梦工厂
组成:菜单栏 ,插入栏,面板组,属性检查器
三种视图:代码/拆分/设计
菜单栏:
编辑--->标签库(相称于帮助)/首选参数(可以改字体/颜色)
插入(插入所需要的标记)
窗口:显示所需的面板
插入栏:常用(普通标记)/布局(对页排版)/表单(表单元素)
/文本(格式化文字的标记)/flash元素
操作一:建站点(管理网站信息)
建文献夹-->D中-->站点菜单--->新建站点-->为站点取名--->
否,不使用服务器技术--->选择站点所相应的文献夹-->如何连服务器:无-->完毕
操作二:设立页面的属性
属性检查器-->页面属性->整个页面的字体/字号/前景/背景/超链接
操作三:布局
插入栏--->布局--->布局--->布局表格/布局单元格
区别:
布局表格:不能直接输入文字或插图片,它生成的是<table>,里 面可以放布局单元格
布局单元格:能插文字和图片,但不能放表格或单元格,生成<td>
附:超链接途径
1.完整途径 E:\1.html
2.相对途径: 1.html或 aa\1.html
3.URL: .com
4.文献Doc,ppt.excel
第三章
模板
1、新建站点(必须建站点才干做模板)
2、新建一个普通网页(即做模块就跟做网页同样)
3、各网页相同部分在模块中做好，不同部分变成可编辑区域：
选中-->插入--->模板对象-->可编辑区域
4、创建模板
插入-->模板对象--->创建模板
注：模板的后缀.dwt,放在目录Templates中
5、使用模板
在需要套用模板的页面-->编辑-->模板-->套用模板到页
插入表单和表单元素
注：1.先插入表单再插表格，最后加表单元素
2.可以在属性栏中更改表单元素的属性
多媒体
1、flash文本，flash按钮，flash(swf)
环节：插入-->媒体
注：gif图片，插入-->图像
层：z轴越大，离我们越近
浮动广告：
1、插入层:插入-->布局对象-->层
2、时间轴：窗口菜单-->时间轴(让时间轴可见)
将层拖届时间轴上---->拖长时间轴（速度慢些）--->选择最后一帧---->将层拖到最后停止的位置-->选择自动播放，循环播放--->在中间帧右击选择插入关键帧-->拖动层（调置曲线路）
行为：窗口菜单--->行为(事件)
常用事件:
onLoad:页面打开
onclick:单击
onDoubleClick:双击
onmouseOver:鼠标悬停
onmouseOut:鼠标离开
onmouseUp:鼠标松开
onmouseDown:鼠标按下
图片：
jpg:图片效果好,不支持动画，占空间大
gif:支持动画，但像素低，效果差，占空间小
第七章
样式表:css(级联样式表/层叠样式表)
作用:1、扩展了HTML的功能
2、提高重用功能
3、动画
常用样式
1、文本
text-align: left/right/center 对齐方式
text-decoration:overline/underline...
文字装饰
line-height:行间距
letter-spacing:字间距
text-indent:缩进(长度单位)5em
2、背景/颜色
color:字体颜色
background-color:背景色
background-image:背景图片
background-repeat:no-repeat(不反复)
（反复方法） /repeat(反复)
/repeat-x(横向反复)
/repeat-y(纵向)
background-position:对齐方式
left/right/center/bottom/top
3、字体
font-family：字体
font-size:字号
font-style:字体样式(斜体等)
font-weight:字体粗细
4、边框：
Border-style:边框样式
double(双线)
dashed(虚线)...
border-color:边框颜色
border-left-color:左边框颜色
....
5、定位(一般用于层)150页
样式分类
一、行内样式表:样式少
注：只能当前标记内的内容有效
格式：<标记名 style="属性:值;属性2:值..">
二、页面级样式
注：当前页面有效
<style type="text/css">
....
</style>
页面样式必须写在<style>标记中,<style>标记习惯写在<head>，写在<style>标记中称为选择器
1、标记选择器
标记名{属性:值;属性2:值...}
td{color:red} 将当前页的所有的td标记字体改 为红色
2、类选择器
. 类名{属性：值;属性2：值...};
作用：可用于不同的标记或同一标记中部分使用
调用：<标记名 class="类名">
3、ID选择器
# ID名{属性:值;属性2：值...};
作用：一般只用一次，避免命名冲突,由于ID即标 记的名称
调用：<标记名 id="ID名">
三、外部样式
直接写选择器，样式文献后缀为.css
调用：
方法一:
@import "样式文献途径";
注：必须写在<style>标记中
方法二：
<LINK REL= stylesheet HREF=“样式文献" Type="text/css">
优先级
行-->页-->外部
第八章
DHTML:动态HTML
单纯的HTML只能控制网页的内容和格式.(标记语言)
DHTML=HTML+CSS+脚本
脚本:嵌在网页的编程语言
JavaScript:非java
客户端开发也可用于服务器开发,重要是客户端
三种语法:
1、写在事件里面
例：
<input type="button" name="btn" value="按钮"
onclick=" alert('hello world');">
2、写在<script>标记中,<script>写在head
例 <script language="javascript">
alert("hello world");
</script>
3、外部脚本,脚本文献的后缀.js
a.脚本文献
alert("hello world");
b.在网页中调用脚本文献
<script language="javascript" src="文献名.js">
</script>
注：每写一句加分号
区分大小写
注释//,/* */
常用的输入和输出
document.write();在网页上输出
alert(); 消息框
confirm(); 选择框，返回值为boolean,拟定true/取消false
prompt("提醒信息",默认值); 输入框，返回String,即用户所输入的内容
变量：
1、变量的声明
var 变量名;
2、变量作用域
全局变量：作用于整个网页，可声明也可不声明(在函数外声明)
局部变量：作用于某个方法（函数）,必须声明(在函数内声明)
数据类型：
string,number,boolean,null;
强制类型转换
parseInt() ,parseFloat()
判断是否为数字isNaN(),为数字是false,不为数字是true
+号，能加则加，不能则连
for(i=1;i<=10;i++)
{
document.write(
"<hr width="+(i*10)+"% color='red'><br>");
}
注：在脚本中，在网页上显示标记，必须写在document.write()中
编码环节
画页面-->表单-->表格-->表单元素(一般将按钮变成普通按钮)
-->为表单取名-->为表单元素取名--->写脚本
例：取得某个文本框中的值：
表单名.表单元素名.value
for循环
<script language="javascript">
function fun()
{
var op=new Option(1900,1900); //产生Option
//相称于<option value=1900>1900</option>
frm.year.options.add(op);
//在表单frm的year列表框中添加op
}
</script>
<body onload="fun()"> //网页打开时调用fun()函数
frm.day.length=0; //设立day列表框的长度为0,相称清空
var arr=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);/用下标做月份,值每月的最后一天
var m=frm.month.value; //从月份列表框中得到月
for(i=1;i<=arr[m];i++) //arr[m],运用月找到每月的最后一天
{
var op=new Option(i,i);
frm.day.options.add(op);
}
第九章
知识点:
一、数组
定义：
var 数组名=new Array(元素/长度);
例:var arr=new Array(1,2,3); //元素
var arr=new Array(5); //声明一个长度为5的数组
输出：
document.write(arr); //整个数组输出
document.write(arr[0]); //输出第1个元素
属性：length 求数组长度
方法：
join() 联接
sort() 排序(升序)
reverse() 逆序
例：var s=arr.join('-'); //将arr用-联接成字符串放到s
二、函数
function 方法/函数名(参数1，参数2)
{
方法体；
}
注：参数不加类型，直接写变量名
function fun(a,b)
{
alert(a*b); //接受两个参数，输出积
}
调用:fun(10,20)
系统方法
eval(); 将字符串进行计算
isNaN(); 是数字为false,不是数字为true,约束
parseInt();
parseFloat();
核心对象：String,Math,Date
String:
1、var s="hello"
var s2=new String("hello");
2、属性length长度
3、方法
s.fontcolor("blue") //字体颜色
s.toUpperCase(); //大写
s.charAt(位置); //求某个位置上的字母,下标从0
s.indexOf(字母); //求某字母的位置
s.substring(始，终) // [始,终) 截取从始位置到终位置
s.substr(始，长度) //截取
Math:所有方法都是static
类名.方法名( )
抽奖例
<h1 id="jp">按抽奖按开始</h1>
var arr=new Array("纸巾","谢谢","彩电","玩具车","宝马"); //数组
var i=parseInt(Math.random()*5);
//随机数0--1，乘5,表达0--5(不涉及5),转整数作下标
jp.innerHTML=arr[i];
//设立名为jp的标记中间的内容为arr[i]
Date:
1、产生对象
var d=new Date(); 系统时间
var d2=new Date("2023/03/27");
2、toLocaleString()以本地格式显示时间
get系列获得
set系统设立
注：getDay()获得星期0--6,0表星期天
getMonth()获得月0--11
动态显示时间
<script language="javascript">
function funon()
{
var d=new Date();
var x=new Array("日","一","二","三","四","五","六");
t.innerHTML=d.toLocaleString()+"星期"+x[d.getDay()];
//x[d.getDay()]以星期为下标，读中文星期
setTimeout("fun()",1000);
//隔1000毫秒（1秒）,重新调用自己(递归调用)
}
</script>
<body onload="fun()">
<h1 id="t"></h1>
一、事件
onClick 单击
onDoubleClick 双击
onmouseOver 悬停
onmouseOut 鼠标离开
onmouseDown
onmouseUp
onfocus 获得焦点
onblur 失去焦点
onchange 假如文本框的内容改变
onload 加载(网页打开时)
浏览对象
window窗口
history历史
document 文档（网页）
location 地址栏
form 表单
link 超链接
一、访问
1、普通标记
<h1 id="abc" >我是H1标记</h1>
a. abc.innerHTML
b. window.document.getElementById("abc").innerHTML;
c. window省略,document.get....
d. document.all["abc"].innerHTML;
2、表单元素
<form name="form1">
<input type="text" name="txt" value="文本框中值">
</form>
a.表单名.表单元素名.value
form1.txt.value;
b.window.document.form1.txt.value
二、window对象
screen:屏幕对象
status:状态栏对象
方法:
open()
open("要弹出网页","别名","属性");
例:
window.open("1.html","","width=200px,status=1");
弹出1.html，宽度为200px,有状态栏。 0没有,1有
close()关闭窗口
window.opener=null; //去掉提醒框;假如创建者为null,在IE 6中可直接关闭，不需要弹出是否关
window.close(); //关闭当前窗口
三、document
属性： bgColor背景色
fgColor前景色
linkColor超链接颜色
URL获取当前页面的URL或跳转到另一个URL
四、history历史
方法：
back(); 相称于后退按钮
forward(); 相称于前进按钮
go(); go(-2) 后退两页,go(2)前进两页
五、location地址
属性：
href:功能与document.URL相同
方法:
assign("url"); 功能与location.href相同
reload(); 刷新
replace("url"); 替换当前网页，无历史记录，不可后退
知识点:
文本框:
属性:readonly只读,不能修改
方法: focus()获得焦点
select()选中框中内容
单复选框:习惯同组的名字同样,value不同样
属性:checked 是否被选中
下拉列表
属性:
value选中项的值
options所有的选项
selectedIndex 选中项的下标
length 选项的个数
环节:
1、打开eclipse
2、新建工程：file-->new-->project-->web project->next
--->project name(工程名)/ location(保存位置，一般 不动)-->finish
3、右击工程名-->new -->other-->HTML(第一个)->next->file name(网页名)
注：网页默认保存在webroot文献夹中
4、右击工程名--->new --->class(数据操作类)-->package(包名)/name(类名)
注：类默认在src中
5、右击工程名-->new -->JSP-->file name(JSP网页的名称)
注：保存在webroot文献夹中
重要代码：
JSP第一行:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>中的
import表导包，改为 import="java.util.*,dao.DataOp"
pageEncoding编码方式：改ISO-8859-1为GBK
主体部分
<body>
<% //加了<% ..%> 中可写java代码
//取值
String n=request.getParameter("txtName");
int c
=Integer.parseInt(request.getParameter("txtCls"));
//产生数据库操作对象
DataOp d=new DataOp();
boolean b=d.update("insert into...");
//显示结果
if(b==true)
{
out.print("<h1>注册成功</h1>");//在网页输出
}
else
{
out.print("<h1>注册失败</h1>");
}
%>
</body>
6、在HTML注册页
<form action="Ok.jsp"> 为表单添加提交的页面
7、为工程添加服务器
工具栏(8个)-->选择工程名-->add-->tomcat 5(服务器)
8、启动服务器(发布)
工具栏（9个）
见到ms结尾表成功
9、打到浏览器（IE）输入
http://localhost:8080/工程名
正则表达式
var reg=/规则/;
var b=reg.test("要验证的字符串");
注:b为true表符合规定,false为不符合
特殊符号
表空格
< 表小于号
> 表大于号
例:假如想在网页上显示<br> ,必须写<br> 否则会被认为是标记
样式表
一、语法（规则）
选择器{属性:值;属性2:值2...}
1、p{color:red} //所有<p>标记的字变成红色
2、.cls1{color:red} //类选择器,class="类名"进行调用
3、#id1{color:red}
//ID选择器, id="id名"进行调用，一般只调用一次
4、a:link{color:red} //超链接未访问前的颜色
a:hover{} 悬停在超链接上
a:active{} 活动的超链接,指鼠标按下时
a:visited{} 访问后的超链接
伪类选择器
5、空格表达并且(双重约束)
.abc a:hover{color:red} 仅对调用了class="abc"的标 记内的超链接悬停有效
.cls1 p{color:red} 只用于调用了class="cls1"的<p>标 记
6、逗号表或者
h1,p{color:red} h1或p标记都可以使用
二、滤镜(特效)
语法：style="filter:选项(属性名=值,属性名2=值)"
1、透明alpha
<img style="filter:alpha(opacity=透明度,style=样式)">
opacity透明度1--100,数字越大，越不透明
style: 1从右往左 2环圆状 3方状透明
2、投影:DropShadow
style="filter:dropshadow(color=投影颜色,offx=x偏移量,offy=y偏移量)"
3、水平翻转flipH 垂直翻转flipV
style="filter:flipH" /style="filte:flipV"/
style="filter:flipH flipV"
4、灰度gray
style="filter:gray"
5、反色invert
style="filter:invert"
6、发光边沿glow
style="filter:glow(color=颜色,strength=强度)"
滚动条样式
<style type="css/text">
body{
scrollbar-face-color:147faf; //滚动条的颜色
scrollbar-track-color:ffffff; //底色
scrollbar-arrow-color:ff0000; //三角形的颜色
}
</style>
1
框架:不能同时使用body和frameset
<frameset rows="30%,*"> //将网页提成上下两份，上占30%
//下占70%
<frame src="top.html" name="t">
//在上面添加top.html网页,名为T
<frameset cols="20%,*"> 将下面提成左右两份
<frame src="left.html" name="le">
<frame src="right.html" name="r">
</frameset>
</frameset>
附加属性
noresize 不能改变框架大小
srcolling 是否带滚动条
frameborder 是否有边框
border 边框的粗细
marginwidth 宽(左边距)
marginheight 高(顶边距)
框架上的超链接
1、
<a href="right.html" target="r">新闻</a>
//点击新闻链接到到right.html,出现在名为r的框架中
<a href="网页" target="框架名/_blank/_top/_self">
_blank:在新网页中打开
_top:破坏本来框架，独占IE显示
_self:在当前部分打开
注：只针对一个超链接
2、<base target="框架名/_blank_top/_self">
例：<base target="r">
//指当前网页上的所有超链接所有到r框架
绘制图案
int x,y;
public void paint(Graphics g)
{
//设立绘图对象的颜色为红色
g.setColor(Color.red);
//在当前位置画一个5个像素宽高的矩形(起点x,起点y,宽，高)
g.fillRect(x,y,5,5);
}
//鼠标拖动事件
public void this_mouseDragged(MouseEvent e) {
//获得鼠标按下时的位置，即x轴和y轴
x=e.getX();
y=e.getY();
//调用窗口自带动的绘图方法
this.repaint();
}
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
