java_web-HTML-2-01-12-2015

来源：互联网发布：数据库安装在固态硬盘编辑：程序博客网时间：2024/05/10 18:26

E、框架标记：

1、框架标记--frame src

< frame src >：页面标记
框架结构中的各个页面都是一个单独的文字，而这些文件是通过src参数进行设置的。
语法：
<frame src="页面源文件地址">
说明：页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件。

代码实例：

<html><head><title>段落的缩进效果</title></head><body>相传，两千五百年前，春秋时期的大音乐家俞伯牙，曾学琴于程廉先生，三年不成。后来他沿着孔子的足迹登游泰山，<blockquote>观东海日出，看云雾变化，</blockquote><blockquote><blockquote>闻松风长啸，听水涛咆哮，</blockquote></blockquote><blockquote><blockquote><blockquote>拜大自然为师，琴艺大有长进， </blockquote></blockquote></blockquote><blockquote><blockquote><blockquote><blockquote>写出了著名的古琴曲高山和流水。</blockquote></blockquote></blockquote></blockquote></body></html>

将这一文件命名为“src01.html”，将其保存在框架集文件的同一目录下，然后再设置框架集文件的代码，如下：

<html><head><title>设置页面源文件</title></head><frameset rows="30%,70%"><frame src="pic01.gif"><frame src="src01.html"></frameset></html>

a、Name属性：
name：页面名称
页面名称是为了便于页面的查找和链接所提供的一个属性。框架的页面名称中不允许包含特殊字符、连字符-、空格等，必须是单个的一个单词或者字母组合。
语法：
<frame src="页面文件地址" name="页面名称">

ps：地址=绝对地址+相对地址

实例代码：

<html><head><title>设置页面源文件</title></head><frameset rows="30%,70%"><frame src="E:\1.jpg" name="图片"><frame src="E:\1.html" name="网页"></frameset></html>

这段代码分别为上下两个框架页面命名为“图片”和“网页”，允许代码时并不会显示框架名，因此不会影响框架的显示效果。

b、Noresize属性：

noresize：窗口的尺寸
如果希望框架窗口的大小保持不变，可以设置noresize参数。
语法：
<frame src="页面文件地址" noresize>
说明：在frame标记中添加“noresize”参数，就表示框架窗口的尺寸不能改变。

c、Marginwidth属性：

marginwidth：边框与页面内容的水平边距
框架页面与HTML中的表格一样，也可以设置边框与页面内容的水平边距。
语法：
<frame src="页面文件地址" marginwidth="水平边距">
说明：水平边距设置页面的左右边缘与框架边框的距离，单位是像素。

d、Marginheight属性：

marginheight：边框与页面内容的垂直边距
与水平边距类似，通过marginheight参数可以设置边框与页面的垂直边距。
语法：
<frame src="页面文件地址" marginheight="垂直边距">
说明：垂直边距用来设置页面的上下边缘与框架边框的距离，单位是像素。

f、Scrolling属性：

scrolling：框架滚动条显示
在默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以方便用户浏览。但是有时候用户希望不显示滚动条，这可以通过设置scrolling参数来实现。
语法：
<frame src="页面源文件" scrolling="是否显示滚动条">
说明：scrolling参数在这里只能取Yes、No或Auto三个值中的一个。其中，Yes表示一直显示滚动条，而No则表示无论什么情况都不显示滚动条；Auto是系统的默认值，它是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示滚动条。

2、Noframes标记：

noframes：不支持框架标记
对于一些低版本的浏览器来说，如果不支持框架结构就无法打开框架页面，但这样还不够，因为它并不清楚为什么打不开页面。通过noframes参数可以设置一些内容（包括文字或图片）来告诉浏览者其浏览器无法打开框架页面。
语法：
<html>
<head>
<title>框架页面的标题</title>
</head>
<frameset>
<frame>
<frame>
……
<noframe>
……
</noframe>
</frameset>
</html>
说明：在该语法中，<noframe></noframe>标记之间的部分就是在不支持框架的浏览器中所要显示的内容。它可以与<body>标记一样添加内容。

3、框架标记：frameset

<frameset>：框架标记
框架主要包含两个部分，一个是框架集，另一个就是具体的框架文件。
框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。如果网页由左右二个框架组成，那么除了左右二个网页文件之外，还有一个总的框架集文件。
框架是页面中定义的每一个显示区域，也可以说一个窗口就可以称为一个框架。框架页面中最基本的内容就是框架集文件，它是整个框架页面的导航文件，其基本语法如下；
<html>
<head>
<title>框架页面的标题</title>
</head>
<frameset>
<frame>
<frame>
……
</frameset>
</html>
从上面的语法结构中可以看到，在使用框架的页面中，<body>主体标记被框架标记<frameset>所代替。而对于框架页面中包含的每一个框架，都是通过<frame>标记来定义的。

a、rows属性：

rows：水平分割窗口
水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。
语法：
<frameset rows="框架窗口的高度,框架窗口的高度,……">
<frame>
<frame>
……
</frameset>
说明：在该语法中，rows中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。但是要注意的是，一般设定了几个rows的值，就需要有几个框架，也就是需要有相应数量的<frame>参数。

b、cols属性：

cols：垂直分割窗口
垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的多个窗口。
语法：
<frameset cols="框架窗口的宽度,框架窗口的宽度,……">
<frame>
<frame>
……
</frameset>
说明：在该语法中，cols中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。与水平分割窗口向同，一般设定了几个cols的值，就需要有几个框架，也就是有几个<frame>参数。

c、frameborder属性：

frameborder：设置边框

由前面的几个实例可以看出，在默认情况下，框架窗口的四周有一条边框线，通过frameborder参数可以调整边框线的显示情况。
语法：
<frameset frameborder="是否显示">
或者<frame frameborder="是否显示">
说明：frameborder的取值只能为0或1。如果取值为0，那么边框线将会被隐藏；如果取值为1，边框线将会显示。在frameset中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效。

实例代码：

<html><head><title>设置框架窗口的边框显示效果</title></head><frameset rows="20%,55%,25%"><frame frameborder="1">  <frameset cols="35%,65%" frameborder="0"><frame ><frame>  </frameset><frame frameborder="0"></frameset></html>

d、framespacing属性：

framespacing：框架的边框宽度
框架的边框宽度在默认情况下是1像素，通过参数framespacing可以调整其大小。
语法：
<frameset framespacing="边框宽度">
说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。

e、bordercolor属性：

bordercolor：框架的边框颜色
使用参数bordercolor可以设置框架集的边框颜色。
语法：
<frameset bordercolor="颜色代码">
说明：该参数同样只对整个框架集有效，对于单个框架无效。

4、框架标记：iframe

从上表可以看出，很多普通框架页面的属性在浮动框架页面中同样适用，例如name、scrolling等，而在普通框架中只对框架集有效的一些参数在这里同样可以设置，如frameborder等，此外浮动框架页面还可以设置大小和对齐方式。而对于浮动框架来说，框架边框的宽度和颜色是无法设置的。也就是与普通框架相比，浮动框架中不包含framespacing和bordercolor参数。

实例：

1、创建两个普通的HTML页面，其中一个作为浮动框架的载体，命名为float.html。另一个作为浮动框架页面的源文件，命名为source.html。

float.html文件的源代码：<html><head><title>未添加浮动框架的页面</title></head><body><font size="5" color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font><hr size=2></body></html>source.html文件的源代码：<html><head><title>浮动框架的页面内容</title></head><body><font size="5" color="#000099">经典影片：魂断蓝桥</font><br><br><image src="pic04.jpg" align="left">《魂断蓝桥》作为电影史上三大凄美不朽爱情影片之一，是一部荡气回肠的爱情经典之作，内容虽有些传奇化，但文艺气息浓厚，具有甚高的催泪效果。<br>《魂断蓝桥》（又名《滑铁卢桥》）是一部风靡全球近半个世纪的美国爱情故事片，也是西方电影在东方获得成功的经典。<br><hr>剧情介绍：<br>一次偶然的机会，芭蕾舞女演员玛亚在滑铁卢桥邂逅了高级军官罗伊。由于战争的原因，两人决定马上结婚，但就在婚礼即将举行的前一天晚上，罗伊接到命令，部队当晚开拔。玛亚无意中看到了罗伊的名字在阵亡名单中。此时罗伊的母亲来看她，尽管这位贵夫人非常和蔼可亲，但此时的玛亚已情绪混乱、言语无礼、不知所云。为了维持生活，玛亚和她的好友都沦为街头应招女郎。罗伊并没有死，他回来了。玛亚的遭遇使她无法面对与罗伊的婚姻及罗伊家族的显赫地位。她来到滑铁卢桥，毫无畏惧地向一辆辆飞驰的军车走去。</body></html>

2、src：页面源文件
浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。
语法：<iframe src="页面源文件">
下面将文件source.html作为浮动框架页面的源文件插入到HTML文件float.html中，实例代码如下：

<html><head><title>添加浮动框架的页面</title></head><body><font size="5" color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font><hr size=2><iframe src="source.html"></iframe></body></html>

a、width和height属性：

width和height：大小
在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。
语法：
<iframe src= src="浮动框架页面源文件" width="页面宽度" height="页面高度">
说明：在该语法中，页面的宽度和高度值都以像素为单位。

b、align属性：

align：对齐方式
除了设置框架大小的参数之外，设置框架的对齐方式也是浮动框架页面所特有的参数。
语法：
<iframe src="浮动框架页面源文件" align="对齐方式">
说明：在该语法中，对齐方式用来设置浮动框架页面相对于浏览器窗口的水平位置。它可以取的值包括左对齐left、右对齐right和居中center。

c、frameborder属性：

frameborder：边框显示属性
在浮动框架页面，还有另外一个特殊的参数可以设置，即框架边框显示属性frameborder。在普通框架中，该参数既对整个框架集有效，也对单个框架有效。同样地，在浮动框架中也可以设置这一参数。
语法：
<iframe src="浮动框架页面源文件" frameborder="是否显示">
</iframe>
说明：在这里，这些参数的取值范围与普通框架相同。其中frameborder只能取0或1，0表示不显示边框，1为默认取值，表示显示边框；framespacing中设定的边框宽度以像素为单位；代码颜色是16位颜色码。下面只通过一个实例说明这些属性的设置效果。

G、表格标记

1、表格标记：table

<table>、<tr>和<td>：表格标记
表格常用来对页面进行排版，在表格中一般通过3个标记来构建，分别是表格标记、行标记和单元格标记。其中表格标记是<table>和</table>，表格的其他各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。下面首先介绍如何创建表格。
语法：
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
</tr>
……
</table>
说明：<table>标记和</table>标记分别标志着一个表格的开始和结束；而<tr>和</tr>则分别表示表格中一行的开始和结束，在表格中包含几组<tr>…</tr>，就表示该表格为几行；<td>和</td>表示一个单元格的起始和结束，也可以说表示一行中包含了几列。

2、caption：表格的标题
表格中除了<td>和</td>可用来设置表格的单元格外，还可以通过caption来设置特殊的一种单元格——标题单元格。表格的标题一般位于整个表格的第一行，为表格标示一个标题行，如同在表格上方加一没有边框的行，通常用来存放表格标题。

语法：
<caption>表格的标题</caption>

3、Th标签：

th：表格的表头
在表格中还有一种特殊的单元格，称为表头。表格的表头一般位于第一行和第一列，用来表明这一行的内容类别，用<th>和</th>标记来表示。表格的表头与<td>标记使用方法相同，但是表头的内容是加粗显示的。

语法：
<table>
<tr>
<th>表格的表头</th>
<th>表格的表头</th>
……
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
……
</tr>
……
</table>

4、Width属性：

width：表格宽度
默认情况下，表格的宽度是与表格内的文字相关的，是根据内容自动调整的。如果想要指定表格的宽度，可以为表格添加width参数。

语法：
<table width=表格宽度>

说明：表格宽度的值可以是具体的像素数，也可以设置为浏览器的百分比数。

5、Height属性：

height：表格高度
设置表格的高度与设置表格宽度方法相同，也可以将表格的高度设置为浏览器高度的百分比或者是固定的像素数。

语法：
<table height=表格高度>

6、Align属性：

align：表格对齐方式
表格的对齐方式是设置整个表格在网页中的位置。

语法：
<table align="表格对齐方式">

说明：align参数可以取值为left、center或者right。

7、Border属性：

border：设置表格的边框宽度
默认情况下，表格是不显示边框的。为了使表格更加清晰，可以使用border参数设置边框的宽度。

语法：
<table border=边框宽度>

说明：只有设定了border参数，且其值不为0，在网页中才能显示出表格的边框。border的单位为像素。

8、Bordercolor属性：

bordercolor：表格边框颜色
默认情况下，边框的颜色是灰色的，为了让表格更鲜明，可以使用bordercolor参数设置不同的表格边框颜色。但是设置边框颜色的前提就是边框宽度不能为0，否则无法显示出应有的效果。

语法：
<table border=边框宽度 bordercolor= "边框颜色" >

说明：在该语法中，边框宽度不能为0，边框颜色为16位颜色代码。

9、Cellspacing属性：

cellspacing：内框宽度
表格的内框宽度是指表格内部各个单元格之间的宽度。

语法：
<table cellspacing=内框宽度>

说明：内框宽度的单位为像素。

10、Cellpadding属性：

cellpadding：表格内文字与边框距离
在默认情况下，表格内的文字会紧贴着表格的边框，这样看上去非常拥挤。可以使用cellpadding参数来调整这一距离。

语法：
<table cellpadding=文字与边框的距离值>

说明：文字与边框的距离以像素为单位，一般可以根据需要设置，但要注意不能过大。因为这个值不只对左右距离有效，同时也设置了上下边框与文字的间隔。

11、Bgcolor属性：

bgcolor：表格背景色
设置表格背景，最简单的就是给表格设置背景颜色。

语法：
<table bgcolor="颜色代码">

12、Background属性：

background：表格的背景图像
除了可以为表格设置背景色之外，还可以设置一个背景图像，让表格更加绚丽。

语法:
<table background="背景图片的地址">

说明：背景图片的地址可以设置为相对地址，也可以设置为绝对地址。

13、设置单元格的属性：width、height属性

width、height：单元格大小
默认情况下，单元格的大小会根据内容自动调整，也可以进行手动调整单元格。

语法：
<td width=单元格宽度 height=单元格高度>

说明：单元格的高度和宽度单位是像素，而对一个单元格的设置往往会影响多个单元格。例如设置了第1行的第一个单元格的宽度，其他行的第一个单元格宽度往往也会随之变化。

14、Colspan属性：

colspan：水平跨度
单元格水平跨度是指在复杂的表格结构中，有些单元格是跨多个列的。

语法：
<td colspan=跨的列数>

说明：在这里，跨的列数就是这个单元格跨的列的个数。也可以说是单元格向右打通的单元格个数。

15、Rowspan属性：

rowspan：垂直跨度
单元格除了可以在水平方向下跨列，还可在垂直方向上跨行。跨行设置需要使用rowspan参数。

语法：
<td rowspan=单元格跨行数>

说明：与水平跨度相对应，rowspan设置的是单元格在垂直方向上跨行的个数。也可以说是单元格向下打通的单元格个数。

16、align、valign属性：

align、valign：对齐方式
单元格的对齐方式设置与行的对齐方式设置方法相似。

语法：
<td align="水平对齐方式" valign="垂直对齐方式">

说明：在该语法中，水平对齐方式的取值可以是left、center或right；垂直对齐方式的取值可以是top、middle或bottom。

17、Bgcolor属性

bgcolor：单元格的背景色
为了增加表格的绚丽，可以为不同的单元格分别设置不同的背景颜色。

语法：
<td bgcolor="颜色代码">

18、Bordercolor属性：

bordercolor：单元格的边框颜色
单元格的边框颜色可以通过bordercolor参数单独设置。

语法：
<td bordercolor="颜色代码">

19、Bordercolorlight属性

bordercolorlight：单元格的亮边框
单元格的亮边框就是单元格格边框向光的部分。通过bordercolorlight参数可以单独定义单元格亮边框的颜色。

语法:
<td bordercolorlight="颜色代码">

20、Bordercolordark属性

bordercolordark：单元格的暗边框
单元格的亮边框就是单元格格边框背光的部分。通过bordercolordark参数可以单独定义单元格暗边框的颜色。

语法:
<tb bordercolordark="颜色代码">

21、Background属性：

background：单元格的背景图像
与表格的行设置不同的是，单元格可以设置背景为图像格式。

语法：
<td background="背景图片的地址">

说明：背景图片的地址可以是绝对地址，也可以设置为相对地址。

22、Nowrap属性：

nowrap：文字内容不换行
当表格没有设定宽度的时候，整个表的宽度会根据表格内容进行调整，但表格的宽度不会超出浏览器的宽度。当单元格内的内容过长的时候会自动换行，如果不希望表格的某个单元格的内容换行，可以通过nowrap参数进行设置。

语法：
<th nowrap>
<td nowrap>

说明：这一参数可以设置在表格标题中，也可以设置在普通单元格中。

0 0