jsp、JavaScript与html-阿里云开发者社区

0.先看一个实例

<BODY>内嵌子标签：

<H>… … </H> ：文章标题

<FONT size=“12” color=“red”face=“律书”>...</FONT> ：字体标签，控制文本的大小、颜色、字体

<H#> ... </H#> ：#=1, 2, 3, 4, 5, 6 6级字号

<P>...</P> ：段落标签，分段,属性align="center/left/right"

<BR> ：换行标签

<HR> ：水平分隔线

<OL> ：有序表

<UL> ：无序表

<PRE> ：预格式文本

<A></A> ：超链接或页内链接

<IMG> ：图片标签

<MARQUEE>...<MARQUEE>：滚动标签

<table>… </table> ：表格标签

<EMBED SRC="音乐/视频地址" AUTOSTART=true> ：嵌入音乐或视频

<b>...</b 粗体标签

<i>...</i> 斜体标签

<u>...</u> 下划线标签,放在<u>与</u>标签之间的文字将以下划线方式显示。

<em> 用于强调的文本，一般显示为斜体字</em>

<strong> 用于特别强调的文本，显示为粗体字</strong>

<cite> 用于引证和举例，通常是斜体字</cite>

<code> 用来指出这是一组代码</code>

<small> 规定文本以小号字显示</small>

<big> 规定文本以大号字显示</big>

<samp> 显示一段计算机常用的字体，即宽度相等的字体</samp>

<kbd> 由用户输入文本，通常显示为较粗的宽体字</kbd>

<var> 用来表示变量，通常显示为斜体字</var>

<dfn> 表示一个定义或说明，通常显示为斜体字</dfn>

sup指数标签：12<sup>2</sup>=144 指数标签

sub下标标签：硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>

小例子：

<HTML>

<HEAD>

<TITLE>同时进行行列分组</TITLE>

</HEAD>

<BODY>

手机充值、IP卡/电话卡</FONT><BR />

移动 |  100 |  联通|  50

</P>

<UL>

<LI>列表项内容1</LI>

<LI>列表项内容2</LI>

<LI>列表项内容3</LI>

</UL>

<OL>

<LI>列表项内容1</LI>

<LI>列表项内容2</LI>

<LI>列表项内容3</LI>

</OL>

腾讯-QQ币/QQ幻想-30元卡

一口价： 26.45元

运费：卖家承担运费

剩余时间： 5天

宝贝类型：全新

卖主声明：货到付款，可试用10天！

</PRE>

滚动文字或图像

</MARQUEE>

<TD>单元格内容11</TD>

<TD>单元格内容12</TD>

</TR>

<TR>

<TD>单元格内容21</TD>

<TD>单元格内容22</TD>

</TR>

</TABLE>

<TR>

</TR>

<TR>

<TD rowspan="2">各种卡的总汇</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

一、html的<HEAD>及<BODY>标签

1.html由2部分组成：头部和实体。

<HTML>

</HTML>

2.HEAD标签中的一些内嵌子标签

<HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性

内嵌子标签：

<TITLE>html标题</TITLE>

3.html的主体标签<body>

<body>标签的全部属性

link 设定页面默认的连接颜色

alink 设定鼠标正在单击时的连接颜色

vlink 设定访问后连接文字的颜色

background 设定页面背景图像

bgcolor 设定页面背景颜色

leftmargin 设定页面的左边距

topmargin 设定页面的上边距

bgproperties 设定页面背景图像为固定，不随页面的滚动而滚动

text 设定页面文字的颜色

html使用的颜色方案一般是RGB的组合6位16进制“0xff00ff”

二、文字版面的编辑

1.<br>: 换行

2.<P ALIGN= 参数>...</P>：换段align="right/center/left""

3.<pre>...</pre>：原样显示文字，保留原始文字排版的格式

4.<center>...</center>：居中对齐标签

5.<blockquote>...</blockquote>.：可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别。指示这是一段引用。

6.<hr property=?>：水平分隔线

<hr>标签的属性

size设置水平分隔线的粗细

pixel(像素）默认2

width设置水平分隔线的宽度，pixel(像素）、%

align 设置水平分隔线的对齐方式 left center right

color 设置水平分隔线的颜色

noshade取消水平分隔线的3d阴影

7.<address>...</address>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。

<HTML>

<HEAD>

</HEAD>

<BODY>

乐游原

<PRE>

向晚意不适，

驱车登古原。

夕阳无限好，

只是近黄昏。

</PRE>

[唐] 李商隐

</ADDRESS>

</BODY>

</HTML>

8.八大特殊字符

< <

> >

? ©

× ×

& &

? ®

" "

空格  

9.字体标签

9.1<Hn align=参数〉标题内容</Hn> 标题文字标签

9.2.<FONT PROPERTY=?>...<FONT>文字格式控制标签

<FONT>标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。

属性

face 设置文字使用的字体,默认“宋体”

size 设置文字的大小,默认“3”

color 设置文字的颜色,默认“000000”

例子：

<html>

<head>

<title>控制文字的格式</title>

</head>

<body>

<font face=黑体 size=6 color="red" >盼望着，盼望着，东风来了，春天脚步近了。</font> <p>

一切都像刚睡醒的样子，欣欣然张开了眼。<p>山朗润起来了，水涨起来了，太阳的脸红起来了。

</font><p>

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。<p>园子里，田野里，瞧去一大片一大片满是的。<p>坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。<p>风轻悄悄的，草软绵绵的。

</font>

</center>

</body>

</html>

9.3.特定文字样式标签

a.物理类型

(1) 粗体标签<b>...</b

(2) 斜体标签<i>...</i>

(3) 下划线标签<u>...</u> 放在<u>与</u>标签之间的文字将以下划线方式显示。

b.逻辑类型

逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制。

em标签：<em>用于强调的文本，一般显示为斜体字</em>

strong标签：<strong>用于特别强调的文本，显示为粗体字</strong>

cite标签：<cite>用于引证和举例，通常是斜体字</cite>

code标签：<code>用来指出这是一组代码</code>

small标签：<small>规定文本以小号字显示</small>

big标签：<big>规定文本以大号字显示</big>

samp标签：<samp>显示一段计算机常用的字体，即宽度相等的字体</samp>

kbd标签：<kbd>由用户输入文本，通常显示为较粗的宽体字</kbd>

var标签：<var>用来表示变量，通常显示为斜体字</var>

dfn标签：<dfn>表示一个定义或说明，通常显示为斜体字</dfn>

sup标签：12<sup>2</sup>=144

sub标签：硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>

例子：

<html>

<head>

<title>字体的物理类型</title>

</head>

<body>

<font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br><br>

<i>这些文字是斜体的</i> <br><br>

<u>这些文字带有下划线</u>

<pre>

em标签：<em>用于强调的文本，一般显示为斜体字</em>

strong标签：<strong>用于特别强调的文本，显示为粗体字</strong>

cite标签：<cite>用于引证和举例，通常是斜体字</cite>

code标签：<code>用来指出这是一组代码</code>

small标签：<small>规定文本以小号字显示</small>

big标签：<big>规定文本以大号字显示</big>

samp标签：<samp>显示一段计算机常用的字体，即宽度相等的字体</samp>

kbd标签：<kbd>由用户输入文本，通常显示为较粗的宽体字</kbd>

var标签：<var>用来表示变量，通常显示为斜体字</var>

dfn标签：<dfn>表示一个定义或说明，通常显示为斜体字</dfn>

sup标签：12<sup>2</sup>=144

sub标签：硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>

</pre>

</center>

</body>

</html>

三、建立列表

合理的使用列表标签可以起到提纲和格式排序文件的作用。

列表分为两类：无序列表和有序列表

1.无序列表<UL>

无序列表使用的一对标签是<ul></ul>，无序列表指没有进行编号的列表,每一个列表项前使用<LI>。

<LI>的属性type有三个选项：

disc实心园，circle空心园，square小方块

格式：

<ul>

<li type=disc>第一项

<li type=circle>第二项

<li type=square>第三项

</ul>

2.有序列表<OL>

使用标签<ol></ol>，每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。

与无序列表不同，有序列表的属性是属于<ol>的。

<ol>的两个属性：type和start。

start=编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。 type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母，I表示罗马数字，默认为阿拉伯数字。

格式：

<li>第1项

<li>第2项

<li>第3项

<li value= 20>第4项

3.定义列表的标记<DL>/<DT>/<DD>

定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签<DT>，第二层为注释项标签<DD>。<DT>和<DD>标签通常是成对使用的。也可以一个列表项对应于几个解释项，这种方式很少用。<DD>默认的注释是显示在另一行中,当使用<dl compact="compact">后,注释项和列表项将显示在同一行。

格式：

<dl>

<dt>第1项 <dd>注释1

<dt>第2项 <dd>注释2

<dt>第3项 <dd>注释3

</dl>

4.目录列表<DIR>和菜单列表<MENU>

<dir>为目录列表标签,<menu>为菜单列表标签,它们的格式和无序列表<ul>是一样的,例如:

他们和无序列表一样，只不过缩进的空格不同

格式1:

<dir>

<li>第一项

<li>第二项

<li>第三项

</dir>

格式2

<menu>

<li type=disc>第一项

<li type=circle>第二项

<li type=square>第三项

</menu>

四、图像的处理

1.页面背景图像的设定

2.图片标签<img>

图片标签<img>的14个属性：

src 图像的url的路径

alt 提示文字

width 宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.

height 高度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.

dynsrc avi文件的url的路径

loop 设定avi文件循环播放的次数

loopdelay 设定avi文件循环播放延迟

start 设定avi文件的播放方式

lowsrc 设定低分辨率图片,若所加入的是一张很大的图片，可先显示图片。

usemap 映像地图

align 图像和文字之间的排列属性

border 边框

hspace 水平间距

vlign 垂直间距

格式：

3.设定文字和图片之间的对其方式

1).单独占一行时，放在<p>…</p>中，用<p>的对齐属性进行设置。

2).与文本在同一行时，用其自身的align属性（top,middle,bottom）设置图像与文本的垂直对齐。其中：bottom为默认值。

3).图文混排时，可实现图像的左、右环绕文本，用align属性（left图像在左、文本在右,right）。

4.用<img>标签插入avi文件

格式：

<img>标签插入avi文件的属性：

dynsrc 指定avi文件所在路径

loop 设定avi文件循环次数

loopdelay 设定avi文件循环延迟

start 设定文件播放方式：fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）

五、建立超链接

HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。

1.建立超链接的格式：

<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

属性：（3个）

HREF 链接的网页地址：可以是绝对路径、相对路径和根路径

TITLE 该属性用于指定指向链接时所显示的标题文字

TARGET 链接网页将要显示的窗口，默认问当前窗口，frameset中的name的值,或特殊的值

特殊值有：

_parent 在上一级窗口中打开，一般使用分桢的框架页会经常使用

_blank 在新窗口打开

_self 在同一个桢或窗口中打开，这项一般不用设置

_top 在浏览器的整个窗口中打开，忽略任何框架

2.超链接的应用

a.书签链接（2种方式）

首先需要一个：链接到的目的地址

<a name="书签名称">目标超链接名称</a>

name的属性值为该目标定位点的定位标记点名称，是给特定位置点(这个位置点也叫锚点)起个名称。

1）在同一页面要使用链接的地址：页内标签链接

<a href="#书签名称" target="窗口名称">超连链标题名称</a>

2）在不同页面要使用链接的地址：页外标签链接

<a href="URL地址#书签名称" target="窗口名称">超链接标题名称</a>

b.站内链接

所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。可以使用相对路径

c.站外链接

所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有完整的URL地址，包括协议名，主机名，文件所在主机上的的位置的路径以及文件名。最常用的外部链接格式是：<a href="http://网址">

URL外链部接格式:

服务 URL格式描述

WWW http://"地址" 进入万维网站点

Ftp ftp://"" 进入文件传输协议

Telnet telnet://"" 启动Telnet方式

Gopher gopher://"" 访问一个gopher服务器

News news://"" 启动新闻讨论组

Email email://"" 启动邮件

发送email

<html>

<head>

</head>

<body>

<p>

<a href="mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&Subject=早安&bcc=a@b.c

&Body= 早安,笨笨猫祝你度过一个快乐的早晨！">

向笨笨猫的好友发送邮件(抄送笨笨猫)

</a>

</p>

</body>

</html>

d.图像的超链接

e.图像的影像地图超链接

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：

例子：

实例 6-2-42.html

<html>

<head>

</head>

<body>

</map>

</body>

</html>

六、TABLE表格

表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格

定义表格的标签：

<table>...</table> 用于定义一个表格开始和结束

<caption>...</caption> 定义表格的标题。在表格中也可以不用此标签。

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示,<th>标签必须放在<tr>标签内

<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

1.表格<table>标签属性:

width 表格的宽度

height 表格的高度

align 表格在页面的水平摆放位置

background 表格的背景图片

bgcolor 表格的背景颜色

border 表格边框的宽度（以像素为单位）

bordercolor 表格边框颜色当border>=1时起作用

bordercolorlight 表格边框明亮部分的颜色,当border>=1时起作用

bordercolordark 表格边框昏暗部分的颜色,当border>=1时起作用

cellspacing 单元格之间的间距

cellpadding 单元格内容与单元格边界之间的空白距离的大小

rules 单元格边框或分割线:“all”显示所有分隔线,“groups”显示组与组的分隔线,"rows"只显示行与行的分隔线, "cols"只显示列与列的分隔线,"none"所有分隔线都不显示;

frame 表格外边框:

box显示整个表格边框,void不显示表格边框,hsides只显示表格的上下边框,vsides只显示表格的左右边框,above只显示表格的上边框,below只显示表格的下边框,lhs只显示表格的左边框,rhs只显示表格的右边框

例子：

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2.表格行<tr>标签的属性

属性:

height 行高

align 行内容的水平对齐

valign 行内容的垂直对齐

bgcolor 行的背景颜色

bordercolor 行的边框颜色

bordercolorlight 行的亮边框颜色

bordercolordark 行的暗边框颜色

3.单元格<th>和<td>的属性

<th>和<td>的属性:

width/height 单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。

colspan 单元格向右打通的栏数，跨多列

rowspan 单元格向下打通的列数，跨多行

align 单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。

valign 单元格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。

bgcolor 单元格的底色

bordercolor 单元格边框颜色

bordercolorlight 单元格边框向光部分的颜色

bordercolordark 单元格边框背光部分的颜色

background 单元格背景图片

nowrap <td nowrap>禁止单元格内容自动换行.如未设置TD宽度，则noWra起作用；否则noWrap不起作用。

例子：

4.表格的分组

a.表格的行分组<thead>/<tbody>/<tfoot>

html文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签，其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素，可出现多次。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

<html>

<head>

<title>表格按行分组</title>

</head>

<body>

</TR>

</thead>

</TR>

</TR>

</tbody>

</TR>

</TR>

</tbody>

</table>

</body>

</html>

b.表格按列分组<colgroup>

语法格式：<colgroup span="数值" align="参数">

<html>

<head>

<title>表格按列分组</title>

</head>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

七、网页的动态、多媒体效果

1.滚动字幕<marquee>

格式：<marquee>...</marquee>

属性：

align 指定对齐方式top,middle,bottom

bgcolor 设定文字卷动范围的背景颜色

loop 设定文字卷动次数，其值可以是正整数或infinite表示无限次默认为无限循环

height 设定字幕高度

width 设定字幕宽度

scrollamount指定每次移动的速度,数值越大速度越快

scrolldelay 文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快

hspace 指定字幕左右空白区域的大小

vspace 指定字幕上下空白区域的大小

direction 设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动

behavior指定移动方式.scroll滚动播出;slibe滚动到一方后停止;alternate滚动到一方后向相反方向滚动。

2.插入多媒体文件

格式：<EMBED SRC="音乐文件地址">

属性：

SRC="FILENAME" 设定音乐文件的路径

AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE

LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。

STARTIME="分:秒" 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20

VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。

WIDTH HEIGHT 设定播放控件面板的大小

HIDDEN=TRUE 隐藏播放控件面板

CONTROLS=CONSOLE/SMALLCONSOLE 设定播放控件面板的样子

3.嵌入多媒体文件

这种方式将不调用媒体播放器

<bgsound>标签用来设置网页的背景音乐。但只适用於 IE，其参数设定不多。格式如下：

4.点播音乐（超链接音乐）

将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了

<A HREF="imge/一千零一夜.mid">MIDI音乐</A>

超链接的对象可以是各种资源

八、多视窗口框架

框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。

1.语法格式：

<html>

<head>

</head>

......

</html>

2.<frameset>属性

border 设置边框粗细,默认是5象素.

bordercolor 设置边框颜色

frameborder 指定是否显示边框："0"代表不显示边框，"1"代表显示边框

cols 用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分，，当"*"出现一次以上时，表示按比例分割剩余的窗口空间

rows 用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分

framespacing="5" 表示框架与框架间的保留空白的距离

noresize 设定框架不能够调节，只要设定了前面的，后面的将继承

3.子窗口<frame>标签及其属性

<frame>是个单标签,<frame>标签要放在框架集frameset中,<frameset>设置了几个子窗口就必须对应几个<frame>标签，而且每一个<frame>标签内还必须设定一个网页文件（src="*.html",子窗口的排列遵循从左到右，从上到下的次序规则。

其常用属性有:

src 指示加载的url文件的地址

bordercolor 设置边框颜色

frameborder 指示是否要边框,1显示边框，0不显示（不提倡用 yes 或 no）

border 设置边框粗细

name 指示框架名称,是连结标记的 target所要的参数

noresize 指示不能调整窗口的大小,省略此项时就可调整,

scorlling 指示是否要滚动条,auto根据需要自动出现,Yes有,No无

marginwidth 设置内容与窗口左右边缘的距离，默认为1

marginheight 设置内容与窗口上下边缘的边距，默认为1

width 框窗的宽及高默认为width="100" height="100"

align 可选值为 left, right, top, middle, bottom

例子：

<html>

<head>

</head>

</frameset><noframes></noframes>

</html>

4.窗口的名称和链接

如果在窗口中要做链接，就必须对每一个子窗口命名，以便于被用于窗口间的链接，窗口命名要有一定的规则，名称必须是单个英文单词，允许使用下滑线，但不允许使用"—","句点"和空格等，名称必须以字母开头，不能使用数字，还不能使用网页脚本中保留的关键字，在窗口的链接中还要用到一个新的属性"targe",

5.浮动窗口<iframe>

九、表单的设计

表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交 (submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

1.表单

一个表单用<form></form>标志来创建。也即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。

格式：<FORM action＝"url" method=get|post name="myform" target="_blank">... </FORM>

属性：

action "用来接收表单信息的url"，如果这个属性是空值("")则当前文档的url将被使用.当用户提交表单时，服务器将执行网址里面的程序。

method 定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB（255个字节）以下。POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。

target 属性用来指定目标窗口或目标帧。可选当前窗口_self,父级窗口_parent,顶层窗口_top,空白窗口_blank。

2.写入标记<input>

在html语言中,标记<input>具有重要的地位，它能够将浏览器中的控件加载到html文档中，该标记是单个标记，没有结束标记。

<input type="">标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在 <form></form>标志对之间。<input type="">标志中共提供了九种类型的输入区域

格式： <INPUT type="checkbox" name="gen" value="男" size="21“ maxlength=4 checked="checked">

常用属性：

name 控件名称指定元素的类型,10种:TEXT单行文本输入框,PASSWORD密码输入框,RADIO单选按钮,CHECKBOX复选按钮,SUBMIT提交按钮,RESET重置按钮,

FILE文件上传框,IMAGE图片按钮,HIDDEN隐藏域,BUTTON普通按钮

type 控件类型如：botton 普通按钮，texe 文本框等

align 指定对齐方式,可取top, bottom, middl

size 指定控件的宽度

value 用于设定输入默认值

maxlength 在单行文本的时候允许输入的最大字符数

src 插入图像的地址

event 指定激发的事件

除10种input子元素外，还有2种表单元素：

TEXTAREA多行文本框 <textarea rows="5" cols="40">...</textarea>

SELECT下拉列表 <select><option>...</option><option>...</option></select>

十、css样式表

1.作用

CSS样式表也叫级联样式表，它是HTML的美容师，可以改变HTML页面的样式

– 会创建统一外观的字体文本

– 会创建无下划线的超连接样式

– 会创建个性化的表格

– 会创建个性化的表单

2.为什么需要CSS样式表

a.HTML标签的外观样式比较单一

– 颜色只有黑白

– 字体类型和大小无变化

b.样式表的作用相当于华丽的衣服

c.样式表能实现内容与样式的分离，方便团队开发

3.样式表的基本语法

a.样式表的基本结构

P {color:red; font-size:30px; font-family:隶书;}

… …

</STYLE>

b.样式规则：标签样式

<HTML>

<HEAD>

P { color:red; font-family:"隶书"; font-size:24px;}

</STYLE>

c.样式规则：共享样式(类)

.red {

color:red; font-family:"隶书"; font-size:24px;

}

… …

</STYLE>

例子：

<HEAD>

.red

{ color:red; font-family:"隶书"; }

</STYLE>

</HEAD>

<BODY>

<P class="red">床前明月光， </P>

<P class="red">疑是地上霜。</P>

<P>我是郭德刚， </P>

<P class="red">低头思故乡。</P>

</BODY>

d.文本属性

font-size 字体大小

font-family 字体类型

font-style 字体样式

color 设置或检索文本的颜色

text-align 文本对齐

e.方框属性

边界属性 margin-left / margin-right / margin-top /margin-bottom 设置对象的下边距/右边距/上边距

方框属性 border-width border-color border-style 设置边框的宽度/颜色/样式

填充属性 padding-top padding-right padding-bottom padding-left 设置内容与上边框之间的距离

4.特殊样式-超链接样式

– a:link {color: #FF0000} /* 未被访问的链接红色*/

– a:visited {color: #00FF00} /* 已被访问过的链接绿色*/

– a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色*/

– a:active {color: #0000FF} /* 鼠标点中激活链接蓝色*/

5. 行内（嵌入）样式表

如果希望某段文字和其他段落文字显示风格不一样，该如何解决？

<HTML>

<HEAD>

</HEAD>

<BODY>

这个段落应用了样式

<P>

这个段落按默认样式显示

</BODY>

</HTML>

6. 外部样式表文件

如果希望一个网站中多个页面的样式保持一致，如何解决？外部样式表文件

根据样式文件与网页的关联方式又分为：

– 链接（LINK ）外部样式表

– 导入（@import）外部样式表

a.链接（LINK ）外部样式表

<HEAD>

</HEAD>

b.导入（@import）外部样式表

<HEAD>

@ import newstyle.css;

</STYLE>

</HEAD>

十一、html中使用javascript

1.在HTML中嵌入Javasript的方法

a.直接在Javascript代码放在标记对<script type="text/javascript">和</script>之间

b.由<script type="text/javascript" src="myjs.js"/>标记的src属性制定外部的js文件

c.放在事件处理程序中，比如：<p ;onclick事件适用于大部分标签及自定义标签

d.作为URL的主体，这个URL使用特殊的Javascript：协议，比如：<a href=”javascript:alert(‘我是由javascript:协议执行的javascript’)”>点击我</a>

e.利用javascript本身的document.write()方法写入新的javascript代码

f.利用Ajax异步获取javascript代码，然后执行

2.Javascript在页面的执行顺序

a.页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。

b.每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。

c.变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

alert(tmp); //输出 undefined

var tmp = '111';

alert(tmp); //输出 111

//]]>

</script>

d.同一段脚本，函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在第一段代码中，则会报函数未定义错误。

test(); //浏览器报错

//]]>

</script>

test(); //输出 fun!

function test(){alert('fun!');}

//]]>

</script>

e.document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档.(document.write会被解析2次)

复制代码

document.write('<script type="text/javascript" src="test.js"><\/script>');

document.write('<script type="text/javascript">');

document.write('alert("222");')

document.write('alert("变量保存值" + tmpStr);');

document.write('<\/script>');

//]]>

</script>

alert("333");

//]]>

</script>

3.如何改变Javascript在页面的执行顺序

利用window.onload

4.显示的数字每秒加1

var o=document.getElementById('abc');

window.setInterval('o.innerHTML=parseInt(o.innerHTML)+1;',1000);

</script>

刷新时，该值会重置，如果不想重置，可以使用session或cookie

5.任意自定义标签都可以有一个onclick回调属性，执行js的函数

例子：点击“click me”更新输出加1

function myfunc(){

var o=document.getElementById('abc'); //重新将内存中的元素对象获取回来

o.innerHTML=parseInt(o.innerHTML)+1;

}

</script>

jsp脚本

1.JavaServlet引擎通过反射机制链接JSP页面转化为servlet子类，并在请求到来时执行该子类的方法。

2.JSP指令

@指令：提供给JavaServer引擎的编译指示；

<jsp:forward>：提供运行时指令,用于处理页面.

3.请求可被转发和扩充

4.当每次GET页面刷新时，页面上的代码将会被重新执行；而POST页面只能被发送一次，一旦表单数据被发送，浏览器将无法保存数据。

5.Servlet与JSP的关系？

Servlet与JSP都可以通过其文件的绝对路径被浏览器请求，然后处理这些请求，返回响应；不同的是Servlet使用前必须作者自己编译为.class文件才能被使用，而JSP文件直接就可以被使用，但是JSP文件使用的过程是被JavaServlet自动解析为了Servlet子类并进行编译成了.class文件。JSP文件本质上是一个Servlet子类文件，并且JSP文件的不同部分在Servlet文件中存在一一对应的关系。JSP页面存在3种形式：JSP源码(.jsp文件)->java源码(servlet类)->java类(servlet对应class)

6.GET和POST请求参数传递

对于以下表单分别通过GET和POST传送

First Name: <input name="first_name" type="text" />

Last Name: <input name="last_name" type="text" />

</form>

当这个表单被提交时，HTTP request 就会像这样：

GET /foo.php?first_name=John&last_name=Doe&action=Submit HTTP/1.1

...

POST：发送数据至服务器

POST /foo.php HTTP/1.1

...

Content-Length: 43

first_name=John&last_name=Doe&action=Submit //隐藏域

6.Servlet的生命周期

（1）init()

当一个请求被容器引擎收到后，容器检查该servlet是否被载入,如就然后调用装载器得到servlet类并实例化,然后调用init()方法。该方法只会被调用一次。servlet被载入之后就可以处理任意数目的请求了，请求处理完不会被卸载。

（2）service()

init()方法成功完成后，servlet可以接收请求。默认只有一个servlet实例被创建。servlet容器在一个单一线程中向servlet实例转发每一个请求，并调用service()方法(或者doGet(),doPost())。

（3）destroy()

容器在卸载servlet实例时将调用destroy()方法。手动调用destroy()方法并不会卸载实例

7.线程模型

servlet引擎载入一个十二vletde单一实例，在单线程中使用该实例服务于多个请求，而该实例并不是线程安全的。安全的做法是在service()方法中定义局部变量，而不要轻易的将变量定义为servlet的成员变量。

虽然单实例多线程模型为缺省模型，但servlet可以通过继承SingleThreadMode改变此行为，此接口不包含需要实现的方法。这样容器引擎可以创建一个实例池，并分配每一请求到自己的实例和线程，而不是共用实例。但是由于存在多个servlet实例，他们可能同时访问文件或数据库这样的资源，可能会有并发问题。这需要使用同步来解决。

8.服务器与浏览器会话

http不存在状态导致服务器与浏览器之间的会话需要使用其他的方式实现。

跟踪客户端行为状态有2种方式：

a.由客户端来跟踪保存，每次请求页面时，携带该状态给服务器处理。->cookie

b.有服务器来跟踪保存，浏览器保存该状态集id，每次请求页面时，携带该id给服务器。->session；那么session的会话id如何在服务器和浏览器之间传递：(1)服务器可以在响应中加入一个set-Cookie头标,并将session-id作为cookie的取值，在随后的浏览器访问中可以返回带有cookie头标的取值；(2)浏览器可以将session-id附加到URL传递给服务器；(3)隐藏域，如果应用有一系列使用submit按钮进行导航的html窗体组成，session-id可以被存储成一个隐藏域，服务器可以通过request.getParameter()进行检索。显然，只有窗体均为动态生产的时候此方法才有用。

cookie和session都以键值对的形式保存数据。

9.JSP页面组件

JSP元素有3种：

(1).伪指令

伪指令是指示JSP容器生产何种代码的命令。

格式：

<%@ directive-name [attribute="value" ...] %>

3种标准伪指令：page include taglib

a.page用于指定整体jsp页面的属性

b.include为指令在转换时将另一个文件复制到该处，类似与C编译器的#incldue指令;<%@ include file="header.html" %>

c.通过使用一个标签库，在当前页面中启用定制行为

(2).脚本元素：注释、包含表达式、scriptlet和声明

<%-... -%> 注释

<%= express%> 表达式，相当于out.write(express);

<% 语句;语句;...%> scriptlet

<%! 函数或成员变量%> 声明

(3).动作行为（7种，完全使用XML语法编码）

<jsp:useBean> 申明一个java bean实例，使其与一变量名相关;

<jsp:setProperty> 设置在前面<jsp:useBean>申明的bean的属性值;

<jsp:getProperty> 返回一个bean的指定属性值

<jsp:include> 调用另一个资源,将其输出流并入到JSP输出流

<jsp:forward> 将http请求转发到另一个JSP页面或servlet进行处理

<jsp:param>将取值绑定到一个名字,并将绑定传至<jsp:include>或<jsp:forward>调用的另一个资源

<jsp:plugin> 用于生成下载java插件相应的html链接

10.jsp全部隐含对象

request response pageContext session

application out config page exception

11.JSP文件与servlet.java文件对应关系

<%@ page import ...%> -> import ...;

<%! 函数或成员变量%> -> servlet成员变量和成员函数定义或声明

<%...%> -> service()成员函数中的一段代码

JavaScript脚本

一、基础

1.javascript调试一般需要使用firedug插件，开发工具有很多，visual stuaio,eclipse,notpad等等

2.基本语法

2.1 javascript的语法类似与java语言,但不是面向对象的。

2.2 javascript的注解和C语言相同，使用'//'和'/**/'

2.3 javascript可以直接放在html中,如下

...

</script>

而在xhtml中可能需要这么写：

<![CDATA[

...

]]>

</script>

也可以把javascritpt单独放在一个.js的文件中，在html中应用该文件，如

myjavascript.js

alert("hello"); //只有一句

在html中这样引用

2.3 var声明变量

变量只有先声明才能使用,

var x=4; //javascript是自动数据类型

js的数据类型有： Number,String,Boolean,Null,Object(对象),Array,Date,RegExp

Number 数字 : var h=0xe;

String : var str="ls"

Boolean ：var f=false

Null ：null是使用var定义后但没有赋值的变量，var t;此时t是空，没有定义的变量是不能用的。

Object ：var myobject={“iden”:"1","name":"coco"};不同于其它语言的对象，js的对象类似与字典，可以嵌套

调用成员可以这样：alert(myobject.iden) 和这样alert(myobject["iden"])

还可以这样：var mo=new Object; mo.iden="1";mo.name="coco";

Array : var star=new Array(); star[0]="p";star[1]="e";star[2]="w";

或var star=["p","e","w"]; 可以嵌套

Date ：var date= new Date(); alert(date.getYear());

类型转换：一般之涉及数字与字符串之间的转化

var mystr=String(100);

var mynum=Number("100")

bool值可以在字符串及数字之间自动转化

2.4保留字

break,delete,if,this,while,case,do,in,throw,with,catch,else,instanceof,try,continue,finaly,new,typeof,debugger,for,return,var,default,function,switch,void;下面将来保留字：calss,enum,extends,super,const,export,import,implements,let,private,public,yield,interface,package,protected,static

2.5 几个重要的操作符

in 包含操作符： if("start" in myobj) myobj是对象

instanceof 操作符 if(myobj instanceof Object)

delete 删除操作符，可用于任何变量及元素 var st={"1","2"}; delete(st[0]);

typeof 求var的类型 if(typeof(st)=="object")

2.6 js的流控制语句

if else

switch case 支持字符串匹配哦

while/do while

for/for in for in用于遍历对象

2.7 函数

1.无名函数：var f=function(para1,para2){...};f();

2.一些对话框函数：alert(),confirm()

3.有名函数

function cub(par1,par2){

...

return ...

}

也可以不直接指定入参(使用内建的arguments数组)

function cub(){

var arglen=arguments.length;

for(var i=0;i<arglen;i++){...}

return ...

}

2.8 闭包

function myfun(){

var mybun=10;

function showNum(){

alert(myNum)

}

return showNum();

}

var callFun=myfun();

callFun();

2.9对象

1.定义一个具有属性和方法的对象：(先定义对象,再定义属性和方法)

var ball={};

ball.size=10;

ball.color="red";

ball.roll=function(para1){...};

使用for..in..可以遍历对象中的所有属性(不包括方法)

2.使用function定义类(先定义属性和方法再定义对象)

function Star(){ //函数中使用this定义的Star类

this.size=10;

this.roll=function(){...}

}

var t=new Star(); 定义一个对象

三、浏览器对象模型

1.浏览器本身使用被抽象成一个window对象，该对象是以下对象

document,frames,history,location,navigator,screen,self/window/parent

2.window对象

window对象是一个全局对象,表示浏览器目前正打开的窗口,alert和prompt()方法都是window的方法,由于window是全局对象，所以调用不需要加window前缀。

screen.availHeight,screen.height

四、文档对象模型

1.DOM以一种树形结构，或者说一种根部在上的树形结构表示HTML文档,DOM提供了修改HTML的方法。

2.获取元素

a.通过id获取元素

var a=document.getElementById("w3link");

本文转自 a_liujin 51CTO博客，原文链接：http://blog.51cto.com/a1liujin/1795060，如需转载请自行联系原作者

jsp、JavaScript与html

热门文章

最新文章

相关课程

相关电子书

相关实验场景