1、三个阶段:
- web前端
- 数据库
- SpringBoot
Web前端-HTML
- HTML作用: 负责搭建页面结构和内容 (盖房子)
- 学习HTML主要学习的就是有哪些标签
文本相关标签
- h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗
- p 段落标签, 特点: 独占一行,自带上下间距
- hr 水平分割线
- br 换行
- b 加粗
- i 斜体
- u 下划线
- s 删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--特点:字体加粗 独占一行 自带上下间距 -->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容<br>标题6</h6>
<hr>
<!--段落标签p 特点:独占一行 自带上下间距-->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
<hr>
<h3>列表标签</h3>
<h4>无序列表</h4>
<ul>
<li>刘备</li>
<li>孙尚香</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>刘禅</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>可井</li>
<li>传奇</li>
<li>我</li>
<li>程恒</li>
<li>好烂</li>
</ol>
<h4>列表嵌套</h4>
<ul>
<li>凉菜
<ol>
<li>拍黄瓜</li>
<li>东北大拉皮</li>
</ol>
</li>
<li>炒菜
<ol>
<li>宫保鸡丁</li>
<li>木须肉</li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名:<b>苍老师</b></p>
<p>性别:<i>男</i></p>
<p>爱好:<s>摄影</s></p>
<h2>个人经历</h2>
<ul>
<li>小学9年</li>
<li>中学6年</li>
<li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
<li>知名度最高奖</li>
<li>达内体重达人</li>
</ol>
</body>
</html>
列表标签
- 无序列表: ul和li 组合 unordered list list item 列表项
- 有序列表: ol和li 组合 ordered list
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套 .
图片标签:
src: 资源路径
相对路径: 访问站内资源
- 图片和页面在同级目录: 直接写图片名
- 图片在页面的上级目录: ../图片名
- 图片在页面的下级目录: 文件夹名/图片名
绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险
alt: 图片不能正常显示时显示的文本
title: 图片标题
width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放
1.像素 2.上级元素百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--src资源路径
1.相对路径:一般访问站内资源时使用
- 图片和页面在同一目录:直接写图片名
- 图片在页面的上级目录:../图片名
- 图片在页面的下级目录:文件夹名/图片名
2.绝对路径:一般访问站外资源,图片盗链
-->
<!--ait:当图片不能显示时 显示的文本-->
<!--title: 图片标题-->
<!--width/height
两种赋值方式:1.像素 2.上级元素的百分比
只设置宽度时 高度会自动等比例缩放
-->
<img src="a.jpg" title="校徽" width="200" alt="学校校徽">
<img src="../b.jpg" width="200" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png" width="200" alt="">
</body>
</html>
超链接a
- href: 资源路径, 作用类似图片标签的src
- a标签包裹文本为文本超链接, 包裹图片为图片超链接
- 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="top" href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a>
<a href="http://www.tmooc.cn"><img src="a.jpg" width="100"></a>
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>
表格table
- 相关标签: table tr表示行 td表示列 th表头 caption标题
- 相关属性: border边框 colspan跨列 rowspan跨行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr><!--table row 表示行 table data 表示列-->
<td colspan="2">1-1</td><td>1-3</td><td rowspan="2">1-4</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
<tr>
<td colspan="4" align="center">3-1</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="2">1-1</td><td rowspan="2">1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td><td>2-2</td>
</tr>
<tr>
<td colspan="2">3-2</td>
</tr>
</table>
<table border="1">
<caption>购物车</caption>
<!--th:字体加粗且居中-->
<tr>
<th>编号</th><th>商品名</th><th>价格</th>
</tr>
<tr>
<td>1</td><td>小米12 pro</td><td>5000</td>
</tr>
<tr>
<td>2</td><td>华为电视</td><td>4000</td>
</tr>
<tr>
<td>总价:</td><td colspan="2">9000</td>
</tr>
</table>
</body>
</html>
表单form
- 作用: 获取用户输入的各种信息 并提交给服务器
- 学习form表单主要学习的就是有哪些控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--maxlength最大字符长度-->
用户名:<input type="text" name="username" maxlength="5" value="abc" readonly="readonly"><br>
密码:<input type="password" name="password"><br>
<!--value是单选框必须添加的属性 否则提交on checked默认选中-->
性别:<input type="radio" name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" checked value="w" id="r2">
<label for="r2">女</label><br>
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" checked value="hj">喝酒
<input type="checkbox" name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
所在地:
<!--selected默认选中 value设置提交的内容-->
<select name="city">
<option>北京</option>
<option value="sh">上海</option>
<option selected>广州</option>
</select><br>
<input type="submit" value="注册">
</form>
</body>
</html>
分区标签
- 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
- 块级分区标签div: 特点是独占一行
- 行内分区标签span: 特点是共占一行
- 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
- HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
- header头 footer脚 main主体 section区域 nav 导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>块级分区标签1</div>
<div>块级分区标签2</div>
<div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>
</body>
</html>
CSS 层叠样式表
- Cascading Style Sheet
- 作用: 美化页面(装修)
如何在HTML页面中添加CSS样式代码
- 三种引入方式:
- 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
- 内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h2{color: blue}
</style>
<!--引入外部的css样式文件-->
<link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>
选择器
- 标签名选择器: 选取页面中所有同名标签
- 格式: 标签名{样式代码}
- id选择器: 当需要选择页面中某一个元素时使用
- 格式: #id{样式代码}
- 类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
- 格式: .class{样式代码}
- 分组选择器: 分组选择器可以将多个选择器合并成一个
- 格式: h4,#id,.class{样式代码}
- 属性选择器: 通过元素的属性选择元素
- 格式: 标签名[属性名="属性值"]{样式代码}
- 任意元素选择器: 选择页面中所有标签
- 格式: *{样式代码}
选择器练习:
- 把张学友改成绿色
- 把刘德华和悟空改成蓝色
- 修改取经3人和刘备的背景为黄色
- 修改密码框的背景为红色
- 给所有元素添加红色的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#l1{color: green}
.c1{color: blue}
h1,h2{background-color: yellow}
input[type="password"]{background-color: red}
input[type="text"]{color: purple}
*{border: 1px solid red}
</style>
</head>
<body>
<ul>
<li id="l1">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
</body>
</html>
工程的git地址:
teduliu/CGB2202
复制整行快捷键 ctrl+D
注释快捷键 ctrl+shift+/
快速进入下一行 shift+回车