而这里定义的『数据格式』就是应用程序之间的『通信协议』。
在JavaSE阶段的网络编程章节我们接触过TCP/IP、UDP这样的协议，而我们现在使用的『HTTP协议』的底层就是TCP/IP协议。
HTTP1.1中共定义了八种请求方式：
- GET
- POST
- PUT
- DELETE
- HEAD
- CONNECT
- OPTIONS
- TRACE
但是在HTML标签中，点击超链接是GET方式的请求，提交一个表单可以通过form标签的method属性指定GET或POST请求，其他请求方式无法通过HTML标签实现。除了GET、POST之外的其他请求方式暂时我们不需要涉及（到我们学习SpringMVC时会用到PUT和DELETE）。至于GET请求和POST请求的区别我们会在讲HTTP协议的时候详细介绍，现在大家可以从表面现象来观察一下。
表单项标签
表单中的每一项，包括: 文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项
name和value属性
在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？
很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。
在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。
但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。
这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map。
name属性就是Map的键，value属性就是Map的值。
有了上面介绍的基础知识，下面我们就可以来看具体的表单项标签了。
单行文本框
个性签名：<input type="text" name="signal"/><br/>
密码框
密码：<input type="password" name="secret"/><br/>
单选框
单选或多选要手动设置value
你最喜欢的季节是： <input type="radio" name="season" value="spring" />春天 <input type="radio" name="season" value="summer" checked="checked" />夏天 <input type="radio" name="season" value="autumn" />秋天 <input type="radio" name="season" value="winter" />冬天 <br/><br/> 你最喜欢的动物是： <input type="radio" name="animal" value="tiger" />路虎 <input type="radio" name="animal" value="horse" checked="checked" />宝马 <input type="radio" name="animal" value="cheetah" />捷豹
说明:
- name属性相同的radio为一组，组内互斥
- 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
- 设置checked="checked"属性设置默认被选中的radio
多选框
你最喜欢的球队是： <input type="checkbox" name="team" value="Brazil"/>巴西 <input type="checkbox" name="team" value="German" checked="checked"/>德国 <input type="checkbox" name="team" value="France"/>法国 <input type="checkbox" name="team" value="China" checked="checked"/>中国 <input type="checkbox" name="team" value="Italian"/>意大利
下拉框
你喜欢的运动是： <select name="interesting"> <option value="swimming">游泳</option> <option value="running">跑步</option> <option value="shooting" selected="selected">射击</option> <option value="skating">溜冰</option> </select>
说明:
- 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
- name属性在select标签中设置。
- value属性在option标签中设置。
- option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
- 通过在option标签中设置selected="selected"属性实现默认选中的效果。
按钮
<button type="button">普通按钮</button> <button type="reset">重置按钮</button> <button type="submit">提交按钮</button>
说明:
- 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
- 重置按钮: 点击后将表单内的所有表单项都恢复为默认值 提交按钮
- 提交按钮: 点击后提交表单
隐藏域
<input type="hidden" name="userId" value="2233"/>
说明:
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
2.10.9 多行文本框
自我介绍：<textarea name="desc"></textarea>
说明:
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
CSS
CSS的作用
CSS是用于设置HTML页面标签的样式，用于美化HTML页面
CSS的引入方式
1.行内样式
也就是在要设置样式的标签中添加style属性，编写css样式; 行内样式仅对当前标签生效
<!--给div设置边框--> <div style="border: 1px solid black;width: 100px; height: 100px;"> </div>
2.内部样式
一般是在当前页面的head标签中添加style标签，在style标签中编写css样式代码; 内部样式仅对当前页面生效
<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .one { border: 1px solid black; width: 100px; height: 100px; background-color: lightgreen; margin-top: 5px; } </style> </head> <body> <div style="border: 1px solid black;width: 100px; height: 100px;"> </div> <div class="one"> </div> <div class="one"> </div> <div class="one"> </div> </body>
3. 外部样式
- 创建CSS文件
- 编辑CSS文件
.two { border: 1px solid black; width: 100px; height: 100px; background-color: yellow; margin-top: 5px; }
- 引入外部CSS文件
在需要使用这个CSS文件的HTML页面的head标签内加入：
<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />
- 于是下面HTML代码的显示效果是:
<div class="two"> </div> <div class="two"> </div> <div class="two"> </div>
- 还可以通过拖动css文件到光标处自动生成代码
CSS代码语法
- CSS样式由选择器和声明组成，而声明又由属性和值组成。
- 属性和值之间用冒号隔开。
- 多条声明之间用分号隔开。
- 使用/* … */声明注释
CSS选择器
1 标签选择器
HTML代码
<p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p>
CSS代码
p { color: blue; font-weight: bold; }
2 id选择器
HTML代码：
<p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p> <p id="special">Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p> <p>Hello, this is a p tag.</p>
CSS代码：
#special { font-size: 20px; background-color: aqua; }
3 类选择器
HTML代码：
<div class="one"> </div> <div class="one"> </div> <div class="one"> </div>
CSS代码：
.one { border: 1px solid black; width: 100px; height: 100px; background-color: lightgreen; margin-top: 5px; }
