第 2章 Web页面制作基础
2.1 HTML语言概述
2.2 文档的格式与风格
2.3 加入多媒体与超级链接
2.4 制作表格
2.5 制作表单
2.6 框架结构
2.7 CSS基础
2.1 HTML语言概述
WWW（ World Wide Web，万维网）拉进了人
们彼此间的距离，使得人与人之间的信息交
流变得更加简便和快捷。 WWW上的信息，大部
分是通过 HTML语言发布的 。
本章首页
2.1 HTML语言概述
2.1.1 HTML概述
HTML是（ Hyper Text Markup Language，超文本
标记语言）的缩写，最早源于 SGML语言 。
HTML用来表示网上信息的符号标记语言。在 WWW上，
发布信息通常使用 HTML，它是 Web页面的基础，任何
一个 Web页面都离不开 HTML，而且 HTML也是 Web应用
开发的基础。
HTML语言是大多数浏览器都能识别的语言，使用
HTML语法规则建立的文本可以运行在不同的操作系
统平台上，而且能被大多数用户所接受。
2.1 HTML语言概述
2.1.2 文档的结构
<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
正文部分
</BODY>
</HTML>
文件开头和结尾由
<HTML>和 </HTML>来
标记 。
<HEAD>和 </HEAD>
标记头部，用来包含
文件的基本信息；
<BODY>和 </BODY>标
记正文部分，是整个
文件的主体部分。
2.1 HTML语言概述
<HTML>
<HEAD>
<TITLE>这是标题部分 。 </TITLE>
</HEAD>
<BODY>
<P>你好, 这是正文部分 ！ </P>
</BODY>
</HTML>
2.1 HTML语言概述
2.1.3 HTML标记
1,HTML文档标记
格式,<HTML>… </HTML>
功能：标志文档开始和结尾的标记。
2,HTML文件头标记
格式,<HEAD>… </HEAD>
功能：用于包含文件的基本信息。
3,HTML文件主体标记
格式,<BODY>… </BODY>
功能：文件主体标记。
2.1 HTML语言概述
2.1.4 常用 HTML编辑工具
任何一个文档编辑器都是 HTML编辑器 。
为了减少网页设计师的工作，使设计网页更加的方
便，很多公司设计了专用的网页编辑器，像
Dreamweaver,FrontPage,CutePage,QuickSite等，
是专门用来制作网页的，利用它们可以很容易的编写
出精美的网页，具有所见即所得的功能。
所谓所见即所得，就是在编辑网页时看到的效果，
与使用浏览器时显示的效果基本一致。
2.2 文档的格式与风格
在大多数网页中，文档是核心的内容，只
有设置适当的文档格式，才能得到绚丽多彩
的网页。设置文档的格式包括：设置标题和
文字的字体、字号、字型、颜色，段落格式、
文本布局等。
2.2 文档的格式与风格
2.2.1 设置 <BODY>的属性
标记属性 功能
background=URL 设置网页的背景图片
bgcolor=colorvalue 设置网页的背景颜色
text=colorvalue 设置文本的颜色
link=colorvalue 设置尚未被访问过的超文本链接的颜色, 默认为蓝色
vlink=colorvalue 设置已被访问过的超文本链接的颜色, 默认为紫色
alink=colorvalue 设置超文本链接在被单击的瞬间的颜色, 默认为红色
bgproperties =fixed 设置背景是否随滚动条滚动
leftmargin=size 设置网页左边的空白
topmargin=size 设置网页上方的空白
margingwidth=size 设置网页空白的宽度
marginheight =size 设置网页空白的高度
2.2 文档的格式与风格
2.2.2 段落格式化
1,标题标记
格式,<H1>… </H1>,<H2>… </H2>… <H6>… </H6>
功能：设置各种大小不同标题的标记。
2,段落标记
格式,<P>… </P>
功能：设置段落标记。
3,预定义格式标记
格式,<PRE>… </PRE>
2.2 文档的格式与风格
4,分区显示标记
格式,<DIV>… </DIV>
功能：分区显示标记。
5,换行标记
格式,<BR>
功能：强制换行。
6,水平线标记
格式,<HR>
功能：插入水平线标记。
7,注释标记
格式,<!--注释内容 --
>
功能：注释标记 。
2.2 文档的格式与风格
<HTML><HEAD><TITLE>标记的使用 </TITLE></HEAD>
<BODY>
<！ --注释
本程序的功能是：
制作简单网页熟悉基本标记的使用 ！
-->
<P align=center>三种标记的使用 ！ </P><HR>
<DIV align=center>我在中间 ！
<BR>中间 </DIV><HR>
<DIV align=left>我在左边 ！ <BR>左边 </DIV><HR>
<DIV align=right>我在右边 ！ <BR>右边 </DIV>
<HR></BODY></HTML>
2.2 文档的格式与风格
2.2.3 建立列表
1,有序列表
格式,<OL type="符号类型 ">
<LI type="符号类型 ">… </LI>
<LI type="符号类型 ">… </LI>
…
</OL>
type属性：数字 （ 1,2,… ）, 大写英文字母 （ A，
B,… ）, 小写英文字母 （ a,b,… ）, 大写罗马字
母 （ I,II,… ） 和小写罗马字母 （ i,ii,… ）,
默认的序号是数字 。
2.2 文档的格式与风格
2.2.3 建立列表
2,无序列表
格式,<UL type="符号类型 ">
<LI type="符号类型 ">… </LI>
<LI type="符号类型 ">… </LI>
…
</UL>
type属性：可以为 disc（ 实心圆点 ）, circle
（ 空心圆点 ）, square（ 方块 ） 和自定义图片, 默
认为实心圆点 。
2.2 文档的格式与风格
2.2.3 建立列表
3,自定义列表
格式,<DL>
<DT>… </DT>
<DD>… </DD>
<DT>… </DT>
<DD>… </DD>
…
</DL>
<DL>定义列表； <DT>定义列表项, 项目会自动换
行并左对齐, 但项目间没有空行； <DD>用来定义语
句 。
2.2 文档的格式与风格
2.2.4 字符的格式化
1,字体设置标记
格式,<FONT>… </FONT>
功能：设置字体格式标记 。
标记属性 功能
size=size 设置文字的大小
face=fontstyle 设置字体
color=colorvalue 设置文字的颜色
2.2 文档的格式与风格
2.2.4 字符的格式化
2．其他标记
其他标记格式 功能
<U>… </U> 给字符加下划线
<S>… </S> 给字符上加横线, 表示删除
<B>… </B> 给字符加粗
<I>… </I> 将字符设置成斜体
<BLINK>… </BLINK> 标记使得其中的文字产生闪烁的效果
2.3 加入多媒体与超级链接
图像的出现为本来单调乏味的网络世界增
添了一道亮丽的风景线 。 图像在网页设计中是
必不可少的, 所以用户应该掌握在网页中操作
图像的方法 。
2.3 加入多媒体与超级链接
插入多媒体的一般形式：
格式,<IMG>… </IMG>
功能：在网页中加入图像, 视频, 动画等 。
2.3 加入多媒体与超级链接
1,插入图像
标记属性 功能
src =URL 通过 URL给出图像来源的位置, 不可缺省
width=size 设置图像宽度
height=size 设置图像高度
alt=txt 设置在图像未载入前图片位置显示的文字
border=size 设置图像边框, 缺省为 0
align=alignstyle 设置对齐方式 。 取值为,top,middle,bottom,left，
right
hspace=size 设置图片左右边沿空白
vspace=size 设置图片上下边沿空白
2.3 加入多媒体与超级链接
2,插入视频
标记属性 功能
dynsrc=URL 设置多媒体来源位置
loop=size 设置视频播放的次数
loopdelay=time 设置两次播放的间隔时间
start=value 指定何时开始播放视频文件
2.3 加入多媒体与超级链接
2.3.2 加入超级链接
格式,<A>… </A>
功能：在当前页和其他页间建立超链接 。
标记属性 功能
href=URL 给定链接目标的位置
target=frametarget 设置显示链接目标的框架
accesskey=characte
r
设置快捷键
tabindex=num 设置 Tab键的顺序
rel=linktype 设置到链接的关系
2.4 制作表格
表格可以把文字和图片等内容按照行和
列排列起来, 可以用来建立主页的框架, 使
得整个网页更加清晰和条理化, 有利于信息
的表达 。
2.4 制作表格
2.4.1 建立表格
格式,<TABLE>… </TABLE>
标记属性 功能
border=size 设置表格边框大小
width= size 设置表格的宽度
height=size 设置表格的高度
cellspacing=size 设置单元格间距
cellpadding=size 设置单元格的填充距
background =URL 设置表格背景图片
bgcolor=colorvalue 设置表格背景色
align=alignstyle 设置对齐方式
cols=size 设置表格的列数
2.4 制作表格
2.4.2 定制表格
格式,<TR>… </TR>。 功能：定义表格的一行 。
格式,<TD>… </TD>。 功能：定义单元格 。
标记属性 功能
bgcolor=colorvalue 设置行背景颜色
align=alignstyle 设置行对齐方式
valign=valignstyle 设置单元格垂直对齐方式
2.4 制作表格
2.4.2 定制表格
格式,<CAPTION>… </CAPTION>
功能：定义表格标题, 可以通过 align属性设置
标题的对齐方式 。
标记属性 功能
bgcolor=colorvalu
e
设置单元格背景颜色
rowspan=num 设置单元格所占的行数
colspan=num 设置单元格所占的列数
align=alignstyle 设置对齐方式
valign =valignstyle 设置单元格垂直对齐方式
width =size 设置单元格宽度
height=size 设置单元格高度
2.5 制作表单
表单是用户和 Web应用程序, Web数据库
等进行交互的界面 。 在 Web上, 通过表单可以
完成用户和计算机或服务器之间进行的信息交
换 。
2.5 制作表单
2.5.1 表单的结构
格式：
<FORM action= URL method=postmethod
onsubmit= script target=frametarget
accept-charset=cdata enctype=contenttype >
…
</FORM>
功能：定义表单 。
2.5 制作表单
2.5.2 FORM中常用的标记
1,输入域
（ 1） 单行输入域 。 格式,<INPUT>。
标记属性 功能
type=
inputtype
设置输入域的类型
name=cdata 设置表项的控制名, 在表单处理时起作用 （ 适用于除 submit和 reset外的
其他类型 ）
size=num 设置表单域的长度
maxlength
=num
设置允许输入的最大字符数 （ 适用于 text和 password类型 ）
value=cdata 设置输入域的值 （ 适用于 radio和 checkbox类型 ）
checked 设置是否被选中 （ 适用于 radio,button,checkbox类型 ）
2.5 制作表单
1） text类型 。
2） password类型 。
3） radio类型 。
4） checkbox类型 。
5） submit类型 。
6） reset类型 。
7） hidden类型 。
2.5 制作表单
（ 2） 多行输入域 。
格式为,<TEXTAREA>…<TEXTAREA>
功能：定义多行文本输入域。
标记属性 功能
name=cdata 设置 FORM提交的输入信息的名称
rows=num 设置文本域的行数
cols=num 设置文本域的列数
tabindex=num 设置 tab键的次序
2.5 制作表单
2,按钮
格式,<BUTTON>… </BOTTON>
功能：定义按钮。
标记属性 功能
name=cdata 设置已发送表单的关键字
value=cdata 设置已发送表单的值
type= buttontype 设置按钮的类型
tabindex=num 设置 tab键的次序
2.5 制作表单
3,选择域
格式：
<SELECT>
<OPTION> 选项
一
<OPTION> 选项
二
…
</SELECT>
功能：定义选择栏 。
标记属性 功能
name=cda
ta
设置选择栏的名字
size=num 设置在选择栏中一次可见的选项个数
multiple 设置选项栏是否支持多选
标记属性 功能
value=cd
ata
设置选项的默认值
selected 表示此选项为预置项
<option>属性：
<select>属性：
2.6 框架结构
2.6.1 框架结构的文件格式
<HTML>
<HEAD>
…
</HEAD>
<FRAMESET>
<FRAME>
…
<FRAME>
…
</FRAMESET>
</HTML>
注意,含有框架结
构的网页其 HTML的形
式和一般的 HTML文件
相似, 只是在文档中,
若 使 用 了
<FRAMESET>,就不
应该有 <BODY>标记 。
在老版本的浏览器可
能不支持框架结构 。
2.6 框架结构
2.6.2 框架结构标记的使用
格式,<FRAMESET>… </FRAMESET>
功能：定义一个框架容器。
标记属性 功能
rows=size 设置多重框架的高度
cols=size 设置多重框架的宽度
onload=script 设置框架被载入的事件
onunload=script 设置框架被卸载的事件
2.6 框架结构
2.6.3 FRAME标记
格式,<FRAME>
功能：在网页中定义框架 。
标记属性 功能
src=URL 设置要链接到的 HTML文件
name=framename 表示子窗口的名字
marginwidth=size 用来控制显示内容和窗口左右边界的距离, 默认为 1
marginheight= size 用来控制显示内容和窗口上下边界的距离, 默认为 1
scrolling=scrollingst
yle
指定子窗口是否使用滚动条, 有 YES/NO/AUTO三个值,
默认为 AUTO,即根据窗口内容决定是否有滚动条
noresize 使用该属性后, 指定窗口不能调整窗口大小
2.6 框架结构
2.6.4 TARGET属性的使用
1,用于 A标记
2,用于 BASE标记
3,用于 FORM标记
本章首页
2.7 CSS基础
2.7.1 CSS样式简介
CSS（ Cascading Style Sheets,层叠样式表 ）,
又称格式页, 是近几年才发展起来的新技术 。 它提
供了很多的样式定义方式来辅助 HTML。
本章首页
2.7 CSS基础
<HTML><HEAD><TITLE>CSS样式 </TITLE>
<STYLE type="text/css">
<!--
H3{ font-family:arial;
font-size:12pt;
font-style:normal;
color:blue;}
-->
</STYLE></HEAD>
<BODY>
<H3>CSS样 式 文本 ！ arial,12pt,normal，
blue！ </H3>
</BODY></HTML>
本章首页
2.7 CSS基础
2.7.2 CSS样式表的定义
1,通过 HTML标记定义
定义任何一个 HTML标记, 定义时在属性和属性值之间
用,,, 隔开, 当有多重属性时, 使用, ；, 进行分隔 。
2,用 id属性定义样式表
id以 （ #） 开头, 把标准的属性和属性值写入大括号内 。
id属性的作用是：在调用 JavaScript语言时, 作为一个
独立的名称来识别网页中的一个元素, 如果不是因为要在网
页中使用 JavaScript语言, 这种标记应尽量少用, 因为它
具有一定的局限性 。
3,使用 class定义样式表
使用 class的方法和 id的方法基本相同, class以,,”开
头, 然后再把标准的属性和属性值写入大括号内 。
本章首页
2.7 CSS基础
2.7.3 在 HTML中加入 CSS的方法
1,嵌入式样式表
2,内联式样式表
3,外联式样式表
4,输入式样式表
2.1 HTML语言概述
2.2 文档的格式与风格
2.3 加入多媒体与超级链接
2.4 制作表格
2.5 制作表单
2.6 框架结构
2.7 CSS基础
2.1 HTML语言概述
WWW（ World Wide Web，万维网）拉进了人
们彼此间的距离，使得人与人之间的信息交
流变得更加简便和快捷。 WWW上的信息，大部
分是通过 HTML语言发布的 。
本章首页
2.1 HTML语言概述
2.1.1 HTML概述
HTML是（ Hyper Text Markup Language，超文本
标记语言）的缩写，最早源于 SGML语言 。
HTML用来表示网上信息的符号标记语言。在 WWW上，
发布信息通常使用 HTML，它是 Web页面的基础，任何
一个 Web页面都离不开 HTML，而且 HTML也是 Web应用
开发的基础。
HTML语言是大多数浏览器都能识别的语言，使用
HTML语法规则建立的文本可以运行在不同的操作系
统平台上，而且能被大多数用户所接受。
2.1 HTML语言概述
2.1.2 文档的结构
<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
正文部分
</BODY>
</HTML>
文件开头和结尾由
<HTML>和 </HTML>来
标记 。
<HEAD>和 </HEAD>
标记头部，用来包含
文件的基本信息；
<BODY>和 </BODY>标
记正文部分，是整个
文件的主体部分。
2.1 HTML语言概述
<HTML>
<HEAD>
<TITLE>这是标题部分 。 </TITLE>
</HEAD>
<BODY>
<P>你好, 这是正文部分 ！ </P>
</BODY>
</HTML>
2.1 HTML语言概述
2.1.3 HTML标记
1,HTML文档标记
格式,<HTML>… </HTML>
功能：标志文档开始和结尾的标记。
2,HTML文件头标记
格式,<HEAD>… </HEAD>
功能：用于包含文件的基本信息。
3,HTML文件主体标记
格式,<BODY>… </BODY>
功能：文件主体标记。
2.1 HTML语言概述
2.1.4 常用 HTML编辑工具
任何一个文档编辑器都是 HTML编辑器 。
为了减少网页设计师的工作，使设计网页更加的方
便，很多公司设计了专用的网页编辑器，像
Dreamweaver,FrontPage,CutePage,QuickSite等，
是专门用来制作网页的，利用它们可以很容易的编写
出精美的网页，具有所见即所得的功能。
所谓所见即所得，就是在编辑网页时看到的效果，
与使用浏览器时显示的效果基本一致。
2.2 文档的格式与风格
在大多数网页中，文档是核心的内容，只
有设置适当的文档格式，才能得到绚丽多彩
的网页。设置文档的格式包括：设置标题和
文字的字体、字号、字型、颜色，段落格式、
文本布局等。
2.2 文档的格式与风格
2.2.1 设置 <BODY>的属性
标记属性 功能
background=URL 设置网页的背景图片
bgcolor=colorvalue 设置网页的背景颜色
text=colorvalue 设置文本的颜色
link=colorvalue 设置尚未被访问过的超文本链接的颜色, 默认为蓝色
vlink=colorvalue 设置已被访问过的超文本链接的颜色, 默认为紫色
alink=colorvalue 设置超文本链接在被单击的瞬间的颜色, 默认为红色
bgproperties =fixed 设置背景是否随滚动条滚动
leftmargin=size 设置网页左边的空白
topmargin=size 设置网页上方的空白
margingwidth=size 设置网页空白的宽度
marginheight =size 设置网页空白的高度
2.2 文档的格式与风格
2.2.2 段落格式化
1,标题标记
格式,<H1>… </H1>,<H2>… </H2>… <H6>… </H6>
功能：设置各种大小不同标题的标记。
2,段落标记
格式,<P>… </P>
功能：设置段落标记。
3,预定义格式标记
格式,<PRE>… </PRE>
2.2 文档的格式与风格
4,分区显示标记
格式,<DIV>… </DIV>
功能：分区显示标记。
5,换行标记
格式,<BR>
功能：强制换行。
6,水平线标记
格式,<HR>
功能：插入水平线标记。
7,注释标记
格式,<!--注释内容 --
>
功能：注释标记 。
2.2 文档的格式与风格
<HTML><HEAD><TITLE>标记的使用 </TITLE></HEAD>
<BODY>
<！ --注释
本程序的功能是：
制作简单网页熟悉基本标记的使用 ！
-->
<P align=center>三种标记的使用 ！ </P><HR>
<DIV align=center>我在中间 ！
<BR>中间 </DIV><HR>
<DIV align=left>我在左边 ！ <BR>左边 </DIV><HR>
<DIV align=right>我在右边 ！ <BR>右边 </DIV>
<HR></BODY></HTML>
2.2 文档的格式与风格
2.2.3 建立列表
1,有序列表
格式,<OL type="符号类型 ">
<LI type="符号类型 ">… </LI>
<LI type="符号类型 ">… </LI>
…
</OL>
type属性：数字 （ 1,2,… ）, 大写英文字母 （ A，
B,… ）, 小写英文字母 （ a,b,… ）, 大写罗马字
母 （ I,II,… ） 和小写罗马字母 （ i,ii,… ）,
默认的序号是数字 。
2.2 文档的格式与风格
2.2.3 建立列表
2,无序列表
格式,<UL type="符号类型 ">
<LI type="符号类型 ">… </LI>
<LI type="符号类型 ">… </LI>
…
</UL>
type属性：可以为 disc（ 实心圆点 ）, circle
（ 空心圆点 ）, square（ 方块 ） 和自定义图片, 默
认为实心圆点 。
2.2 文档的格式与风格
2.2.3 建立列表
3,自定义列表
格式,<DL>
<DT>… </DT>
<DD>… </DD>
<DT>… </DT>
<DD>… </DD>
…
</DL>
<DL>定义列表； <DT>定义列表项, 项目会自动换
行并左对齐, 但项目间没有空行； <DD>用来定义语
句 。
2.2 文档的格式与风格
2.2.4 字符的格式化
1,字体设置标记
格式,<FONT>… </FONT>
功能：设置字体格式标记 。
标记属性 功能
size=size 设置文字的大小
face=fontstyle 设置字体
color=colorvalue 设置文字的颜色
2.2 文档的格式与风格
2.2.4 字符的格式化
2．其他标记
其他标记格式 功能
<U>… </U> 给字符加下划线
<S>… </S> 给字符上加横线, 表示删除
<B>… </B> 给字符加粗
<I>… </I> 将字符设置成斜体
<BLINK>… </BLINK> 标记使得其中的文字产生闪烁的效果
2.3 加入多媒体与超级链接
图像的出现为本来单调乏味的网络世界增
添了一道亮丽的风景线 。 图像在网页设计中是
必不可少的, 所以用户应该掌握在网页中操作
图像的方法 。
2.3 加入多媒体与超级链接
插入多媒体的一般形式：
格式,<IMG>… </IMG>
功能：在网页中加入图像, 视频, 动画等 。
2.3 加入多媒体与超级链接
1,插入图像
标记属性 功能
src =URL 通过 URL给出图像来源的位置, 不可缺省
width=size 设置图像宽度
height=size 设置图像高度
alt=txt 设置在图像未载入前图片位置显示的文字
border=size 设置图像边框, 缺省为 0
align=alignstyle 设置对齐方式 。 取值为,top,middle,bottom,left，
right
hspace=size 设置图片左右边沿空白
vspace=size 设置图片上下边沿空白
2.3 加入多媒体与超级链接
2,插入视频
标记属性 功能
dynsrc=URL 设置多媒体来源位置
loop=size 设置视频播放的次数
loopdelay=time 设置两次播放的间隔时间
start=value 指定何时开始播放视频文件
2.3 加入多媒体与超级链接
2.3.2 加入超级链接
格式,<A>… </A>
功能：在当前页和其他页间建立超链接 。
标记属性 功能
href=URL 给定链接目标的位置
target=frametarget 设置显示链接目标的框架
accesskey=characte
r
设置快捷键
tabindex=num 设置 Tab键的顺序
rel=linktype 设置到链接的关系
2.4 制作表格
表格可以把文字和图片等内容按照行和
列排列起来, 可以用来建立主页的框架, 使
得整个网页更加清晰和条理化, 有利于信息
的表达 。
2.4 制作表格
2.4.1 建立表格
格式,<TABLE>… </TABLE>
标记属性 功能
border=size 设置表格边框大小
width= size 设置表格的宽度
height=size 设置表格的高度
cellspacing=size 设置单元格间距
cellpadding=size 设置单元格的填充距
background =URL 设置表格背景图片
bgcolor=colorvalue 设置表格背景色
align=alignstyle 设置对齐方式
cols=size 设置表格的列数
2.4 制作表格
2.4.2 定制表格
格式,<TR>… </TR>。 功能：定义表格的一行 。
格式,<TD>… </TD>。 功能：定义单元格 。
标记属性 功能
bgcolor=colorvalue 设置行背景颜色
align=alignstyle 设置行对齐方式
valign=valignstyle 设置单元格垂直对齐方式
2.4 制作表格
2.4.2 定制表格
格式,<CAPTION>… </CAPTION>
功能：定义表格标题, 可以通过 align属性设置
标题的对齐方式 。
标记属性 功能
bgcolor=colorvalu
e
设置单元格背景颜色
rowspan=num 设置单元格所占的行数
colspan=num 设置单元格所占的列数
align=alignstyle 设置对齐方式
valign =valignstyle 设置单元格垂直对齐方式
width =size 设置单元格宽度
height=size 设置单元格高度
2.5 制作表单
表单是用户和 Web应用程序, Web数据库
等进行交互的界面 。 在 Web上, 通过表单可以
完成用户和计算机或服务器之间进行的信息交
换 。
2.5 制作表单
2.5.1 表单的结构
格式：
<FORM action= URL method=postmethod
onsubmit= script target=frametarget
accept-charset=cdata enctype=contenttype >
…
</FORM>
功能：定义表单 。
2.5 制作表单
2.5.2 FORM中常用的标记
1,输入域
（ 1） 单行输入域 。 格式,<INPUT>。
标记属性 功能
type=
inputtype
设置输入域的类型
name=cdata 设置表项的控制名, 在表单处理时起作用 （ 适用于除 submit和 reset外的
其他类型 ）
size=num 设置表单域的长度
maxlength
=num
设置允许输入的最大字符数 （ 适用于 text和 password类型 ）
value=cdata 设置输入域的值 （ 适用于 radio和 checkbox类型 ）
checked 设置是否被选中 （ 适用于 radio,button,checkbox类型 ）
2.5 制作表单
1） text类型 。
2） password类型 。
3） radio类型 。
4） checkbox类型 。
5） submit类型 。
6） reset类型 。
7） hidden类型 。
2.5 制作表单
（ 2） 多行输入域 。
格式为,<TEXTAREA>…<TEXTAREA>
功能：定义多行文本输入域。
标记属性 功能
name=cdata 设置 FORM提交的输入信息的名称
rows=num 设置文本域的行数
cols=num 设置文本域的列数
tabindex=num 设置 tab键的次序
2.5 制作表单
2,按钮
格式,<BUTTON>… </BOTTON>
功能：定义按钮。
标记属性 功能
name=cdata 设置已发送表单的关键字
value=cdata 设置已发送表单的值
type= buttontype 设置按钮的类型
tabindex=num 设置 tab键的次序
2.5 制作表单
3,选择域
格式：
<SELECT>
<OPTION> 选项
一
<OPTION> 选项
二
…
</SELECT>
功能：定义选择栏 。
标记属性 功能
name=cda
ta
设置选择栏的名字
size=num 设置在选择栏中一次可见的选项个数
multiple 设置选项栏是否支持多选
标记属性 功能
value=cd
ata
设置选项的默认值
selected 表示此选项为预置项
<option>属性：
<select>属性：
2.6 框架结构
2.6.1 框架结构的文件格式
<HTML>
<HEAD>
…
</HEAD>
<FRAMESET>
<FRAME>
…
<FRAME>
…
</FRAMESET>
</HTML>
注意,含有框架结
构的网页其 HTML的形
式和一般的 HTML文件
相似, 只是在文档中,
若 使 用 了
<FRAMESET>,就不
应该有 <BODY>标记 。
在老版本的浏览器可
能不支持框架结构 。
2.6 框架结构
2.6.2 框架结构标记的使用
格式,<FRAMESET>… </FRAMESET>
功能：定义一个框架容器。
标记属性 功能
rows=size 设置多重框架的高度
cols=size 设置多重框架的宽度
onload=script 设置框架被载入的事件
onunload=script 设置框架被卸载的事件
2.6 框架结构
2.6.3 FRAME标记
格式,<FRAME>
功能：在网页中定义框架 。
标记属性 功能
src=URL 设置要链接到的 HTML文件
name=framename 表示子窗口的名字
marginwidth=size 用来控制显示内容和窗口左右边界的距离, 默认为 1
marginheight= size 用来控制显示内容和窗口上下边界的距离, 默认为 1
scrolling=scrollingst
yle
指定子窗口是否使用滚动条, 有 YES/NO/AUTO三个值,
默认为 AUTO,即根据窗口内容决定是否有滚动条
noresize 使用该属性后, 指定窗口不能调整窗口大小
2.6 框架结构
2.6.4 TARGET属性的使用
1,用于 A标记
2,用于 BASE标记
3,用于 FORM标记
本章首页
2.7 CSS基础
2.7.1 CSS样式简介
CSS（ Cascading Style Sheets,层叠样式表 ）,
又称格式页, 是近几年才发展起来的新技术 。 它提
供了很多的样式定义方式来辅助 HTML。
本章首页
2.7 CSS基础
<HTML><HEAD><TITLE>CSS样式 </TITLE>
<STYLE type="text/css">
<!--
H3{ font-family:arial;
font-size:12pt;
font-style:normal;
color:blue;}
-->
</STYLE></HEAD>
<BODY>
<H3>CSS样 式 文本 ！ arial,12pt,normal，
blue！ </H3>
</BODY></HTML>
本章首页
2.7 CSS基础
2.7.2 CSS样式表的定义
1,通过 HTML标记定义
定义任何一个 HTML标记, 定义时在属性和属性值之间
用,,, 隔开, 当有多重属性时, 使用, ；, 进行分隔 。
2,用 id属性定义样式表
id以 （ #） 开头, 把标准的属性和属性值写入大括号内 。
id属性的作用是：在调用 JavaScript语言时, 作为一个
独立的名称来识别网页中的一个元素, 如果不是因为要在网
页中使用 JavaScript语言, 这种标记应尽量少用, 因为它
具有一定的局限性 。
3,使用 class定义样式表
使用 class的方法和 id的方法基本相同, class以,,”开
头, 然后再把标准的属性和属性值写入大括号内 。
本章首页
2.7 CSS基础
2.7.3 在 HTML中加入 CSS的方法
1,嵌入式样式表
2,内联式样式表
3,外联式样式表
4,输入式样式表
