注：对于前端的学习进程有一段时间搁置了，再回过头去看发现好多自己都需要再温习，放假从泰安回来菏泽的感悟就是：学习就要去学习的场所，所以之后的假期能待在学校就不要回来。
JAVA SE 是C/S结构 是Client Server客户端
B/S 是浏览器Brower Server 客户端就是浏览器
服务器web
(标注一下空格代码)
前端开发流程：
美术实现（网页设计师根据需求设计网页PS）——》前端工程师（前端工程师将设计做成静态网页HTML）——》java程序员（后台工程师将静态网页修改为动态网页JSP）
HTML文件的书写规范
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>开头就是要吃苦，成功就是要付出</title><!--表示标题-->
</head>
<body><!--主体内容-->
hellow
</body>
</html>
（从开始的地方看了看，又有不同的收获和感觉了）
看下定义：
什么是CSS?
CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表，是用来表现HTML(标准通用标记语言的一个应用）或XML(标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力;允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专 门的CSS文件中，以供HTML 页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
CSS可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名CSS的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠(cascading) ”表示样式单规则应用于HTML文档元素的方式。具 体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
————————————————
版权声明：本文为CSDN博主「ʚ长意ɞ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ye123003/article/details/112439313
CSS语法规则
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。
属性（property）：是你要改变的样式名，并且每个属性都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p(color:blue)
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）
例如
p{
color:red;
font-size:30px;
}
注：一般每行只描述一个属性
<font color=OrangeRe>
CSS注释：/*注释内容*/
</font>
相差一个字母，颜色大大不同
HTML和css结合使用
第一种方式
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>开头就是要吃苦，成功就是要付出</title><!--表示标题-->
</head>
<body><!--主体内容-->
<!--需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div style="border:1px solid red;with:100px;height:100px;background-color:green">div标签1</div>
<div style="border:1px solid red">div标签2</div>
<span style="border:1px solid red">span标签1</span>
<span style="border:1px solid red">span标签2</span>
</body>
</html>
这种方式的缺点：
1如果标签多了，样式多了，代码量非常大。
2可读性非常差
3css代码没有什么复用性可言
第二种方式
在head标签中，使用style标签定义各种自己需要的css样式
格式如下(上文所写CSS语法规则)：XXX { key:value value; }
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>开头就是要吃苦，成功就是要付出</title><!--表示标题-->
<style type="text/css">
div{border:1px solid red }
</style >
</head>
<body><!--主体内容-->
<!--需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>开头就是要吃苦，成功就是要付出</title><!--表示标题-->
<style type="text/css">
/*需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色*/
div{border:1px solid red }
span{border:1px solid red }
</style >
</head>
<body><!--主体内容-->
<!--需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
这种方式的缺点：
1只能在同一页面中复用代码，不能在多个页面中复用CSS代码
2维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。
第三种：
把CSS样式与一个单独的CSS文件用link连接起来
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>开头就是要吃苦，成功就是要付出</title><!--表示标题-->
<link rel="stylesheet" type="text/css" href="./css/1.css"/>
</head>
<body><!--主体内容-->
<!--需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
div{border:1px solid red}
span{border:1px solid red}
在标签中中定义id属性，然后在里面设置的属性值就是ID名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/index.css" />
</head>
<body>
<div id="IDxuanzeqi">
</div>
</body>
</html>
下面在index.css文件中写入CSS样式
#IDxuanzeqi{
width:100px;
height:100px;
background-color；red;
}
CSS选择器
标签名选择器
标签名选择器的格式是：
标签名{
属性：值；}
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>CSS选择器</title><!--表示标题-->
<style type="text/css">
div{
border:1px solid yellow;
color:blue;
font-size:30px;
}
span {
border:1px dashed blue;
color:red ;
font-size:30px;
}
</style>
</head>
<body><!--主体内容-->
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
ID选择器
id选择器的格式
id属性值
{
属性：值；
}
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>CSS选择器</title><!--表示标题-->
<style type="text/css">
#id001{
border:1px solid yellow;
color:blue;
font-size:30px;
}
#id002{
border:1px darkcyan dotted;
color:green;
font-size:30px;
}
span {
border:1px dashed blue;
color:red ;
font-size:30px;
}
</style>
</head>
<body><!--主体内容-->
<div id="id001" >div标签1</div>
<div id="id002" >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
CLASS选择器（类选择器）
class类型选择器的格式是：
class属性值
{
属性：值；
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式。
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>CSS选择器</title><!--表示标题-->
<style type="text/css">
.class01{
border:1px solid yellow;
color:blue;
font-size:30px;
}
.class02{
border:1px darkcyan dotted;
color:green;
font-size:30px;
}
</style>
</head>
<body><!--主体内容-->
<div class="class01" >div标签1</div>
<div class="class02" >div标签2</div>
<span class="class01">span标签1</span>
<span class="class02" >span标签2</span>
</body>
</html>
组合选择器
组合选择器的格式：
选择器1，选择器2，选择器n{属性：值；}
组合 选择器可以让多个选择器共用一个CSS样式代码。
<!DOCTYPE html><!--声明-->
<html><!--html标签表示html的开始 Lang="zh_CN"表示中文 HTML标签中一般分为两部分，分别是head和body-->
<head><!--表示三部分头部信息，title标签，css样式，js代码-->
<meta charset="utf-8" /><!--表示当前页面使用UTF-8字符集-->
<title>CSS选择器</title><!--表示标题-->
<style type="text/css">
.class01,#id01{
border:1px solid yellow;
color:blue;
font-size:30px;
}
.class02{
border:1px darkcyan dotted;
color:green;
font-size:30px;
}
</style>
</head>
<body><!--主体内容-->
<div class="class01" >div标签1</div>
<div class="class02" >div标签2</div>
<span class="class01">span标签1</span><br>
<span class="class02" >span标签2</span>
</body>
</html>
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
