前言

该笔记灵感来源于B站《黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+Springboot》
源视频地址：黑马程序员2023新版JavaWeb开发教程
个人声明：本文记录个人在进行该视频学习中的知识总结，帮助大家能更快地进行对该视频内容的学习；由于该视频对部分知识讲解不够完整，因此个人对视频内容的笔记进行了一些补充。同时根据个人需要删除了某些视频内容的笔记(有标注省略部分)

Day01-前端学习

注：该部分笔记省略了Web的工作流程以及Vscode的安装流程

0.前端所需要安装的软件及插件

（1）开发环境

Vs Code
谷歌浏览器

（2）VS code前端所需插件

汉化菜单插件：Chinese
打开网页插件：open in browser
自动刷新页面: live serve

（3）辅助软件PxCook

放入UI美工设计的Psd文件，即可获得页面所需要的相关数据，例如间距px，颜色的RGB代码等

1.HTML的基本语法

HTML是什么？：HTML是一种超文本标记语言，负责网页的结构，设计页面的元素内容等
- 超文本：超越文本限制，除了文本信息，还可以定义图片，音频，视频等
- 标记语言：由标签构成的语言。
HTML代码直接在浏览器中运行，由浏览器解析

（1）HTML标签的特点

不区分大小写
标签属性值单引号和双引号都可以
HTML语法松散，不严格

（2）HTML基本骨架

html : 整个网页
head :网页头部，用来存放给浏览器看的信息，例如CSS
- title：网页标题
body : 网页主体，用来存放给用户看的信息，例如图片文字
生成HTML基本骨架的方法：！+回车

<!DOCTYPE html>               <!--文档类型为html-->
<html lang="en">
<head>
    <meta charset="UTF-8">    <!--字符集为UTF-8-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    存放给用户看的内容
</body>
</html>

（3）加粗标签

<strong>加粗字体测试</strong>

（4）常用单标签

<br>:换行
<hr>:水平线

（5）标题标签

标题标签有h1~h6(双标签)
显示特点：文字加粗，字号逐渐减小，独占一行（换行）
h1标签一般一个网页只用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>一级</h1>
    <h2>二级</h2>
    <h3>三级</h3>
    <h4>四级</h4>
    <h5>五级</h5>
    <h6>六级</h6>
</body>
</html>

（6）图像标签

图像标签的作用：在网页中插入图片
src用于指定图像的位置和名称，是图像标签的必须属性

<img src="./图片的URL">

属性值：

补充：width和height的属性值可以用百分比表示（80%），即所占父元素的百分比

（7）div,span标签

div：独占一行的标签，双标签
span：不换行，双标签。主要用来对一行中的元素分组

（8）超链接标签

作用：点击跳转到其他页面
herf属性值用来跳转地址，是超链接的必须属性
target属性：
- _self :在当前页面直接跳转到该链接
- _blank : 新增一个页面打开该链接的网站

在开发初期，如果不知道超链接的跳转地址，则href属性值写#，表示空连接不会跳转
< a >标签的超连接都默认有下划线，如果不想要下划线，则需要text-decoration属性修改
text-decoration属性值：
- none:无下划线
- underline:文本下划线
- overline:文本上的一条线
- line-through : 定义穿过文本下的一条线
- blink : 定义闪烁的文本
- inherit : 从父元素继承相同的值

（9）视频标签

视频标签支持width和height属性设置

（10）音频标签

（11）段落标签< p >

段落标签：p(双标签)
段落标签的特点：独占一行，段落间存在间隙

（12）文本加粗标签

两种加粗标签，展示效果相同

<strong>加粗字体测试</strong>
<b>加粗</b>

（13）空格占位符

在HTML中无论输入多少个空格，只会显示1个。可以使用空格占位符：&nbsp

（14）表格标签

table嵌套tr,tr嵌套td/th
在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。border的数字大小代表边框线的粗细

<body>                                <!--网页体-->
    <table border="1">                 <!--创建表格 border = 1创建1像素的边框线-->
        <tr>                           <!--第一行，表格标题-->
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>                           <!--第二行，张三成绩-->
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
    </table>
</body>

表格结构标签

以下在浏览器中看不到效果，主要是用来让代码展示清楚

合并单元格

将多个单元格合并成一个单元格，以合并同类信息
合并分为跨行合并和跨列合并
跨行合并：保留最上单元格，添加属性rowspan。取值是数字，表示为合并单元格的数量
跨列合并：保留最左单元格，添加属性colspan。取值是数字，表示为合并单元格的数量
注意不能跨表格结构标签去合并

（15）表单标签

使用场景：在网页中负责数据采集功能，如注册，登入等数据采集

form标签

属性：
- action:规定当前提交表单时向何处发送表单数据，URL
- method:规定用于发送表单数据的方式。GET，POST
- GET提交方式：在url后面拼接表单数据，url长度有限制；GET是method属性的默认值
- POST提交方式：在消息体（请求体）中传递，参数大小无限制

    <form action="" method="get">
        <!--Type表示输入类型，name表示表单的名字-->
        用户名: <input type="text" name="username">     
        年龄:<input type="text" name="age">

        <!--生成一个显示value值的提交按钮-->
        <input type="submit" value="提交">
    </form>

input标签-输入

type属性值不同，则功能不同

占位文本：提示信息

提示信息和文本框密码框都可以使用

单选框radio的属性

增加value属性便于识别选择的值，代表提交给网页的值

<input type = "radio" name="gender" value="1">男   
<input type = "radio" name="gender" value="2">女

如果添加label标签，则点击label所包裹的元素则都可以选中单选框。例如，点击文字“女”可以选中女旁边的单选框。复选框同理使用。

<label><input type = "radio" name="gender" value="1">男</label>
<label><input type = "radio" name="gender" value="2">女</label>

复选框checkbox的属性

默认选中属性：checked
value代表提交的值

<label><input type = "checkebox" name = "hobby" value = "java"></label>
<label><input type = "checkebox" name = "hobby" value = "C"></label>
<label><input type = "checkebox" name = "hobby" value = "Python"></label>

下拉菜单

<select name = "degree">
    <option value="">-------------请选则-------------------</option>
    <option value="1">大专</option>
    <option value="2">本科</option>
    <option value="3">硕士</option>    
</select>

文本域

作用：多行输入文本的表单控件
该标签使用后，右下角有拖拽功能，一般都会禁用
cols属性表示一行可以输入的字体个数，rows表示可以输入多少行

<textarea name="description" cols="30" rows="10">默认提示文字</textarea>

表单常见按钮

<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">

2.CSS层叠样式表基本语法

层叠样式表，用来控制页面的样式

（1)CSS的三种引入方式

内部样式表：适合学习使用，将CSS代码写在style标签里面，style标签嵌套在title里

外部样式表：开发常使用，将CSS代码写在单独的CSS文件中.css；在HTML中使用link标签引入：

href放css文件的路径；link标签写在title的下一行，head前一行

rel = "stylesheet"表示引入的是层叠样式表CSS

CSS写在style属性值里

（2)CSS三种颜色设置方式

CSS具有三种颜色设置方式

1.关键字表示

color:red;
color:yellow;
color:green

2.rgb表示法

通过红绿蓝三原色来设置，每项取值范围为0-255

color:reb(0,0,0);
color:rgb(0,255,255);

3.十六进制表示法（用的最多）

开头，将颜色转换为数字的十六进制表示

color:#083232;

（3）CSS基础选择器

标签选择器

根据标签名称来选取需要设置样式的标签，将所选中的标签全部设置为选择器内的样式

元素名称{
	color:red;
}

h1{
    color:red;
}

id选择器

为标签指定一个ID属性，为设置了该ID的所有标签设置选择器内的样式
同一个ID选择器在一个页面只能使用一次

#id属性值{
    color:red;
}

/*定义id选择器*/
<style>
    #red{
        color:red;
    }
</style>

<!--使用id选择器-->
<div id = "red">内容</div>

类选择器

与ID选择器不同的是，一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开
类名单词之间可以用-连接，news-hd

（4）首行缩进

属性名称：text-indent

单位：px

p{
    text-indent:50px;
}

（5）文本对齐属性

属性名称：text-align

属性值：center left right

h1{
    text-align:center;
}

h2{text-align:left;}

h3{text-align:right;}

3.盒子模型

（1）盒子组成

内容区域-width & height
内边距 - padding（出现在内容与盒子边缘之间）
边框线 - border
外边距 - margin （出现在盒子外面)

（2）盒子边框线

属性名：border
属性值：边框线粗细线条样式颜色

设置单方向边框线

（3）盒子模型-内边距

作用：设置内容与盒子边缘之间的距离
属性名：padding / padding - 方位名词

padding多值写法

（4）盒子模型 - 尺寸计算

盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
如何进行内减防止盒子被撑大？：在盒子中添加属性如下：

box-sizing:border-box;

（5）盒子模型 - 外边距

作用：拉开两个盒子之间的距离
属性名：margin
与padding属性值写法和含义相同
版心居中写法：margin: 0 auto; 注意盒子要求有宽度

random_shuffle黑马程序员算法

526互联

黑马程序员2023新版JavaWeb开发教程学习笔记

前言