JAVA.WEB笔记

最新推荐文章于 2024-07-29 14:22:26 发布

大大同学

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量358

点赞数 1

分类专栏： JAVA 文章标签： java web CSS JS HTML

本文链接：https://blog.csdn.net/qq_28242567/article/details/50962199

版权

JAVA 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.C/S（client sever）就是有服务器和客户端两部分组成的软件比如常见的网络游戏都是
B/S（browser sever）就是用户通过浏览器访问服务器,也就是我们所说的网站

2.HTTP (Hyper Text Transfer Protocol)
网络应用层面向对象支持C/S B/S 支持传输任何类型

3.HTML (Hyper Text Markup Language)
使用HTML标记和元素，可以：
控制页面好人内容的外观
发布联机文档，创建联机表单收集事务信息，检索联机信息
插入动画
开发帮助文件私有变量要小写
4.
<!DOCTYPE html>
<html> 标记开始结束
<head>
<title>T1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



</head>

<body>
This is my HTML page. <br>
</body>
</html>

5.<ELEMENT(元素标识标记) ATTRIBUTE(属性描述标记) = value(分配给属性的内容)>

6. input标记-type属性
text-文本框
password-密码
button-按钮
radio-单选框
checkbox-多选框
submit-提交按钮
reset-重置按钮
image-图片
hidden-隐藏框
file-文件上传
举例
<HTML>
<HEAD>
<TITLE>表单示例</TITLE>
</HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION=“1.jsp" METHOD="POST">
<B><H2 align="left">证券调查示例</H2></B>
<p><B>投资经验</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
<p><B>投资类型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金
<BR></p>
<p><B>今年选择什么证券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>

7.HTML 标题（Heading）是通过 <h1> - <h6>等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的
<HTML>
<HEAD><TITLE>表单示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION=“1.jsp" METHOD="POST">
<B><CENTER><H2>证券调查示例</H2></CENTER></B>
<P><B>您用什么方式购买证券？</B>
<SELECT NAME="RESULT_RadioButton-5">
<OPTION></OPTION>
<OPTION value="网上交易">1)网上交易</OPTION>
<OPTION value="电话交易">2)电话交易</OPTION>
<OPTION value="经纪人代理">3)经纪人代理</OPTION>
<OPTION value="其他">4)其他</OPTION>
</SELECT>

</P>

<BR><BR><BR>
<P><INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></P>
</FORM>
</BODY>
</HTML>

8.特殊字符
……200>189…… >号
……20<189…… <号
……"风驰电掣&quot…… “号
……x&gty;&x=120…… 与符号
……©CopyRight 版权所有…… ? 版权符号
……®APTECH…… ? 注册商标

9.超链接(文字，图像等)
http://www.sina.com.cn 绝对URL
C:\internet\index.html 文件位置
service/index.html 相对URL

举例：
<HTML>
<HEAD>
<TITLE>使用链接</TITLE>
</HEAD>
<BODY>
<BR><BR>
<P>本页的所有内容都讲述关于如何创建到文档的链接
<A HREF = Doc2.html>单ft此处查看文档2</A>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>文档2</TITLE>
</HEAD>
<BODY>
<BR><BR>
<P>这是文档2。单击文档1中的超链接后将显示本页。
<A HREF = Doc1.html target="_blank">返回</A>
</BODY>
</HTML>

10.表标记
<TABLE> … </TABLE> 表标记
<TR> … </TR> 行标记
<TD> … </TD> 单元格标记
<CAPTION> …< /CAPTION> 标题标记
<TH> … </TH> 列标记

举例：
<HTML>
<HEAD>
<TITLE>使用表</TITLE>
</HEAD>
<BODY>
< TABLE >
<CAPTION>创建表</CAPTION>
<TH ALIGN = CENTER>一月</TH>
<TH ALIGN = CENTER>二月</TH>
<TH ALIGN = CENTER>三月</TH>
<TH ALIGN = CENTER>四月</TH>
<TH ALIGN = CENTER>五月</TH>
<TH ALIGN = CENTER>六月</TH>
<TR>
<TD>1000</TD>
<TD>550</TD>
<TD>240</TD>
<TD>1500</TD>
<TD>2765</TD>
<TD>1240</TD>
</TR>
<TR>
<TD>3000</TD>
<TD>2430</TD>
<TD>2500</TD>
<TD>1250</TD>
<TD>900</TD>
<TD>3400</TD>
</TR>
</TABLE>
</BODY>
</HTML>

11.插入行和列
1. 要在表格中插入新行，只要在新行要出现
的地方插入 <TR> 和 <TD>标记即可。

2. 要在表格中插入新列，需要在每行相应的
位置添加单元格<TD>。
<HTML>
<HEAD>
<TITLE>使用表</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TR>
<TD>数据单元格1</TD>
<TD>数据单元格2</TD>
<TD>数据单元格3</TD>
<TR>
<TD>数据单元格4</TD>
<TD>数据单元格5</TD>
<TD>数据单元格6</TD>
</TR>
<TR>
<TD>新行1</TD>

12.综合
<HTML>
<HEAD><TITLE>求职</TITLE></HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 4 COLOR = Forestgreen>申请表</CENTER></FONT></H1><HR><BR>
<FORM action="http://somesite.com/processform" method="post">
<P>
姓名：
<INPUT type="text" id="firstname"><BR>
<P>求职意向<BR><BR>
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="0" CHECKED>网站设计师
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="1" >网管
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="2" >网站开发人员
<P>工作经历<SELECT NAME="CONTROL2">
<OPTION>无</OPTION>
<OPTION>一年</OPTION>
<OPTION>三年</OPTION>
<OPTION>五年</OPTION>
</SELECT><BR>
<P>附注<BR>
<TEXTAREA NAME="CONTROL3" COLS="30" ROWS="5">请在这里键入附注。</TEXTAREA><BR>
<P><INPUT NAME="CONTROL4" TYPE=CHECKBOX CHECKED>发送确认
<BR>
<P><INPUT TYPE=SUBMIT VALUE=确定>
<INPUT TYPE=RESET VALUE=重置>
</FORM>
</BODY>
</HTML>

1.CSS层叠样式表：内容与样式分离
HTML代码重复多，不便大量修改

2.标记选择器
<style>
h1 选择器
{
color:red;属性：值
front-size:25px;
}
</style>

3.类别选择器：用class属性引出
.class{color:red;属性：值 front-size:25px;}

4.ID选择器
#id{color:red;属性：值 front-size:25px;}
如果一个ID出现在2个相同的标签中，会导致JavaScript语法混乱

5.CSS应用：文字样式
3.3.1 段落水平、垂直对齐方式
? text-align: left | right | center | justify
? vertical-align: top | bottom | middle
? 3.3.2 行间距、字间距、词间距
? line-height: 1cm
? letter-spacing: 1cm
? word-spacing: 1cm
? 3.3.3 首字放大
? float: left; (漂浮位置)
? padding-right: 5px (与右边的间隔)
? 3.3.4 页面背景色
? background-color: black
? 3.3.5 边距与间隙
? margin,padding (各带四个方向)

6.列表标记
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
======================================
无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
======================================
有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。<ol>
<li>Milk</li>
<li>Coffee</li>
</ol>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
HTML <span> 元素是内联元素，可用作文本的容器。

7.CSS图片对齐
纵向对齐
? vertical-align:baseline; 基线对齐
? vertical-align:middle; 中部对齐
? vertical-align:sub; 文本下标
? vertical-align:super; 文本上标
? vertical-align:top; 顶端对齐
? vertical-align:text-top; 顶端对齐
? vertical-align:bottom; 底端对齐
? vertical-align:text-bottom; 底端对齐

8.图文混排
浮动对象会向左或向右移动直到遇到边框
( border 、内补丁( padding 、外补丁( margin
或者另一个块对象( block-level )为止

9.CSS页面背景
background-color: 颜色代码
background-image:url(图片地址);

10.CSS布局
1.Table布局

2.DIV

1.ext:用JS语言编写B/S,要导入库文件

ExtJs代码示例（HelloWorld）:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
Ext.onReady(function()
{
Ext.MessageBox.alert("hello","Hello,easyjf open source");
});
</script>
</head>
<body>
</body></html>

2.组件
一个简单的FormPanel代码
var simple = new Ext.FormPanel({ labelWidth: 75, frame:true, url:'saveForm.do',
title: 'Simple Form', bodyStyle:'padding:5px 5px 0', width: 350,
defaults: {width: 230},defaultType: 'textfield', items: [
{fieldLabel: 'First Name',name: 'first',allowBlank:false},
{fieldLabel: 'Company',name: 'company'},
{fieldLabel: 'Email',name: 'email',vtype:'email'}, new Ext.form.TimeField({
fieldLabel: 'Time',name: 'time',
minValue: '8:00am',maxValue: '6:00pm'})
],
buttons: [{text: 'Save'},{text: 'Cancel'}]

javascript:无需编译
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here. alert("这是第一个JavaScript例子!"); alert("欢迎你进入JavaScript世界!");
alert("今后我们将共同学习JavaScript知识！");
</Script>
</Head>
<body>
</body>
</Html>

2.
JavaScript中变量声明，采用其弱类型，即变量在使用
前不需作声明，而是解释器在运行时检查其数据类型.
? 如：
x=1234;
var y＝"4321";
前者说明x为其数值型变量，而后者说明y为字符型变量。

? 使用关键字var来声明变量

3.JS事件
? JavaScript是基于对象(object-based)的语言。
? 而基于对象的基本特征，就是采用事件驱动 (event-driven)。它是在用户图形界面的环境下，使得一切输入变的简单化。
? 通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。

? 单击事件onClick
? onChange改变事件
? 选中事件onSelect
? 获得焦点事件onFocus
? 失去焦点onBlur
? 载入文件onLoad
? 卸载文件onUnload
? <HTML>
<HEAD>
<script Language="JavaScript">
function loadform(){
alert("这是一个自动装载例子!");
}
function unloadform()
{
alert("这是一个卸载例子!");
}
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">调用</a>
</BODY>
</HTML>

4.JS对象
1.字符串对象

?string对象：内部静态性。访问properties和methods时，可使用（.）运算符实现。基本使用格式：objectName.prop/methods

?string对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。
例：
var mytest=“This is a JavaScript” var mystringlength=mytest.length
mystringlength返回mytest字串的长度为20。

3.日期及时间对象
? 功能：提供一个有关日期和时间的对象。
? 静动性：动态性，即必须使用New运算符创建一个实例。
? 例: MyDate=new Date()
? var myDate=new Date(); Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。
日期起始值:１７７０年１月１日００:００:００。

? Window：
? 当前窗口
? 新开窗口
? 通过本地窗口控制新开窗口
? Location：
? 获取或设置现有文档的URL
? History：
? 先前访问过的URL的历史列表
? 常用方法：back()，go(number)
? Document：
? 当前的文档对象
? document.write()：向客户端浏览器输出内容
? document.formName：可以用这个方法得到表单名称
? document.referrer

javascript:无需编译
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here. alert("这是第一个JavaScript例子!"); alert("欢迎你进入JavaScript世界!");
alert("今后我们将共同学习JavaScript知识！");
</Script>
</Head>
<body>
</body>
</Html>

2.
JavaScript中变量声明，采用其弱类型，即变量在使用
前不需作声明，而是解释器在运行时检查其数据类型.
? 如：
x=1234;
var y＝"4321";
前者说明x为其数值型变量，而后者说明y为字符型变量。

? 使用关键字var来声明变量

3.JS事件
? JavaScript是基于对象(object-based)的语言。
? 而基于对象的基本特征，就是采用事件驱动 (event-driven)。它是在用户图形界面的环境下，使得一切输入变的简单化。
? 通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。

? 单击事件onClick
? onChange改变事件
? 选中事件onSelect
? 获得焦点事件onFocus
? 失去焦点onBlur
? 载入文件onLoad
? 卸载文件onUnload
? <HTML>
<HEAD>
<script Language="JavaScript">
function loadform(){
alert("这是一个自动装载例子!");
}
function unloadform()
{
alert("这是一个卸载例子!");
}
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">调用</a>
</BODY>
</HTML>

4.JS对象
1.字符串对象

?string对象：内部静态性。访问properties和methods时，可使用（.）运算符实现。基本使用格式：objectName.prop/methods

?string对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。
例：
var mytest=“This is a JavaScript” var mystringlength=mytest.length
mystringlength返回mytest字串的长度为20。

3.日期及时间对象
? 功能：提供一个有关日期和时间的对象。
? 静动性：动态性，即必须使用New运算符创建一个实例。
? 例: MyDate=new Date()
? var myDate=new Date(); Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。
日期起始值:１７７０年１月１日００:００:００。

? Window：
? 当前窗口
? 新开窗口
? 通过本地窗口控制新开窗口
? Location：
? 获取或设置现有文档的URL
? History：
? 先前访问过的URL的历史列表
? 常用方法：back()，go(number)
? Document：
? 当前的文档对象
? document.write()：向客户端浏览器输出内容
? document.formName：可以用这个方法得到表单名称
? document.referrer

大大同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA.WEB笔记

1.C/S（client sever）就是有服务器和客户端两部分组成的软件比如常见的网络游戏都是 B/S（browser sever）就是用户通过浏览器访问服务器,也就是我们所说的网站2.HTTP (Hyper Text Transfer Protocol) 网络应用层面向对象支持C/S B/S 支持传输任何类型3.HTML (Hyper
复制链接

扫一扫