1.HTML框架
框架的作用就是把浏览器窗口划分成多个子窗口,而且每个子窗口都可以载入各自的HTML文档。
*注意:html框架集与body同级,因此不能同时出现!
框架结构标签:<frameset>,每个标签可定义行或列,rows和cols可设定每行或每列占据窗口的值。
如果上下分割两个窗口,两行各占据浏览器窗口的50%,示例代码如下:
<frameset rows="50%,50%">
<frame src="URL" name="框架名称1"/>
<frame src="URL" name="框架名称2"/>
</frameset>
如果左右分割两个窗口,两列各占据浏览器窗口的50%,示例代码如下:
<frameset cols="50%,50%">
<frame src="URL" name="框架名称1"/>
<frame src="URL" name="框架名称2"/>
</frameset>
当浏览器不支持框架的时候显示内容:(把<noframes>标签插入到<frameset>标签中,把文字放在<body>中)
<frameset>
<noframes>
<body>当前浏览器不支持框架</body>
</noframes>
</frameset>
属性 | 属性值 | 说明 |
rows | px,% | 上下分割窗口 |
cols | px,% | 左右分割窗口 |
src | url | 指定要载入到框架的页面地址 |
name | 名称 | 框架的名称 |
scrolling | yes,no,auto | 是否使用滚动条 |
noresize | true,false | 是否禁止改变框架的尺寸大小 |
marginwidth | px | 框架内左右的空白区域 |
marginheight | px | 框架内上下的空白区域 |
frameborder | 1,0 | 是否显示边框 |
framespacing | 0 | 框架与框架间保留的空白的距离 |
border | 0 | 边框 |
<iframe> 内嵌框架
基本结构:<iframe src="URL" name="框架名"></iframe>
<iframe>和<frame>的区别:
1、frame不能脱离frameset单独使用,iframe可以;
2、frame不能放在body中,iframe可以;
3、嵌套在frameset中的iframe必需放在body中;
4、不嵌套在frameSet中的iframe可以随意使用;
5、frame的高度只能通过frameset控制;iframe可以自己控制,不能通过frameset控制;
6、frame与iframe两者可以实现的功能基本相同,不过iframe比frame具有更多的灵活性。 frame是整个页面的框架,iframe是内嵌的网页元素。
一般情况下在框架中的a链接使用target属性实现框架内文件跳转时:
href(指向打开的文件路径不需要变)
_self --> 自己框架页面打开“默认”
_blank --> 新页面打开
_top --> *框架页面打开
_parent --> 到其父级框架页面打开
framename --> 将我们想要打开的页面在指定的框架中打开
2.表单
表单使用<form>标签定义,用于向服务器传输数据。
表单包括:input文本域、textarea多行文本域、select下拉框、等等
基本结构:
<form action="" method="post" name="">
用户名:<input type="text" name="username" />
密 码:<input type="password" name="password" />
</form>
form标签的属性说明:
1.name 指定表单的名称
2.action 指定提交地址
3.method 指定数据提交的方式(get,post)
①get,将表单参数直接放在URL中,用户可见,安全性低。但在编写表单时可以使用,方便查看调试。
②post,将表单参数传输给服务器进行处理时,可以采用加密的方法,安全性高。
4.enctype 规定在发送到服务器之前应该如何对表单数据进行编码
5.target 指定打开方式
1)<input>输入框
*所有input标签都应该嵌套在<form>中,以保证显示该有的效果。
属性 | 说明 |
type | input元素类型 |
name | input元素名称 |
value | input元素的值 |
size | input元素的宽度 |
readonly | 是否只读 |
maxlength | 输入字符的字符长度 |
disabled | 是否禁用 |
○ 文本框
用户名:
<input type="text" name="username" value="" />
○ 密码框
密码:
<input type="password"name="password" value="" />
○ 单选按钮
男 女
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
○ 复选框
听音乐 看电影 玩游戏
<input type="checkbox" name="love" value="music" /> 听音乐
<input type="checkbox" name="love" value="movie"/> 看电影
<input type="checkbox" name="love" value="game"/> 玩游戏
○ 按钮
普通按钮:<input type="button" name="btn" value="确定"/>
提交按钮:<input type="submit" name="submit" value="提交"/>
重置按钮:<input type="reset" name="reset" value="重置"/>
图片按钮:<input type="image" name="img_btn" src="URL"/>
○ 隐藏域
隐藏域用于在程序发送时没必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
○ 上传文件
<input type="file" name="photo"/>
○ 数字键盘
手机号码:<input type="number" name="phone" />
○ 颜色选择器
<input type="color" name="color"/>
○ 日期选择器
<input type="date" name="date"/>
○ 时间选择器
<input type="time" name="time"/>
○ 日期时间选择器
<input type="datetime-local" name="datetime-local""/>
○ 月选择器
<input type="month" name="month"/>
○ 周选择器
<input type="week" name="week" />
○ E-mail地址文本框
<input type="email" name="email"/>
○ 滑动条
<input type="range" min="0" max="10" value="0"/>
○ 搜索框
<input type="search" name="search" />
<input type="submit" name="submit" value="搜索"/>
○ 地址输入框
<input type="url" name="url" />
<input type="submit" name="submit" value="提交" />
○ 自动完成(HTML5新属性,请自行复制代码查看效果)
<input type="search" name="keywords" autocompulete="on">
<input type="submit" name="submit" value="提交" />
*自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
○ 自动焦点(HTML5新属性,请自行复制代码查看效果)
<input type="search" name="keywords" autofocus="on"/>
<input type="submit" name="submit" value="提交" />
*规定当页面加载时按钮应当自动地获得焦点。
○ 提示文本(占位文本)(HTML5新属性,请自行复制代码查看效果)
用户名:<input type="text" name="username" placeholder="请输入用户名..." />
*该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
○ 必填项(HTML5新属性,请自行复制代码查看效果)
*<input type="text" name="username" required/>
<input type="submit" name="submit" value="提交"/>
*如果使用该属性,则字段是必填(或必选)的。
○ 输入下拉框结合(HTML5新属性,请自行复制代码查看效果)
<input list="book" placeholder="请输入..."/>
<datalist id="book">
<option value="HTML">
<option value="CSS">
</datalist>
2)<textarea>多行文本域
<textarea name="content" rows="5" cols="50"> </textarea>
*rows 指定文本框的高度, cols 指定文本框的宽度, 单位是字符。
3)<select>下拉框
请选择
东莞
广州
<select name="city">
<option value="0">请选择</option>
<option value="dg">东莞</option>
<option value="gz">广州</option>
</select>
*<select>元素中的<option>标签用于定义列表中的可用选项。
属性 | 说明 |
name | 下拉列表框的名称 |
size | 下拉列表框的显示行数 |
multiple | 是否多选 |
disabled | 是否禁用 |
selected | 设置默认选中的选项 |
value | 选项的值 |
4)<optgroup>下拉框分组
<optgroup> 标签定义选项组,对相关的选项进行组合会使处理更加容易。
广州
北京
深圳
珠海
<select name="city">
<optgroup label="主要城市">
<option value="1">广州</option>
<option value="2">北京</option>
</optgroup>
<optgroup label="其他城市">
<option value="3">深圳</option>
<option value="4">珠海</option>
</optgroup>
</select>
*label 指定组合选项名称
5)<label>
<label>标签的作用是将输入项或选项及其标签文字关联起来。
男女
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
*注意:请把"for"属性的值设置为相关元素的"id"属性的值。