《HTML表单&实例.ppt》由会员分享，可在线阅读，更多相关《HTML表单&实例.ppt（35页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2Steps HTML简介 HTML标记 表单（FORM）HTML的简介 HTML 是 Hyper Text Markup Language 的第一个大写字母的组合，中文意思为超文本标记语言. 一个HTML文件是一个包含有HTML标记的文本文件 HTML标记告诉Web浏览器如何显示网页 一个HTML文件必须是一个htm或html扩展名的文件 一个HTML文件可以用记事本/UltraEdit/EditPlus/Dreamweaver编辑 这是我的第一个网页 这是我的第一个网页 你好！ HTML定义了一系列的标记，控制网页显示的文档、字符、段落，文本中嵌入图像、声音、动画，提供超文本链接，支持脚本
2、语言、JAVA小程序,实现网页交互效果。 HTML 标记 HTML标记是用来组成HTML元素的 HTML标记用两个尖括号”括起来 HTML标记一般是双标记，如和 前一个标记是起始标记, 后一个标记为结束标记 两个标记之间的文本是html元素的内容 某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思,如 标记的属性横看成岭侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼 标记的属性横看成岭侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼 7HTML文档基本结构 一个HTML文档的基本结构： 标题 正文 8 例如：如果要在浏览器中显示一段粗体文本，可以表示为： b国庆节放假通知国
3、庆节放假通知 如果要对显示文本继续设置字体，可以表示为： 国庆节放假通知国庆节放假通知/font9页面属性语言字符集语言字符集(Charsets)的信息的信息 - #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr,gb2312, gb_2312-80,x-euc-tw, x-cns11643-1, x-cns11643-2, big5背景色彩和文字色彩背景色彩和文字色彩 bgcolor - 背景色彩 text - 非可链接文字的
4、色彩 link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 #=rrggbb 色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. HTML 基本标记 标记标记说明及作用说明及作用文件声明，让浏览器知道这是 HTML 文件设计文件格式及正文所在 一级标题标记变粗变大加宽程度与级数反比段落标记为字、画、表格等之间留一空白行换行标记令字、画、表格等显示于下一行水平线 插入一条水平线说明标记 为文件加上说明，
5、但不被显示加重语气 产生字体加粗 Bold 的效果粗体标记 产生字体加粗的效果斜体标记 字体出现斜体效果字形标记 设定字形、大小、颜色字体加大 令字体稍为加大字体缩细 令字体稍为缩细画线删除 为字体加一删除线顺序列表 清单项目将以数字、字母顺序排列无序列表 清单项目将以圆点排列列表项目 每一标记标示一项列表项目定义列表 列表分两层出现定义条目 标示该项定义的标题定义内容 标示定义内容文件格式标记 标记标记说明及作用说明及作用粗体标记 产生字体加粗的效果字体加大 令字体稍为加大强调标记 字体出现斜体效果斜体标记 字体出现斜体效果字体缩细 令字体稍为缩细加重语气 产生字体加粗 Bold 的效果下标
6、字 下标字上标字 指数（平方、立方等）加上底线 加上底线画线删除 为字体加一删除线画线删除 为字体加一删除线，用代替画线删除 为字体加一删除线, ，用代替加上底线 加上底线横看成岭侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼一首著名的唐诗 12页面属性 链接链接(Link)基本语法 . 达人秀比赛. 开一个新的开一个新的(浏览器浏览器)窗口窗口 (Target Window) . #=_blank 浏览器会另开一个新窗口显示document.html文档 _self 把文档调入当前页 13页面属性链入图象的基本语法链入图象的基本语法 #=图象的图象的 URL #=浏览器未完全读入图象时
7、，在图象位置显示的文字。浏览器未完全读入图象时，在图象位置显示的文字。图象和文字的对齐图象和文字的对齐 #=top, middle, bottom My Face!It is alwayssmiling.Hahaha. My Face! It is always smiling. Hahaha.14页面属性 嵌入多媒体文本嵌入多媒体文本(EMBED) 基本语法基本语法 #=URL 标识主页中嵌入多媒体文本，如：电影(movie), 声音(sound), 虚拟现实语言(vrml). . 背景音乐背景音乐 #=WAV 文件的文件的 URL #=循环数循环数 HTML 超链接 a.html代码：代码
8、：老鼠爱大米老鼠爱大米齐秦北方的狼 b.html代码：代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回返回 打开当前计算机系统中默认的电子邮件客户端软件，例如:OutLook Express HTML 图像标记 走马灯标记举例例1活动字幕内容第一行活动字幕内容第二行活动字幕内容第三行例2欢迎光临18表格（Table）表格是由行、列构成的。每一行可以分成若干列，每一列成为一个单元格，相邻的单元格可以合并。应用页面布局相关标记表格标记 行标记 列标记 表格示例（代码） 学生成绩等记表 学 号 姓 名 高等数学 英 语 20
9、08000001 张三 95 90 说 明 成绩=平时*20%+期末*80% 2006年1月 表格相关标记属性22HTML表单 HTML表单:支持用户在页面输入信息 提供文本框、单选框、复选框、下拉菜单等控件 由构成，表单的基本结构如下：用户密码 method表单传输方法 GET方法将表单信息在URL后传输 POST方法将表单信息作为信息体传输action为表单处理方式，通常为一个URLenctype为编码方式,默认application/x-www-form-urlencoded, UTF-823表单的基本结构 表单中提供给用户的输入形式表单中提供给用户的输入形式 *=text, passw
10、ord, checkbox, radio, image, hidden, submit, reset *= Name 您的姓名: 您的主页的网址: 密码: 24 文本区域文本区域 . cols,rows: 指定多行文本框的宽度和高度， wrap:指定多行文本框的折行方式，取值:off/virtualoff：default 输入的文字超过栏宽时，不会自动换行virtual：文字在超过栏宽时会自动换行 25 提交按钮提交按钮 Single-line Lable Multi-line LablelabelLabelwithfontchanges.Label with imag
11、e26 复选框复选框(Checkbox) 和和 单选框单选框(RadioButton) Banana Apple Orange 27 单选框单选框(RadioButton) Banana Apple Orange 28列表框列表框(Selectable Menu) . 属性属性multiple，多选项，多选项 Banana Apple Orange String listValues = request.getParameterValues(“fruits”);if(listValues != null)for (int i=0; ilistValues.length; i+)String v
12、alue = listValuesi;29 文本上载控件文本上载控件控件创建了文件上载，生成一个文本框和一个浏览按钮控件创建了文件上载，生成一个文本框和一个浏览按钮 Enter data file below: 30 控件组 无属性 legend 为 fieldset 定义一个标题 GROUP ONEField 1A: Field 1B: GROUP TWOField 2A: Field 2B: 31控件组32表单中控件归总属性值描述相关属性设置text单行文本框name，size，maxlength，valueradio单选框name，value，checked，idcheckbox复选框n
13、ame，value，checked，idreset重置按钮name，valuesubmit提交按钮name，valuebutton按钮name，valuepassword密码框name，size，maxlength，valuefile文件域name，size，maxlength，valuehidden隐藏域name，valueimage图片域name，src33各属性的设置说明： (1) name name:指定控件的名称 (2) value 每个控件必须有且仅有一个value值； 文本框和密码框通过value属性指定控件显示的初始值； 单选框和复选框通过value属性设置表格递交时的实际传送值; 按钮通过value属性设置按钮上的显示文本； (3) size size:设置控件的尺寸，单位通常为像素。 (4) checked 设定单选框或多选框初始选定，一组单选框只有一个控件使用该属性。34 练习：实现一个页面，包含前面所学标记，表格，控件。35 结束语结束语