5月28日

Iframe（Inner Frame）内联框架

是对整个页面的布局
属性：
①width 设置内联框架的宽
②height 设置内联框架的高
③name 设置框架名称
④src 设置页面的路径
⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto（默认））
⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）

<iframe src="http://www.baidu.com"  frameborder="1" name="topIframe" width="100%" height="150px"  scrolling="auto" ></iframe>
    <iframe src="other/menu.html" height="480px" name="leftIframe" ></iframe>
    <iframe src="http://www.baidu.com" name="rightIframe" height="480px" width="1020px"></iframe>

form表单

表单在网页中主要负责数据采集功能，用户输入的信息都要包含在form标签中，点击提交后，里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
<form action＝"url" method=get|post name=“myform” >

  -name：表单提交时的名称
  -action：提交到的地址
  -method：提交方式，默认为get

post和get区别：
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好

一个完整的表单包含三个基本组成部分：
表单标签、表单域、表单按钮。
1.表单标签
是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义
2.表单域
是标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）
3.表单按钮
用来提交表单中的所有信息到服务器
*表单域和表单按钮都属于表单元素。
单行文本框<input type=“text” >默认值是type=“text”
密码框<input type=“password”/>　
单选按钮<input type=“radio” name=””/> (必须通过相同的name属性值来达到单选效果)
复选框<input type=“checkbox”/>
隐藏域<input type=“hidden”/>
文件上传<input type=“file”/>
下拉框<select>标签
<select>
<option value=“1”>北京</option>
</select>
多行文本<textarea></textarea>
提交按钮<input type=“submit”/>
普通按钮<input type=“button”/>
重置按钮<input type=“reset”/>

文本框
<input type=“text” />
属性：
name:定义控件名称
value：指定控件初始值

密码框
<input type=“password” />
属性：
name:定义控件名称
value：指定控件初始值

单选按钮
<input type=“radio” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中
性别：
<input type=“radio” name=“sex”/>男
<input type=“radio” name=“sex”/>女(必须通过相同的name属性值来达到单选效果)

复选框
<input type=“checkbox” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中
例如：科目:
<input type=“checkbox” checked/>语文
<input type=“checkbox”/>数学
<input type=“checkbox”/>英语

文件
<input type=“file”/>
属性：
name:定义控件名称
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
2.form要加enctype=“multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件
<form action=”" method=“post” enctype=“multipart/form-data”>
<input type=“file” name=“file1”/>
</form>

隐藏区域
<input type=“hidden” />
属性：
name:定义控件名称
value：指定控件初始值

按钮
<input type=“button” />
属性：
name:定义控件名称
value：指定控件初始值

提交按钮
<input type=“submit” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

重置按钮
<input type=“reset” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

图像图片按钮
<input type=“image” src=“URL”/>
属性：
name:定义控件名称
src：指定图像地址

按钮
<button>按钮</button>
属性:
type:button/submit/reset,默认值为submit

下拉列表框
select属性：
name:此列表框的名字
multiple：多选，不用赋值
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性：
selected ：用来指定默认的选项
value： 用来给 <option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用 <select>区域的名字的value 属性来获得该区域选中的数据项的

多行文本框
<textarea> </textarea>
属性：
cols ：这文字区块的宽度
rows ：这文字区块的行数，即其高度
<textarea name="" id="" cols=“30” rows=“10”> </textarea>

<label></label>
标签为 input 元素定义标注。
label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”

  <label for="pwd">记住密码</label>

<input type=“checkbox” name=“pwd” id=“pwd” />

*通过label的for指向按钮的id来绑定，for和id属性的值要相同

<form>
	<labllel for="male">Male</label>
	<input type="radio" name="sex" id="male" />
</form>

<label>标签一般和radio、checkbox类型一起使用。

<fieldset>元素集
fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。
<fieldset>
<legend>健康信息
身高：<input type=“text” />
体重：<input type=“text” />
</fieldset>

HTML5新增input类型

电子邮件类型
功能描述：输入E-mail地址的文本框
语法：<input type=“email”/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型
功能描述：输入搜索关键字的文本框
语法：<input type=“search”/>

URL类型
功能描述：输入WEB站点的文本框
语法：<input type=“url”/>
注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型
功能描述：预定义的颜色拾取控件
语法：

数字类型
功能描述：只能接受数字
语法：<input type=“number”/>
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1

范围类型
功能描述：允许用户选择一个范围内的值
语法：<nput type=“range” min=“0” max=“100” value=“80”/>
属性：min：范围的下限值
max：范围的上限值
step：声明该值递增或递减的步长
value：设置初始值

日期类型
功能描述：创建一个日期输入域
语法：<input type=“date” />

周类型
功能描述：与date类型相似，但只能选择周
语法：<input type=“week” />

月份类型
功能描述：与date类型相似，但只能选择月份
语法：<input type=“month” />

placeholder
作用：默认提示
语法：<input type=“text” placeholder=“请输入用户名”/>

multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：<input type=“email” multiple/>

autofocus
作用：自动获取焦点
语法：<input type=“text” autofocus/>

required
作用：防止域为空提交表单时
语法：<input type=“text” required/>

minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：<input type=“text” minlength=“6” maxlength=“18”/>

min和max
作用：定制元素允许的最小数字和最大数字
语法：<input type=“number” min=”0” max=”100”/>

HTML5新增标签

1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释