一、今日内容
1.JavaWeb概述
2.HTML
3.HTML练手案例
二、JavaWeb概述
1.什么是 JavaWeb
* 使用java语言基于互联网开发的项目
2.软件架构
1. C/S: Client/Server 客户端/服务器端
* 特点：在用户本地有一个客户端程序，在远程有一个服务端程序
* 优点：用户体验感好
* 缺点：开发、安装、部署、维护 麻烦
2. B/S：Browser/Server 浏览器/服务器端
* 特点：用户通过浏览器，输入网址，远程有一个服务器响应
* 优点：开发、安装、部署、维护 简单
* 缺点：
1. 相对与C/S架构来说，用户体验感要差一些
2. 比较吃硬件，硬件越好，用户体验越好
3.B/S架构详解
因为是学习javaweb，C/S架构就不详细说了，接下来详细了解一下B/S架构：
1. 资源分类
1. 静态资源
* 使用静态网页开发技术发布的资源
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本、图片、视频、**HTML、CSS、javascript**
* 如果用户请求的是静态资源，**服务器会直接将静态资源发送给浏览器**，浏览器通过内置的津泰资源解析引擎，可以展示静态资源
2. 动态资源
* 使用动态网页开发技术发布的资源
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet、.net、php、asp...
* 如果用户请求的是动态资源，**服务器会执行动态资源，将动态资源转为静态资源** ，再将动态资源发送给浏览器
2. 结论：
* 要学习动态资源，必须先学习静态资源。
* 浏览器只能解析静态资源
3. 接下来，学习静态三剑客：
* HTML
* CSS
* JavaScript
在这里插入图片描述
三、HTML
1.什么是HTML
Hyper Text Markup Language 超文本标记语言
* 超文本：用超链接的方式，将各个不同空间的信息像蜘蛛网一样连接起来
* 标记语言：由标签构成的语言。<标签名>
* 注意：标记语言不是编程语言
2.HTML学习
（1）语法
1. html文档后缀名 .html 或者 .htm
2. 标签分为：
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。
（2）标签学习：
1. 文件标签：
* <!DOCTYPE html>：html5中定义该文档是html文档
* html：根标签
* head：头标签
* title：标题标签
* body：体标签
2. 文本标签：
* <!-- 注释内容 -->
* <h1>标题</h1>
* <p>段落</p>
* <br /> : 换行
* <hr /> : 水平线
* <b>加粗</b>
* <i>斜体</i>
* <font>字体</font>
* size
* color
* face:字体
* <center>居中</center>
* 属性定义：
* color：
1. 英文单词：red，green，blue
2. rgb(值1，值2，值3) 0-255
3. #值1值2值3 00-FF eg：FF00FF
* width：
1. 数值：width=‘20’ 单位默认是px（像素）
2. 数值%:占父元素的比例
3. 图片标签： <img src="图片路径相对/绝对" />
4. 列表标签：
* 有序列表：
<ol>
<li>序列1</li>
<li>序列2</li>
</ol>
* 无序列表：
<ul>
<li>序列1</li>
<li>序列2</li>
</ul>
5. 连接标签：<a href="url/相对/绝对">文字</a>
* 属性 href：目标网址 target在哪里打开页面（当前页面/空白页）
6. div和span：这两个没有任何的样式，一般和css一起使用
* div：每一个div占一整行。块级标签
* span：文本信息在一行内展示。行内标签
7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。他和div和span都没有任何的样式，只是方便程序员阅读。可以理解为一个div，只是名字与div不一样。
* <header></header>
* <footer></footer>
8. 表格标签
* <table></table>：定义表格
* <caption></caption>：定义表单标题
* <th> </th>：定义标题头
* <tr></tr>：:定义行
* <td><td>：定义列
* colspan：合并列
* rowspan：合并行
* table的语义化标签
* <thead></thead>
* <tbody></tbody>
* <tfoot></tfoot>
下面举一个表格合并的例子：
在这里插入图片描述
上面表格代码：
<table border="1">
<caption>学生信息表</caption>
<tr>
<!--注意此处占三行在第一行设置-->
<td rowspan="3">学院</td>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>2017115010225</td>
<td>张三</td>
</tr>
<tr>
<td>2017115010224</td>
<td>李四</td>
</tr>
</table>
（3）表单学习：
* 表单概念：用于采集用户输入的数据。用于和服务器交互。
* form：用于定义表单。定义表单作用的范围，在该标签内的，用户输入的数据才能够被提交到服务器。
* 属性：
* action：指定提交的URL
* method：指定提交的方式
* 分类：一共有7种，2种比较常见
* get：
1. 请求的参数会在地址栏显示。
2. 请求的参数长度是有限制的
3. 可能被别人看见参数，不太安全
* post：
* 请求的参数封装在请求体中，不会在地址栏中显示
* 请求参数的长度没有限制
* 比较安全
* 表单项标签
1. <input />：可以通过type属性，改变input表单项的样式
* type属性值：
* text：文本输入框，默认值
* password：密码输入框，会隐藏用户输入的密码
* radio：单选框
* 注意：
1. 要想多个单选框实现单选的效果，这多个单选框的name属性的值必须一样
2. 一般会给每一个单选框指定一个value属性，指定其被选中后提交的值
3. checked属性（checked=“checked”）可以指定默认选中哪个
* checkbox：复选框
* 注意：
1. 一般会给每一个复选框一个value属性，指定其被选中后提交的值
2. checked属性（checked=“checked”）可以指定默认选中哪几个复选框
* file：文件选择框
* hidden：隐藏域，用于提交一些默认的信息
* 按钮：因为按钮没有值需要提交，所以不用设置name属性，value属性是显示其按钮上的字
1. submit：提交按钮，可以提交表单
* 设置value属性值，其会以文字的形式显示在按钮上
2. button：普通的按钮，不可以提交表单，一般和JavaScript结合使用
3. image：图片提交按钮，可以提交表单
* src属性指定图片的路径
* color：取色器
* date：日期，不含小时分钟
* datetime：日期，含小时分钟
* email：邮箱，可以自动检测邮箱填写是否规范
* number：数字
2. <select></select>：下拉列表，需要设置name属性
* 子元素：<option></option> 需要设置value属性
3. textarea：文本域
* 属性：
* cols：指定列数，每一行有多少个字符
* rows：默认多少行，当然不够的会自动填充
4.补充：
1. <lable></lable>：他不是表单项，用来指定输入项的文字描述信息，比如：账号、密码
* 注意：
* lable的for属性一般会和其对应的 input 的 id属性值 对应。如果对应了，则点击lable区域，光标会自动跳转聚焦到其对应的 input 输入框
2. 表单项要想被提交，表单项必须指定其name属性
四、HTML练手案例
用HTML展示如下效果：
在这里插入图片描述
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="get">
<table border="1">
<!--第一行-->
<tr>
<td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username" placeholder="请输入账号"/></td>
</tr>
<!--第二行-->
<tr>
<td><label for="passwd">密码</label></td> <td><input type="password" name="passwd" id="passwd" placeholder="请输入密码"/></td>
</tr>
<!--第三行-->
<tr>
<td><label>邮箱</label></td> <td><input type="email" name="email" placeholder="请输入邮箱"/></td>
</tr>
<!--第四行-->
<tr>
<td><label>姓名</label></td> <td><input type="text" name="name" placeholder="请输入真实姓名"></td>
</tr>
<!--第五行-->
<tr>
<td><label for="phoneNum">手机号</label></td> <td><input type="number" name="phoneNum" id="phoneNum" placeholder="请输入手机号"/></td>
</tr>
<!--第六行-->
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="sex" value="male" checked/>男 <input type="radio" name="sex" value="female"/>女</td>
</tr>
<!--第七行-->
<tr>
<td><label>出生日期</label></td> <td><input type="date" name="birthday"/></td>
</tr>
<!--第八行-->
<tr>
<td><label>验证码</label></td>
<td><input type="text" name="capter"/> <img src="../img/verify_code.jpg"></td>
</tr>
<!--第九行-->
<tr align="center">
<td colspan="2"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
