前言：笔者曾经有18年的硬件研发经验，从（1）51单片机到（2）FPGA到（3）嵌入式ARM(ARM9到CORTEX A9)全都研发设计过，产品从（1）B超的整机研发到（2）智能家居系统到（3）无线电监测机到（4）平板电脑研发到（5）路灯智能控制到（5）工业电脑均有涉及，从（1）普通的电子技术工程师到（2）副总工程师到（3）副总经理到（4）事业部总经理。。。开始教你学习用spring boot搭建一个我们落地的完整项目模块--客户管理部分。
今天是：2018年6月8日 研究主题：客户管理模块从前端到后台之login.html部分分析
一、项目内建立前端页面的两个文件：一个是static，另一个是templates；
1. 默认情况下, 网页存放于static目录下, 默认的"/"指向的是~/resouces/static/index.html文
2. 如果引入了thymeleaf, 则默认指向的地址为~/resouces/templates/index.html
由于在之前的pom.xml中增加了thymeleaf模板，因此会访问templates下面的html，我们就将html放到templates目录下；将js、css、font、im g放到static目录下。
二、先学学html5的知识
1、html5的第一行代码
2、最小框架的html5
三、在“templates”中新建“login.xml”文件
四、正式开始编写“login.html”
1、先写框架：
需要特别说明的是： Stylesheet -- 定义一个外部加载的样式表 ，引入css目录下面的login.css文件
<link rel="stylesheet" href="css/login.css">
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录入口</title> <link rel="stylesheet" href="css/login.css"> </head> <body> </body> </html>
2、添加body内容：
（1）、<div></div>表示建立一个层，一个包含框；class=“first”表示给这个层起一个名为first的类名称，然后css中可以调用.first{width:100px;height:100px;backgroud:red}等之类的样式。
<div class="first">
（2）、
<h1>欢迎登陆</h1>
（3）、form表单后面跟id表示：
<form id="login">
（4）、在input中加入placeholder标签，可以作为用户文字提示；如：<input type="radio" name="radio" id="#" value="#"/>里面：type是该控件的类型；name用作表单的控件名；id主要用于页面内的javascript引用；value是该控件的值。
<input type="text" placeholder="用户名" name="username"/> <input type="password" placeholder="密码" name="password"/> <input type="button" id="loginbutton" value="登录"/>
（5）、
<li>表示列表项。<ul>表示无序排列，<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表，而在<ol> </ol>中写入<li>构成的是一个有序列表
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
（6）、<script>相当于一个标签，你要在html中写js的话就必须用这个type后边就是定义一个类型！type="text/javascript" 就是告诉浏览器中间的代码是文本形式的javascript；
<script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/login.js"></script>
五、打开浏览器“login.html”由于没有引入jquery所有如下显示：
以上是对一个完整的login.xml的分析，我想应该没有比我写的更清晰和详细的了，因为我的这个是落地项目，所以肯定受用，请大家多多关注！也多多关注我的物联研发项目团队！加油！