HTML基本元素（四）

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"属性的值。