1.常用的结构标签
<!--定义网页某个区域的头部内容-->
<header></header>
<!--定义页面主体内容-->
<section></section>
<!--定义网页侧边框信息-->
<aside></aside>
<!--定义导航栏内容-->
<nav></nav>
<!--定义网页某个区域的底部内容-->
<footer></footer>
<!--定义与文字相关的内容-->
<article></article>
2.表单元素
(1)enctype
指定表单数据的编码格式,允许将什么样的数据提交给服务器
1.默认值:可以提交任意字符给服务器,不能提交文件
application/x-www-form-urlencoded
2.text/plain:只能提交普通字符不能提交特殊字符
3.multpart/form-data:允许提交文件给服务器
3.表单控件
能够与用户交互的可视化元素
1.input
2.textarea
3.select和option
4.其他元素
表单中的name属性:为控件定义名称,提供给服务器使用,如果需要将表单中的内容提交给服务器 name属性必须在表单元素中
disabled(无值属性):禁止使用 用户不能操作也不能提交
maxlength:限定用户可输入内容的最大长度
readonly(无值属性):只能读不能写,但是能够提交value值
placeholder:做提示的占位符,不会被提交
重置按钮:
<input type='reset' value='重置'>
这是一个h5的属性 不设置type值时 这是一个提交按钮 设置type值为button时 这是一个普通按钮,可以通过js事件调用
<button></button>
单选按钮:
<!--设置name值是提交的名字 不设置name提交不了 name设置相同的值时是为了让它点击另一个单选按钮时这个按钮不选中 value提价的内容-->
<input type='radio' name='gender' value='1' \>
复选框按钮:name值必须是数组否则提交的值时会被覆盖
隐藏域:
在提交的时候会顺道将隐藏域提交 用户看不见 但是能提交
<input type='hidden' name='yincang' value='100001' />
文件选择框:
上传文件的时候 必须将get方式改成post提交方式 在form中将enctype设置为multiport/form-data
上传多个文件时在input中设置无值属性multiple
<input type='file' name='pic' multiple>
下拉菜单:select 里面需要设置name值 不需要设置value值 option中需要设置value值不需要设置name值 在select中设置size值是为了能让用户看见几个option
当设置multiple多选时name属性的值必须是数组的形式,并且设置完multiple下拉列表变成滚动列表
<select name='address' size=3 multiple >
<option value='bj' selected>北京</option>
<option value='sh'>上海</option>
<option value='sz'>深圳</option>
<option value='gz'>广州</option>
</select>
label标签:用label标签将按钮和文字包裹起来 当点击文字时 按钮也能被选中
控件分组
fieldset标签:将里面的form表单包裹起来
legend标签:给fieldset起名字在左上角显示
浮动框架—iframe 增加代码的重用性
iframeborder:iframe的边框大小
src 要引用页面的路径
总结:今天重点学习了表单里面所涉及到的许多属性,以及iframe的嵌套使用