前言
今天开始了Javaweb的书城项目，工具是Intellij IDEA。
提示：以下是本篇文章正文内容，下面案例可供参考
一、创建web project
因为Intellij IDEA默认是黑色，看着不是太舒服，改成了白色。
二、HTML的复习
1.新建HTML
2.HTML文件书写规范
3.HTML标签介绍
如按钮点击事件跳出弹框：
<button onclick="alert('康康好帅')">按钮</button>
4.HTML标签语法
（浏览器可能自动修复一些错误）
4.1标签不能交叉嵌套
4.2标签必须正确闭合（有开始有结束，斜杠不能丢）
4.3属性必须有值，且值用引号
4.4注释不能嵌套
5.HTML常用标签
5.1 font标签
<font color="#ff7f50" face="宋体" size="4">康康好帅</font>
效果：
5.2 特殊字符
直接输入特殊字符需要实体来代替，如想要显示 < 用 <加分号
5.3 标题标签
<!--标题标签h1——h6-->
<h1 align="center">标题h1居中</h1>
<h3 align="left">标题h3左对齐</h3>
<h6 align="right">标题h6右对齐</h6>
效果：
5.4 超链接标签
5.5 列表标签
5.5.1 无序列表
<!--无序列表-->
<ul type="none">
<li>吴亦凡</li>
<li>鹿晗</li>
<li>张艺兴</li>
<li>黄子韬</li>
</ul>
效果：
type=“none” （浏览器不一定兼容）
5.5.2 有序列表
<!--有序列表-->
<ol>
<li>吴亦凡</li>
<li>鹿晗</li>
<li>张艺兴</li>
<li>黄子韬</li>
</ol>
效果：
5.6 img标签
5.7 table标签
5.7.1 table标签用法
<table align="center" border="1" width="300" height="100" cellspacing="1">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<th>2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
<tr>
<th>3.1</th>
<th>3.2</th>
<th>3.3</th>
</tr>
</table>
效果：
5.7.2 表格的跨行跨列
跨行：colspan 跨列：rowspan 如rowspan=“2”：单元格占据两列
<table align="center" border="1" width="300" height="100" cellspacing="1">
<tr>
<th colspan="2">1.1</th>
<th>1.3</th>
</tr>
<tr>
<th rowspan="2">2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
<tr>
<th>3.2</th>
<th>3.3</th>
</tr>
</table>
效果：
<iframe src="html01.html" width="300" height="100" name="a"></iframe>
<br>
<ul>
<li><a href="html01.html" target="a">html01</a> </li>
<li><a href="html02.html" target="a">html02</a> </li>
<li><a href="html03.html" target="a">html03</a> </li>
</ul>
效果：
5.8 iframe标签（内嵌窗口）
5.9 表单标签
表单就是 html 页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。
5.9.1 表单显示
form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的
时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
<form>
用户名称：<input type="text" value="用户名称"><br>
用户密码：<input type="password" value="000000"><br>
确认密码：<input type="password" value="000000"><br>
性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br>
兴趣爱好：<input type="checkbox" checked="checked">篮球<input type="checkbox">足球<input type="checkbox">乒乓球<br>
国籍：<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>韩国</option>
</select><br>
自我评价：<textarea rows="10" cols="40">自我评价</textarea><br>
<input type="reset" value="重置">
<input type="submit">
</form>
效果：
5.9.2表单的格式化（form里放table）
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="用户名称"></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" value="000000"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="000000"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球</td>
</tr>
<tr>
<td>国籍：</td>
<td><select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>韩国</option>
</select></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">自我评价</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
<td><input type="submit" align="center"></td>
</tr>
</table>
</form>
效果：
5.9.3 表单的提交
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
所以要加name和value属性，post请求更安全
5.9.3.1 浏览器get请求
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
浏览器get请求：
http://localhost:8080/?action=login&username=8888&password=888888&password_check=888888&sex=boy&hobby=basketball&country=cn&desc=good
5.9.3.1 浏览器get请求
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
浏览器post请求：
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" name="username" value="用户名称"></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" name="password" value="000000"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password_check" value="000000"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked" value="boy">男
<input type="radio" name="sex" value="girl">女</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="pingpang">乒乓球</td>
</tr>
<tr>
<td>国籍：</td>
<td><select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">日本</option>
</select></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea name="desc" rows="10" cols="20">自我评价</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"></td>
<td><input type="submit" align="center"></td>
</tr>
</table>
</form>
5.10 其他标签
5.10.1 div 标签
默认单独占一行
<div>div标签1</div>
<div>div标签2</div>
<div>div标签3</div>
效果：
5.10.2 span 标签
长度是封装数据的长度
<span>span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
效果：
5.10.3 p 段落标签
默认会在段落的上方或下方各空出一行来（如果已有就不再空）
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
效果：
总结
今天主要复习了前端标签的知识，明天继续。