首页 > 代码库 > web前端2017.6.10
web前端2017.6.10
表单元素：用于客户端和服务端进行信息交互的通道
<form></form>:所有的表单元素都应该放在里面
文本输入框：
<input type="text"/>
属性：
name="小狗"，每个表单元素都有name属性
value="http://www.mamicode.com/值"，每个表单元素都有value属性,value值是随着用户输入而改变
size="5",设置文本输入框的长度
maxlength="10",最多可以输入的字符数
placeholder="提示信息"，提示
readonly="readonly",只读
密码输入框
<input type="password"/>
name/value等属性，属性完全跟文本输入框一致
单选框
<input type="radio"/>
name/value属性
checked="checked",表示被选中
复选框
<input type="checkbox"/>
name/value属性
checked="checked",表示被选中
下拉列表
<select>---选择
<option></option>---项
</select>
select的属性：name/value
multiple="multiple",变成列表框（multiple：多列）
size="2",表示显示2行
option的属性：
selected="selected"，表示哪一项被选中
disabled="disabled",表示禁止被选中
value="http://www.mamicode.com/值"
------------------------
按钮
普通按钮：
<input type="button"/>
name/value
<button type="button">按钮</button>
<button>按钮</button>
属性：type/name/value
type="button(按钮)/reset(重置)/submit(提交)",默认为button
重置按钮:
<input type="reset" value="http://www.mamicode.com/重置"/>
<button type="reset">重置</button>
提交按钮：
<input type="submit" value="http://www.mamicode.com/提交"/>
<button type="submit">提交</button>
提交按钮有页面刷新的效果，同时可以将文本输入框和密码输入框的相关信息提交到地址栏上
文件按钮：
<input type="file"/>---只能选择文件，不能选择文件夹
name/value属性
图片按钮：
<input type="image" src="http://www.mamicode.com/图片的路径"/>
属性：name/value/width/height
------------------------
隐藏域：
<input type="hidden"/>
文本域：
<textarea></textarea>
有name属性，没有value属性
cols="50"，设置文本域的宽度
rows="5",设置文本域的高度
------------------------
<label></label>
属性：
for="id名"
<label for="admin">账号:<input type="text" id="admin"/></label>
<label for="pwd">密码:</label><input type="password" id="pwd"/>
label标签可以为表单元素定义，使文本和表单元素之间的关系更紧凑
------------------------
<form></form>
属性：
action="路径",跳转到某个页面，将表单元素里面数据提交到某个页面
method="get/post"
get:会将数据显示在地址栏上
post：不会将数据显示在地址栏上
----------------------------
内联框架
<iframe></iframe>
在当前页面中划分出一块区域用来显示另外一个页面
属性：
src="http://www.mamicode.com/相对路径"
width="1000px/80%",设置显示区域的宽度
height="1000px/80%"，设置显示区域的高度
frameborder="1/0",1---有边框，0---没有边框
scrolling="yes/no/auto(自动)"
yes：表示显示滚动条
no:表示不显示滚动条
auto:表示自动显示滚动条
----------------------------
块级容器标签：<div></div>
空语义标签:没有html属性的标签
行内容器标签:<span></span>
空语义标签
----------------------------
自动换行的标签：
div hn p table form ul li ol dl...
不会自动换行的标签:
span i b font u s img input select button a...
表单元素：用于客户端和服务端进行信息交互的通道
<form></form>:所有的表单元素都应该放在里面
文本输入框：
<input type="text"/>
属性：
name="小狗"，每个表单元素都有name属性
value="http://www.mamicode.com/值"，每个表单元素都有value属性,value值是随着用户输入而改变
size="5",设置文本输入框的长度
maxlength="10",最多可以输入的字符数
placeholder="提示信息"，提示
readonly="readonly",只读
密码输入框
<input type="password"/>
name/value等属性，属性完全跟文本输入框一致
单选框
<input type="radio"/>
name/value属性
checked="checked",表示被选中
复选框
<input type="checkbox"/>
name/value属性
checked="checked",表示被选中
下拉列表
<select>---选择
<option></option>---项
</select>
select的属性：name/value
multiple="multiple",变成列表框（multiple：多列）
size="2",表示显示2行
option的属性：
selected="selected"，表示哪一项被选中
disabled="disabled",表示禁止被选中
value="http://www.mamicode.com/值"
------------------------
按钮
普通按钮：
<input type="button"/>
name/value
<button type="button">按钮</button>
<button>按钮</button>
属性：type/name/value
type="button(按钮)/reset(重置)/submit(提交)",默认为button
重置按钮:
<input type="reset" value="http://www.mamicode.com/重置"/>
<button type="reset">重置</button>
提交按钮：
<input type="submit" value="http://www.mamicode.com/提交"/>
<button type="submit">提交</button>
提交按钮有页面刷新的效果，同时可以将文本输入框和密码输入框的相关信息提交到地址栏上
文件按钮：
<input type="file"/>---只能选择文件，不能选择文件夹
name/value属性
图片按钮：
<input type="image" src="http://www.mamicode.com/图片的路径"/>
属性：name/value/width/height
------------------------
隐藏域：
<input type="hidden"/>
文本域：
<textarea></textarea>
有name属性，没有value属性
cols="50"，设置文本域的宽度
rows="5",设置文本域的高度
------------------------
<label></label>
属性：
for="id名"
<label for="admin">账号:<input type="text" id="admin"/></label>
<label for="pwd">密码:</label><input type="password" id="pwd"/>
label标签可以为表单元素定义，使文本和表单元素之间的关系更紧凑
------------------------
<form></form>
属性：
action="路径",跳转到某个页面，将表单元素里面数据提交到某个页面
method="get/post"
get:会将数据显示在地址栏上
post：不会将数据显示在地址栏上
----------------------------
内联框架
<iframe></iframe>
在当前页面中划分出一块区域用来显示另外一个页面
属性：
src="http://www.mamicode.com/相对路径"
width="1000px/80%",设置显示区域的宽度
height="1000px/80%"，设置显示区域的高度
frameborder="1/0",1---有边框，0---没有边框
scrolling="yes/no/auto(自动)"
yes：表示显示滚动条
no:表示不显示滚动条
auto:表示自动显示滚动条
----------------------------
块级容器标签：<div></div>
空语义标签:没有html属性的标签
行内容器标签:<span></span>
空语义标签
----------------------------
自动换行的标签：
div hn p table form ul li ol dl...
不会自动换行的标签:
span i b font u s img input select button a...
web前端2017.6.10