本节介绍编写一个静态网页的过程和注意事项
- 分析网站内容以及细节
- 准备好网页前期工作
- 区分好功能区块的细节以及布局
- 网站完成寻找bug，以及总结制作网站过程中的问题
1.分析网站内容以及细节
了解网页的每一块内容，区分好每一块功能区，每一块内容脑海中大概回想一下怎么布局做出来，注意每一块功能区的细节以及特点，有什么作用。从上到下，从左到右依次大概布局。
graph TD
开始浏览整个页面 --> 从上到下,从左到右观察 --> 脑海中想好大概的布局方式 --> 分析好每一块功能区的细节以及难点怎么解决
- 有网页作为参考：打开控制台， 从上到下,从左到右观察，分析这个网站结构，功能区有哪些难点，布局方式按照自己的来，但是要效果与网站一致。
- 只有图片作为参考： 从上到下,从左到右观察，这种情况要对布局方式熟悉，以及对图片分析了解到位，注意图片的细节。
2.准备好网页前期工作
创建好一个项目文件夹，里面存放好一个HTML文件，两个css文件等项目文件，区分好网页的每一块功能区的盒子，要用样式注释出功能区的作用，以及HTML有利于seo的标签使用
graph TD
创建好一个项目文件夹 --> 创建好一个HTML文件,两个css文件等项目文件--> 列出每一块功能区的盒子,用注释标明功能区作用,以及seo优化的标签使用
- html：命名好HTML文件名字，并且把HTML基本骨架编写好在HTML文件中,注意doctype文档类型和title网页标题以及meta的使用，一开始建议不要快速生成基本骨架。
- css：创建好两个css文件，一个用于重置样式，一个用于重置样式编写。一般用link连接css文件，比用@import加载快。注意功能区样式要和HTML功能区代码用注释标明出来
- 将网页的每一块功能区的HTML和css一致标明出来，有利于后期维护，要想好怎么布局方式，让结构简洁明了。
3.区分好功能区块的细节以及布局
开始嵌套功能区的代码，注意好编写格式，要整体清晰整洁，嵌套关系要明朗，区域盒子的id、class要命名好，每一块区域的功能最好也标明出来，布局从上到下,从左到右，注意h1-h6的使用这个权重是非常重要的。
布局方式：一般用浮动，定位，弹性布局等布局方式灵活运用，注意网页的细节，避免出现bug。
graph TD
利用大框套小框进行居中布局 --> 区分好代码区域进行注释标明--> 从上到下,从左到右进行布局--> id和类根据功能区域命名--> 灵活运用h标签 -->注意细节避免出现bug
- 区分好功能区的每一小块代码区域
- id和class不能随便取名字，根据功能区的内容作用命名，有利于后期维护
- 功能区框架要布局好，利用大框套小框居中方式，从上到下，从左到右进行布局
- 利用好h1-h6标签的权重，不要重复使用，一个网站使用一次
- 遇到代码区域一致，只增加一些细节区域不用重复编写，可以复制加上一些细节区域或样式代码即可
- 了解好网站的特点细节，避免出现bug
- 编写遇到问题记得标明注释，着重解决，日后遇到同样问题好解决
4. 网站完成寻找bug，以及总结制作网站过程中的问题
- 网页编写结束寻找网页bug，有网页参考就对照网页哪一块功能区域细节不一致进行解决。
- 对整体代码进行预览分析这个网页我是怎么写出来的
- 对网页遇到哪些bug当初标明出来的进行回想及解决
- 遇到新的知识点需要记入笔记，活到老学到老，以便日后需要
