admin 管理员组

文章数量: 1184232


2024年3月12日发(作者:fprintf函数的使用方法)

-------------------------------------

网页的结构

-----------------------------------

一、HTML的组成结构

1、头部。

头部的HTML写法就是头部的内容,这两个非常相似,只是后一个比前一个多了“/”

符号。

2 眼睛。

标题

这些应放在和之间。也就是

标题

3 身体

网页最主要的部分

页面内容

4

最后,

把这些部分组成一体----网页,所以咱们就用把他们给包起来。

网页的结构:

</p><p style="text-indent: 2em;font-size:18px;"> 标题 </p><p style="text-indent: 2em;font-size:18px;">

页面内容

--------------------------------------

内部细则

---------------------------------------

1、

背景颜色

我们发现多了个bgcolor其实就是backgroundcolor(背

景颜色)的意思,bgcolor="red"设置网页的背景颜色为红色,现在颜色一般都

是#ff0000样式的。

2、

背景图片

中“backgroud”就是设置背景图片的啦,

是背景图片的名字,为什么有的朋友也是如此写的,而网页却没有背景图片

呢?其实是该图片相对于这个页面的位置,比如你做的这个页面放在c:我的

网站,而背景图片的位置放在c:我的网站images,那么就得这样写了:

"">,注意两者的区别

3、

背景音乐

它的代码是放在页面的头部里

因为它也是显示网页的时候我们首先接受到的信息

loop,循环,那么loop="-1"是什么意思呢?loop是bgsound

的一个属性,当然src也是了,

后边跟得就是属性值了,那么loop="-1"就是无限循环的意思,只要是页面打开,音乐不会停止

的,loop="1"说明循环一次,等于0就是不循环。

4、

body其它属性

topmargin,leftmargin。有的朋友再做页面的时候,感觉文字或者表格怎么也不能靠在浏览器

的最上边和最左边,怎么回事呢?因为一般我们用的制作软件或者说html语言默认的都是

topmargin和leftmargin值等于12,如果你把他们的值设为0,你看看会有什么效果!如下比

较一下和,有兴趣的朋友可以任意设置他们的值!

------------------------------------

字体

------------------------------------------

字体,英文font,这html语言中也是它---font

1 标题字体

文字 # =1,2,3,4,5,6

比如:

今天天气真好!

注意:这些一般的用在标题上,所以起名叫标题字体; ...

些标记显示黑体字;这些标记自动插入一个空行,不必用

标记再加空行,

因此在一行中无法使用不同大小的字体。

2 字体的大小,用于一般文字。

文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -#

#=1, 2, 3, 4, 5, 6, 7

例子:今天天气真好!

3 逻辑字体(Logical Style)

下划线:文字

代码:文字

删除线:文字

闪烁:文字

增强:文字

强调:文字

示例:文字

4 字体的标志,

粗体:文字,斜体:文字

5、字体颜色

指定颜色 文字 # ="#rrggbb" 16 进制数码,或

者是下列预定义色彩:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White,

Green, Purple, Silver, Yellow, Aqua

对于16 进制编码的颜色,我们可以这样理解rrggbb六个字符:前两个表

示红色,中间的两个表示绿色,后两个表示蓝色;那么,红色(red)ff0000,

同样绿色(green)00ff00,蓝色0000ff;其它的颜色就是这几个字符(0-9,

a-f)的组合。

比如: 文字 红色文字

文字 红色文字

大家看看 文字 是什么颜色的文字

6、客户端字体(Font Face)

... #=客户端可获得的字体,什么是

客户端,通俗的讲,就是你的电脑,face="#"就是从你的电脑获得的字体.

7、字符实体(Entities)

字符实体一般用在把html里的符号显示在页面上比如"<"、"&"等,如果你

单独的打上<,页面也可以显示,但如果你想显示这几个字符,怎么办呢?就

是它啦。

&#; #=字符实体名称 或者 ascii 值

& &

< <

> >

" "

这些只是一小部分,那么要显示就要写成了。

以上学到的我们可以综合使用:比如文字

---------------------------------------

图像

----------------------------------------

图像,也就是images,

在html语法中用img来表示,其基本的语法是:

#=图象的

URL,关于url就是指的是图像在网上的地址。

#=在浏览器尚未完全读入图象时,在图象位置显示的文字;也是图像显示以

后,当鼠标放在图片上时所显示的文字。

例子:

图象在页面中的对齐/布局:

语法: #=left, center, right,使用图像的align属性,其实这一属性布置在

这里用到,以后我们在学习表格的时候也会遇到align,它的值left, center, right就是他的

中文意思,left居左,center居中,right居右。

例子: 网人交

流论坛欢迎您的光临

图象和文字的对齐:

语法: #=top, middle, bottom,这里的align和上边的实现的效果不一样,大

家从它的值可以看出,它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看

看各自的效果,很容易记住哦!

图像的边框:

#=value数字,指的是这个图像的边的宽度!

示例:

--------------------------------------

表格

-------------------------------------

缺省情况下,表格在浏览器屏幕上左对齐,可以使用

的ALIGN属性来指定表格的对齐方

式。ALIGN属性可以取值“left”、“center”和“right”。

例如,让一个表格在屏幕中央显示可以使用:

注意

使用

的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕

中央,使用

标识符来包含表格会更安全些。

你可以使用

的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值

“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式,可以使用

的VALIGN属性,它可以取值“top”、“middle”和“botton”(缺省情况下取值“middle”)。

要更好地控制表格中某个表头或元素的排列方式,可以使用

相同,然而

标识符的ALIGN和VALIGN

属性,这两个属性的取值范围与

ALIGN和VALIGN属性将会覆盖任何

为整个一行指定的排列方式。

控制表项的空间

当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地

占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用

的CELLPADDING和

CELLSPACING属性来改变这一缺省值。

通过使用CELLPADDING属性,你可以为表格中的每一项安排一个更大的空间,使用CELLSPACING

属性,你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。

例子:

Cell Spacing

Normal Table
First Column Second Column


Table With Cell Spacing
First Column Second Column


Table With Cell Padding
First Column Second Column

控制表格和表项的大小

某些时候你可能想让表格显示出来大一些,你可以用

的WIDTH属性来控制表格的宽度,

你可以为WIDTH属性提供宽度的绝对值或相对值。

当为WIDTH属性提供宽度的绝对值时,你用象素来表示。例如,要建立一个宽为100个象素的表

格,可以用

。当然,并不能保证表格显示出来恰好是你指定的宽度,表项中

的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。

另外,你也可以用相对值来指定表格的宽度,例如,如果你想让表格占有整个浏览器屏幕那么宽,

你可以用

,同样地,如果你在WIDTH属性中指定的百分数太小的话,

浏览器显示出来的表格就不是那个宽度。

属性可以用来指定表格的整体高度,同样这个属性可取绝对值和相对值。但使用这个属

性时要小心,即使Microsoft和Netscape的浏览器都能正确解释它,但它并不是HTML 3.2规范

中的一部分。

你也可以用

...-

定义表行

-

定义表头

-

定义表元

例子:

标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小,你必须用

绝对象素值来指定这些属性的值。你要知道当你设置这些值时,只不过是在为浏览器提供建议,

浏览器尽量按你的意愿去做,但也有可能不能完全按你指定的方式来显示一个表格。

在表格中加入颜色和图象

根据HTML 3.2规范,表格不具有任何颜色属性。然而,值得庆幸的是Netscape和Microsoft

都扩展了HTML来让表格具有自己的背景色,两种浏览器都能识别

标识符的BGCOLOR属性。

你可以使用颜色名或RGB值来设定BGCOLOR的值,下面的例子说明了这个属性的用法:

Table Color

I have a blue background

当这个例子中的文字在浏览器上显示时,它处于一个浅蓝色的框中,这对于突出主页上主体文字

中某些特定的文本是很有用的。例如,你可以使用这种方法来突出一个引用、标题或是网页上一

个简短的注释。

你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如,可以用不同的颜色来区分

表格中不同列的数据。

BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色,如果你将表格的宽度设为

屏幕的宽度,你可以建立一个具有多列的网页,而每一列都具有不同的颜色。下面的例子建立了

一个有两列不同颜色的网页:

HTML>

Two Color Columns

I have a olive background I have a aqua background

Netscape和Microsoft的浏览器都允许你为表格设定背景图片(见图6.21),你可以通过

标识符的BACKGROUND属性来指定一幅图象:

Two Color Columns

I have a checkered background

Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表

项使用BACKGROUND属性,通过为不同的表项使用不同的背景图象,你可以建立一个可视性非常

强的网页。

Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表

项使用BACKGROUND属性,通过为不同的表项使用不同的背景图象,你可以建立一个可视性非常

强的网页。

表格作为子页

标识符最初被引入HTML是用来格式化地显示信息。然而,随着时间的推移,这个标识符

的属性被大大地扩充了,现在可以将

看成是用来在网页中建立一个子页的标识符。这个

标识符被扩展出了那么多的属性,以致于现在它很象标识符了。在Netscape 和Microsoft

的浏览器上,

具有许多和相同的属性,你可以为表格指定它自己的背景色和图象。

另外

标识符还能包含所有能在中包含的HTML标识符。

然而,

具有一个比更大的优势,每一个HTML文件必须有且只有一个标识符,

但对于

来说,则没有这种限制,你可以在HTML文件中包含任意数目的

当你设计网页时,不要让

这个名字愚弄了你。
不仅仅用于建立表格,还可以在你

的网页上建立子页,当你想把单个网页分成多个部分时,就用

标识符。

表格,一般的用于对网页的内容进行排版,比如文字放在页面的某个位置,你就可以做个表格,

然后设置一下表格的属性,把文字放在表格的某个单元个里,就行了;其实用过word的朋友应

该非常明白的。除了页面的排版外,表格还可以制作出非常好看的效果,比如按钮、变色、边线

等等。

看看表格的基本语法:

...
-

定义表格

... ...

FoodDrinkSweet
ABC

不带边框的表格:

FoodDrinkSweet
ABC

跨多行、多列的表元(Table Span)

跨多列的表元

Morning Menu
Food Drink Sweet
ABC

跨多行的表元

Morning Menu Food A
Drink B
Sweet C

表格尺寸设置

边框尺寸设置:

FoodDrinkSweet
ABC

表格尺寸设置:

FoodDrinkSweet
ABC

表元间隙设置:

FoodDrinkSweet
ABC

表元内部空白设置:

FoodDrinkSweet
ABC

表格内文字的对齐/布局

#=left, center, right

FoodDrinkSweet
A B C

#=top, middle, bottom, baseline

FoodDrink SweetOther
A B C D

----------------------------------框架

-------------------------------------------------------

框架(Frame)也就是所谓的分割窗口、分割画面、框窗效果

【框架的基本概念】

1. 首先,先看看上面这张图,利用这张图来作解说,可能会清楚一点。 OK!可

以看见,上面的这个窗口,一共分为 1 、 2 、 3 三个框架,每一个框架,各

有其显示的内容分别是、、三个档案。然而左下角的那个

是做什么用的呢?

2. 原来,左下角的这个档案 ,就是要告诉计算机,我们要将画面分割成这样,也就

是说,所有Frame的卷标,其实都只摆在 这个档案里。(当然,不是档名一定要叫

做 取其它档名也是可以的。)

3. 要分割几个框框,就一定会有几个对应的html档案(假如您要分割100个框

框,就要有100个html档就对了。),另外,还会多一个档案是来告诉计算机

要如何分割的。(也就是例中的 档)

【开始分割】

1 在上面的语法中,怎么都没见到熟悉的身影?

没错,它已经被待会儿要加进去的卷标给取代了!也就

是说,如果我们要分割画面,就要先用卷标告诉计算机说:『喂!我

要开始分割了!』此时,是派不上用场的,所以躲到一旁凉快去了!

2 我们先将画面分成左右两边(左边就是框窗 1 了,右边就暂定为 2 等一下还要分割呢!),

如下图:

3. 在中,我们要告诉计算机到底是要左右分(COLS)?还是上下分(ROWS)。一开

始我们是左右分,所以我们写成。COLS="120,*" 就是说,左边那一

栏强制定为 120点,右边则随窗口大小而变。除了直接写点数外,我们亦可用百分比来表示,

例如COLS="20%,80%"也是可以的。

4. 然后,再将右边的框窗再割成上下两个画面(也就是框窗 2 和 3 了)。如下图:

5. 看见了没?原本的(在第 3 点的语法中)被另一组

ROWS="100,*" >所取代了!所以要注意喔!第二组是被第一组

所包围起来的

6其实只要将最后完成的那些语法存成 ,然后再准备三个档 、 、

那么就完工,当然,这是一个最简单的分割法。

【其它卷标参数说明】

1. COLS="120,*"

就是垂直切割画面!你可以一次切成左右两个画面,当然也可以切成三个,很简单只要写成

COLS="30,*,50" (数字随便自己调整啦!),依此类推,四个以上当然就是四组数字

2. ROWS="120,*"

就是横向切割画面,也就是将画面上下分开,切法同上。

3. frameborder=0

设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整

粗细的。

4. framespacing=5

表示框架与框架间的保留空白的距离,以免看起来太挤。

marginwidth=2>

1. SRC=""

设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生错误,这里就是

要您填入对应网页的名称。(如果该网页在不同目录,记得路径要写清楚)

2. NAME="1"

设定这个框架的名称,这样才能指定框架来作连结,所以一定要设定喔!当然名称随你高兴取名。

3. frameborder=0

设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整

粗细的。

4. scrolling="no"

设定是否要显示滚动条,YES是要显示滚动条,NO是无论如何都不要显示,AUTO是视情况显示。

5. noresize

设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以很容易的拉动框

架,改变其大小。

6. marginhight=2

表示框架高度部份边缘所保留的空间。

7. marginwidth=2

表示框架宽度部份边缘所保留的空间。

【相关用法】

1. 使用方法:请换有支持Frame功能的浏览器

2. 卷标解说:有些浏览器较为老旧,无法显示Frame的功能,因此,就要使用此卷标,让这些

网友知道,该换换浏览器了。或者,你也可以在这卷标中,摆上没有Frame语法的网页卷标,那

么,没有支持Frame功能的浏览器,便会自动显示没有Frame语法的网页。

target=框窗名称

1. 使用方法:显示内容

2. 卷标解说:常常有一个情况是,我想在框窗 1 的地方按下连结,但是希望他的内容出现在框

窗 3 中(请参照上面那个图),那应该如何写呢?就像上面加个 target=框窗名称 就行了!

target=_top

1. 使用方法:网人俱乐部

2. 卷标解说:有时候,在框窗里会连结到别的站,却发现,新连结的这个站,竟然被框窗包住

了,不但难看,而且可能会吃上官司说!所以,这时候你必需加入 target=_top这个参数,那

么,这个新连到的网站,就会重新占据整个屏幕!

------------------------------------

序列卷标

----------------------------------------

序列卷标基本上可分为两种,一种是「无序条列」,一种是「有序条列」。所谓「无序条列」当

然就是意指各条列间并无顺 序关系,纯粹只是利用条列式方法来呈现资料而已,此种无序卷标,

在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的,从1、 2、

3…一直延伸下去。

【无序卷标】

其中

    卷标即为「无序列表卷标」,每增加一列内容,就必须加一个
  • 我们可以加入TYPE="形状名称"属性来改变其符号形状,一共有三个选择:DISK(实心圆)、SQUARE

    (小正方形)、CIRCLE(空心圆)三种(由于本页使用CSS故仅于Netscape看得出效果。)

    【有序卷标】

    其中

      卷标即为「有序列表卷标」,每增加一列内容,就必须加一个
    1. 和无序列表卷标一样,我们也可以选择不同的符号来显示顺序,一样是用TYPE属性来作更改,

      一更有五种符号:1(数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、

      i(小写罗马字母)等五种:

      另外,我们亦可指定序列起始的数目,其方法如下:

      【定义列表卷标】

      「定义列表卷标」也是属于序列卷标之一

      例子,我们常常会在文章中看见这样的格式: CSS(Cascading style sheet)

      「定义列表卷标」如何使用

      ----------------------------------------表单

      -------------------------------------------

      一个表单运用很好的例子

      是留言板

      【表单的用途】

      表单功能其实并不常用,因为表单通常必须配合着CGI、JAVA Script程序或是ASP程序来运

      作,不然表单单独存在的意义并不大。

      【各种输入类型】

      1. 文字输入列:每个表单之所以会有不同的类型,原因就在于TYPE="表单类型"设定的不同而

      已。

      文字输入列的形态就是TYPE="TEXT

      属性:

      NAME="名称",是设定此一字段的名称,程序中常会用到。

      SIZE="数值",是设定此一字段显现的宽度。

      VALUE="预设内容",是设定此一字段的预设内容。

      ALIGN="对齐方式",是设定此一字段的对齐方式,其值有:TOP(向上对齐)、MIDDLE(向中

      对齐)、BOTTOM(向下对齐)、 RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶

      部对齐)、BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置 中)、ABSBOTTOM(绝对置下)

      等。

      MAXLENGTH="数值",是设定此一字段可设定输入的最大长度。

      2 单选核取表单:利用TYPE="RADIO"就会产生单选核取表单

      属性:

      NAME="名称",是设定此一字段的名称,程序中常会用到。

      VALUE="内容",是设定此一字段的内容、值或是意义。

      ALIGN="对齐方式",是设定此一字段的对齐方式,其值有:TOP(向上对齐)、MIDDLE(向中对

      齐)、BOTTOM(向下对齐)、 RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶部

      对齐)、BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置 中)、ABSBOTTOM(绝对置下)等。

      CHECKED,是设定此一字段为预设选取值。

      3 密码窗体:利用TYPE=" PASSWORD "就会产生一个密码窗体,密码窗体和文字输入窗体长得

      几乎一样,差别就在于密码窗体在输入时全部会以星号来取代输入的文字,以防他人偷窥。

      NAME="名称",是设定此一字段的名称,程序中常会用到。

      SIZE="数值",是设定此一字段显现的宽度。

      VALUE="预设内容",是设定此一字段的预设内容,不过呈现出来仍是星号。

      ALIGN="对齐方式",是设定此一字段的对齐方式,其值有:TOP(向上对齐)、MIDDLE(向中

      对齐)、BOTTOM(向下对齐)、 RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶

      部对齐)、BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置 中)、ABSBOTTOM(绝对置下)

      等。

      MAXLENGTH="数值",是设定此一字段可设定输入的最大长度。

      4

      送出按钮:通常我们窗体填完之后,都会有一个送出按钮以及清除重写的按钮,分别是利用

      TYPE=" SUBMIT "及TYPE=" RESET "来产生,相当的简单易用。

      NAME="名称",是设定此一按钮的名称。

      VALUE="文字",是设定此一按钮上要呈现的文字,若是没有设定,浏览器也会自动替您加上「送

      出查询」、「重设」等字样。

      ALIGN="对齐方式",是设定此一字段的对齐方式,其值有:TOP(向上对齐)、MIDDLE(向中对

      齐)、BOTTOM(向下对齐)、 RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶部

      对齐)、BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置 中)、ABSBOTTOM(绝对置下)等。

      5

      按钮组件:窗体中或是JAVA SCRIPT常会用到按钮来作一些效果,因此,我们可以利用TYPE="

      BUTTON "来产生一个按钮,相当简单。

      NAME="名称",是设定此一按钮的名称。

      VALUE="文字",是设定此一按钮上要呈现的文字。

      ALIGN="对齐方式",是设定此一字段的对齐方式,其值有:TOP(向上对齐)、MIDDLE(向中对

      齐)、BOTTOM(向下对齐)、 RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶部

      对齐)、BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置 中)、ABSBOTTOM(绝对置下)等。

      6

      隐藏字段:窗体中有时有些东西因为某些因素,不想让使用者看到,但因程序需要却又不得

      不存在,此时,我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的字段。

      NAME="名称",是设定此一字段的名称。

      VALUE="文字",是设定此一字段的值、文字或意义。

      【大量文字输入组件】

      1. 有时候我们会希望让使用者输入比较大量的文字,此时,文字输入列就显得不敷使用,因此

      我们就可以利用来产生一个可以输入大量文字的组件,夹在两个卷标中

      的文字会出现在框框中,可作为预设文字。

      NAME="名称",是设定此一字段的名称。

      WRAP="设定值",是设定此一字段的换行模式。设定值有三种:OFF(输入文字不会自动换行)、

      VIRTUAL(输入文字在屏幕上会自动换行,不过若 是使用者没有自行按下ENTER换行,送出资料

      时,也视为没有换行)、PHYSICAL(输入文字会自动换行,送出资料时,会将屏幕上的自动换行,

      视为换 行效果送出)。

      COLS="数值",是设定此一字段的行数(横向字数)。

      ROWS="数值",是设定此一字段的列数(垂直字数)。

      【下拉式选单】

      我们只要利用

      全部评论 0
      暂无评论