第二HTML布局标签精要.ppt

框架的组成 文件1： top.html 文件2：left.html 文件3： right.html 多个页面文件组成 主文件： index.html 框架基本结构 创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件 frameset cols=25%,50%,* rows =50%,* border=5 frame src=the_first.html …… /frameset 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 引用各窗口要显示的网页文件 框架基本结构 横向分割窗口 …… frameset bordercolor=red rows=25%,50%,* border=5 frame src=subframe/the_first.html name=top / frame src=subframe/the_second.html name=middle / frame src=subframe/the_third.html name=bottom / /frameset noframes body 如浏览器不支持框架，才显示body内的内容 /body /noframes …… 注意： 1、框架和body不能共存 2、为了兼容性，可以使用noframes标签 窗口边框的宽度 将窗口分割成上中下3部分 推荐：将窗口子文件放在单独的文件中用于区分 * * * * 第二章 HTML布局标签 本节内容 HTML表单标签的使用 HTML表格标签的使用 HTML框架标签的使用 本讲目标 HTML表单标签使用 HTML表格布局的应用 HTML框架布局的应用 表单的应用 表单的典型应用 用户登录/注册 收集用户反馈信息 提供搜索工具 常见的表单元素 单行文本框(text) 单选按钮(radio) 复选框(checkbox) 下拉列表(select) 重置按钮 (reset) 提交按钮(submit) 密码框(password) 文本域(textarea) 表单基本语法 form action=表单提交地址 method=提交方法 … 文本框、按钮等表单元素… /form 指定提交后，由服务器上哪个处理程序处理 指定向服务器提交的方法： 一般为post或get方法, post方法比较安全 …… form action=login.jsp method=post p用户名：input name=username type=text size=20 maxlength=10 //p p密nbsp;nbsp;码： input name=pwd type=password size=20 //p pinput type=submit name=btn value=提交 /nbsp;nbsp; input name=reset type=reset value=重填 //p /form …… 表单输入元素：input 表单提交地址和方法的设置 input name=表单元素名称 type=类型 value=值 size=显示宽度 maxlength=对大长度 checked=是否选中 / 表单元素基本格式 指定元素的类型，可为text、radio、submit等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中checked 表单各元素语法 文本框 密码框 按钮 单选按钮 input name= 名称 type= text value= 初值 size= 数字 input name= 名称 type=password value=初值? size=数字 input name= 名称 type= 按钮类型 value=按钮文字 ? src=图片按钮的图片url 普通按钮：button 提交按钮：submit 重置（清空）按钮：reset 图片按钮：image input name= “组名 type= radio value= … checked= … 表单各元素语法 复选框 文件域 列表框 多行文本框 input type=checkbox name= … value= … checked= … input type=file name= … select name=指定列表