前言:笔者曾经有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的分析,我想应该没有比我写的更清晰和详细的了,因为我的这个是落地项目,所以肯定受用,请大家多多关注!也多多关注我的物联研发项目团队!加油!