在开发网站的过程中，不断理解网站的代码构成，从抽象，逐步演变成头脑中的预览形象，这在不断的工作中逐渐积累，并为引导着对未来网页优化、演变的思考。

　　div是容器，它包含着内容

　　对网页中标签的理解，常见有table、div、ul+li这些可理解为容器，里面装着内容，如：h1-h6、p、a、img、b等内联标签。

　　而在开发中，为了节约标签增加减少维护层数，将p、a等内联标签赋予display:block的css属性，使之成为了块级元素，实际上也形成了一个容器。

　　现在最新的html5标签，如：header、footer、section、arcitle、nav等有语义的标签，也都是块级元素。在ie中为了兼容html5标签，也都用兼容性的脚本加上了display:block的属性才能生效，那么也可以理解为，这些元素也是容器。

　　既然容器的概念形成了，做为内部元素的包裹，再往上一级呢?应该就是body，body其实也可以理解为一个div，整个网页内容的容器嘛。

　　body再往上呢?就是html了，html也应该可以算作是容器，也可以加class，设置css属性，那其实，整个html里，都是容器套着容器，而核心所不同的，就是内容，这包含文本、图片、音频、视频、地图等一系列元素。

　　容器与内容，相辅相成，区别就是容器是结构控制，而内容是意义表达。

　　css的作用

　　单纯的容器与内容是单调的，做为修饰，就产生了修饰性的语言，css，针对容器进行样式调整，例如：长、宽、边框、间距、字体样式等。

　　在最新的css3中，可以用 .div-class:hover 这样来设置一个div的鼠标hover时的样式，在普通状态下字体大小12px，hover状态下字体14px，在div无hover的css中增加属性transition:all .2s ease-out，就会产生一个0.2秒的过渡效果。并且通过更多属性可以做到翻转、缩放、移动等诸多特效。

　　所以css不光可以修饰网页中容器、内容的表现形式，也可以进行动态效果的设定。

　　javascript的作用

　　javascript(以下简称js)起到控制、操作的作用，让容器、内容、css都“动”起来。

　　对于内容与元素的动画控制，在没有css3以前，打算做有过渡效果的文字放大、移动等动画效果，是需要js来完成的，后来有了jQuery，极大的简便了这一制作过程，如：$(‘div’).animate({‘font-size’:’14px’}, 200)，在0.2秒中将字体调整为14px，但由于最新的css3要比js的动画效果更平滑、准确，体验更好，但由于css3的效果仍有一定局限性，所以两者结合，将会产生更佳的效果。

　　js对内容的操作

　　js可以获取容器，并进行筛选，再深入可以对内容进行识别，触发不同的处理方法。

　　js另一个重要的作用就是容器内容的控制，它可以改变容器中的内容。也可以通过ajax技术获取新的内容，替换掉容器原有内容。

　　随之而来的思考

　　其实我们的浏览器也可以理解为一个容器，换来换去的只是地址栏，url而已，浏览器没变，变的是内容。

　　同样，把html做为容器，其实网站中许多页面变来变去的只是内容，而框架基本没变，但其实每一个html页面都把框架重新下载、加载了一次。

　　这是一种资源浪费。放大理解，可以理解为每次访问一个内容页，就是将浏览器重新下载了一次，再看到内容。

　　为何不把不变的固定，将变的用js动起来?

　　在网站制作中已经实践，如：http://www.igooda.cn/网站下方的新闻内容，点击后采用bootstrap的弹窗效果显示，ajax读取网站内部内容，而不用打开新页，并可以进行一些控制。

　　其实一大罪魁祸首就是搜索引擎，也就是常见的SEO技术，为了它的收录网站，并且能在搜索结构中被搜索到，只能依据它的要求制作。

　　但其实搜索引擎也在倡导标签简化、结构清晰，但真正将整站用ajax跑起来，还真是一件很有风险的事情。

　　目前，正在勇于尝试一种能够妥善解决搜索引擎收录问题且能最大化节约资源重复加载的方案。