写在<body>中的标记
（17）表单：一个表中列出的很多单项，这些单项可用于收集用户在浏览器端输入的信息。
例如：登陆页面、注册页面、百度搜索页面等。
<form></form>表示表单的开始和结束标记
<!-- input标记的写法 -->
单行文本输入框：<input type=”text”/>
单行密码输入框：<input type=”password”/>
单选按钮 <input type=”radio”/>
多选按钮 <input type=”checkbox”/>
提交按钮 <input type=”submit”/>
重置按钮 <input type=”reset”/>
普通按钮 <input type=”button”/>
上传文件 <input type=”file”/>
图片按钮 <input type=”image”/>
<!-- 非input标记的写法 -->
1）下拉框
<select name=””>
<option value=””>xx</option>
<option value=””>xx</option>
<option value=””>xx</option>
<option value=””>xx</option>
<option value=””>xx</option>
</select>
2）多行文本域/多行文本输入框
<textarea name=”” cols=”” rows=””></textarea>
cols=”” 设置多行文本域的宽
rows=”” 设置多行文本域的高
CSS
概念：
Cascading Style Sheets，级联样式表，简称样式。CSS主要用于网页的设计风格，包括字体、颜色、位置、布局等方面的设计，在HTML中加入CSS，可以使网页更美观，更好看。
CSS的使用方式
- 1）内联样式使用
- 2）内部样式使用
- 3）外部样式使用
内联方式
语法：使用style=””这个属性，写在开始标记中
CSS中的常用属性
1）颜色
字体颜色 color:red; color:#ff0000;
背景颜色 background-color:red; background-color:#ff0000;
边框颜色 border:2px solid实线/dotted虚线 red;
线宽 实虚线 颜色
代码部分：
part1:
<html>
<head>
<title>表单中的相关标记</title>
</head>
<body>
<!-- 表单 form
type=""的值是固定的，name=""的值是自己定义的，value=""的值也是自定义的 -->
<form>
<!-- input标记 ∈ 行内标记 -->
<!-- 单行文本输入框 Java中JTextField -->
用户名：<input type="text" name="username" value="张三" /><br/><br/>
<!-- 单行密码输入框 -->
密码：<input type="password" name="pwd" value="abc123 " /><br/><br/>
<!-- 单选按钮 圆圈 -->
<!-- 两个单元按钮的name值要保持一致，如果不一致，两个单选按钮
不会产生互斥现象（都加name和value） -->
性别：男<input type="radio" name="sex" value="man" checked="checked" />
女<input type="radio" name="sex" value="woman" />
<br/><br/>
<!-- 多选按钮 方块 -->
兴趣爱好:读书<input type="checkbox" name="love" value="readbook" />
打球<input type="checkbox" name="love" value="playball"/>
上网<input type="checkbox" name="love" value="online"/>
游戏<input type="checkbox" name="love" value="game" />
<br/><br/>
<!-- 提交按钮可以提交表单填写得内容，重置按钮可以恢复表单初始得状态，
普通按钮默认情况下不带任何得功能，要结合JS(JavaScript)一起使用。 -->
<!-- 提交按钮 -->
<input type="submit" name="smt" value="提交" />
<!-- 重置按钮 -->
<input type="reset" name="rst" value="重置" />
<!-- 普通按钮 -->
<input type="button" name="btn" value="点我" disabled="disabled" />
<br/><br/>
<!-- 上传按钮 -->
上传文件:<input type="file" name="f" />
<br/><br/>
<!-- 图片按钮
图片按钮和submit提交按钮在功能上是一样得，都能将表单填写的内容进行提交 -->
<input type="image" name="img" src="baidu.png" width="60" height="30" />
<hr/>
<!-- 非input标记写法 ∈ 行内标记 -->
<!-- 下拉框 -->
请选择城市:
<select name="city">
<option value="jinan">济南</option>
<option value="qingdao">青岛</option>
<option value="yantai">烟台</option>
<option value="weihai">威海</option>
<option value="heze">菏泽</option>
<option value="taian">泰安</option>
</select>
<br/>
<br/>
<!-- 多行文本域/多行文本输入框 -->
<textarea name="ideas" cols="40" rows="20">
</textarea>
</form>
</body>
</html>
插入的图片：
baidu.png
效果图：
part2：
<html>
<head>
<title>内联样式</title>
</head>
<body>
<div>我是对照的div</div>
<!-- 使用CSS中的内联样式对div中的内容进行样式的改变 -->
<div style="color:red">看看我的改变</div>
<!-- px像素，可省略，默认 -->
<div style="color:blue;font-size:30px">看看我的改变</div>
<span style="color:#FF7000;font-size:50px">看看我的改变</span>
</body>
</html>
效果图：
part3：
<html>
<head>
<title>CSS-颜色</title>
</head>
<body>
<!-- 字体 -->
<div style="color:#FF0000">改变字体颜色</div>
<br/>
<!-- 背景颜色 -->
<div style="background-color:blue;color:yellow">改变背景颜色</div>
<br/>
<!-- 边框颜色 -->
<div style="border:2px dotted green">改变边框颜色</div>
</body>
</html>
效果图：
