1.10 表单项标签
表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：
<input>：表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样
<select>：定义下拉列表，<option> 定义列表项
如下图就是下拉列表的效果：
<textarea>：文本域
如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。
注意：
以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" method="post"> <input type="hidden" name="id" value="123"> <label for="username">用户名：</label> <input type="text" name="username" id="username"><br> <label for="password">密码：</label> <input type="password" name="password" id="password"><br> 性别： <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label> <br> 爱好： <input type="checkbox" name="hobby" value="1"> 旅游 <input type="checkbox" name="hobby" value="2"> 电影 <input type="checkbox" name="hobby" value="3"> 游戏 <br> 头像： <input type="file"><br> 城市: <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option>广州</option> </select> <br> 个人描述： <textarea cols="20" rows="5" name="desc"></textarea> <br> <br> <input type="submit" value="免费注册"> <input type="reset" value="重置"> <input type="button" value="一个按钮"> </form> </body> </html>
在浏览器的效果如下：
2，CSS
2.1 概述
==CSS 是一门语言，用于控制网页表现。==我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：
结构：HTML
表现：CSS
行为：JavaScript
CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。
如下面的代码， style 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为 红色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } </style> </head> <body> <div>Hello CSS~</div> </body> </html>
在浏览器中的效果如下：
2.2 css 导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：
内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。
内部样式：定义
代码演示：
项目目录结构如下：
编写页面 02-导入方式.html，内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ color: red; } </style> <link href="../css/demo.css" rel="stylesheet"> </head> <body> <div style="color: red">hello css</div> <span>hello css </span> <p>hello css</p> </body> </html>
2.3 css 选择器
css 选择器就是选取需设置样式的元素（标签），比如如下css代码：
例子：
html代码如下：
<div id="name">hello css2</div>
css代码如下：
#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
类选择器
格式：
.class属性值{color: red;}
例子：
html代码如下：
<div class="cls">hello css3</div>
css代码如下：
.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } #name{ color: blue; } .cls{ color: pink; } </style> </head> <body> <div>div1</div> <div id="name">div2</div> <div class="cls">div3</div> <span class="cls">span</span> </body> </html>
2.4 css 属性
css属性我们不作为重点讲解。我们简单的看一下css的文档
css有很多css属性，你要想把它们都学会，需要花费很长的时间。而我们作为java程序员，不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的。给大家简单介绍一下文档怎么查看即可，如下我们看一个 background-color 属性
点击进去后能看到下面界面
