这篇博客介绍了前端开发的基础，包括HTML标签的使用，通过Thymeleaf和SpringBoot框架从数据库中获取数据并展示，以及CSS的学习，包括选择器、优先级和布局。作者分享了学习过程中遇到的问题及解决办法，并提供了学习资源。
前言：学习前端第一篇博客，主要涉及到HTML的常见标签的使用，通过thymeleaf技术的应用，结合SpingBoot框架以及MyBatis，将数据库里的内容展示到网页端；CSS语法的学习。
目录
HTML
收藏两个常用的网站：
HTML（超文本标记语言） | MDN (mozilla.org)
HTML相当于骨架
HTML基本构成：
<元素名 属性="属性值">内容</元素名>
内容可以是其他的元素，也可以是纯文本
有些元素是自结束的，比如</br>、<input>
块元素：占用一整行的区域
<div> <p> <header> <footer> <main>
行内元素：一行内有多个元素
遇到问题记录：
在用table标签时，发现表格上边多出几行空行，发现是在用tr标签时，多加了br标签导致的。
这篇博客解答了我的困惑。
HTML中关于＜br＞,＜P＞换行符的区别和使用影响_p标签换行符_iLuosa的博客-优快云博客
HTML学习成果代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>
欢迎来到前端HTML的学习之旅
</h4>
</div>
下面是各种岗位的技术栈对比表格：<table border="1">
<tr>
<th style="width:100px" >后端技术栈</th>
<th style="width:100px" >前端技术栈</th>
<th style="width:100px" >测试技术栈</th>
</tr>
<tr>
<td>SpringBoot</td>
<td>Vue</td>
<td>接口测试</td>
</tr>
<tr>
<td>java</td>
<td>js</td>
<td>接口自动化测试</td>
</tr>
<tr>
<td>python</td>
<td>javascript</td>
<td>UI测试</td>
</tr>
<tr>
<td>Mysql</td>
<td>ajax异步请求</td>
<td>UI自动化测试</td>
</tr>
<tr>
<td>mongodb</td>
<td>jquery</td>
<td>性能测试</td>
</tr>
</table>
</div>
<div>
先收藏两个学习的网站:
</div>
<a href="https://www.w3school.com.cn/html/index.asp">w3school.com</a>
</br>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a>
<div>
前端三要素
<ul>
<li>HTML</li>
</br><li>CSS</li>
</br><li>JS</li>
</ul>
编程语言
<ol>
<li>Python</li>
<li>Java</li>
<li>Javascript</li>
<li>Shell</li>
</ol>
</div>
<div>
<form>form表单
</br>
用户名：</br>
<input type="text" placeholder="用户名" name="usrname">
<br>
密码：</br>
<input type="password" placeholder="密码" name="password">
</br>
<input type="submit" value="提交">
</form>
</div>
<div>
<p>
<form>工作岗位：
</br>
<input type="radio" name="test1" value="前端工程师">前端
</br>
<input type="radio" name="test1" value="后端工程师">后端
</br>
<input type="radio" name="test2" value="测试工程师">测试开发
</form>
</p>
<p>
<form>工作技能：
<input type="checkbox" name="test1" value="数据库">数据库
<input type="checkbox" name="test2" value="编程语言">编程语言
<input type="checkbox" name="test3" value="前沿技术">前沿技术
<input type="checkbox" name="test4" value="测试技能">测试技能
</form>
</p>
</div>
<div>单选框 默认选中第二项
</br>
<select name="select">
<option value="value1">java</option>
<option value="value2" selected >javascript</option>
<option value="value3">python</option>
<option value="value4">C++</option>
</select>
</div>
</br>
<div>多选框
</br>
<select name="value" multiple="multiple">
<option value="value">java</option>
<option value="value">javascript</option>
<option value="value">python</option>
<option value="value">C++</option>
</select>
</div>
<p>前端技术学习开端！</p>
</body>
</html>
以上用到了<p> <div> <form> <input> <li> <table>
thymeleaf
将数据库里的元素渲染到网页上，用到了thymeleaf技术，下面这篇博客的介绍很全面。
springboot中Thymeleaf的使用 - 简书 (jianshu.com)
首先需要引入thymeleaf的start依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>其次需要从controller层的代码获取数据库里的数据，动态数据的文件名为：mysqlData.html（在src\main\resources\templates文件夹下新建mysqlData.html文件）
@GetMapping("/view")
public ModelAndView showDatas(){
ModelAndView dataView = new ModelAndView();
List<MysqlUserData> cases = SunnyCaseMapper.getData();
dataView.addObject("tableDatas",cases);
dataView.setViewName("mysqlData");
return dataView;
}其中cases是getData的方法从数据库表的users里取出的数据。
@Select("select * from users")
List<MysqlUserData> getData();最后，需要完成mysqlData.html文件的相关设置，变量需要取controller层的tableDatas，只取了用户名，密码，手机号这三列的数据。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>mysql数据库表里的数据</div>
<table border="1">
<tr>
<th style="width:100px" >用户名</th>
<th style="width:100px" >密码</th>
<th style="width:100px" >手机号</th>
</tr>
<tr th:each="MysqlUserData:${tableDatas}">
<td th:text="${MysqlUserData.usr}"></td>
<td th:text="${MysqlUserData.pw}"></td>
<td th:text="${MysqlUserData.phone}"></td>
</tr>
</table>
</body>
</html>数据库users表里数据如下图所示：
实现结果：
CSS
css主要作用是美化HTML元素
使用方式
1、行内样式，在元素里直接设置，多个属性用分号隔开
style="color: purple;font-size: large"2、通过<style>选择器设置
<style>
form,table{
color: green;
}
</style>3、通过import外部文件引用，new.css文件里写入（加载时可能会出现突然刷新的情况，不常用这种方式）
table{
font-size: 15px;
color:red;
/*font-size: x-large;*/
}<style>@import "new.css";</style>4、通过link引用CSS样式
<link rel="stylesheet" href="new.css">四种使用方式的优先级：行内样式设置>外部引用>选择器设置
多个样式值时用空格隔开
<style>
a{
color: green;
}
h4{font:2em 宋体 lighter;color:peru;font-style: italic;text-shadow: 10px 10px pink}
</style>效果展示：
CSS选择器
id属性
元素可以加上id属性
<h4 id="title" style="font-size: large">
欢迎来到前端CSS的学习之旅
</h4>在<style>里加入#id
<style>
a{
color: green;
}
/*h4{font:2em 宋体 lighter;color:peru;font-style: italic;text-shadow: 10px 10px pink;text-decoration: underline}*/
#title{
color: red;
}
</style>也可以添加class值
<a class="biglink" href="https://www.w3school.com.cn/html/index.asp">w3school.com</a>在<style>中写入元素名.class名
<style>
a{
color: green;
}
/*h4{font:2em 宋体 lighter;color:peru;font-style: italic;text-shadow: 10px 10px pink;text-decoration: underline}*/
#title{
color: red;
}
a.biglink{
color: palevioletred;
}
</style>查找元素，打开F12，按下ESC键，再按ctrl+F键进行查找
关于F12更多使用技巧请移步：（todo）
优先级总结：
加上! important优先级最高
继承或*<元素选择器<类选择器<id选择器<行内选择器<带! important
添加背景
添加背景图
<style>
body{
background: aliceblue;
background-image:url("picture.jpg");
background-size: 1800px;
/*background-repeat: no-repeat;*/
background-position: 10% 70%;
/*backdrop-filter: blur(2px);*/
/*filter:blur(100px);*/
}
</style>背景图位置大小调整
添加背景颜色
background
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)调色网站
页面布局
从里到外，分别为：盒子、内边距、边界、外边界
margin 调整上下左右的值（填入值，分别对应上、右、下、左的边界值）
CSS学习成果代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<header id="title">
欢迎来到MRJJ_9的前端学习之旅
</header>
<body>
<div class="learn-website">
前端学习网站:
</br>
<a class="biglink" href="https://www.w3school.com.cn/html/index.asp">w3school.com</a>
</br>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a>
</br>
<a class="test01" href="https://www.youkuaiyun.com">优快云社区</a>
</br>
本人博客：
</br>
<a href="https://blog.youkuaiyun.com/mrjj_9/category_12393537.html">前端学习博客</a>
</div>
<main>
<div calss="table" style="
display: inline-block">
下面是各种岗位的技术栈对比表格：
<table border="2">
<tr>
<th>后端技术栈</th>
<th>前端技术栈</th>
<th>测试技术栈</th>
</tr>
<tr>
<td>SpringBoot</td>
<td>Vue</td>
<td>接口测试</td>
</tr>
<tr>
<td>java</td>
<td>js</td>
<td>接口自动化测试</td>
</tr>
<tr>
<td>python</td>
<td>javascript</td>
<td>UI测试</td>
</tr>
<tr>
<td>Mysql</td>
<td>ajax异步请求</td>
<td>UI自动化测试</td>
</tr>
<tr>
<td>mongodb</td>
<td>jquery</td>
<td>性能测试</td>
</tr>
</table>
</div>
<div class="form" style="
display: inline-block">
<form>添加测试用例
</br>
用例名：
<input type="text" placeholder="输入测试用例名称" name="caseName">
</br>
步骤名：
<input type="text" placeholder="输入测试步骤名称" name="stepName">
</br>
请选择用例类型：</br>
<input type="radio" name="type" value="api">接口自动化
</br>
<input type="radio" name="type" value="ui">UI自动化
<br>
关键字
<select name="value">
<option value="value">打开浏览器</option>
<option value="value">传入必传参数</option>
</select>
</br>
参数1 </br>
<input type="text" name="param1">
<br>
参数2 </br>
<input type="text" name="param2">
</br>
<input type="submit" value="提交" disabled>
</form>
</div>
</main>
<link rel="stylesheet" href="mrjj.css">
<style>
body {
background: aliceblue;
background-image: url("picture.jpg");
background-size: 50vw;
background-position: 50% 50%;
}
</style>
</body>
</html>
遇到的问题记录
user agent stylesheet
需要添加reset.css代码
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}总结
前端学习开篇，了解了HTML和CSS的基本使用，以及利用thymeleaf技术的应用，关于CSS样式和布局，在细节上的调整还是要多加练习！
扫一扫
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
