马克思曾说，实践是检验认识的真理性的唯一标准，认识来源于实践，正确的认识指导实践才能获得成功。否则终将是纸上谈兵，镜花水月。
初衷
在学习了html、css和js的相关内容后，为了巩固自己的知识而进行的一系列项目实战训练，记录自己在开发中遇到的值得记录的知识点，希望自己能够在其中获得一些感悟和开发经验，以后在回顾时也能够知道在开发时存在哪些优点值得学习、记录，有哪些缺点需要改进、完善，从而避免自己重蹈覆辙。由于是小白起步阶段，若遇大佬经过能够指点一二，小白不胜感激。
项目开发要点是我在慕课网学习时由老师带领完成的众多项目中值得记录的一些点（自认为），比较简单，所以重要的是学习其中的开发思路和流程，还有一些细节。接下来就让我们开始吧。
开始
一、简单了解工作的开发流程
作为一名前端开发工程师，我们开发的每一条数据都不是拍脑袋就去写的，一定是从原型图和设计图精准测量的数据而得到的。而测量工具有哪些呢？
二、项目起步准备
创建文件夹结构，主要文件夹如下：
因此，我们可以在桌面上直接创造如上所示的文件夹结构：
然后，我们可以在VSCode编辑器中打开这个文件夹，在index.html文件中创建html骨架并保存：
好了，现在准备工作已经完成，接下来让我们正式进入开发阶段吧。
开发
一、网页的基础配置
在<head></head>标签中进行网页的一些基础配置：
1、网页标题、关键词、页面描述
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>慕云游商城-机票、酒店、旅游攻略</title> <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行"> <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务"> </head>
1）设置网页标题，文字会显示在浏览器的标签栏上；
2）搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。
3）合理设置网页的关键词和页面描述，也是SEO的重要手段。
SEO (Search Engine Optimization，搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益
例如：当我搜索慕课网时
查看它的源代码发现
因此，合理设置这些基础配置也是十分重要的，都是SEO的重要手段，利于搜索引擎抓取。
2、css文件的起步创建
1）不同的浏览器对每种的标签都有默认的样式。大部分的浏览器默认样式还有点区别，所以为了让所有的默认的标签清零，也就是重置，以便于我们后续的开发与管理，一般都会在所以的网站—开始对所有的标签做—下重詈操作。
在css文件夹中创建reset.css文件，将所有带有默认样式的元素复位
可以使用雅虎清除样式库：百度 yui reset
http:l/yuilibrary.com/yui/docs/cssreset/
http:lyui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
将里面的代码复制到reset.css文件中，（职业道德-注释里的内容不要删）
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{text-decoration: none;}
再将reset.css文件引入到index.html文件中
2）创建base.css文件，里面可以放置一些公共类，用来实现常见的功能，例如清除浮动，原子类，版心设置，所需要的自定义字体。。。按照自己的习惯设置，语义化的类名，方便设置使用管理。
一个标签可以同时使用多个类，因此只需要给标签设置多个公共类，就可以同时使用这些样式。
body {
font-family: "PingFangSCRegular";
}
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.tac {
text-align: center;
}
... ...
然后再引入到index.html中
3）创建css.css文件，这里面则是主要的开发页面的样式。
然后再引入到index.html中
<head> ... ... <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/css.css"> </head>
接下来就可以正式开始网页布局开发