Java Web学习day04------表单、CSS

表单

核心标签

（1）form 表单标签
  a) 概述：定义表单要提交的范围和提交的地址
  b) 重要的属性

属性	备注
action	设置表单要提交的地址(默认提交到当前页面)
method	设置表单的提交方式(默认是get方式)

  c) method取值
    aa) get：把数据拼接到地址栏后面，相对的不安全，只能提交量比较小的数据
    bb) post：把数据封装到请求体中，相对的安全，可以提交大量的数据

（2）input 表单项标签
  a)重要属性

属性名	属性值	备注
type	text	文本框
	password	密码框
	radio	单选框
	checkbox	复选框
	file	文件框(用于文件上传)
	hidden	|隐藏域(把不需要用户看到,但是后台需要的数据,提交到后台)
	submit	提交按钮
	reset	重置按钮(恢复页面刚打开时的效果,并非清空所有选项)
	button	普通按钮(配合后面js一起使用)
	image	图片提交按钮
checked	checked	对于单选和复选框可以设置元素的默认选中

（3）select 下拉选择框标签
  a) option 选择框的选择项标签
  b) 重要属性

属性名	备注
selected	selected 可以设置下拉选择框选中状态

（4）textarea 文本域标签
  a) 重要属性

属性名	备注
cols	列数
rows	行数

（5）通用属性
  a) name:表单项要想提交到后台,必须要有name属性（对于单选和复选框,可以使用name属性进行分组）
  b) value:
    aa) 对于单选和复选框,可以指定value属性的值,用于区分用户选择了哪一个选项(否则默认都是on)
    bb) 对于submit,button,reset按钮，可以设置submit,button,reset按钮上的文字
    cc) 对于text,password，可以设置text,password等元素的默认值

新增标签

1、autocomplete 属性规定表单是否应该启用自动完成功能。 默认是on,自动开启

2、<button>标签定义按钮。
  可以在 button 元素内放置内容，比如文本或图像。这是该元素与通过input元素创建的按钮的不同之处。请始终为按钮规定 type 属性。不同的浏览器根据 type 属性使用不同的默认值。

<!--例如：-->
<input type="image" src="img/xxx.jpg">
<button type="submit"><img src="img/xxx.jpg"></button>

3、<input>新增属性

属性	属性值	备注
type	email	设置文本的样式为邮箱
	date	日期框
	time	时间框
	dateTime-local	本地日期时间框
	number	数字框
	range	滚动条数值框
	search	可清除文本框
	tel	电话框
	url	网址框

4、label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。<label>标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来

5、optgroup 列表项分组标签
   label 设置分组的名称

CSS深入

1、引入方式

（1）行内样式（内联样式）：简单,耦合性强,不利于代码的分离
（2）内部样式：复用性比较低,只能在当前页面使用
（3）外部样式：复用性比较高,可以用在多个页面,统一网站的风格

2、三种引入方式的优先级

  行内样式>（内部样式=外部样式）
  内部样式和外部样式的优先级相同，那么在实际应用中，谁最后解析就显示谁的

3、选择器

（1）基本选择器
  a) id选择器
  b) 类选择器
  c) 元素选择器
  优先级:style > id选择器 > 类选择器 > 元素选择器
（2）扩展选择器
  a) 属性选择器
    [属性名]
    [属性名=属性值]
  b) 伪类选择器

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

  c) 分组选择器(并集选择器)
    选择器a,选择器b
  d) 后代选择器
    选择器a 选择器b
  e) 子选择器
    选择器a > 选择器b
  注意：选择器选择的节点越具体，那么选择器中对应的属性设置的优先级越高。（例如：一个div里面有很多个a标签和span标签，使用其中一个选择器是直接选择的span标签，然后进行了属性设置，这个属性会作用到所有的span标签上面，同时有另一个选择器选择了span标签中具体的某一个span节点，那么该span标签会优先显示当前这个选择器中的内容，相当于屏蔽到那个整体选择span标签中设置的属性）

4、新增属性

（1）边框样式

	border-radius: 属性值; /*边框的弧度*/

（2）文本样式

	line-height: 属性值; /*设置行高*/ 
	font-family: 属性值; /*规定文本的字体系列*/ 
	vertical-align: 属性值; /*设置元素的垂直对齐方式*/
    text-decoration: 属性值; /*规定添加到文本的装饰效果 (下划线之类)*/