从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
- 前言：
- 第一节课：整堂课主要是讲了HTML的框架
- - 一、安装VS Code
  - 二、安装需要的插件
  - 三、讲解html标签
  - 四、练习

前言：

本博主目前是一名大四在校生，目前实习已经半年，但是实习单位的大哥同事跟我说大学毕业的第一份工作很重要，让我再学习学习，试着面试一下其他公司，但是我可是一个实实在在的小菜鸡，基础很差，面试了20多个公司都没有通过，甚至有的笔试也没有通过，然后就报名了一个补习班，结果发现课程太过基础，而且战线拉得很长，按照一周三节课的节奏，而且知识还很基础，感觉等我毕业了，可能学的都没我现在会的多，但是老师讲的的确很细，知识点讲得很透彻，对于夯实基础知识很棒，所以就觉得还是有必要做一个总结的，个人见解，不喜勿喷勿看勿听。

第一节课：整堂课主要是讲了HTML的框架

一、安装VS Code

安装了一下VS Code:
VSCodeSetup-x64-1.63.2.exe：
链接：https://pan.baidu.com/s/1e3vcqYdtnjKaVKR6EYeOKQ
提取码：ebpk
VSCodeUserSetup-x64-1.62.3.exe：
链接：https://pan.baidu.com/s/1uO9EONXPRisFoe_trzSkRQ
提取码：siyk
压缩包：
链接：https://pan.baidu.com/s/13JXzyzQDMurO1PdcpuDAVA
提取码：iqzn

第一个是system版本，权限比较大即admin，
第二个是user版本，只有安装人员可以使用，即guest~，
两者除此外并无其他区别，均可安装。
前两个直接点击安装即可，最后一个将压缩包解压到想要的位置，然后找到code.exe,发送到桌面快捷方式，双击即可使用。

二、安装需要的插件

双击打开界面后，找到如下图标：

1.安装汉化插件—Chinese
刚打开时，VS Code是英文的，我i们需要安装如下的汉化插件，直接在搜索框搜索Chinese即可找到：

2.安装在浏览器中打开插件—open in browser
搜索 open in browser 即可找到
使用方法，写了一个html网页，快捷键ALT+B即可在默认浏览器打开已编辑的html文件的效果图。

3.安装浏览器实时更新插件—live server

安装此插件之后,VS Code右下角有Go Live，点击后即可实时更新，编辑完文件后直接CTRL+S保存文件，即可实时更新浏览器的视图

4.自动补全代码插件—Auto Rename Tag

三、讲解html标签

<!DOCTYPE html>

是HTML的声明，HTML的大小写不敏感，所以大写小写都可以，但是作为一个严谨的程序猿，一定要从零开始养成好习惯，声明的DOCTYPE是大写，！是英文感叹号，

单标签/双标签

定义：

单标签：即只有一个标签组成。
双标签：是由一个开始标签一个结束标签组成。

常见的单标签有：meta、hr、img、
常见的双标签有：html、head、body、title、p、h、

html布局

一般我们将网页的名字写在head中，将需要展示的内容写在body中，然后最外层都是html标签。

快速搭建html框架—vscode怎么快速生成html框架

创建html格式文件然后输入!选择！回车即可，

选择一个!，生成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>
</head>
<body></body>
</html>

选择!!!，生成html的声明

<!DOCTYPE html>

最常使用的标签title、p、h、（html、head、body）。

h可以分为h1~ h6,分别为1~6个等级。

<!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>
</head><body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><p>段落</p>
</body></html>

其中只有h可以分为h1~h6，其余不分等级。

四、练习

骆驼祥子前三段落

文本：

骆驼祥子第一节《骆驼祥子》是老舍先生著名小说。该剧紧紧围绕主人公祥子买车、失车三起三落的坎坷经历，展示处于二十年代军阀混战时期人力车夫的悲惨生活。 小说中故事情节、矛盾冲突、人物关系均以祥子为中心铺排展开， 以确保祥子的主角地位，塑造祥子的复杂性格。并通过他与虎妞、小福子的感情纠葛、离合悲欢，演绎了一场人生悲剧。我们所要介绍的是祥子，不是骆驼，因为“骆驼”只是个外号；那么，我们就先说祥子，随手儿把骆驼与祥子那点关系说过去，也就算了。 北平的洋车夫有许多派：年轻力壮，腿脚灵利的，讲究赁漂亮的车，拉“整天儿”，爱什么时候出车与收车都有自由；拉出车来，在固定的 “车口”（注：车口，即停车处。）或宅门一放，专等坐快车的主儿； 弄好了，也许一下子弄个一块两块的；碰巧了，也许白耗一天，连“车份儿” 也没着落，但也不在乎。这一派哥儿们的希望大概有两个：或是拉包车；或是自己买上辆车，有了自己的车，再去拉包月或散座就没大关系了， 反正车是自己的。比这一派岁数稍大的，或因身体的关系而跑得稍差点劲的，或因家庭的关系而不敢白耗一天的，大概就多数的拉八成新的车； 人与车都有相当的漂亮，所以在要价儿的时候也还能保持住相当的尊严。 这派的车夫，也许拉“整天”，也许拉“半天”。 在后者的情形下，因为还有相当的精气神，所以无论冬天夏天总是“拉晚儿”（注：拉晚儿，是下午四点以后出车，拉到天亮以前。）。 夜间，当然比白天需 要更多的留神与本事；钱自然也多挣一些。 年纪在四十以上，二十以下的，恐怕就不易在前两派里有个地位了。他们的车破，又不敢“拉晚儿”， 所以只能早早的出车，希望能从清晨转到午后三四点钟，拉出“车份儿”和自己的嚼谷（注：嚼谷，即吃用。）。 他们的车破，跑得慢，所以得多走路，少要钱。到瓜市， 果市，菜市，去拉货物，都是他们；钱少，可是无须快跑呢。在这里，二十岁以下的——有的从十一二岁就干这行儿——很少能到二十岁以后改变成漂亮的车夫的，因为在幼年受了伤，很难健壮起来。他们也许拉一辈子洋车， 而一辈子连拉车也没出过风头。那四十以上的人， 有的是已拉了十年八年的车，筋肉的衰损使他们甘居人后，他们渐渐知道早晚是一个跟头会死在马路上。他们的拉车姿式， 讲价时的随机应变，走路的抄近绕远，都足以使他们想起过去的光荣，而用鼻翅儿扇着那些后起之辈。 可是这点光荣丝毫不能减少将来的黑暗，他们自己也因此在擦着汗的时节常常微叹。 不过，以他们比较另一些四十上下岁的车夫，他们还似乎没有苦到了家。这一些是以前决没想到自己能与洋车发生关系，而到了生和死的界 限已经不甚分明，才抄起车把来的。被撤差的巡警或校役， 把本钱吃光的小贩，或是失业的工匠，到了卖无可卖，当无可当的时候，咬着牙，含着泪，上了这条到死亡之路。这些人，生命最鲜壮的时期已经卖掉，现在再把窝 窝头变成的血汗滴在马路上。没有力气， 没有经验，没有朋友，就是在同行的当中也得不到好气儿。他们拉最破的车，皮带不定一天泄多少次气；一边拉着人还得一边儿央求人家原谅，虽然十五个大铜子儿已经算是甜买卖。 此外，因环境与知识的特异， 又使一部分车夫另成派别。生于西苑海甸的自然以走西山，燕京，清华，较比方便；同样，在安定门外的走清河，北苑；在永定门外的走南苑……这是跑长趟的，不愿拉零座；因为拉一趟便是一趟，不屑于 三五个铜子的穷凑了。可是他们还不如东交民巷的车夫的气儿长，这些专拉洋买卖（注：从前外国驻华使馆都在东交民巷。）的讲究一气儿由交民巷拉到玉泉山，颐和园或西山。气长也还算小事， 一般车夫万不能争这项生意的原因， 大半还是因为这些吃洋饭的有点与众不同的知识，他们会说外国话。英国兵，法国兵，所说的万寿山，雍和宫，“八大胡同”，他们都晓得。他们自己有一套外国话， 不传授给别人。他们的跑法也特别，四六步儿不快不慢，低着头， 目不旁视的，贴着马路边儿走，带出与世无争，而自有专长的神气。因为拉着洋人，他们可以不穿号坎，而一律的是长袖小白褂， 白的或黑的裤子，裤筒特别肥，脚腕上系着细带；脚上是宽双脸千层底青布鞋；干净，利落，神气。 一见这样的服装，别的车夫不会再过来争座与赛车，他们似乎是属于另一行业的....

答案：

这是我做出来的，在网上搜了一些相关图片，又多余添加了一些样式。
源码：

<!DOCTYPE html>
<head><meta charset="utf-8"/><title> Day01</title><style type="text/css">.pstyle{background: rgba(245, 229, 160, 0.3);/* color: rgb(115, 167, 235,0.7); */}body{background-image:url( https://img.51miz.com/Photo/2018/02/07/12/P1321680_db55ac78c76126ad38c06919e48ac50c.jpg );background-size: 100% ;font-size: 15px;}</style>
</head>
<body class="body">
<!-- <img  src=" https://img.51miz.com/Photo/2018/02/07/12/P1321680_db55ac78c76126ad38c06919e48ac50c.jpg "  alt="显示网络上的图片" /> --><h1>骆驼祥子</h1><h2>第一节</h2><p class="pstyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《骆驼祥子》是老舍先生著名小说。该剧紧紧围绕主人公祥子买车、失车三起三落的坎坷经历，展示处于二十年代军阀混战时期人力车夫的悲惨生活。小说中故事情节、矛盾冲突、人物关系均以祥子为中心铺排展开， 以确保祥子的主角地位，塑造祥子的复杂性格。并通过他与虎妞、小福子的感情纠葛、离合悲欢，演绎了一场人生悲剧。</p> <p class="pstyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们所要介绍的是祥子，不是骆驼，因为“骆驼”只是个外号；那么，我们就先说祥子，随手儿把骆驼与祥子那点关系说过去，也就算了。 北平的洋车夫有许多派：年轻力壮，腿脚灵利的，讲究赁漂亮的车，拉“整天儿”，爱什么时候出车与收车都有自由；拉出车来，在固定的“车口”（注：车口，即停车处。）或宅门一放，专等坐快车的主儿； 弄好了，也许一下子弄个一块两块的；碰巧了，也许白耗一天，连“车份儿”            也没着落，但也不在乎。这一派哥儿们的希望大概有两个：或是拉包车；或是自己买上辆车，有了自己的车，再去拉包月或散座就没大关系了， 反正车是自己的。        </p><p class="pstyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比这一派岁数稍大的，或因身体的关系而跑得稍差点劲的，或因家庭的关系而不敢白耗一天的，大概就多数的拉八成新的车；            人与车都有相当的漂亮，所以在要价儿的时候也还能保持住相当的尊严。 这派的车夫，也许拉“整天”，也许拉“半天”。在后者的情形下，因为还有相当的精气神，所以无论冬天夏天总是“拉晚儿”（注：拉晚儿，是下午四点以后出车，拉到天亮以前。）。夜间，当然比白天需 要更多的留神与本事；钱自然也多挣一些。 年纪在四十以上，二十以下的，恐怕就不易在前两派里有个地位了。他们的车破，又不敢“拉晚儿”，所以只能早早的出车，希望能从清晨转到午后三四点钟，拉出“车份儿”和自己的嚼谷（注：嚼谷，即吃用。）。 他们的车破，跑得慢，所以得多走路，少要钱。到瓜市，果市，菜市，去拉货物，都是他们；钱少，可是无须快跑呢。 </p><p class="pstyle">          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这里，二十岁以下的——有的从十一二岁就干这行儿——很少能到二十岁以后改变成漂亮的车夫的，因为在幼年受了伤，很难健壮起来。他们也许拉一辈子洋车，而一辈子连拉车也没出过风头。那四十以上的人， 有的是已拉了十年八年的车，筋肉的衰损使他们甘居人后，他们渐渐知道早晚是一个跟头会死在马路上。他们的拉车姿式，讲价时的随机应变，走路的抄近绕远，都足以使他们想起过去的光荣，而用鼻翅儿扇着那些后起之辈。 可是这点光荣丝毫不能减少将来的黑暗，他们自己也因此在擦着汗的时节常常微叹。不过，以他们比较另一些四十上下岁的车夫，他们还似乎没有苦到了家。这一些是以前决没想到自己能与洋车发生关系，而到了生和死的界 限已经不甚分明，才抄起车把来的。被撤差的巡警或校役，把本钱吃光的小贩，或是失业的工匠，到了卖无可卖，当无可当的时候，咬着牙，含着泪，上了这条到死亡之路。这些人，生命最鲜壮的时期已经卖掉，现在再把窝 窝头变成的血汗滴在马路上。没有力气，没有经验，没有朋友，就是在同行的当中也得不到好气儿。他们拉最破的车，皮带不定一天泄多少次气；一边拉着人还得一边儿央求人家原谅，虽然十五个大铜子儿已经算是甜买卖。 此外，因环境与知识的特异，又使一部分车夫另成派别。生于西苑海甸的自然以走西山，燕京，清华，较比方便；同样，在安定门外的走清河，北苑；在永定门外的走南苑……这是跑长趟的，不愿拉零座；因为拉一趟便是一趟，不屑于 三五个铜子的穷凑了。可是他们还不如东交民巷的车夫的气儿长，这些专拉洋买卖（注：从前外国驻华使馆都在东交民巷。）的讲究一气儿由交民巷拉到玉泉山，颐和园或西山。气长也还算小事，一般车夫万不能争这项生意的原因， 大半还是因为这些吃洋饭的有点与众不同的知识，他们会说外国话。英国兵，法国兵，所说的万寿山，雍和宫，“八大胡同”，他们都晓得。他们自己有一套外国话，不传授给别人。他们的跑法也特别，四六步儿不快不慢，低着头， 目不旁视的，贴着马路边儿走，带出与世无争，而自有专长的神气。因为拉着洋人，他们可以不穿号坎，而一律的是长袖小白褂，白的或黑的裤子，裤筒特别肥，脚腕上系着细带；脚上是宽双脸千层底青布鞋；干净，利落，神气。 一见这样的服装，别的车夫不会再过来争座与赛车，他们似乎是属于另一行业的....</p>
</body>
</html>

预习：从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 — 今天你学习了吗？（CSS：Day02）

欢迎大家跟我一起学习~

------合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。

从零开始学前端： HTML框架和VS Code安装 --- 今天你学习了吗？（CSS：Day01）相关推荐

从零开始学前端：购物车和鲜花价格排序 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录从零开始学 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录从零开始学前端 ...
从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录从零开始学前端:程序猿小白也可以 ...

从零开始学前端： HTML框架和VS Code安装 --- 今天你学习了吗？（CSS：Day01）