html教程.ppt_第1页
html教程.ppt_第2页
html教程.ppt_第3页
html教程.ppt_第4页
html教程.ppt_第5页
已阅读5页,还剩178页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、第一讲 HTML概述,网页制作概述,网页的基本构成元素 文本 (一般宋体、9磅或12px) 图像 超链接 表格 表单 动画 框架,GIF动画,Flash动画,网页的技术构成 HTML:超文本标记语言。 CSS:层叠样式表 JavaScript VBScript Jscript,script脚本语言,CGI:是网页具有交互功能的一种工具。 PHP:一种服务器端html嵌入式脚本语言。 JSP:用java语言作为脚本语言 ASP: CFML:一种服务器脚本语言。 XML:一种因特网上交换数据的标准。 ASP.NET:使用面向对象的方法创建动态web应用程序。,动态网页技术,HTML基础,HTML基

2、本概念 WWW:world wide web简称,是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。 超文本:包含有链接关系的文本,包含多媒体对象文件。 URL:统一资源定位器 HTTP:超文本传输协议 HTML:超文本标记语言,HTM与SGML SGML:标准一般化标记语言 HTML的发展历史 HTML的设计原则 统一化 国际化 易于掌握 HTML的新特点 表格、合成文档、样式表、脚本语言、打印、易于使用,编写第一个HTML文件,HTML文件的编写方法 手工直接编写(可使用记事本) 使用可视化软件(可使用Frontpage、Dreamweaver等工具) 由

3、web服务器一方实时动态生成 如ASP、PHP等,HTML文件的基本结构 html文件开始 html文件的头部开始 html文件的头部内容 html文件的头部结束 html文件的主体开始 html文件的主体内容 html文件的主体结束 html文件结束,HTML的浏览方式 使用浏览器浏览,编写文件的注意事项 “”是任何标记的开始和结束。 标记和标记之间可以嵌套。 html文件注意事项 在源代码中不区分大小写。 与一样 任何回车和空格在源代码中不起作用。 HTML标记中可以放置各种属性。 可用“” 在源代码中添加注 释。,第二讲 HTML的头部标记,学习内容: HTML头部标记 基底文字标记 标

4、题标记 元信息标记 基地网址标记 学习重点: 各类头标记的使用方法 总课时:2课时,元信息标记 ,标记:通过属性来定义文件信息的名称、内容等。 标记的属性: http-equiv (生成一个标题域) name (表示关键字) content (关键字/取值的内容),定义编辑工具,基本语法: 注明:generator:定义编辑器 content:定义编辑器的名称,举例: 定义编辑工具,设定关键字,基本语法: 注明: keywords :定义关键字 content:定义关键字的内容,举例: 定义关键字,设定描述,基本语法: 注明: discription :描述定义 content:定义描述的内容

5、,举例: 定义描述,设定作者,基本语法: 注明: author :作者定义 content:定义描述的内容,举例: 定义作者,设定建立网站的日期,基本语法: 注: build :网页建设 content:定义建设的时间,举例: 设定建立网站的日期,说明版权,基本语法: 注: build :版权 content:定义版权信息,举例: 说明版权,记载联系人的邮箱,基本语法: 注: reply-to :回复 content:定义邮箱地址,举例: 记载联系人的邮箱,限制搜索方式,基本语法: 注: robots :定义搜索方式 content:定义可以采用的方法,举例: 限制搜索方式,设定字符集,基本语

6、法: 例:gb2312 :简体中文 BIG5 :繁体中文(台湾计算机界实行的汉字编码字符集) UTF-8 :,举例:设定字符集,设定自动刷新,基本语法: (注:时间以秒记) 例: ,举例:页面的自动刷新,设定自动跳转,基本格式: 例: ,举例: 设定自动跳转,设定转场效果,基本语法: Page-enter:进入网页时的网页过渡效果 Page-exit :退出网页时的网页过渡效果 过渡效果编号: (课本P35表4-6),例: (水平百叶窗) (盒状收缩),举例: 设定转场效果,设定禁用缓存,基本语法: 注: cache-control:缓存控制 content:定义禁止缓存,举例: 设定禁用缓存

7、,设定有效期限,基本语法: 注:日期格式: “星期,日 月 年 时 分 秒 gmt ” 例:,举例: 设定有效期限,第三讲 页面的主体标记,学习内容: HTML主体标记 连接文字颜色属性 文字颜色标记 边距属性 背景属性 学习重点: HTML主体标记的使用方法 总课时:2课时,文字颜色属性TEXT,基本语法 注: color-value 是颜色的值,举例: 设定文本颜色,背景颜色属性bgcolor,基本语法 注: color-value 是颜色的值,举例: 设定背景颜色,背景图像属性backgroud,基本语法 注: img_file_url 是图片的路径,举例: 设定背景图像,背景图像固定属

8、性bgproperties,基本语法 注: fixed是固定图像,举例: 设定固定的背景图像 非固定背景图像,链接文字的颜色属性,link:设定链接文字默认的颜色 alink:设定激活链接时文字的颜色 vlink:设定访问过的链接文字的颜色 基本语法: 注:color_value是颜色的值,举例: 设定链接文字的颜色,边距属性,topmargin:设定上边距 leftmargin:设定左边距 基本语法: 注:value一般指像素,举例: 设定边距属性,第四讲 文字与段落,学习内容: 文字的内容 标题字标记 文字的修饰标记 字体标记 段落标记 水平线标记 其他文字标记 学习重点: 文字与段落标记

9、的使用 总课时:2课时,文字的内容,输入普通的文字 (直接输入到与之间) 输入空格符号 基本语法:  ; 举例 输入特殊符号(表6-1) 如: “ -" &-&,举例: 输入特殊符号,注释语句, 基本语法: ,举例: 插入注释语句,标题字标记,标题字标记 一级标题 大 二级标题 三级标题 四级标题 五级标题 六级标题 小 标题字的对齐属性 align 左对齐 居中对齐 右对齐,文字的修饰标记,文字的修饰标记(表6-4) 粗体标记, 基本语法: 举例 斜体标记, 基本语法: 举例,上标标记 基本语法: 举例 下标标记 基本语法: 举例 大字号标记 基本语法: 举例 小字号标

10、记 基本语法: 举例,下划线标记 基本语法: 举例 删除线标记 , 基本语法: 举例 地址文字标记 基本语法: 举例 打字机标记 基本语法: 举例,等宽文字标记、 基本语法: 举例 键盘输入文字标记 基本语法: 举例 声明变量标记 基本语法: 举例,字体标记,基本语法: 字体标记的属性 face:字体 size:字号 color:颜色 基本语法: ,举例: 设定字体属性,基字属性 basefont 基本语法: 这个标记用于设定基本的文字属性,对于字号,将受这个属性的影响。,举例: 基字标记,段落标记, 、 含义 : : 段落标记(新建一个段落,相当于 enter) : 换行标记 ( 相当于软回

11、车:shift+enter) : 不换行标记 基本语法: 举例 段落对齐属性 align 基本语法: 举例, : 标记中强制换行的标记 基本语法: 举例:强制换行 :预格式化标记 (也就是页面中显示的与源代码中的格式完全相同) 基本语法: 举例:预格式化 :居中标记 基本语法: 举例:居中标记 :缩排标记 基本语法: 举例:缩排标记,水平线标记, :插入水平线标记 :水平线的宽度标记 :水平线的高度 :水平线的颜色 :水平线去掉阴影属性标记 :水平线对齐属性 基本语法: 注:value1、value2表示像素值或百分比 value3 表示颜色名称或十六进制数 value4 表示left 、ri

12、ght 或 center 举例:插入水平线,其他文字标记,忽视html标签标记的标记: 与 基本语法: 举例,在文字上方标注说明标记, 基本语法: 被标示的文字 说明文字 举例: 886 拜拜啦 ,举例: 设定文字上方标注,第五讲 建立列表,学习内容: 列表的标记 有序列表 无序列表 列表的嵌套 学习重点: 列表的相关标记使用 总课时:2课时,建立列表,列表有两种类型: 无序列表 有序列表 无序列表: 没有顺序的列表项目,使用 等特殊项目符号. 有序列表: 按照字母或数字等顺序排列的列表项目. : 列表项目标记,有序列表,有序列表标记: 基本语法: 项目1 项目2 2. 举例:有序列表,有序列

13、表的属性标记:、 基本语法: 项目1 项目2 注: value1表示有序列表项目符号的类型(如表7-2) value2表示项目开始的数值 举例,有序列表的类型: 1 :数字 1 ,2 ,3 a : 字母 a , b , c A : 字母 A , B , C i : 小写罗马数字 I , ii , iii I : 大写罗马数字,,无序列表,无序列表标记 基本语法: 项目1 项目2 举例,目录列表标记 基本语法: 项目1 项目2 2. 举例,定义列表标记 、 基本语法: 名词1 解释1 名词2 解释2 注:表示名词;表示对名词的解释。 2. 举例,菜单列表标记 基本语法: 项目1 项目2 2. 举

14、例,无序列表的类型属性 基本语法: 项目1 项目2 举例,无序列表的类型: disc 表示 circle 表示 square 表示 ,列表的嵌套,定义列表的嵌套 基本语法: 名词1 解释1 解释2 解释3 名词2 解释1 解释2 解释3 2. 举例,无序及有序列表的嵌套 基本语法: 项目1 二级项目1 二级项目2 项目2 二级项目1 二级项目2 2. 举例,第六讲 建立超链接,学习内容: 超链接的概念 连接标记 内部链接 书签链接 外部链接 其他链接 学习重点: 超链接相关标记的使用 总课时:2课时,超链接的基本概念,超链接:从一个页面指向另一个目的端的链接。 路径 绝对路径:为文件提供的完全

15、路径,包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。 例:http:/ / index.htm d:/ wsp / myweb / images / back.jpg,2. 相对路径:指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 例:文件1.htm的绝对路径是:d:/wsp/myweb/1.htm 文件2.htm的绝对路径是:d:/wsp/myweb/2.htm 那么:1.htm相对于2.htm的路径就是:1.htm 相对链接的使用方法: 如果链接到同一目录下,则只需输入要链接文档的名称 。 例: 如果链接到下一级目录,则需要先输入目录名,然后加

16、 “ / ”,再输入文件名。 例: 如果连接到上一级目录,则需要先输入”/ “,然后再输入目录名、文件名。 例:,3. 根路径: 根目录的相对地址。 根路径的书写方式:以斜杠 “ / ” 开头,然后是文件夹名,再写文件名。 例:,内部链接与外部链接 内部链接:链接指向站点文件夹之内的文件。 例: 外部链接:链接指向站点文件夹之外的文件。 例: 链接标记: 链接标记的属性: href : 指定链接地址 name : 给链接命名 title:给链接提示文字 target:指定链接的目标窗口 accesskey:链接热键,内部链接,制作内部链接 基本语法: 链接文字 举例:返回首页 设定链接的目标窗

17、口 基本语法: 链接文字 注:target属性中value的取值: _parent :在上一级窗口中打开。 _blank:在新窗口中打开。 _self:在同一窗口中打开。(默认) _top :在浏览器的整个窗口中打开,忽略任何框架。 举例 :返回,举例: 制作内部链接,书签链接,建立书签 基本语法:文字 举例:李白 链接同一页面的书签 基本语法:文字 举例: 李白 链接到其他页面中的书签 基本语法:文字 举例: 李白,举例: 书签链接(同页面)书签链接(不同页面),外部链接,链接路径应使用绝对路径,即带有协议或盘符的路径。 链接到外部网站 基本语法:链接文字 其中“ http:/ ”表示htt

18、p站点的“ URL ” 举例:,举例: 外部链接,链接到 ftp 基本语法:链接文字 其中“ ftp:/ ”表示ftp站点的“ URL ” 举例:,举例: 链接到ftp站点,链接到 telnet 基本语法: 链接文字 其中“ telnet:/ ”表示telnet站点的“ URL ” 举例:,举例: 链接到telnet站点,链接到 gopher 基本语法: 链接文字 其中“ gopher:/ ”表示gopher站点的“ URL ” 举例,举例: 链接到gopher站点,链接到 news新闻组 news新闻组是由分布在世界各地的新闻服务器组成的,是个人向新闻服务器所张贴邮件的集合。 基本语法: 链

19、接文字 其中“ news:/ ”表示news服务器的地址 举例,举例: 链接到news新闻组,下载文件 基本语法: 链接文字 其中“ file_url ”表示文件所在的绝对路径。 举例,举例: 下载文件,发送E-mail ( 建立e-mail链接 ) 相关概念: 暗送: 抄送: 基本语法: 链接文字 链接文字 链接文字 链接文字 语法解释:subject表示电子主题,CC表示抄送收件人,BCC表示暗送收件人,AB.C表示邮件地址。,联系我 解析:发送邮件给 联系我 解析:发送邮件给,主题是:你好吗 联系我 解析:发送邮件给,抄送给 联系我 解析:发送邮件给,暗送给,举例: 发送文件,其 它 链

20、 接,脚本链接 基本语法: 链接文字 其中“ javascript: ”表示用javascript编写的脚本。 举例,举例: 脚本链接,空链接 空链接:指指向链接后,鼠标变成手形,但单击后仍停 留在当前页面。 基本语法: 链接文字 其中“ # ”表示空链接。 举例:我的心情,举例: 空链接,第六讲 插入图片,学习内容: 图片的基本格式 插入图片 插入avi视频文件 图片的超链接 图像映射 学习重点: 图片相关标记的使用 总课时:2课时,相关的基本概念,图片的基本格式: Jpg Gif Bmp,插入图片标记及属性,插入图片标记 图片相关属性 : src:描述图片的路径 lowsrc:设定分辩率比

21、较低的图片 alt:设定图像的提示文字属性 width、height:设定图像的宽度和高度 border:设定图片的边框 vspace:设定图像的垂直间距 hspace:设定图像的水平间距 align:设定图像的排列属性,图片的插入标记与属性,插入图片 src 基本语法: 语法解析:是插入图片的标记 src 是描述图片路径的属性 “ image_url ”表示图片的路径 举例:,举例: 插入图片,插入分辨率比较低的图片 lowsrc 基本语法: 语法解析: 是描述图片路径的属性 “ image_url ”表示图片的路径 举例:,举例: 插入低分辨率图片,设定图片的提示文字 alt 基本语法:

22、举例:,举例: 设置图片的提示文字,设定图片的宽度: width 设定图片的高度:height 基本语法: 其中:宽度和高度的单位都是像素 举例: ,举例: 设置图片的宽度和高度,设定图像的垂直间距 vspase 设定图像的水平间距 hspase 基本语法: 2. 举例: ,举例: 设置图片的间距,设定图片的边框 border 基本语法: 举例: ,举例: 设置图片的边框,设定图像的排列属性 基本语法: 注:value值如下表所示,表示的是相对文字的对齐方式。 2. 举例: ,举例: 设置图片的排列,插入avi视频文件,Avi的源文件属性dynsrc 基本语法: 举例: ,举例: 插入avi视

23、频文件,设定avi文件的循环次数属性Loop 基本语法: 举例: ,举例: 设置avi文件的循环,设定avi文件循环延迟属性Loopdelay 基本语法: 其中,时间以s为单位。(一般 netscape、IE5.0、5.5、6.0都不支持) 举例: ,举例: 设置avi文件的循环延迟,设定avi文件播放属性start 基本语法: 其中,播放方式有: fileopen:网页打开时播放。 Mouseover:鼠标滑到avi文件上后播放。 举例:,举例: 设置avi文件的播放,图片的超链接,图片的超链接就是在图片上建立链接。和文字的链接相同,就是点击过链接的图片或文字后就会跳到相应的目的地址上。 图

24、片的超链接与文字相同都是标记,与文字不同的是,文字的链接只能是一个,而图片不同可以是一个或多个。,基本语法: 文字 举例: 返回,举例: 设置图片的链接,图片的映射,一张图片可以有多个超链接,一幅图片被切分成不同的区域,每一个不同的区域可以链接到不同的地址,这每个区域被称为图像的热区。每一个热区可以有自己的链接地址,浏览者单击图片上的热区后,就会转到相应的链接地址上去。这个过程就称为图像的映射。 建立图像映射分两部分:图像链接地址的创建和制作图像映射。,图像链接地址的创建 先使用html语言创建出包含有文字链接地址的页面;(一般在页面内建立标签或建立页面间链接),举例: 建立页面的书签链接,制

25、作图片映射 使用工具(dreamweaver或frontpage)制作出图像映射,即创建热区,使用、标记。 建立图片的映像说明(使用alt属性标签),标记的属性 shape:定义图象映射区域的形状 rect表示矩形区域 circle表示椭圆形区域 poly表示多边形区域 href:定义不同区域的链接地址 alt:设定替代的文字,提示文字 coords:设定区域坐标,标记的基本语法: 例如: ,建立热区的基本语法: ,建立热区 举例 : ,举例: 制作图片映射,第七讲 表格的使用,学习内容: 制作表格 表格的结构标记 表格的属性标记 行标记 单元格标记 表头标记 表格嵌套 学习重点: 表格相关标

26、记的使用 总课时:2课时,制作表格,基本格式: ,语法解释: :表格标记 :行标记 :单元格标记 举例说明,举例:表格,表格的边框属性,border:设置表格的边框。(单位为像素) bordercolor:设置表格的边框颜色。 bordercolorlight:设置表格的左上边框或右下边框的颜色。 bordercolordark:设置表格的右下边框或左上边框的颜色。,基本语法: 其中,颜色可以是名称或十六进制数。 举例: ,举例:设置边框宽度、颜色及亮暗边框色,Width、 Height :设定表格的宽度、高度 Bgcolor:设定表格的背景色 Background:设定表格的背景图片 基本语

27、法: 举例 ,表格的其他属性,举例:设置表格的属性,单元格的间距属性cellspacing,Cellspacing:设定单元格与单元格之间的距离 基本语法: 其中,value的单位是像素。 举例 :,举例:设置单元格的间距,单元格的边距属性cellpadding,Cellpadding: 设定单元格边框与内容之间的距离 基本语法: 其中,value的单位是像素。 举例:,举例:设置单元格的边距,的其他属性设定,表格的水平对齐 align 基本语法: 语法解释: 对齐方式有: left :居左 right : 居右 center :居中 举例: ,举例:设置表格的对齐方式,表格的边框样式属性FR

28、AME,基本语法: 举例:,语法解释: 表格的边框样式如下 above:显示上边框 below:显示下边框 border:显示上下左右边框 Box:显示上下左右边框 Hsides:显示上下边框 vsides:显示左右边框 Lhs:显示左边框 Rhs:显示右边框 Void:不显示边框,举例:设置表格边框样式,基本语法: 语法解释: 表格的内部边框样式如下 All :显示所有边框 cols:仅显示列边框 Rows:仅显示行边框 groups:显示介于行列间的边框 none:不显示内部边框,表格的内部边框样式属性rules,举例:设置表格内部边框样式,表格的标题与表头,表格的标题,:设置表格的标题,

29、默认的情况下居中对齐。 align:设置表格标题的对齐方式,有三种:left(左对齐 ) right(右对齐 )center(居中) valign:设置表格标题的垂直对齐方式,即可在表格上方或下方,有两种:top (上方) bottom (下方) 基本语法: 举例 ,举例:设置表格的标题,表格的表头的设置,基本格式: ,举例:设置表格的表头 姓名 出生年月 张三 1986.1.5 李四 1987.2.16 ,表格行标记的属性,行标记的属性: bgcolor:设置行的背景色。 bordercolor:设置行的边框颜色。 bordercolorlight:设置行的亮边框颜色。 bordercolo

30、rdark:设置行的暗变框颜色。 align:设置行内容的对齐方式,有三种:left、center、right。 Valign:设置行的垂直对齐方式,有三种:top(居上)、middle(居中)、bottom(居下)。 基本语法: ,举例:设置表格行的属性,单元格标记属性,单元格标记的属性设置: bgcolor:设置单元格的背景颜色。 background:设置单元格的背景图片。 bordercolor:设置单元格的边框颜色。 bordercolorlight:设置单元格的亮边框颜色。 bordercolordark:设置单元格的暗边框颜色。 width:设置单元格的宽度。 height:设置

31、单元格的高度。 align:设定单元格内容的水平对齐方式,有三种:right(居右)、 left(居左) 、center(居中)。 Valign:设定单元格的垂直对齐属性,有三种:top(居上)、middle(居中)、bottom(居下)。 rowspan:单元格的跨行属性。(垂直方向上) Colspan:单元格的跨列属性。(水平方向上),基本语法: 举例 ,举例:设置单元格属性,单元格属性练习,表格的表头标记属性,表头标记的属性设置: bgcolor:设置表头的背景颜色。 background:设置表头的背景图片。 bordercolor: 设置表头的边框颜色。 bordercolorlig

32、ht:设置表头的亮边框颜色。 bordercolordark:设置表头的暗边框颜色。 width:设置表头的宽度。 height:设置表头的高度。 align:设定表头内容的水平对齐方式,有三种:right(居右)、 left(居左) 、center(居中)。 Valign:设定表头的垂直对齐属性,有三种:top(居上)、middle(居中)、bottom(居下)。 rowspan:表头的跨行属性。 Colspan:表头的跨列属性。,基本语法: 举例 ,举例:设置表头,表头属性练习,表格的结构标记,表格的表首标记 用于定义表格最上方表首的格式。 基本语法: 举例: ,举例:设置表首,表格的结构

33、标记,表格的表主体标记 用于定义表格主体的格式。 基本语法: 举例: ,举例:设置表主体,表格的结构标记,表格的表尾标记 用于定义表格最下方表尾的格式。 基本语法: 举例: ,举例:设置表尾,表格的嵌套,基本语法: 举例,举例:表格的嵌套,总 结,通用标记 专用标记,第 八 讲 建立表单页面,学习内容: 表单的概念 表单标记 输入标记 菜单和列表标记 文字域标记 学习重点: 菜单相关标记 总课时:2课时,表单的相关概念,表单:实现动态网页的一种主要的外在形式,是html页面与浏览器端实现交互的重要手段。 表单的功能:可收集客户端提交的有关信息。 表单的组成: 描述表单元素的html源代码 客户

34、端的脚本 表单的用途:调查、定购、搜索等。,表单标记,基本语法: 举例,标记的属性,Name属性 基本语法: 举例: ,举例: 表单的命名,标记的属性,Action属性 基本语法: 举例 ,举例: 表单的提交地址,Method属性 设置信息提交方式 基本语法: 语法解释:信息提交的方式有两种,分别是: Get:将表单的内容附加到提交地址后面,对提交信息的长度进行了限制,不能超过8192个字符。 Post:将用户在表单中填写的数据包含在表单的主体中,一起传送到服务器上的处理程序中,没有字符限制。 举例:,举例: 表单的提交方式,enctype属性(信息提交的编码方式) 基本语法: 语法解释:信息

35、提交的编码方式有三种,分别是: Text / plain:以纯文本方式传送信息。 Application / x-www-form-urlencoded:默认的编码形式。 Multipart / form-data:使用mine编码。 举例:,举例:表单的信息提交的编码方式,Target属性 设置信息返回的窗口 基本语法: 语法解释:窗口属性即表单信息返回的窗口,有四类,分别是:_blank、_parent、_self、_top 举例: ,举例: 表单的信息返回窗口,输入标记,基本语法: 举例 ,Type的属性值,文字域 text 功能:设定表单中的文字域,可输入任何类型的文本、数字和字母。

36、基本语法: 语法解释:name表示文字域的名称,maxlength表示文字域的最大输入字符数,size表示文字域的宽度(以字符为单位) ,value表示文字域的默认值。 举例: ,举例: 插入文字域,密码域password 功能:设定表单中的密码域,输入到文本域中的文字均以*或圆点显示。 基本语法: 语法解释:name表示密码域的名称,maxlength表示密码域的最大输入字符数,size表示密码域的宽度(以字符为单位),value表示密码域的默认值。 举例: ,举例: 插入密码域,文件域file 功能:让用户在域中填写自己的硬盘中的文件路径,然后通过表单上传。 基本语法: 举例:,举例: 插

37、入文件域,复选框checkbox (以方框表示) 功能: 让用户进行选择的区域,可选多,也可选一。 基本语法: 语法解释:checked表示此项被默认选中,value表示选中项目后传送到服务器的值。 举例:音乐 旅游,举例: 插入复选框,单选框radio (以圆框表示) 功能: 让用户进行选择的区域,只可选一。 基本语法: 举例: 广州 深圳 北京,举例: 插入单选框,普通按钮 button 基本语法: 语法解释:value表示按钮上显示的文字。 举例: ,举例: 插入普通按钮,重置按钮 reset 基本语法: 语法解释:value表示按钮上显示的文字。 举例: ,举例: 插入重置按钮,提交按

38、钮 submit 基本语法: 语法解释:value表示按钮上显示的文字。 举例: ,举例: 插入提交按钮,图像域 image 功能:可以用于提交按钮位置上的图片。 基本语法: 语法解释:src表示图片的路径。 举例: ,举例: 插入图像域,隐藏域hidden 功能:在页面中是不可见的,可以用于收集或发送信息,以利于被处理表单的程序使用,它不会显示结果,只是用于传送数据的标记。 基本语法: 语法解释:value表示提交表单时隐藏域返回的值。 举例:,举例: 插入隐藏域,菜单和列表标记,功能:是一种供用户选择的工具,可以显示一定数量的选项,用滚动轴表示;也可以只显示一个选项,用下拉菜单表示。,基本

39、语法: 选项 选项 语法解释:name表示菜单和列表的名称,size表示显示选项的数目,multiple表示列表中的项目可多选,value表示选项返回的值,selected表示默认选项。,举例 北京 南京 广州 深圳 ,举例: 插入菜单列表,功能:用来制作多行的文本块,可以在其中输入更多的文本。 基本语法: 语法解释:name表示文本块的名称,rows表示文本块的行数,cols表示文本块的列数,value表示文本块的默认值。 举例: 您的意见反馈,举例: 插入文本块,文本块标记,第九讲 使用框架结构,学习内容: 框架的概念 框架及框架集标记 不支持框架标记 浮动框架 框架与链接 学习重点: 框

40、架相关标记 总课时:2课时,框架的基本概念,框架的作用:把浏览器窗口分成如干区域,每一个区域可以分别显示不同的网页,而且各区域之间相互没有任何干扰。 使用框架的主要目的:创建链接结构。例如:有导航条的网页,导航条被放置在一个框架之中,可以单击导航条向服务器请求网页,链接的网页出现在另外的框架中,而导航栏所在的网页不发生变化。,框架集与框架,框架包含两部分:框架集和框架 框架集标记 框架标记 基本语法: 替代了标记 ,举例: 框架网页,框架集标记的属性,左右分割窗口属性cols 基本语法: 语法解释:value表示各个框架的宽度值,可以是像素或百分比。“ * ”表示分割剩下的部分。 举例:,举例

41、: 框架网页,框架集标记的属性,上下分割窗口属性rows 基本语法: 语法解释:value表示各个框架的高度值,可以是像素或百分比。“ * ”表示分割剩下的部分。 举例:,举例: 框架网页,嵌套分割窗口属性 基本语法: 嵌套表格 ,大表格,框架集标记的属性,举例: 框架网页,框架集边框宽度属性 framespacing 框架集边框颜色属性 bordercolor 基本语法: ,框架集标记的属性,举例: 框架网页,框架标记 属性,Src:框架页面源文件属性 name:框架名称属性 基本语法: 举例: ,举例: 框架网页,Frameborder:框架边框显示属性 Scrolling:框架滚动条显示属性 基本语法: 语法解释:value1有两个值:0表示不显示边框,1表示显示边框。value2有三个值:yes表示显示滚动条,no表示不显示滚动条,auto表示根据页面的长度自动判断是否显示滚动条。,举例: 框架网页,框架尺寸调整属性noresize 基本语法: 语法解释:noresize表示禁止改变框架的尺寸大小。 举例:,举例: 框架网页,框架边缘宽度属性marginwidth 基本语法: 语法解释:指定的是框架的左右边缘宽度,value的值为像素。 举例: 框架边缘宽度属性marginheight 基本语法: 语法解释:指定

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论