前的文章我们介绍了很多关于html以及css的基础内容，从本篇文章开始我们要进行实战训练，我们实战第一篇文章要介绍的就是初始化我们的css代码；

1）为什么要初始化css代码

首先是因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

其次初始化CSS样式可以提高编码质量，保持代码的统一性，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

我们这里写一个ul标签以及a标签，来看一下默认在网页中的显示效果；

从上图我们可以看出a标签以及ul标签都有默认的样式效果，而且ul距离左侧有一段的空隙，如果我们不定义初始化效果的话每次都要进行单独的修改，这样会增加代码的重复度。

2）我们要怎么去做？

1、最简单的初始化css代码的方式是使用通配符（*），重置所有的初始样式。具体的css代码如下所示：

但是我们不建议这么书写：因为 *（星号）代表通配符表示了所有的标签，编写代码的时候也非常快，但是这样写有一个弊端，就是在网站比较大时，CSS样式文件也很大，这样写时，它会把所有的标签都初始化一遍，这样会加大网站运行的负荷，会让网站加载的时候需要很长一段时间。

2、初始化代码虽然个人习惯各有差异，但是大同小异，我们可以借鉴大公司的代码来直接使用即可。下面给大家列举下腾讯和淘宝的初始化代码仅供参考，后期可以根据个人习惯进行删减即可。

淘宝的初始化代码如下所示：

腾讯的初始化代码如下所示：

好了，本篇文章就给大家说到这里，大家自己下来可以自己模拟一下，找到适合自己使用的初始化代码。

每日金句：你20岁时偷过的“懒”，就是你30岁时会掉进去的“坑”。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

篇文章我们说了初始化css的创建，本篇文章我们来说一下如何创建一个初始化html的基本模版以及初始化文件的创建。

1）初始化html文件的创建

我们在对一个网页进行切图编码之前，我们需要创建这么几个目录文件， 便于存放我们的代码；

css文件目录：该目录的作用是用于存放我们的网页css文件，一般我们分为2个文件，一个是用于存放我们上篇文章说到的初始化代码的base.css，还有一个是用于存放我们自己编写的网页代码的style.css文件；

images文件目录：该目录的作用是用于存放我们网页的切图文件，网页中的背景图片以及元素图标等都可以存放到此文件夹中；

js文件目录：该目录的作用是存放我们编写的网页javascript代码（关于javascript代码我们将在以后的文章中进行详解），js代码的作用是实现网页中的基本动态展示效果，比如选项卡切换，banner轮播图切换等效果；

另外还有一个文件就是我们的网页html文件，首页我们一般命名为index.html，一般放于跟目录下边。标准的目录文件就如下图所示：

备注：如果你的电脑看不到.html这个后缀的话, 在文件夹左上角找到组织-文件夹和搜索选项；

然后点击查看-找到隐藏已知文件类型的扩展名-将前边的对勾去掉即可；

2）标准html模版的创建

文件创建完成之后我们就要创建标准的index.html的网页模版，一个网页模版一般是由主体html、头部head、内容body组成，其中head区域主要存放网页标题、关键词、页面描述以及css和js代码的引用；而body区域主要存放我们以后对页面的编码内容；

具体的标准模版显示效果就如下图所示：

好了，本篇文章就给大家说到这里，大家自己下来可以创建属于自己的通用初始化文件模版，以后开发的时候直接复制使用即可。

每日金句：不要生气要争气，不要看破要突破，不要嫉妒要欣赏，不要拖延要积极，不要心动要行动。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。