HTML8初始化模板讲解 HTML8模板HTML文件与HTML代码介绍，CSS文件与CSS代码介绍，文件夹结构与用途。
（HTML8模板下载地址：进入下载）下载一份HTML8初始化模板解压后了解了解HTML代码和CSS代码。
对我们给大家模板的介绍及简单通过实例知道简单用法（我们以后都将以发给大家模板为基础开发制作）
一、index.html文件介绍
html没有什么说的
注意的是引入外部CSS文件我们用了LINK，注意正确路径
<link href="images/style.css" rel="stylesheet" type="text/css" />
然后我们看见html中有以下代码：
<script src="" type="text/javascript"></script>
此代码是引入外部JS的，这里我们直接给你们放入，如果要引入外部JS，只需“src="填入JS路径"”填入正确的JS路径即可。如果没有JS引入的需要就将此段代码删除。
至于为什么引入JS，我们后面的课程4我们将为大家介绍及运用。
接着有这么一段代码：
<div class="clear"><img src="images/s.gif" /></div>
相信大家看到这个就有点困惑，这个是什么，而"S.GIF"图片打开什么都没有看见
这里告诉大家这个是清除此段代码以上的内容左右产生浮动，以免以上内容往下掉，及产生空白，至于这个图片其实是有的他是1像素高宽的透明图片这样让此段DIV内的内容不为空的。课程4中我们会介绍到。
Clear的样式我们在以下为大家详解。
二、css文件里CSS代码（我们就每点逐个介绍）
给大家的CSS文件里一堆CSS代码是起初始化作用：避免我们不知道系统对html各个标签的默认CSS样式是什么，以免造成兼容问题，同时我们在运用的时候也不确定自己上面设置过这些标签样式没有，这样初始一次我们就可以心中有数，运用的时候再赋予想要CSS样式即可。
@charset "utf-8";这个是最顶部的CSS文件编码声明，说明如果你想使用GBK的编码格式，这里不但需要修改UTF-8，还需要使用DW软件转换下编码才能使用。一般新建需要编码的CSS文件，然后将原来不同编码的CSS代码拷贝如新建的CSS文件里保存覆盖即可。
/* HTML8-CSS初始化模板-yfnd.net */
这是一段注解，有说明意思无任何作用，大家可以先进入此文章了解下：//www.yfnd.net/css/32.shtml
body, div, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, table, th, td, form, input, button, select, textarea {margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}这段代码分别对body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea 等标签的CSS样式进行“零”初始化，我们可以认为是让这些标签的CSS属性归零。
这里我们设置这些标签的外补距离、内补白、字体、文字大小进行了“零”设置
ol, ul ,li{list-style: none;}
这里也是对列表属性设置他们样式也归零（初始化），当然如果要想前面显示数字、图标等我们在课程3中会详解
img {border: 0; vertical-align:middle;}
设置图片标签引入的图片进行边框归零、上下距离居中
body{color:#000000;background:#FFF; text-align:center;}
这里再次设置body内的内容文字颜色，背景颜色，内容的居中，这里需要注意设置内容居中“text-align:center;”非常重要，这个可以让主内容布局居中重要设置。
.clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;}
这里是刚刚在html里看到的一个class应用的属性clear，这个设置了清除浮动，并设置高度为1px，但这里又设置 margin-top:-1px;相对于没有高度，然后宽度为100%，设置一个overflow值hidden，隐藏超出内容。 作用就是清除浮动。
这里文章也涉及到关于overflow用法技巧：//www.yfnd.net/css/55.shtml 里的第4点：隐藏超出图片
接下来是：
a{color:#000000;text-decoration:none; }
a:hover{color:#BA2636;text-decoration:underline;}
分别设置了此网页的文本内容超链接的CSS样式，
这里设置了带超链接的文字“a{color:#000000;text-decoration:none; } ”-> 文字颜色为黑色与body设置内容字体颜色相同，没有下划线，但鼠标经过悬停（放到有超链接文字上）“a:hover{color:#BA2636;text-decoration:underline;}”->文字颜色为暗红色，并有下划线，当然这些你可以根据自己需要更改，根据你网页整体颜色和美工要求色彩更改。
.red ,.red a{ color:#F00;}
.lan ,.lan a{ color:#1E51A2;}
这个是设置红色和蓝色属性，分别设置如果加入此CSS样式，对象盒子内的内容无论是否有加超链接文字内容，该对象文字为红色或蓝色。
.dis{display:block;}
.undis{display:none;}
这是一个特效地方用到的，第一个是显示内容，第二个是隐藏内容
隐藏内容方法：//www.yfnd.net/css/55.shtml 这里也有详细介绍 关于隐藏内容方法
.lf{float:left;}
.rt{float:right;}
这个是设置浮动，第一个是往左浮动（居左），第二个为右浮动（局右），以下我们一会会以实例介绍
.pd5{padding-top:5px;}
这个是设置局上内补丁为5px
.box{margin:0 auto;clear:both;}
这个也是预设一个样式选择器，可有可无。
模板作用是 以后大家 无论是 实践 练习还是新建项目 都需要解压一份 在模板基础上写代码 完成项目。
三、使用大致步骤
1、拷贝解压一份HTML8模板
2、修改HTML代码和CSS代码
增加或减少适用于进行DIV CSS布局项目（字体颜色、背景、新建CSS选择器等）
3、在此基础进行DIV CSS布局
4、在布局中不断浏览器测试
5、直到完成布局项目。
四、使用模板目的
1、缩短新建项目时间
2、基本代码不会新建而出现拼写、新建错误
3、兼容更加好
4、减少前期准备时间
更多利弊需要您来发现。。。