前言
码神也是开学快一个周了，好长时间没有更新了，由于刚来院长让我去打蓝桥杯，感觉也算是一个机会吧，但是前端弄了一半多，还是比较喜欢的，所以说想把前端弄完再重新回到高中刷算法的时光，今天借着大学生心理课的时间来更新一下Html和CSS，感谢大佬们，给我的鼓励！我定不负你们的期望，由于时间问题，话不多说，我们开车吧！
网页的结构
网页的结构，应该算是比较简单的，虽然我没有写过一个正经的网页，目前主流的网页结构是由Html，CSS，js（JavaSprint）写的，大致的结构如下：
HTML
相信大家对HTML都并不陌生，在我映像里初中的时候老师写的第一个网页就是用HTML写的，如今过去好多年了，我也用HTML写网页了 ，哈哈。
其实吧，通过这几个周的自学下来，我感觉如果不从事前端开发，工作，能认识HTML中的关键字就行了，俗话说的：术业有专攻嘛！
所以说我帮大家整理了，大致有如下的：
常用标签
1.题目：
用英语来记忆的话就是，单词——head，意思是头部的，有几个特点是
- 标题默认加粗，字号变大
- 标题一般独自占一行
//用代码来看一下就是这样的
<h1>用代码来看一下就是这样的</h1>2.段落和换行
由于一般我们不可能一句话，就写完，或者说完，所以又引入了，段落标签，p ,/p不要误会啊，我可不是光会放屁的，这是英语中paragraph是缩写，意思是段落，作用就是：给HTML文档分段
特点就是：
- 可以根据浏览器的窗口大小，自动换行
- 段落和段落之间保持一定的空隙
俩个盒子
有朋友可能要说了，怎么是个盒子？实际上这是我自己瞎写的，哈哈，这俩个盒子是HTML中的《div》《/div》，《span》《/span》标签。
用英文来解释的话是，div——division，表示分割分区，span意思是跨度，跨距
有一点的区别
- div在h5中一行只能放一个，又称为大盒子
- span可以放多个，所以可以称为小盒子
CSS
我不知道你们有没有见过化妆之前和化妆之后的女生，反正我没有见过，不过这可能真的是一个看颜值的时代，我们班就有一个，因为化妆之后比较哈皮的女生，因为这个当上了我们班的负责人，可以说是班助代理人吧，这当然也可能是我至今单身的原因了，唉 ，不说了，一会又要流泪了。
可以说css就是化妆品，而html是女生，相信我说到这里屏幕前的彦祖，已经知道css是社么了吧，没错css就是网站的化妆品，
使用规范
实际上也就是俩个部分组成：
- 选择器
- 一条或多条声明
用一段简单的代码来表现就是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.pink {
width: 100px;
height: 100px;
background-color: pink;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="pink"></div>
<!-- <div></div>就是一个盒子 -->
</body>
</html>style中的都叫选择器，而在body中调用，class=”red“，我们又讲其称为，调用选择器，.red，为选择器声明
其中选择器又分为，许多种，由于这篇文章并不是html和css全解所以我就不在赘述了，有需要的朋友们可以看一下head frist html css这本书我感觉讲的不错，挺适合入门学习的。
标签选择器
这个就是，用HTML中的标签来做选择器的标签，这么做有什么好处？相当于你可以直接修改用这个标签的所有元素，避免了再次使用标签，优缺点也比较搞笑
- 优点：可以对某一类标签进行统一改造
- 缺点：缺少了差异性
实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: pink;
}
</style>
</head>
<body>
<p>gaizao</p>
<p>jj</p>
</body>
</html>id选择器
不知道为什么就是控制不住的想写，，如果说按照名字和身份证来看id和class的话，我感觉就很可以，就比如说我叫码神，你也叫码神，那么我们就重名了，但是我的id：秋名山码神，而你是：华山码神，这样我们就区分开了，所以说id和class的区别就是
- id定义一次只能调用一次，而class定义一次可以调用多次
用代码实现就是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-id选择器</title>
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
</head>
<body>
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>通配符
有没有让我所有的类，都进行改变的？答案是有。通配符，*就可以实现
<style>
/* 样式点定义 */
*{
color: red;
}
</style>总结：
字体
比较多，学了几个周，给我的感觉就是比较多，记得东西不能说少，
先看吧，
- color：颜色
- text-align：对齐
- text-indent：文本缩进
- text-decoration: 文本修饰
- line-height：行间距
- decoration规定添加到文本的修饰
none没有
underline下划线
overline上画线
line-through删除线
最后
由于这只是我自己的一篇简单的看法文章，所以有许多没有讲到的地方，如果想要系统的学习，还是希望大家去看我上面推荐的书或者去W3school网站中系统的学习，开学的时光感觉没有以前的冲劲了，但是我还会努力的，希望你们和我一样一起加油，提升自己的技术， 将来赚大钱，进大厂！
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)