表单的制作与使用

一、列表
1.作用：默认显示方式为从上到下的显示数据
2.列表的组成 列表类型和列表项
3.列表的分类：
有序列表 无序列表 自定义列表
有序列表：
语法：ol li
把大象装进冰箱分几步：

1. 
   
2. 打开冰箱门
3. 
   
4. 把大象装进冰箱
5. 
   
6. 关上冰箱门
7. 
   

无序列表：
语法： ul li

• 
  
• 打开冰箱门
• 
  
• 把大象装进冰箱
• 
  
• 关上冰箱门
• 
  

自定义列表
语法： dl列表的类型 dt列表的标题 dd 列表项

西府赵王

李元霸

冷面寒枪

罗成

	有序列表：
	    语法:ol li
	把大象装进冰箱分几步：
	<ol type="">
		<li>打开冰箱门</li>
		<li>把大象装进冰箱</li>
		<li>关上冰箱门</li>
	</ol>

	无序列表：
		语法：  ul  li
		把大象装进冰箱分几步：
			1.打开冰箱门
			2.把大象装进冰箱
			3.关上冰箱门

	<ul type="">
		<li>打开冰箱门</li>
		<li>把大象装进冰箱</li>
		<li>关上冰箱门</li>
	</ul>

	 自定义列表
		语法：  dl列表的类型  dt列表的标题   dd 列表项

	<dl>
		<dt>西府赵王</dt>
		<dd>李元霸</dd>
		<dt>冷面寒枪</dt>
		<dd>罗成</dd>
	</dl>

二、表单
1.表单的作用：
用于显示、收集用户信息，并将信息提交给服务器
2.表单组成
1.表单元素：负责将用户数据提交给服务器
2.表单控件：负责接收用户的数据（和用户进行交互的）
表单元素
form 属性
action： 定义表单被提交时的动作，主要就是服务器上要处理数据 的应用程序URL找谁处理（提交地址）
method：指定数据提交的方式
get传输 显示提交 可以显示在地址栏上的 有数据大小限制的
post传输 隐式传输 所有提交数据时都是看不见的，相对来来说 比较安全 无数据大小限制
表单控件：提供多个类型的表单控件，并具有可视化的外观
input组件:
type:类型
value:值
name：控件的名称
disabled：禁用控件
text：普通的文本框
password：密码框
email： 邮箱框
submit： 提交按钮
bottom ：普通按钮
radio： 单选
checkbox: 多选
image: 图片提交
select控件（下拉列表）
size： 显示数量 如果不为1的话 则变成滚动列表而不是下拉列表
option : selected:
文本域：
textarea cols 指定文本的列数 （宽度）
rows 指定文本的行数 （高度）
关联文本于控件：
label
1.首先在要关联的input控件上加上一个id
2.用label标签包含住文本并且加上 for属性

  例：
      input组件:
             <form action="http://www.4399.com" method="post">
        用户名:<input type="text" placeholder="请输入用户名不能以数字开头"/><br />
		  密码:<input type="password" /><br />
       确认密码:<input type="password" /><br />
		  邮箱:<input type="email" /><br />
		  性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br />
		  爱好:<input type="checkbox"/>唱歌  <input type="checkbox"/>跳舞  <input type="checkbox"/>rap <input type="checkbox"/>篮球<br />
	    提交按钮: 
 <input type="submit" value="提交"/>
      图片提交按钮:
 <button type="t"><img src="img/timg.jpg"></button> 


	 selec控件（下拉列表）：
		     <select size="">
			    <option selected="selected">公历</option>
				 <option>农历</option>
	         </select>
		     <select size="">
			    <option selected="selected">年</option>
				<option>2018</option>
				<option>2019</option>
				<option>2020</option>
		     </select >
			 <select size="">
				<option selected="selected">月</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
			 </select>
			 <select size="">
				<option selected="selected">日</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
			  </select>
			  
		文本域:
			  个性签名：<textarea cols="40" rows="50" readonly="readonly"></textarea>
			  
		关联文本控件：
		     例:当鼠标点击多选框或者多选框后面文本内容（网球，篮球，足球，乒乓球。）时都可以实现多选框的勾选或者取消勾选功能。
		           <input type="checkbox" id="ckx"/><label for="ckx">网球</label>
		           <input type="checkbox" id="basketball"><label for="basketball">篮球</label>
	               <input type="checkbox" id="football"><label for="football">足球</label>
	               <input type="checkbox" id="tableTennis"><label for="tableTennis">乒乓球</label>

三、浮动框架
作用：可以在一个浏览器窗口中同时显示多个页面文档
语法 ： iframe
属性 ：
src ：提取地址
width: 宽度
height: 高度

第一种用法
		<iframe src="http://www.baidu.com" width="600px" height="600px" frameborder="0"></iframe>
                       拓展:frameborder 属性 -- HTML框架边框的显示方式
                            此属性应使用在frame标签中 frameborder属性取值: 1 -- 有边框 0 -- 无边框 默认值为1 border，中文"边框"的意思。
                            iframe和frame差不多,也是一个框架,只是因为frame更简单,效果更丰富,有画中画之称.
		<iframe src="http://www.4399.com" width="500px" height="500px"></iframe>
第二种用法 和超链接的结合使用
		1.创建超链接标签 
		2.创建iframe标签
		3.在iframe加上一个name属性
		4.改变超链接的target属性 改变为name的值
		      <a href="http://www.baidu.com" target="link">百度</a>
	          <a href="http://www.4399.com" target="link">4399</a>
	          <iframe width="500px" height="500px" name="link"></iframe>

四、摘要与细节
作用：允许将页面某部分内容进行展开或收缩
语法：
第一步 写上 摘要标签 details
第二步 写上标题 summary
第三步 写内容

 <details>
       <summary>用户信息</summary>
         姓名<input type="text" />
		        <br />
         年龄<input type="text" />
 </details>

五、度量标签
度量标签
min：最小值
max：最大值
value：当前显示的度量值0

	高亮标签：
	语法：  mark
	例：
	   l<mark>高亮标签</mark>

高亮标签