java Web 编程笔记

gxhslcww

浏览: 76979 次
性别:
来自: 南通

最近访客更多访客>>

fengyilin

suncong1024

pi88dian88

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

编程 Web Java CSS HTML

10月6日
中级阶段的第二小阶段:
1 HTML
2 xhtml
3 css
4 javascript
5 xml
6 jsp
HTML
HTML不区分大小写出
HTML语言即超文本标记语言,是WWW的描述语言
HTML的结构包括头部(head),主体(body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容
网页以<html>开头,</html>结尾
myfirst.html
HTML：
第一部分:
字体设置:
标题字体
<h#>…<h#> # = 1,2,3,4,5,6   字体的顺序是从大到小
<hn>------<hn>标志的是黑体
字体的大小
<font size = #>…</font>#= 1,2,3,4,5,6,7 顺序从小到大
是常规字体
<br>换行标签
<p>段落标签
在<head>中设置客户端浏览器的字符编码：
<meta http-equiv="Content-Type" content="text /html;charset=#">
#:
1 gb2312
2 utf-8
<align=center>   居中
<align=right>    居右
默认是居左的
<center>…</center> 把里面的内容全部居中
&nbsp &是空格
&COPY文华学院
&QUOT
&AMP
&LT
&GT
&REG
<pre> 预风格处理，可以识别在网页中的空格
<b> 粗体
<i> 斜体
<u>下划线
font.html
第二部分HTML的链接
加target="_blank"弹出一个新的对话框
link.html
锚点链接：
link_2.html
10月7日
页面的控制：
<head>
</head>
1 网站关键字：
<META NAME=”KEYWORDS” CONTENT=”1,2”>
2 禁用页面缓存：
<META HTTP-EQUIV=”CACHE-CONTROL” CONTENT=”NO-CACHE”>
页面主体的控制：
<body bgcolor=red text=blue link=blue alink=red vlink=red>
bgcolor 背景色，text 正文, link链接, alink鼠标按下去时,vlink已访问过的
</body>
page.html
页面中的图片：
<img src=xxx.jpg>
img.html
表单（form）：
作用：用户填写信息，并且提交的功能
<form action=page.html method= >
</form>
action：代表数据提交的路径
method：代表数据提交的方式：get,post
get：以明文的方式在地址栏中进行数据传递
post：在http请求头中进行数据的传递，一般情况下：较为隐私的数据使用：post，普通的数据使用：get
form中的组件：
<input type=* name=**>
type=text, password, checkbox, radio, image, hidden, submit, reset
first_form.html
表单中的下拉列表和多选列表：
<SELECT NAME=xxx SIZE=4 MULTIPLE>
//multiple这个列表为多选列表
<SELECT NAME=xxx>
//下拉列表
显示内容使用：
<option value=>显示内容
表单中的文本区：
<textarea name= rows= cols= >
</textarea>
reg_form.html
10月8日
页面中的表格(table)：
1 为网页布局
2 加载，显示数据
web2.0：Div+Css+xhtml
<table>
</table>
<th>姓名</th>    //表头
<tr></tr>         //表行
<td></td>        //表格的数据（列）
table.html
table_2.html
跨多行，多列的表元(Table Span)
跨多行表元<colspan=#>
跨多列表元<rowspan=#>
cellpaddint：填充表格内部空间-->
cellspacing：行间距_填充表格外部空间
表格的分组显示(Struetured Table)
<thead>…</thead> --- 表的题头(Header)
<tbody>…</tbody> ---表的正文
<tfoot>…</tfoot>-----表的脚注
table_group.html
只显示组(Groups)与组之间的分隔线<table rules=groups>
只显示行与行之间的分隔线<table rules=rows>
只显示列与列之间的分隔线<table rules=cols>
不显示任何的分隔线<table rules=none>
使用表格为表单布局：
table_form.html
valign应用于垂直对齐:top
练习：使用表格和表单注册页面
my_register.html
10月9日
框架(frame):
<frameset>   <!—定义框架的结构à
</frameset>
cols=以列的方式进行框架的划分
rows=以行的方式进行框架的划分
<frame src=xxx.html name= > <!—框架中的内容à
</frame>
frameset.html
框架不能放入body标签中
frameset_rows.html
index.html
框架间的连接：
1 <frame src= name=xxx>    //定义框架的名字
2 <a href= target=xxx>     //在链接中使用target属性指定框架的名字
框架的其它属性：
frameborder    //边框大小
bordercolor     //边框颜色
scrolling=no //控制用户，不可以拖动分割条
浮动窗口--------在当前的html中包含、显示另外一个web资源
float window
<iframe src= >
</iframe>
style=”border:0” 去掉边框
现在掌握的HTML内容：
1 html框架
2 字体的控制：大小，颜色，位置，段落
3 页码的控制：背景色，字符编码
4 链接：普通链接，书签链接
5 图片
6 表单
7 表格
8 框架
9浮动窗口
10 资源的嵌入：flash，背景音乐，mp3,avi,applet
11 列表（重点）
12 div,span标签
资源的嵌入：
1 flash.html
<embed src= width= height=></embed>
2 avi.html
<embed src= autostart=true hidden=no></embed>
3 bg_sound.html
<bgsound src= >
4 applet.html
<applet code=xxx.class width= height= >
<param name= value= >
</applet>
applet的生命周期：
0构造
1 init( )
2 start( )
3 stop( )
4 destroy( )
javase提供一个工具： appletviewer
可以在浏览器外进行applet的调试和查看
MyButton.java
使用applet注意点：
由于applet是在浏览器中进行访问的，所以一些se的api是无法使用
如何写applet程序：
1 当前类必须继承于java.applet或者javax.swing.Japplet
实际上我们可以认为applet是一个Panel类型
小技巧：
使用自己的Swing程序，可以是SE applecation程序，也可以是applet程序-----双重程序的编写
现在web的发展（美工）
1 AJAX
Web前台：
html,css,div,javascript,flash,ps
10月10日
滚动字幕
基本语法：
<marquee>…</marquee>
文字移动属性的设置
方向 <direction=#>#=left,rigth
循环<loop=#>#=次数，若未指定则循环不止(infinite)
速度<scrollamount=#>
延时<scrolldelay=#>
marquee.html
列表：
1 实现常用的列表描述
2 实现网页中的菜单
列表的类型：
1 无序列表<ul>   //在网页布局时采用------菜单
2 有序列表<ol>
ul.html
列表的属性：
div,span
定义列表(Definition lists)<dl><dt>….<dd>…</dl>
定制无序列表元素<ul type=#>#=disk, circle, square
定制有序列表表中的序号<ol type=#>#=A,a,l,i,1>
ul.html
photoshop.html
文字的分区(Division)显示
<div align=#>…</div>#={left, right, center}
div.html
span.html
div,span都是一个区域，div有换行功能，span不具有换行功能
xhtml
什么是xhtml
XHTML 1.0是一种在HTML 4.0基本上优化和改进的新语言，目的是基于XML应用，XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应于未来网络应用更多的需求
XHTML标准语法规则：
属性名称必须为小写
属性值使用双引号
属性简写是不允许的
XHTML DTD定义强制元素
示例：
This is correct;
<input checked=”checked”/>
<input readonly=”readonly”/>
<input disabled=”disabled”/>
<option selected=”selected”/>
<frame noresize=”noresize”/>
网站：W3C www.w3c.org
<input type=”text” name=”username” id=”username”>
DOCTYPE与DTD的作用
DOCTYPE是document type（文档类型）的简写，用来说明你用的XHTML或者HTML是什么版本
DTD叫文档类型定义，里面包含了文档的规则，浏览就根据你定义的DTD来解释你页面的标识，并展现出来
DocType的种类：
三种DTD声明：
过滤的(Transitional)
严格的(Strict)
框架的(Frameset)
XMLNS
“xmlns”是XHTML namespace的缩写，XHTML文档要求xmlns属性出现在html标签中。然而，w3.org的校验器不会由于这个属性没有出现在你的XHTML文档中面报告错误。这是因为” xmlns=http:w3.org/1999/xhtml”是一个固定的值
注意：在meta声明语句的最后，有一个斜杠“/“，对于不成对的标识，要求在标识最后加一个空格，然后跟一个“/”，例如<br>写成<br/>
如何写XHTML：
1 DOCTYPE
2 xmlns
3 meta 指定字符编码
4 属性名必须小写
5属性值必须有双引号
6 属性不允许简写
7 单个出现的标签必须有空格/如：<br/>
8 可选(name替换为id)
使用eclipse进行xhtml的开发：
右点选other,再选web
1 src: //存放java源程序
2 webcontent: //存放html或其它网络资源
apache-tomcat-6.0.16.exe //是一个web服务器
安装，并处于关闭状态
将eclipse和temcat服务器进行关联：
1 新建Server
在左框右点other，里面的 web 下的HTML
配置浏览器
在window下选最后一个，在弹出的对话框左边，选Web Browser,在右边点按钮New,在弹出的对话框中按Browse按钮，选C:\Program Files\Internet Explorer下选IEXPLORE.EXE，再在window下选倒数第二个，选你刚刚写的name，再运行
1 列表
2 div,span
3 如何编写xhtml符合8个要求
4 使用eclipse+tomcat进行web的开发
10月11日
默认情况下xhtml在统一网站风格的时候，会有大量重复性代码
xhtml代码，维护起来非常复杂
什么是css
css是Cascading Style Sheet的缩写，主要是用来控制HTML标签属性，使页面更加规整和美观。---级联样式表
css语法结构：
1 类名可以随意定义，但是要有意义
2 如果定义了与HTML标签同名，那么此标签的HTML属性将直接使用
3 定义类名通常以开头，定义HTML标签属性可以直接书写
<style>
<! –
h1{color：blue}
h2{color：yellow}
……
-- >
</style>
first_css.html
css的导入：
导入步骤：
1 新建-CSS(文件的后缀名为.css)
2 在页面中导入
导入时有两种方法:
1 <link href=”xxx.css” rel=”stylesheet” tyle=”text/css”>
test.css
mysytle.html
2 @import url(“myimport.css”>
myimport.css
myimport.html
注:常用的为第一种
css的选择器
1 h1{color:orange; font-family; “黑体” } // 标记选择器
2 p.first{color:green}   //类型+标记选择器
3 .fourth{color:yellow}   //类别选择器
4 p b{color:red}        //复合标签选择器
5 #test{color:blue}      //ID选择器
selector.css
selector.html
CSS的文字控制：
1 font-family    //文字的外观
font-family：宋体，黑体
2 font-size      //文字的大小
font-size：10px    //此文字10个像素
CSS单位描述：
in（英）
cm（厘米）
mm（毫米）
pt（点数）
pc（打字机字间距）
em（ems）
ex（x-height）
px（象素）
3 text-align     //文字的位置
text-align：center
4 text-indent    //首行缩进
text-indent：10px
5 text-transform   //转换大小写
text-transform：lowercase
6 text-decoration   //文字装饰
text-decoration：
none无
underline下划线
overline上划线
line-through删除线
blind闪烁
fontstyle.css
fontstyle.html
7 line-height    //行高
line-height：lcm
8 vertical-align//文字的垂直位置
vertical-align：top
9 letter-spacing //文字的间距
10 font-style:italic //控制字体的风格
练习：
使用文字控制画出google的logo
google.css
google.html
10月13日
css浮动属性:
float
可以让指定的元素,进行浮动
.myblue{
font-size:100px;
color:blue;
float:left
}
font_css.css
font_css.html
字体围绕图片
image.css
image.html
1 背景，颜色控制属性
color:
background-color
background-image   //背景图片
backgrond-image:url(xxx.jpg)
background-repeat    //图片的重复
background-repeat：
repeat | repeat-x | repeat-y | no-repeat
repeat：当x,y 方向有空间的时候，都进行图片的重复
repeat-x：
repeat-y：
no-repeat：
background-attachment   //控制图片是否跟随浏览器滚动条进行滚动
background-attachment:
scroll
fixed //是图片不滚动-------固定
bg_img.css
bg_img.html
图片的缩放：
width：
height：
img.css
img.html
掌握CSS：
1 文字的控制
2 图片，颜色，背景的控制
3 容器，边框（界）控制
4 网站排版，布局
5 滤镜
容器，边界部分：非常重要
1 边界：
border    //控制容器的四个方向边界风格
border-top   //上方边框
border-rigth //右边边框
border-bottom //下方边框
border-left   //左边边框

border-color   //边框颜色
border-style //边框风格
值：
none：不画边框不论 border-width的宽度是多少,边框都不会显示
dotted边框的样式为由点组成的虚线
dash 边框的样式为由短线组成的虚线
solid 边框为实线
double 边框线为双线，双线再加上它们之间的空白的宽度就等于border=width宽度
groove 3D沟槽状的边框
ridge 3D脊状的边框
inset 3D内嵌的边框（颜色较深）
outset 3D外嵌的边框（颜色较浅）、
border.css
border.html
容器（box）：盒了模型
1 padding    //填充容器,在盒子内部进行填充
padding.css
padding.html
2 margin     //
margin.css
margin.html
盒子居中显示：
mediacy.css
mediacy.html
10月14日
CSS分级属性：     //主要是控制ul,ol的显示风格
display      //控制显示风格
值：
block | inline | list-item | none
block        //断行显示
list-item      //控制li左边的显示类型
属性二：
list-style-type
值：
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
常用的：none
display.css
display.html
绝对定位：
position
值：
absolute    //绝对定位
relative     //相对定位
static      //默认值
position.css
position.html
可视性：
visibility
值：
hidden使元素被隐藏
visible使元素可以被看见
visibility.css
visibility.html

CSS实例：
table_css.css
table_css.html
1 css实现隔行变色表格
2 css+table进行网站的布局
table_layout.css
table_layout.html

table_layout2.css
table_layout2.html
3 链接风格的控制
a:lind          //控制链接的风格
a:visited        //浏览过链接的风格
a:hover         //鼠标在链接上方的风格
4 菜单（导航条）的制作：
基本都是使用：ul + li实现
4.1
menu1.css
menu1.html    //垂直菜单
4.2
menu2.css
menu2.css     //水平菜单
5 CSS控制表单风格
form_css.html
10月15日
div+css网页布局,排版
1 分析网站的架构：
网站的基本排版方式
1 美工效果图
2 Web前台根据效果图，进行编写，布局
2 模块划分(功能区域)：
举例：
1 网站的导航
2 左边的菜单：
2.1 新闻
2.2 音乐
3右边菜单：
3.1 友情链接
3.2 体育
4 主体内容：
3 编写
3.1 统一类名：
标准：
1 容器的命名：
1.1 一般使用ID选择器，并且为大写
#container         //代表整个当前浏览器的容器。Jframe
#header(banner)    //网站的logo
#nav             //网站的导航
#left, right----(sidebar)
#main(content)     //网站的主体内容
2 Item的命名：
一般为功能模块对应的英文单词
示例：
音乐----(music)
动手编写：
网站的结构：
css/main.css
images/xxx.jpg, xxx.gif
index.html
新建项目：div_css
div_css.css
dic_css.html
使用不同的背景颜色，进行完站功能的划分
CSS属性具继承性
mybolog.css
mybolog.html
10月16日
练习:
对中国移动电子计费网站的重构
目的：
1 具有功能的确良Web网站的设计
2 巩固DIV+ CSS
div_css_exercise    //中国移动电子计费网
10月17日
DIV+CSS+XHTML------à大作业：
1 前台     //界面----普通的用户浏览
2 后台     //网站的管理员使用
公司的网站发布系统（表现层）：
1 Web前台：
功能模块：
1 公司简介
2 公司业务
3 公司服务
4 联系我们

2 Web后台：
功能模块：
1 修改公司的简介
2 修改公司业务
3 修改公司服务
4 修改联系我们

http://localhost:8080/index.html   //前台
http://localhost:8080/admin/index/hmtl     //后台
WEBCentent:
css/main.css
images/
index.html, xxx.html
admin/index.html, xxx.html

分享到：