本小节基本要求：
- 会使用webstorm工具
- 能运行一个有helloword的html文件
- 电脑安装一个浏览器(哪一种浏览器都可以，我用的是火狐)
- 刚开始学习的时候千万不要去扣细节，你一定要先学会比着葫芦画瓢，先将结果搞出来。这个当有工作了之后，自己一定会体会到的。
要点：
- 解释上篇文 ：https://www.toutiao.com/i6958248805733188135/
- css的作用是什么，html的作用是什么，什么是标签，解耦是什么
- 利用css+html两种小技术如何编辑出一个网站
通过举一个网站的例子来说明CSS与HTML的作用
打开网站(一定要用电脑浏览器)： https://ypt.ink/blog/index
Step1
进入网站后-》网站中鼠标点击右键，会弹出一个小框框-》选择检查
Step2
像我这样一层一层将<div id="g-topbar">下的内容展开
可以发现，当把鼠标放在“得之我幸”这个词语上的时候，网站会跳出一个内容
a#site-name.blog title 93.8867 x 20这弹出来的一行，可以将它视为代码。
这行代码的编写规定了，“得之我幸” 这个词语
- 必须显示在网站的左上角
- 字体颜色为白色，字体加粗，字体大小是14px
- 鼠标移动上词语时变得更亮
非常简单的含义，所以说编写一个整体的网站，本质上就是在用代码来规定图片该放在哪里，文字该放在哪里，视频该放在哪里等。
当所有部分都有了自己的位置后，一个网站就搭建成了。
小结
其中规定字体大小，颜色，位置的小技术就是CSS，这个被称为CSS样式文件。
“得之我幸”这个词语编写的位置，被称为html文件，就是说，所有的网站资源信息都要在html中编写，可以将这个html理解为一个框架。
来看一个简单的html框架，还是像上篇那样，建立一个新的html文件，取名header
可以得到以下信息
- 一个简单的html文件的结构
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
内容
</body>
</html>- 像<html></html>这种的称作html标签。
- title标签代表的是网站的名字，例如我的网站名字叫 ： 风吹火起云飞扬，你就可以将标签中间Title这个词语替换 风吹火起云飞扬。
- “得之我幸”这个词语是写在body标签中的，也就是说编写一个网站的所有内容，我们都要在body标签中写。
- meta标签代表的是-设置编码，utf-8 可以理解为中文编码
- head标签是头标签，最基本作用：引入css样式文件。
编写代码的时候有两种选择：
1、将CSS样式与html编写在一起
2、解耦，新建css文件，在css文件中编写网站样式，最后在html文件中的head标签中将css文件引进来。
可以看到，上图就是引入了一个名叫header.css的文件
ps：解耦的意思就是分离，目的就是达到分离编写，合并运行。这个词被Java语言体现的淋漓尽致。
下一篇（几行代码编写出网站header的雏形）：https://www.toutiao.com/i6958715269778833927/