javaweb--HTML
-
Web开发
- web：全球广域网，也称万维网，能够通过浏览器访问的网站。
- web网站的开发模式
前端服务器，前端服务器接受到请求后会将对应的前端代码返回给浏览器（也就是图中的响应请求）。而我们知道浏览器也是一个程序，在浏览器里面内置了解析前端代码的解析引擎。那在浏览器接收到前端代码以后会自动解析前端的代码，从而展现出对应的页面样式。而现在浏览器解析的前端代码会呈现出基本的网页结构，但并没有数据。所以接下来就会去获取数据，而在前端代码中都会指定去哪里获取数据，如下图红框部分就是获取数据的请求路径。将来浏览器解析到前端代码当中的这个数据获取路径以后，浏览器就会拿着这个路径去访问部署在后端服务器当中的后端Java程序。那后端程序呢继续访问数据库，数据获取之后，后端服务器会将数据再返回给浏览器。那此时前端代码和数据就都有了，浏览器就会将数据填充在刚才的空架子的前端页面当中，从而形成了一个完整的页面呈现给用户。这就是 Web 网站前后端分离开发的整体工作流程。
- Web课程安排
HTML-CSS
不同的浏览器，内核不同，对于相同的前端代码解析效果会存在差异。
为了使不同的浏览器，解析同一段代码解析出来的效果一样，因此需要指定一套标准，就是Web标准
① W3C这个联盟的主要职责就是来指定Web标准的
② 前端网页开发的三剑客：HTML、CSS、JS
③ 前端网页开发除了这三项基础的核心技术以外，现在还有非常流行的一些高级的技术。如：前端开发现在非常流行的基于JS封装的高级框架Vue，还有像基于Vue封装的桌面端组件库Element UI以及异步交互技术Ajax和Axios等技术
web前端课程安排
HTML、CSS介绍
- HTML---超文本标记语言
- CSS ----层叠样式表，用于控制页面的样式（表现）
补充：像我们平时基于Windows当中的记事本这一类工具所编写的这一类文本都称为普通文本，即只能记录文字信息
XML：XML也是一种标记语言，由标签构成的语言，XML是可扩充的标记标记语言，即在XML中我们可以自定义标签，解析时，只需要按照我们自己定义的规则去解析这些标签的内容就可以。但是HTML中的标签都是预先定义好的，因为HTML的代码最终是不需要我们解析，而是在浏览器中进行的，由浏览器负责解析HTML代码。
HTML快速入门
HTML语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值，值必须加引号，单引号或双引号均可
- 标签名不区分大小写但建议使用小写
基础标签 & 样式-合集（拟新浪微博为例）
1.标题标签：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
Hello Word!
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
</body>
</html>
2.段落标签
<!--段落标签-->
<p>世上只有一种英雄主义，就是在认清生活真相之后依然热爱生活。--罗曼罗兰</p>
3.无序标签
<!--无序列表标签-->
<ul>
<li>apple</li>
<li>bea</li>
<li>orange</li>
</ul>
4.超链接标签
<!--超链接标签-->
<!--
href属性：跳转到的页面
target属性：跳转的方式(默认当前页面打开)
_blank:新页面在新的标签页打开
_self:新页面在当前页面打开
..:上一级目录
. :当前目录
-->
<a href="https:www.baidu.com" >百度</a>
<a href="https:www.baidu.com" target="_blank">百度</a>
<a href="https:www.baidu.com" target="_self">百度</a>
<a href="../target.html" >target页面</a>
<a href="../target.html" target="_blank">target页面</a>
<a href="../target.html" target="_self">target页面</a>
5.图像标签
<!--图像标签-->
<img src="../img/car.png" height="300" width="500"/>
6.块标签
『块』并不是为了显示文章内容的，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。
<!--块标签-->
<div style="border: 1px solid black;width: 150px;height: 150px;">爱是生命的火焰，没有它，-切变成黑暗一 罗曼罗兰</div>
<div style="border: 1px solid black;width: 150px;height: 150px;">应当细心地观察，为的是理解;应当努力地理解，为的是行动。一罗曼罗兰</div><br/>
<span style="border: 1px solid black;width: 150px;height: 150px;">爱是生命的火焰，没有它，-切变成黑暗一 罗曼罗兰</span>
<span style="border: 1px solid black;width: 150px;height: 150px;">应当细心地观察，为的是理解;应当努力地理解，为的是行动。一罗曼罗兰</span>
7.表格标签
<!--表格标签-->
<table>
<tr>
<th>英雄</th>
<th>类别</th>
<th>性别</th>
</tr>
<tr>
<td>孙策</td>
<td>兰陵王</td>
<td>王昭君</td>
</tr>
<tr>
<td>战士</td>
<td>刺客</td>
<td>法师</td>
</tr>
<tr>
<td>男</td>
<td>男</td>
<td>女</td>
</tr>
</table>
展示效果：
引入样式
在head标签中引入CSS
<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>
（方法有很多记得总结）
合并行列：
<table>
<tr>
<th>英雄</th>
<th>类别</th>
<th>性别</th>
</tr>
<tr>
<td>孙策</td>
<!-- 合并行 -->
<td colspan="2">战士：男</td>
</tr>
<tr>
<!-- 合并列 -->
<td rowspan="2">兰陵王<br/>王昭君</td>
<td>刺客</td>
<td>男</td>
</tr>
<tr>
<td>法师</td>
<td>女</td>
</tr>
</table>
使用表单标签提交数据
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器
form标签介绍
在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post"> </form>
action属性
用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。
这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。
method属性
『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
HTTP请求中GET和POST的区别？
①参数传递的方式不同
GET方法请求的时候，参数会拼接到URL的后面，参数之间以&相连，如：login.php?username=xx&password=x，请求参数会暴露在浏览器中，所以是一种不安全的请求方式，多用来 获取数据。
POST方法请求的时候，参数会放到HTTP的请求体中，对于用户是不可见的。虽然请求参数对于用户是不可见的，但是对于浏览器而言仍然是可见的。我们可以通过浏览器的开发者模式查看POST的请求体，所以POST方法也是不安全的。②URL长度不同严格来说
GET方法和POST方法的请求参数长度都是没有限制的，HTTP协议中并没有规定参数的长度。但是，在浏览器和WEB容器中有限制，主要是为了提高URL解析的效率。一般浏览器规定GET请求的时候，URL长度不能大于2000个字符，POST请求的数据不能大于4M。当然不同的浏览器和服务器限制条件不同。所以，为了兼容大多数的浏览器和服务器，URL参数保证在2000个字符以内，这样，对于服务器的压力也小，可以提升系统的性能。③安全性不同
GET方法的请求的时候，参数暴露在浏览器中，用户可以明显地看到参数，这是不安全的请求方式。
POST请求的时候，参数随请求体传递。POST方法相对GET方法安全一些，但不是绝对的。通过抓包方式也是可以查看POST的请求参数的。④数据包不同
GET请求的时候，产生一个TCP数据包。请求的header和data一起发送出去。
POST请求的时候，产生两个TCP数据包。先发送header信息，服务端响应100 continue，浏览器再发送data信息。
所以说，GET请求的性能要高于POST请求。但是这种差别几乎可以忽略不计。因为网络良好的情况下，两次包发送的时间几乎等于发送一次包的时间（tcp包）。而且，在某些浏览器下，POST请求也只发一次请求（Firefox）。
表单项标签
<!--表单标签-->
<form action="../target.html" method="post">
<!--文本框-->
姓名：<input type="text" name="username" ><br/>
<!--密码框-->
密码：<input type="password" name-="password" /><br/>
<!--单选框-->
水果：<input type="radio" name="fruit" value="apple">苹果
<input type="radio" name="fruit" value="bea">梨
<input type="radio" name="fruit" value="banana" checked="checked">香蕉<br/>
性别：<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女<br/>
<!--多选框-->
爱好：<input type="checkbox" name="hobby" value="woman" checked="checked">女人
<input type="checkbox" name="hobby" value="car">凯迪拉克
<input type="checkbox" name="hobby" value="money">钱
<input type="checkbox" name="hobby" value="music">音乐<br/>
<!--下拉框-->
凯迪拉克：<select name="kdlk" >
<option value="ct4">ct4</option>
<option value="ct5">ct5</option>
<option value="ct6" selected="selected">ct6</option>
<option value="xt6">xt6</option>
</select><br/>
<!--多行文本域-->
自我介绍： <textarea name="desc"></textarea><br/>
<!--按钮
普通按钮：点击之后没有效果，需要javaScript绑定点击响应函数
重置按钮：点击之后将表单里面的表单项恢复默认值，提交按钮
提交按钮：点击后提交表单
-->
<button type="button" >普通按钮</button><br/>
<button type="reset" >重置按钮</button><br/>
<button type="submit">提交按钮</button><br/>
<!--隐藏域-->
<input type="hidden" name="id" value="201811102026">
</form>
布局
完成页面布局，还需要借助HTML中两个比较常见的布局标签来完成，分别是：div和span标签
CSS盒子模型的样式设计，如下图代码所示：
表格、表单标签
表格标签
CSS
CSS(Cascading Style Sheet):层叠样式表
CSS是一门语言，用于控制网页表现。
CSS导入方式
CSS选择器：
