82
第第第 HTML 语语 语 语 语语语语66134267 QQ 22839978 Email [email protected] 语语语语mingler.ccshu.org 语语语语bbs.ccshu.org

第二章 HTML 语言

  • Upload
    torin

  • View
    103

  • Download
    3

Embed Size (px)

DESCRIPTION

第二章 HTML 语言. 陆 铭 联系电话: 66134267 QQ : 22839978 Email : [email protected] 教学网站: mingler.ccshu.org 教学论坛: bbs.ccshu.org. 本章目录. 2.1 HTML 概述 2.2 HTML 基本标记. 2.1 HTML 概述. 标记的基本形式. 成对标记 < 标记 参数 1 参数 2 参数 3…> 内容 其中,标记与参数、参数与参数之间使用空格分隔,参数可省略。 非成对标记 < 标记 参数 1 参数 2 参数 3…> 内容 - PowerPoint PPT Presentation

Citation preview

Page 1: 第二章 HTML 语言

第二章

HTML 语言

陆 铭联系电话: 66134267 QQ : 22839978

Email : [email protected]

教学网站: mingler.ccshu.org

教学论坛: bbs.ccshu.org

Page 2: 第二章 HTML 语言

本章目录

2.1 HTML 概述 2.2 HTML 基本标记

Page 3: 第二章 HTML 语言

2.1 HTML 概述

Page 4: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org4

计算中心编制

上海大学上海大学 Shanghai University

标记的基本形式成对标记

< 标记 参数 1 参数 2 参数 3…> 内容 </ 标记 >其中,标记与参数、参数与参数之间使用空格分隔,参数可省略。

非成对标记< 标记 参数 1 参数 2 参数 3…> 内容

注意: HTML 标记中,大、小写或混写均可。例如: <HTML> 、 <html> 或 <HtmL> ,其结果都是一样的。同时如果不特别注明,浏览器会忽略 HTML 文档中的空格(多个空格认作一个空格)、制表符和回车符等符号。

Page 5: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org5

计算中心编制

上海大学上海大学 Shanghai University

HTML 文档的基本结构 标准的 HTML 文档的结构

<HTML><HEAD>

<META><TITLE> </TITLE>

</HEAD><BODY>

</BODY></HTML>

文档头部分

文档主体部分

HTML 文档范围

Page 6: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org6

计算中心编制

上海大学上海大学 Shanghai University

基本结构 <HTML> 标记

成对标记: <html>…</html>一个完整的 HTML 文档是以 <HTML> 标记开始,以 </HTML> 标记结束的,用来告知浏览器该成对标记之间的内容是使用 HTML 格式编写的,浏览器会使用 HTML 规范来解释和显示其中的内容。

Page 7: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org7

计算中心编制

上海大学上海大学 Shanghai University

基本结构 <HEAD> 标记

成对标记: <head> … </head><HEAD> 和 </HEAD> 标记之间的内容是 HTML 文档的头部分,用来规定该文档的标题(出现在 Web 浏览器窗口的标题栏中)和文档的一些属性。在 <HEAD> 标记之间可引用 <META> 、 <TITLE> 等标记。

<META> 标记 非成对标记位于 <HEAD> 标记之间用以记录当前页面的一些重要信息,例如网页所依据的字符集、开发者、开发语言版本、网页关键字等。

Page 8: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org8

计算中心编制

上海大学上海大学 Shanghai University

基本结构 <TITLE> 标记

成对标记: <title> … </title>用以规定 HTML 文档的标题。位于该成对标记之间的内容将显示在 Web 浏览器窗口的标题栏中。

例如<html><head><title> 欢迎光临 </title></head></html>在浏览器窗口的标题栏内将出现 “欢迎光临” 四个字

Page 9: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org9

计算中心编制

上海大学上海大学 Shanghai University

基本结构 <BODY> 标记

成对标记: <body [ 参数表 ]> </body>标记之间的内容将显示在 Web 浏览器窗口的用户区域内,它是 HTML 文档的主体部分。

<BODY> 标记的重要参数包括 BGCOLOR :设置 HTML 文档的背景色。TEXT :设置 HTML 文档中文字的颜色。LINK :设置 HTML 文档中未被访问过的链接所显示的颜色。ALINK :设置 HTML 文档中链接被激活时链接所显示的颜色。VLINK :设置 HTML 文档中被访问过的链接所显示的颜色。BACKGROUND :设置 HTML 文档的背景图片。BGSOUND :设置 HTML 文档的背景音乐。

Page 10: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org10

计算中心编制

上海大学上海大学 Shanghai University

颜色设置规范 在设置颜色时,可以使用颜色的六位十六进制代码 (其中 ,每两位的取值范围均是 00~FF ,代表 ASCII 码的 0~255 ;前两位设置红色 R 的深浅,中间两位设置绿色 G 的深浅,最后两位设置蓝色 B 的深浅),也可以直接使用该颜色对应的英文单词。

例如,若需指定 HTML 文档的背景颜色为“绿色”,文字颜色为“红色”,则直接使用对应英文单词的具体设置为:

<BODY BGCOLOR=“green” TEXT=“red”> 内容 </BODY>示例

而使用六位十六进制代码的具体设置为:<BODY BGCOLOR=“#008000” TEXT=“#ff0000”> 内容 </BODY> 示例

Page 11: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org11

计算中心编制

上海大学上海大学 Shanghai University

常用颜色表名称 颜色 十六进制代码 名称 颜色 十六进制代码

Black 黑色 #000000 Red 红色 #ff0000

Lime 黄绿色 #00ff00 Maroon 茶色 #800000

Gray 灰色 #808080 Silver 银色 #c0c0c0

Navy 海蓝色 #000080 Olive 黄褐色 #808000

Purple 紫色 #800080 Yellow 黄色 #ffff00

Aqua 水蓝色 #00ffff Blue 蓝色 #0000ff

Green 绿色 #008000 Fuchsia 紫红色 #ff00ff

White 白色 #ffffff Teal 蓝绿色 #008080

Page 12: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org12

计算中心编制

上海大学上海大学 Shanghai University

注释与特殊字符 注释标记格式

< ! -- 注释内容 -->

特殊字符代码表

特殊或专用字符 字符代码< &lt

> &gt

& &amp

" &quot

&copy

&reg

空格 &nbsp

Page 13: 第二章 HTML 语言

1.2 HTML 基本标记

Page 14: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org14

计算中心编制

上海大学上海大学 Shanghai University

文本格式标记 在 HTML 文档中,文本的字体、大小、颜色等都是由标记控制的,以 下介绍常用的文本格式标记。

Page 15: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org15

计算中心编制

上海大学上海大学 Shanghai University

设置标题字体标记格式: <H#> 内容 </H#>说明:

设置标题字体标记 <H#> 是成对标记,首标记和尾标记之间的内容是以黑体字显示的。 ( 其中 #=1 , 2 , 3 , 4 , 5 , 6)<H#> 标记将在标记内容的前后自插入一个空行,因此不必使用换行标记进行换行。同时在一行中无法使用不同大小的标题字体。

示例

Page 16: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org16

计算中心编制

上海大学上海大学 Shanghai University

设置字体大小 / 颜色标记格式:

<FONT SIZE="#" COLOR="#"> 内容 </FONT>

说明:设置字体大小 / 颜色标记是成对标记。参数 SIZE 用来指定字体的大小,数值范围为 1~7 。 SIZE 参数值也可用“ +” 或“ -” 设置相对大小,例如: SIZE=“+3” 表示采用比当前默认字体大 3 号的字体; SIZE=“-2” 表示采用比当前默认字体小 2 号的字体。由于缺省值为 3 ,所以能选择的值是: -2 、 -1 、 +1 、 +2 、 +3 、+4 。

参数 COLOR 的值是六位十六进制代码或是颜色的英文单词。

Page 17: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org17

计算中心编制

上海大学上海大学 Shanghai University

字体大小与颜色示例<html>

<head> <title> 设置字体大小 / 颜色标记 </title> </head>

<body>

<FONT SIZE="6" color="red">上海大学 </FONT>

<FONT SIZE="4" color="#ff0000">上海大学 </FONT>

</body>

</html>

Page 18: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org18

计算中心编制

上海大学上海大学 Shanghai University

设置物理字体标记格式:

<B> 内容 </B> 粗体标记<I> 内容 </I> 斜体标记<U> 内容 </U> 加下划线标记<TT> 内容 </TT> 打字机风格的字体标记<SUP> 内容 </SUP> 上标标记<SUB> 内容 </SUB> 下标标记<S> 内容 </S> 加删除线标记

说明:物理字体是指使用一些标记来改变字体物理显示时的形状,以产生某种强调和突出的效果。

物理字体标记均为成对标记。

Page 19: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org19

计算中心编制

上海大学上海大学 Shanghai University

设置逻辑字体标记格式:

<EM> 内容 </EM> 强调文本 (通常是斜体 ) 标记

<STRONG> 内容 </STRONG> 加重文本 (通常是黑体 ) 标记<CODE> 内容 </CODE> 代码标记<SAMP> 内容 </SAMP> 式样文本标记<KBD> 内容 </KBD> 键盘字标记<VAR> 内容 </VAR> 变量值标记<DFN> 内容 </DFN> 术语定义标记<CITE> 内容 </CITE> 引用标记<SMALL> 内容 </SMALL> 小字体(比周围的字体小)标记<BIG> 内容 </BIG> 大字体(比周围的字体大)标记

说明:逻辑字体标记均是成对标记。逻辑字体是指使用一些标记来改变字体的形态和式样,以便产生一些公众习惯的或约定俗成的显示效果。

Page 20: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org20

计算中心编制

上海大学上海大学 Shanghai University

文本格式标记范例 <HTML><HEAD><TITLE> 网页设计范例之一(文本格式) </TITLE></HEAD><BODY>正常体<B>粗体字 </B><I>斜体字 </I><U>加下划线 </U><TT>打字机风格字体 </TT><SUP>上标字体 </SUP><SUB>下标字体 </SUB><S>加删除线 </S><EM>强调文本 </EM><STRONG>加重文本 </STRONG><SMALL> 小字体 </SMALL><BIG> 大字体 </BIG><H1> 第 1 标题字体 </H1><H2> 第 2 标题字体 </H2><H3> 第 3 标题字体 </H3><H4> 第 4 标题字体 </H4><H5> 第 5 标题字体 </H5><H6> 第 6 标题字体 </H6><FONT SIZE="6" COLOR="red"> 红色 6 号字体 </FONT><FONT SIZE="+3" COLOR="#0000FF"> 蓝色 6 号字体 </FONT></BODY></HTML>

Page 21: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org21

计算中心编制

上海大学上海大学 Shanghai University

布局标记之换行标记为了使网页显示得更规范化、更便于用户阅读和理解,可以给网页加上相应的布局设置,例如段落、换行、加水平分隔线等换行标记格式:

<BR>说明:

非成对标记作用相当于插入一个回车符。如果没有换行标记, Web 浏览器将根据浏览器窗口的宽度尽可能长地显示文本,而不是按照 HTML 文档中的文本格式显示。

Page 22: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org22

计算中心编制

上海大学上海大学 Shanghai University

布局标记之分段标记格式:

<P ALIGN="value"> 内容 </P>说明:

成对标记用来设定段落,其作用是换行并插入一个空白行。分段标记 <P> 若无 ALIGN 参数时, </P> 标记可以省略。ALIGN 参数用来设定段落中内容的对 齐方式,其中 value 值可以设为: left (左对齐,缺省值)、 right (右对齐)、 center (置中对 齐)。

Page 23: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org23

计算中心编制

上海大学上海大学 Shanghai University

布局标记之居中标记格式:

<CENTER> 内容 </CENTER>说明:

成对标记用来设置所标记内容置中对 齐。

Page 24: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org24

计算中心编制

上海大学上海大学 Shanghai University

布局标记之预定义格式标记格式:

<PRE> 内容 </PRE>说明:

成对标记作用是让所标记内容的编排,包括空格、制表符和回车符等都能按照用户的设定显示,即保持浏览器中所显示的文字 排列格式和在编辑 HTML文档时的版面格式一致。

Page 25: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org25

计算中心编制

上海大学上海大学 Shanghai University

布局标记之水平分隔标记格式:

<HR [ 参数表 ]>说明:

非成对标记作用是换行并在该行下面插入一条水平直线。<HR> 标记有如下参数:

ALIGN 参数:当水平线宽度小于浏览器窗口宽度时,使用该参数设置水平线在浏览器窗口中的对 齐方式,其取值有: left 、 center (缺省值)和 right 。

WIDTH 参数:用来控制水 平线的宽度。参数值可用数字(表示水平线宽度所占的像素点数),也可用百分数(表示水平线占浏览器窗口宽度的百分比)。缺省时,水平线占据整个浏览器窗口宽度。

SIZE 参数:用来控制水 平线的粗细,参数值用数字设置,缺省值为 2 。COLOR 参数:用来设置水平线的颜色,参数值可用六位十六进制代码或直接使用颜色的英文单词设定。

NOSHADE 参数:产生一条普通的二维线条,没有三维效果。

Page 26: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org26

计算中心编制

上海大学上海大学 Shanghai University

布局标记之引文标记格式:

<BLOCKQUOTE> 内容 </BLOCKQUOTE>说明:

成对标记作用是用来建立一个引文,它特别适合于较长文本的引用。引文显示时,浏览器将自动在两边缩排引文,以示区别。

Page 27: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org27

计算中心编制

上海大学上海大学 Shanghai University

布局标记之署名标记格式:

<ADDRESS> 内容 </ADDRESS>说明:

成对标记,一般放在文档体的首部或尾部。该标记之间的内容一般是有关作者的信息,包括作者的姓名、身份、地址等等。在浏览器窗口中使用 斜体显示。

Page 28: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org28

计算中心编制

上海大学上海大学 Shanghai University

布局标记范例 <HTML><HEAD><TITLE> 网页设计范例之二( 布局标记) </TITLE></HEAD><BODY><CENTER>静夜思 <br>床前明月光 <br>疑是地上霜 <br>举头望明月 <br>低头思故乡 <br></CENTER><p align="right"> 大家一定很熟悉这首诗, <br>请大家再欣赏一首诗:<BLOCkquote><PRE><FONT SIZE="3" COLOR="green">日照香炉生紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天</FONT></PRE></blockquote>您知道诗的作者是谁吗?<HR align="left" WIDTH="50%"><address> 作者:李白 </address></BODY></HTML>

Page 29: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org29

计算中心编制

上海大学上海大学 Shanghai University

列表标记之无序列表 使用 HTML 语言中提供的列表标记,可以使 HTML 文档内容在显示时按一定的规则和格式排序。

无序列表以符号表示列表无序列表格式:<UL TYPE="value">

<LH>列表主题

</LH><LI>

列表项</LI>

</UL>

Page 30: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org30

计算中心编制

上海大学上海大学 Shanghai University

无序列表的格式说明 无序列表标记 <UL> 是成对标记,在其中可以使用 <LH>列表主题标记和 <LI>列表项标记。

列表主题标记 <LH> 是成对标记,但尾标记 </LH> 可以省略。该标记用于显示该列表的主题,列表主题标记可以省略。

列表项标记 <LI> 是成对标记,但尾标记 </LI> 可以省略。该标记用于指定列表中的每一 项。浏览时,浏览器会在每一个列表项前加上一个项目符号。同一级别列表项前的项目符号相同,不同级别列表项前使用不同的项目符号。

TYPE 参数:用来设置不同的项目符号,其 value 值可以设置为:

disc :设定一个实心圆点项目符号(缺省值)。circle :设定一个空心圆点项目符号。square :设定一个方形实心项目符号。

示例

Page 31: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org31

计算中心编制

上海大学上海大学 Shanghai University

列表标记之有序列表 有序列表以数字或字母表示列表的序号有序列表的格式<OL TYPE="value">

<LH>

列表主题</LH>

<LI>

列表项</LI>

</OL>

Page 32: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org32

计算中心编制

上海大学上海大学 Shanghai University

有序列表的格式说明有序列表标记 <OL> 是成对标记,在其中同样可以使用 <LH>列表主题标记和 <LI>列表项标记。TYPE 参数:用来设置列表项的有序编号,其 value 值可以设置为:

“1” :表示列表项用数字为序号(缺省值)。“a” :表示列表项用小写字母为序号。“A” :表示列表项用大写字母为序号。“i” :表示列表项用小写罗马字母为序号。“I” :表示列表项用大写罗马字母为序号。

示例

Page 33: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org33

计算中心编制

上海大学上海大学 Shanghai University

列表标记之定义列表 定义列表是列表的隐形显示形式定义列表的语法格式

<DL>

<DT> 定义标题<DD> 定义内容

</DL>

Page 34: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org34

计算中心编制

上海大学上海大学 Shanghai University

定义列表的格式说明定义列表标记 <DL> 是成对标记,在其中可以使用<DT> 定义标题标记和 <DD> 定义内容标记。

定义标题标记 <DT> 是非成对标记,用于指定标题。定义内容标记 <DD> 是非成对标记,用于指定相关标题的具体解释或说明。一般有一条 <DT> 标记,就有一条 <DD> 标记相对应。

定义列表示例

列表标记综合范例

Page 35: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org35

计算中心编制

上海大学上海大学 Shanghai University

表格标记 表格是网页的重要组成部分。在网页设计中,表格标记除了用于制作一 般表格外,也可以用来分割网页的版面,进行网页布局。当网页上既要放置文本,又要放置图像的时候,就会发觉很难把图像与文本放到合适的位置。而利用表格,就能将图像、文本等内容放置在合适的位置,而通过对单元格的操作,可形成网页错落有致的布局效果。所以,在网页设计中 适当地使用表格,将不同性质的部分加以区分,不但能使整个网页布局整齐规范,而且还可以提高网页的可读性。表格标记范例

Page 36: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org36

计算中心编制

上海大学上海大学 Shanghai University

创建表格标记 格式:

<TABLE [ 参数表 ]> 内容 </TABLE>说明:

创建表格标记 <TABLE> 是成对标记,用来界定表格的范围。<TABLE> 标记的参数都是可选项。

BORDER 参数:设置表格边框线的宽度,参数值用数字设置。缺省值为 0 ,即表格没有边框。

WIDTH 和 HEIGHT 参数:这两个参数分别设置表格的宽度和高度。参数值可用数字或百分数设置,其中数字表示表格宽度(或高度)所占的像素点数,百分数表示表格的宽度(或高度)占浏览器窗口宽度(或高度)的百分比。

ALIGN 参数:设定表格的对齐方式。参数值为 left (缺省值)、 center和 right 。

CELLSPACING 参数:在单元格与单元格之间有间隔线,称为格框线。该参数用来设置格框线的宽度。参数值用数字设置,缺省值为 2 。

CELLPADDING 参数:设定单元格内容与格框线之间的距离。参数值用数字设置,缺省值为 1 。

Page 37: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org37

计算中心编制

上海大学上海大学 Shanghai University

表格标题标记 格式:

<CAPTION> 内容 </CAPTION>

说明:表格标题标记 <CAPTION> 是成对标记,用来设置表格的标题,该标记必须置于 <TABLE> 标记作用域内。 <CAPTION> 标记的两个参数都是可选项。

ALIGN 参数:设定表格标题与表格之间的对齐方式。参数值为 left 、 center (缺省值)和 right 。

VALIGN 参数:设定表格标题位于表格的上方或下方。参数值为 top (缺省值)和 bottom 。

Page 38: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org38

计算中心编制

上海大学上海大学 Shanghai University

行标记 格式:

<TR> 内容 </TR>

说明:行标记 <TR> 是成对标记。 HTML 语言中的表格是 按行组织的,一个表格由几行组成,就需要有几对行标记与之相对应。

<TR> 标记的参数都是可选项。其中 ALIGN 、 WIDTH和 HEIGHT 参数和表格标记中的参数设置 相似,用于设置该行中各单元格的属性。而 VALIGN 参数用于设定该行中各单元格内容垂直对齐方式,参数值为 top 、 middle (缺省值)和 bottom 。

Page 39: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org39

计算中心编制

上海大学上海大学 Shanghai University

表头标记和表元标记 格式:

<TH> 内容 </TH><TD> 内容 </TD>

说明:表头标记 <TH> 和表元标记 <TD> 都是成对标记,必须嵌套在行标记<TR> 的首尾标记之间使用,用于规定该行中各单元格的内容。表头标记用于标识表头元素的内容,表头元素一般位于表格每列的首行,用以说明该列具体数据的属性名称。以 <TH> 和 <TD> 标记设置表格单元格内容时,除表头标记 <TH> 设置的单元格中内容以黑体显示 外,表头标记和表元标记之间几乎没有什么区别,它们所有参数及相应的参数功能是完全一样的。 <TH> 和 <TD> 标记的参数都是可选项。

ROWSPAN 参数:设定当前单元格所跨的行数。参数值用数字设置,缺省值为 1 。

COLSPAN 参数:设定当前单元格所跨的列数。参数值用数字设置,缺省值为 1 。

其他参数可参照行标记 <TR> 的参数设置,用于设置指定单元格的属性。

Page 40: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org40

计算中心编制

上海大学上海大学 Shanghai University

图像标记 图像可以使 Web 页面更加生动美观、富有生机。Web 浏览器可以显示 JPG 、 GIF 等格式的图像。图像标记范例

Page 41: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org41

计算中心编制

上海大学上海大学 Shanghai University

图像格式 网页上的图像存储格式大多采用 GIF 格式和 JPEG 格式。近来 PNG 格式也得到广泛应用,并且得到了 Internet Explorer 、 FireFox 和 Opera等浏览器的支持。

GIF 是 Graphics Interchange Format 的缩写,它是图像转换的标准格式,最多可以处理 256种颜色。它的下载速度快,并且具有多元化的结构,能存储多张图像。动画大多采用这种格式。

JPEG 标准是一个名为 Joint Photographic Experts 的组织制定的。 JPEG 是一种压缩率很高的图像格式,采用了一种有损压缩技术, 可以支持 32 位颜色的图像,但会失真。适合于显示细微颜色变化的内容,例如彩色照片、油画作品等。

PNG 格式采用了一种压缩效率很高的无损压缩技术进行压缩,有效地减少了图像文件的尺寸。 PNG 格式采用交替显示方式保存图像,只要下载 1/64 的图像信息就能够以低分辨率的方式显示出图像,因此十分适用于网络上的图像传送。 PNG 格式支持灰度图像、 RGB彩色图像以及索引色图像等。

在网页中使用图 像时,用户必须先把图像从本地或网络计算 机等处插入到网页文件中, 然后才可以进行编辑、处理。

Page 42: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org42

计算中心编制

上海大学上海大学 Shanghai University

图像标记 格式:

<IMG SRC=“URL” HEIGHT=“value1” WIDTH=“value2”…>

说明:在 HTML 文档中插入图像是通过 <IMG> 标记来实现的,该标记是非成对标记,它带有许多参数,除参数 SRC 不可缺省外,其他参数都是可选项。

Page 43: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org43

计算中心编制

上海大学上海大学 Shanghai University

图像标记参数 SRC 参数:用于指定被引用的图像文件所在的位置。超文本文件在网络中的位置都由 统一资源定位器( URL )来唯一标识。作为必选项, SRC 的参数值就是图像文件的 URL地址, URL地址的表示方法有绝对表示法和相对表示法(把当前 HTML 文档的所在位置作为当前目录)两种。

绝对表示法:<IMG SRC="http://www.cc.shu.edu.cn/images/logo.gif"><IMG SRC="file:///c:/cai3/01/emailed.gif">

相对表示法:<IMG SRC="star.jpg"><IMG SRC="image/star.jpg">

Page 44: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org44

计算中心编制

上海大学上海大学 Shanghai University

图像标记参数 HEIGHT 和 WIDTH 参数:这两个参数用来确定图像的高度和宽度。参数值用数字设置,表示图像高度(或宽度)所占的像素点数。缺省时, Web 浏览器根据原始图像文件的大小和浏览器窗口的大小自动调整图像的显示尺寸。

ALIGN 参数:用来设定图像和周围文字的对齐方式或设定图像在页面中的对 齐方式。常用参数值如下:

left :设定图像左对齐(缺省值)。right :设定图像右对齐。bottom :设定与图像相邻的文字位于图像同一区域的下方(缺省值)。

top :设定与图像相邻的文字位于图像同一区域的上方。middle :设定与图像相邻的文字位于图像同一区域的中间。

Page 45: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org45

计算中心编制

上海大学上海大学 Shanghai University

图像标记参数 ALT 参数:当用户的浏览器无法正常显示图像时,显示 ALT 属性所设定的文字。BORDER 参数:设定图像边框的宽度。参数值用数字设置,表示边框宽度所占的像素点数。缺省值为 0 ,表示无边框。VSPACE 和 HSPACE 参数:这两个参数用来设定图像与其相邻对象之间的间距。 VSPACE 参数用于指定图像与相邻对象之间的垂直间距, HSPACE 参数用于指定图像与相邻对象之间的水平间距。这两个参数的值都是数字,表示相隔间距的像素点数。

Page 46: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org46

计算中心编制

上海大学上海大学 Shanghai University

超链接标记 HTML 语言最显著的优点在于它支持文件之间的超级链接。通过超级链接,世界各地的万维网信息连接在一起,而链接标记真正体现了 HTML 语言的作用。 格式:

<A HREF="URL"> 内容 </A><A NAME=“ 目标名” > 内容 </A>

说明:链接标记 <A> 是成对标记,它是 HTML 语言的核心标记。链接标记之间的内容即超链接载体,俗称为“锚”。

Page 47: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org47

计算中心编制

上海大学上海大学 Shanghai University

链接标记参数 HREF

作用:指定超链接目标。使用绝对的 URL地址来指定超链接目标。

例如:–<A HREF="http://elearning.shu.edu.cn/jsjwh">精品课程 </A>–当用户单击“精品课程”锚时,浏览器就会基于 HTTP协议将指定服务器上的 HTML 文档显示出来。

例如:–<A HREF="ftp://ftp.cc.shu.edu.cn"> 文档传输 </A>–当用户单击“文档传输”锚时,浏览器就会基于 FTP协议连接 ftp.cc.shu.edu.cn服务器,同时在浏览器窗口中显示该 FTP服务器上的内容。

例如:–<A HREF="file:///c:/cai3/chp02/first.htm"> 网页设计 </A>–当用户单击“网页设计” 锚时,浏览器将访问本机 c:\cai3\chp02 目录中的 first.htm 文件。

Page 48: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org48

计算中心编制

上海大学上海大学 Shanghai University

链接标记参数 HREF

使用相对的 URL地址来指定超链接目标。例如:

<A HREF="Example.htm"><IMG SRC="image3.jpg"></A>本例中设置 了一个图形锚,当用户单击该图形时,浏览器会访问当前目录中( 正在访问的 HTML 文档所处的目录)的 Example.htm 文件。

Page 49: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org49

计算中心编制

上海大学上海大学 Shanghai University

链接标记参数 NAME

作用:定义目标名,提供链接定位时使用。 当网页的长度超过一屏时,可以先在网页的某处定义目标名,然后在该网页的其他地方使用 HREF 参数设置链接,格式为“ # 目标名”。当链接被激活时浏览器便会由定义的目标名处开始显示,实现同一网页间的超链接。

Page 50: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org50

计算中心编制

上海大学上海大学 Shanghai University

链接标记参数 NAME

实现同一网页间超链接的步骤:在网页中设定目标 名。

例如: <A NAME="jszx">上海大学计算中心 </A>上述例句在网页内容“上海大学计算中心” 处定义了目标名“ jszx” 。此时,文本“上海大学计算中心” 并不是“锚”,而只是提供链接定位所使用。

在相应位置设置超级链接。例如: <A HREF="#jszx">转到上海大学计算中心 </A>当用户单击“转到上海大学计算中心” 锚时,浏览器的显示区域会转到该 HTML 文档中定 义目标名为“ jszx” 的位置,即“上海大学计算中心” 处。如果在该 HTML 文档中没有定义过“ jszx”目标名,则浏览器将显示定位在该文档的开始处。

Page 51: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org51

计算中心编制

上海大学上海大学 Shanghai University

链接到电子信箱 格式:

<A HREF="mailto:E_mailaddress"> 内容 </A>

说明:链接到指定电子信箱地址。

例如:<A HREF="mailto:[email protected]">上海大学大学生研究中心 </A>

链接标记范例

Page 52: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org52

计算中心编制

上海大学上海大学 Shanghai University

地图索引 地图索引的概念

链接的锚有文字锚和图像锚两种。使用图像作链接时,可用 <A> 标记和 <IMG> 标记来完成链接,这种链接是把整个图像作为一个链接来处理。而地图索引是把整幅图划分成几个区域,区域的划分使用浏览器窗口上的坐标来描述,每个区域都可以链接不同的目标文件。

地图索引范例

Page 53: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org53

计算中心编制

上海大学上海大学 Shanghai University

地图索引 格式:

<HTML>……<BODY>……<IMG SRC="URL" ISMAP USEMAP="#地图名 "><MAP NAME="地图名 "><AREA SHAPE="value" COORDS="X1,Y1,X2,Y2……" HREF="URL">

……</MAP>……</BODY></HTML>

Page 54: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org54

计算中心编制

上海大学上海大学 Shanghai University

地图索引 说明:

在定义地图索引时,首先要为超链接源的图像添加 ISMAP 参数,将图像定义为地图。然后使用 USEMAP 参数说明该图像是遵循哪个地图定义的。

HTML 语言是通过 <MAP> 标记和 <AREA> 标记来定义地图的。地图标记 <MAP>有一个不可缺省的参数 NAME ,它的参数值是地图的名字。

区域的划分是通过在 <MAP> 标记中嵌套使用区域标记 <AREA> 来实现的。 <AREA> 标记有 3 个参数: SHAPE 、 COORDS 、 HERF ,分别用以规定该区域的形状、范围和对应的链接。其中 SHAPE参数的形状有矩形、圆形和多边形,对应的参数值分别是 rect 、 circle 和 polygon 。矩形区域范围的表示形式为“ X1 , Y1 , X2 , Y2” ,分别表示矩形区域的左上角坐标( X1 , Y1 )和右下角坐标( X2 , Y2 )。圆形区域范围的表示形式为“ X , Y , R” ,分别表示圆形区域的圆心坐标( X , Y )和半径 R 。多边形区域范围的表示形式为“ X1 , Y1 , X2 , Y2 ,…, Xn , Yn” ,分别表示从左上角坐标( X1 , Y1 )开始,按顺时针方向各个角的坐标。

Page 55: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org55

计算中心编制

上海大学上海大学 Shanghai University

框架布局标记 框架布局网页是一种特殊的 HTML 网页,它可以将浏览器窗口分割成不同的小窗口区域,每个区域称为一个框架,每一个框架可以显示不同的网页,也可以在框架中设置 超链接。当单击某框架中的 超链接时,超链接所指向的网页(即超链接目标)显示在另一个框架中。

一个框架网页可包含若干个框架,但每个框架中只能包含一个网页,这个网页可以是普通的网页,也可以是一个级别更低的框架网页。如果一个框架中包 含另外一个框架网页,则称为框架嵌套。

每个框架的内容既相互独立又存在着一定的联系,框架的独立性表现在更新框架的内容时,不会影响窗口内的其他框架;框架的关联性表现在单击框架中的 超链接时,就能在另一个框架内显示超链接目标。

Page 56: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org56

计算中心编制

上海大学上海大学 Shanghai University

基本结构<HTML><HEAD><TITLE> 文档标题 </TITLE></HEAD><FRAMESET ROWS="value"| COLS="value"> (将浏览器窗口分隔成n 个框架)

<FRAME NAME="framename1" SRC="URL1"…><FRAME NAME="framename2" SRC="URL2"…>……<FRAME NAME="framenamen" SRC="URLn"…></FRAMESET><NOFRAMES>提示信息 </NOFRAMES></HTML>

Page 57: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org57

计算中心编制

上海大学上海大学 Shanghai University

框架定义标记 格式:

<FRAMESET ROWS=“value”| COLS=“value”> 内容 </FRAMESET>

说明:框架定义 <FRAMESET> 标记是成对标记,用来定义整个框架结构的分隔方式。该标记有两个必选其一的参数:ROWS 和 COLS ,用来说明浏览器窗口中划分框架的数量以及各框架的大小。

Page 58: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org58

计算中心编制

上海大学上海大学 Shanghai University

框架定义标记参数 ROWS 参数:说明浏览器窗口水平(横排)分隔情况。 value 值用来定义每个框架的高度。COLS 参数:说明浏览器窗口垂直(直排)分隔情况。 value 值用来定义每个框架的宽度。value 值可用像素值、百分比或剩余值以及这三种方式的混合方式来表示。

像素值:具体数字以像素为单位。百分比:每一个百分比数字表示该框架占浏览器总窗口的百分比。

剩余值:表示当所有框架设定之后的剩余部分,用“ *”表示。

Page 59: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org59

计算中心编制

上海大学上海大学 Shanghai University

框架定义标记参数 例如

设置 COLS=“180 , *”表示将浏览器窗口纵向分隔成左右两个框架,其中第一个框架(左框架)宽度为 180 个像素点,浏览器窗口剩余的宽度就是第二个框架(右框架)的宽度。

例如设置 ROWS=“30% , 50 , *”表示将浏览器窗口横向分隔成上、中、 下三个框架,其中上面一个框架的高度占浏览器窗口的 30% ,中间 框架的高度设为 50 个像素点,剩余的浏览器窗口高度分配给最下面的框架。

Page 60: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org60

计算中心编制

上海大学上海大学 Shanghai University

框架内容标记 格式

<FRAME NAME=“framename” SRC=“URL”…>

说明框架内容 <FRAME> 标记是非成对标记,用来设定各框架名称及其对应的网页等内容。该标记只能应用于框架定义标记 <FRAMESET> 的开始和结束标记之间。

Page 61: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org61

计算中心编制

上海大学上海大学 Shanghai University

框架内容标记参数SRC 参数:用于设置显示在该框架中 HTML 文档的 URL地址。如果 <FRAME> 中没有 SRC 参数,则该框架显示为空。

NAME 参数:用来设定框架的名字,该参数是可选项。MARGINWIDTH 参数:用来控制框架内显示的内容与框架左右边缘的距离。该参数是可选项,参数值用数字设置,缺省值为 1 。

MARGINHEIGHT 参数:用来控制框架内显示的内容与框架上下边缘的距离。该参数是可选项,参数值用数字设置,缺省值为 1 。

SCROLLING 参数:用于描述框架是否设有滚动条。该参数是可选项,参数值取值为: yes (表示有滚动条)、 no (表示没有滚动条)和 auto (表示根据具体情况决定有无滚动条,缺省值)。

NORESIZE 参数:用于说明用户是否可以自行使用鼠标调整框架的大小。如果设定 NORESIZE 参数,则框架大小不能调整。如果该参数缺省,则表示用户可以自行调整框架大小。

Page 62: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org62

计算中心编制

上海大学上海大学 Shanghai University

无框架标记 使用无框架 <NOFRAMES> 标记,可以在用户浏览器不支持框架结构显示时,告知用户一些有关信息,以免用户面对空白窗口的尴尬。 <NOFRAMES> 标记是成对标记,首标记 <NOFRAMES> 和尾标记 </NOFRAMES> 之间的内容就是网页设计者希望告诉用户的信息。虽然所有基于 Windows 的 Web 浏览器高版本都支持框架结构显示,但是为了加强网页显示的适用性,使编写的 HTML 文档能适应各种类型的 Web 浏览器,还是应该养成使用这个标记的习惯。

Page 63: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org63

计算中心编制

上海大学上海大学 Shanghai University

框架标记的嵌套 <FRAMESET> 标记可以嵌套使用,即利用框架标记的嵌套,可以将其中某一个或某几个框架再划分为若干个更小的框架。

例如:<HTML>……<FRAMESET COLS="20% , *">

<FRAME NAME="frameA" SRC="A.HTM"><FRAMESET ROWS="40% , *">

<FRAME NAME="frameB" SRC="B.HTM"><FRAME NAME="frameC" SRC="C.HTM">

</FRAMESET></FRAMESET>……

</HTML>说明:在上例中首先将浏览器窗口分隔成左右两个框架,接着利用 <FRAMESET> 标记的嵌套,又上下分隔右框架。

Page 64: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org64

计算中心编制

上海大学上海大学 Shanghai University

框架结构框架结构范例

Page 65: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org65

计算中心编制

上海大学上海大学 Shanghai University

其他 TARGET 参数“_blank” :被链接的网页显示在一个新的窗口中。“_top” :被链接的网页显示在整个窗口中。“_parent” :被链接的网页显示在上一层的框架中。“_self” :被链接的网页显示在当前的框架中( 缺省值)。其中“ _top” 和“ _parent”通常都是因为在框架中还有框架(即框架嵌套),因此可以用“ _parent” 表示上一层的框架,而“ _top” 则表示最上层的框架。

Page 66: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org66

计算中心编制

上海大学上海大学 Shanghai University

表单标记 随着 Internet 的迅速发展,用户对互联网的要求越来越高,不仅希望能从Web服务器中获得信息,而且还希望能向Web服务器反馈信息。 HTML 语言是利用表单标记 <FORM> 来设计用户 交互界面的。

表单的基本结构 <FORM ACTION="URL" METHOD="POST|GET"><INPUT TYPE="fieldtype" NAME="fieldname"…>……<SELECT>…</SELECT>……<TEXTAREA>…</TEXTAREA></FORM>

表单标记范例

Page 67: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org67

计算中心编制

上海大学上海大学 Shanghai University

<FORM> 标记的两个参数 ACTION 参数:用来指出服务器端程序所在的地址,也就是指定用来处理表单数据程序的网址。 ACTION 的参数值以 URL地址方式来表示。在 Web服务器端必须有此类的程序,用来接收由浏览器端传送过来的数据。

METHOD 参数:用来指定将浏览器端表单数据上传给Web服务器所采用的传送方式,参数的值为 POST 或 GET (缺省值)。

POST :将表单内各字段名称 fieldname 与其输入信息放置在 HTML 文档表头内一起传送给服务器端,交由 ACTION 参数所指定的程序处理。该程序会通过标准输入方式,将表单的数据读出并加以处理。由于数据是放置在HTML 文档表头中, 因此并没有长度的限制,而 且数据在传送过程中的 安全性也比较高。

GET :将表单内各字段名称 fieldname 与其输入信息作为字符串附加在 ACTION 参数所指定程序的 URL地址后,中间用“ ?”隔开。此时表单中所 有字段的数据都会直接显示在 URL上(即浏览器网址输入栏内),数据传送的安全性较低,而且 URL长度最长为 256bytes ,因此不适合用来传送数据量较大的表单数据。

Page 68: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org68

计算中心编制

上海大学上海大学 Shanghai University

表单项标记 <INPUT>

格式:<INPUT TYPE=“fieldtype” NAME=“fieldname”…>

说明:<INPUT> 标记有六个参数: TYPE 、 NAME 、 SIZE 、VALUE 、 MAXLENGTH 和 CHECKED 。后面五个参数因 TYPE 的类型不同,含义也有所不同。 TYPE有六种常用类型: text 、 password 、 submit 、 reset 、 radio和 checkbox 。

Page 69: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org69

计算中心编制

上海大学上海大学 Shanghai University

text (文本框) 在表单中,文本 框是一个只能输入一行文字的输入框, text 是 TYPE 的“缺省值”。当 TYPE 为 text 时, <INPUT>标记除 CHECKED 参数无意义外,其他四个参数的含义为:

NAME :标识相应处理程序中的 变量名, Web服务器将把这条输入信息的值赋予 NAME 参数规定的变量。

SIZE :用于指定文本框的长度,缺省值为 20 ,以字节为单位。

VALUE :用于指定文本框的初始值。MAXLENGTH :用来设定该文本框允许用户输入的最大字符数。

Page 70: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org70

计算中心编制

上海大学上海大学 Shanghai University

password (密码框) 密码框中所 输入的信息是密码。 TYPE=“password”方式下的输入和参数定义与 TYPE=“text”方式下的输入和参数定义基本相同,不同之处只是当用户输入时并不在输入框中显示用户 输入的信息,而是用“ *” 号来代替,从而确保密码的安全。

Page 71: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org71

计算中心编制

上海大学上海大学 Shanghai University

submit (提交按钮) 当 TYPE=“submit” 时,浏览器会在窗口中产生一个提交按钮。当用户单击该按钮后,浏览器就会将表单的输入信息传送给服务器。使用提交按钮时除了一个可选的 VALUE 参数外其他参数都可缺省。VALUE 参数可让用户自定义显示在提交按钮上的文字。 VALUE 参数的缺省值是由用户所使用的浏览器确定的。一般情况下,在一个表单中有且仅有一个提交按钮。

Page 72: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org72

计算中心编制

上海大学上海大学 Shanghai University

reset (重置按钮)当 TYPE=“reset” 时,浏览器会在窗口中产生一个重置按钮。当用户单击该按钮后,浏览器就会清除表单中所 有的输入信息,让用户重新输入。和 submit类型一样,重置按钮除了一个可选的 VALUE参数外其他参数都可缺省。 VALUE 参数可让用户自定义显示在按钮上的文字。 VALUE 参数的缺省值同样是由用户所使用的浏览器确定的。

Page 73: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org73

计算中心编制

上海大学上海大学 Shanghai University

radio (选项按钮) radio类型为用户提供选项按钮进行选择。由于选择是唯一的,因此同组选项按钮的 NAME 参数必须取相同的值,但 VALUE 参数值是不同的。当 TYPE=“radio” 时,除了 TYPE 和 NAME 参数外,<INPUT> 标记还有两个参数:

VALUE 参数:表示当该选项被选中并提交后, Web 浏览器要传送给服务器的数据。该参数是不可缺省的。

CHECKED 参数:用于指定选项按钮的初始标志状态,若有则表示该选项在初始时是被选中的,若 无则表示该选项在初始时未被选中。

Page 74: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org74

计算中心编制

上海大学上海大学 Shanghai University

checkbox (复选框) checkbox类型为用户提供复选按钮进行多项选择。由于选择是多项的,因此 NAME 参数可以取不同的值。当 TYPE=“checkbox” 时, <INPUT> 标记也使用 VALUE 和 CHECKED 两个参数,它们的使用方法和功能与 TYPE=“radio” 时完全一样。

Page 75: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org75

计算中心编制

上海大学上海大学 Shanghai University

表单列表标记和表单列表项标记 <SELECT>

<SELECT> 标记是成对标记,首标记 <SELECT>和尾标记 </SELECT> 之间的内容就是一个列表框的内容。 <SELECT> 标记必须与表单列表项标记<OPTION>配套使用。<OPTION> 标记是非成对标记,嵌套在 <SELECT> 标记中,用于定 义列表框中的 各个选项。<SELECT> 标记的参数有: NAME 、 SIZE 和 MULTIPLE ,其中 NAME 参数是不可缺省的,其他都是可选项。

Page 76: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org76

计算中心编制

上海大学上海大学 Shanghai University

<SELECT> 标记参数NAME 参数:用来设定列表框的名字。SIZE 参数:用于定义列表框的长度。参数值是数字,表示显示在列表框中的 选项数目,缺省值为 1 。当参数值小于列表框中的 列表项数目时,浏览器会为该列表框添加滚动条,用户可使用滚动条来查看所有的选项。MULTIPLE 参数:用于表示列表框中的 选项可以多选。

Page 77: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org77

计算中心编制

上海大学上海大学 Shanghai University

<OPTION> 标记参数VALUE 参数:用来设定当选项被选中并提交后,Web 浏览器传送给服务器的数据。缺省时,浏览器将传送 <OPTION> 标记后的具体内容。SELECTED 参数:用来指定选项的初始标志状态,若有则表示该选项在初始时是被选中的。若在 <SELECT> 标记中设定 MULTIPLE 参数,则可以在多个 <OPTION> 标记中带有 SELECTED 参数。

Page 78: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org78

计算中心编制

上海大学上海大学 Shanghai University

文本区标记 <TEXTAREA>

文本区标记 <TEXTAREA> 是成对标记,用来定义表单中高度超过一行的文本输入框。首标记 <TEXTAREA> 和尾标记 </TEXTAREA> 之间的内容就是显示在文本输入框中的 初始信息。

Page 79: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org79

计算中心编制

上海大学上海大学 Shanghai University

<TEXTAREA> 标记参数 NAME 参数:用于指定文本输入框的名字。ROWS 参数:用于规定文本输入框的高度。参数值是数字,表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是当输入信息的行数小于或等于 ROWS 参数的参数值时,滚动条将不起作用。

COLS 参数:用于规定文本输入框的宽度。参数值是数字,表示一行所能显示的最大字符数。如果输入信息中有一行或几行的字符数大于 COLS 参数的参数值,浏览器会为该文本输入框添加水平滚动条。

<TEXTAREA> 标记隐含有 <PRE> 标记的功能。 Web 浏览器将按照编辑文本时的字符位置将首标记 <TEXTAREA>和尾标记 </TEXTAREA> 之间的内容忠实地、一成不变地显示出来。

Page 80: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org80

计算中心编制

上海大学上海大学 Shanghai University

背景设置案例 1<html>

<head>

<title> 设置背景(用英文单词) </title>

</head>

<body BGCOLOR="green" TEXT="red">

嗨!你好!这是我的第一个网页!</body>

</html>

Page 81: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org81

计算中心编制

上海大学上海大学 Shanghai University

背景设置案例 2<html>

<head>

<title> 设置背景(用十六进制) </title>

</head>

<body BGCOLOR="#008000" TEXT="#ff0000">

嗨!你好!这是我的第一个网页!</body>

</html>

Page 82: 第二章 HTML 语言

教学网站:mingler.ccshu.org 教学论坛:bbs.ccshu.org82

计算中心编制

上海大学上海大学 Shanghai University

特殊字符代码事例<html>

<head> <title> 特殊字符代码实例 </title> </head>

<body BGCOLOR="#A0A000" TEXT="#ff0000">

Let's learn &quot You &amp me &quot &nbsp &lt Very Good &gt <br>

Version &lt 1.1 &gt &copy

</body>

</html>