IT兄弟连 HTML5教程 HTML和CSS的关系

HTML是描述网页的标记语言，是将内容放到网页上，虽然HTML本身也自带一些样式功能，通过自身的属性，来实现一些特定的效果，制作出来的只能是一个网页，而不是一个美观的网页。最主要的是在HTML里面，一些标签，它是有一定的语义化的，有些标签和属性不同浏览器兼容性上并不一样，在标签里面添加很多属性，造成文档内容复杂，使得独立于外观（表现层）的网站开发起来越发困难，为了解决上述困难，W3C在HTML4.0的基础上，研究出了样式，也就是CSS。所以现在，我们很清楚的可以知道他们之间的关系：

1．HTML定义网页的结构，主要让页面的内容结构化、块状化！

2．CSS控制HTML的标签，定义所需要的样式，使得结构和样式独立开来。

这样使得样式和结构分离，达到了我们的初衷，内容更加清晰可读。在有了CSS之后，我们会发现，给我们的站点的开发带来很多的好处。突出的优点包括：

1）CSS使得我们的内容更加清晰，代码可读性更高

主要原因是不用在标签里面写大量属性和重复性的代码。

2）提高了网页的浏览速度，减少了冗余的代码

在HTML里面，原本很多结构块，效果展示一致，只是内容变化，在HTML早期，是需要对每一块设置相同的属性，造成代码大量的冗余，文件的大小也自然有所增加，对页面的浏览速度有所减缓。

3）实现结构和样式的分离

HTML标签和CSS样式的独立，使得网站页面在开发和改版的时候，容易且简单。CSS没有出现独立之前，基本上页面改版就等于重做，或者只是局部的改动，根本不敢改，主要也修改起来很困难，所以开发会相对困难很多，CSS的出现，也就是实现了最初的宗旨“样式和结构分离”。

但是，我们要注意，CSS始终控制的标签，所以CSS离不开HTML，HTML没有CSS它是能有基本的效果，但自从有了CSS，控制出的页面更加美观，代码更加清晰可读，改版更容易，兼容性也更见好了。所以HTML和CSS，相辅相成，HTML控制结构，对整个网页搭建结构，CSS控制样式，为整个页面“穿衣服”。