心路旅程
2021年8月1日，怀着紧张不安的心情，毅然决然的走上了程序猿的不归路；揣着这份心情上路犹如上刑场，但是想着以后拿着的工资是以前工作的几倍，苦逼的埋下了头继续坐着自己的位置上敲上了代码。 上了一个星期的课程以后，诶！突然发现也并不是那么难（可能是前期比较简单的缘故），顿时信心就上来了，加上自己有一点英语的基础，更是对这个东西产生了比较浓厚的兴趣。 我想说的是做事情真的是万事开头难，当你开始做了的时候，慢慢融入其中，可能是因为生活所迫，可能是因为逼不得已，但是生活不就是苦中作乐吗，当你想去学，想去提升自己的时候你会发现其实很多东西没有你想象的那么难！ 好了就这样吧，后面我会继续分享作为一个新手程序猿的苦逼和开心的时刻，同时我也会将我自己做的笔记和学习总结给大家发出来，供大家参考，如果有不好或者错误的地方欢迎大家指正并提醒我修改，谢谢大家！ 愿您早日暴富，有的是钱！
计算机语言
首先我们来说说，关于前端最基本的一些东西 W3C 制定web标准这是万维网组织，程序猿脱离不了的组织 HTML 是一种标记语言前段写代码必备的程序结构 CSS 是一种表示型语言HTML决定结构，CSS决定结构的样式 计算机也是“人”，但是他不懂我们人的语言就把他比作野人吧，俗话说江湖不是打打杀杀，是人情世故，怎么和野人打交道，要会野人的语言吧，HTML和CSS就是和这野人的爱恨情仇、人情世故和语言系统。
有语言总的有文字吧，元素就是和他们交流的文字 什么是元素呢：例如h1就表示标题一，h2就表示标题二，p就表示一段文章，告诉计算机，老子要在这个位置放一个标题，一段文章，他就明白了。
元素也是有分级的哦（俄罗斯套娃） 一图见分晓 元素嵌套：一个元素包含另外一个元素（标记或标签） 如下
<h1>
<h2>
<p>
</p>
</h2>
<h3>
</h3>
</h1>
元素的层次关系：父子（直接包含） 兄弟（拥有同一父元素） 祖先后代（直接或间接包含）
如上图 h1为h2、h3父元素 ，h2为p的父元素，相反为子元素；h2和h3互为兄弟元素；p则为h1的后代元素，h1是p的祖先元素 Ps.只要是逻辑清楚，被套进去的就是它而不是你 老话常常说我们做事说话要有始有终，程序语言同样有始有终
这是开始
这是结束 **看出什么了吗，结束就他妈多一个/，嘿嘿很好理解吧。** 语言肯定需要修饰，还记得你女朋友对你说的那一句“你这个大笨蛋” 是不是显得枯燥无味，那如果撒娇并且加点修饰词呢“您可真是个超级无敌可爱的大笨蛋呢”，是不是感觉骨头都酥了并且想和女友一起爱的鼓掌，o(*￣︶￣*)o，咳咳走远了不好意思，接下来就是计算机语言的修饰属性 属性：元素内容中额外的信息，一般写在开始标记里面，属性名与属性值用=号隔开，一个元素可以有多个属性
<html lang="en">
lang为html元素的属性名 “en”为html元素的属性值
CSS的引入和选择器
好了第一节关于计算机语言的总结就到这了，接下来请大家跟我深入了解一下HTML和CSS他们之间的爱恨情仇。 上文说到HTML决定语言的结构，也就是我们所写的页面结构，而CSS决定了结构里面内容的样式，好比你这个赤身裸体的人肉是HTML，CSS就是你身上穿的衣服，这就是他们的关系，那怎么把他们穿上呢！ 1.CSS外部引入（外联）——在head标签里通过link标签引入css
<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>正课01</title>
<link rel="stylesheet" href="01.css">
</head>
学到目前用的最多的穿上衣服的方式
2.内部样式表（内联）——在head标签里通过style标签书写css
<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>正课01</title>
<style>
p{
color: aqua;
font-weight: bolder;
}
</style>
</head>
和第一种异曲同工之妙，只不过不用额外建立CSS页面来书写
3.内嵌样式表（行内样式表）——在该元素的开始标记里通过style属性写入css
<p style="color:red;">
</p>
你身体最先感受到的是什么，是内衣内裤，所以内嵌的优先级最高（不穿内裤的当我没说）这也是精准打击。
4.导入样式表@import
三种样式表
优先级顺序：就近原则
内嵌>内部>外部
那有朋友就会问到：“那如果我写了很多一个标签的很多属性，我给它很多衣服，它到底该穿哪件呢？”
这位朋友问得好，接下来就给大家说说声明冲突，也就是衣服多了怎么选择 声明冲突：一个元素受多个规则影响，规则之间相同属性却不同
层叠：层叠是一种机制，用于解决CSS声明冲突
层叠的过程： 以下依次比较
1、比较优先级
2、比较特殊性
3、比较源次序
来源和重要性有关
优先级从低到高：浏览器默认声明
用户样式普通声明
作者样式普通声明
作者样式重要声明
用户样式重要声明
嵌入 | id | class| 元素
| ----------- | -- | ----- | -- | -- | | | a | 0 | 0 | 0 | | style | 1 | 0 | 0 | 0 | | id | 0 | 1 | 0 | 0 | | class/属性/伪类 | 0 | 0 | 1 | 0 | | 元素/伪元素 | 0 | 0 | 0 | 1 | | 通配符 | 0 | 0 | 0 | 0 | | ！important | 最高 | 最高 | 最高 | 最高
大家要记住这个表格哦（懂得都懂） 元素的衣服可以看做是一个次序列，例如（0,0,0,0） 数字越靠前，优先级越高，这件衣服就必须穿，如果加了！important，那就无脑穿这件衣服 一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
行内样式＞ID选择器>类选择器>元素选择器>通配符选择器
说完了穿哪件衣服，咱们就要说说穿在哪个部位了，或者说是穿在哪，不可能你内裤套头上，帽子穿脚上，上衣当成裤子穿吧！选择器就让我们能够精确的去告诉计算机我这个衣服要穿在哪 选择器 类名选择器（取类名）
1、不能是纯数字或数字开头
2.见名知意思
驼峰命名法 footerTop
蛇形命名法 footer_top
匈牙利命名法 footer-top
.footerTop{
color:red;
}
你一看英文单词你就知道你是选择的哪个
id选择器
#id名{声明块}
一个元素只能有一个id，不能重复
#snake{
color:red;
}
顾名思义，就像你的身份证一样，只能用一次同样的ID
子级选择器
父元素>子元素{声明块}
只能一级一级的选，不能越级
div>p{
color:red;
}
上文讲过父元素和子元素的关系，这就是选择父元素下的子元素
元素选择器 页面上所有的该元素都被选中
div {
border-collapse: collapse;
border-spacing: 0;
}
没别的意思，在坐的各位都是垃圾（所有一样名字的元素都将被选中）
*通配符选择器：选中该页面上的所有的元素（这个是大哥啊）
*{
padding: 0%;
margin: 0%;
}
后代选择器： 祖先元素 后代元素{声明块}
section p{
background-color: aqua;
}
子级选择器是父元素下面的子元素，这个是下面的所有后代元素都可以选择
并集选择器：同时选择多个元素 元素，元素，元素 或 选择器，选择器，选择器 或 元素，选择器
div，section，article{
background-color: black;
}
.part,.part2,.part3{
background-color:red
}
我和你，心连心，同住地球村
伪类选择器：选中众多子元素中的一个
div>p:first-child{
color: slateblue;
}第一个
div>p:last-child{
color: slateblue;
}最后一个
选择父元素下第一个或最后一个子元素
匹配父元素的第N个子元素
section>p:nth-child(1){
color: aqua;
} 括号写数字，数字是几就代表第几个
section>p:nth-child(){
color: aqua;
} 括号写odd或even，odd代表奇数，even代表偶数
section>p:nth-child(){
color: aqua;
} 括号写公式an+b，3n+1,3n等等
section>p:nth-of-type(){
color: aqua;
} 匹配父元素下的
选择父元素下中间的第几个子元素
这是学到目前最常用的选择器。（第一周学的东西可真多，大家放心还有呢！）
穿哪件衣服和穿在什么部位说完了，接下来说说衣服的颜色和尺寸（怎么选择颜色和大小）
颜色单位
1、关键字：直接在color后面加上颜色英文
color：red
2、HEX16进制：数字0-9 字母大小写 a-f
color: #a9a9a9;
3、RGB值（a表示颜色饱和度）：数字大小在0-250 最后的小数是颜色饱和度，大小在0-1
color: rgba(194, 194, 194,0.5);
4、HSL值：由hsl（）函数声明，色度Hue 0-360无单位数字表示色环，值表示颜色在色环上的角度
饱和度Saturation、亮度Lightness值从0-100%表示
长度单位
1、尺寸由长度和单位组成
绝对长度： px 一个像素的大小会根据设备的分辨率有所不同
其他尺寸单位，浏览器计算后都会变成px
计算机屏幕由很多小点组成，每个点就是像素
相对长度： %在不同的CSS属性中，有不同的含义
em相对于当前元素的字体大小(px)
rem相对于根元素的大小 color: #a9a9a9;
接下来咱们讲讲路径的问题 什么是路径？路径有什么用？大家都是经常surf in the Internet的人，应该会经常碰到需要插入图片或者游戏报错，计算机会告诉你是哪个文件夹里面的哪个文件出了问题，没错那就是路径。 就好像你从你自己家出发去朋友家做客，你需要开自己的门再开朋友家的门你才能到达目的地，在程序当中你要打开你本身的文件夹然后到另外个文件夹的门口然后进去选择你需要的文件。
**../** 表示返回上一级目录（从自己家出来去外面） **./** 表示在同一级目录（自己家）协议：//域名/目录
站外资源用绝对路径，站内资源用相对路径
好了 第一周的知识大概差不多就这么多了，欢迎各位大佬进来指正错误啊，如果觉得本Rapper写的好的话，希望大家多多鼓励支持！！ 爱你们兄弟伙些，瑞思拜ber些我儿豁！
