理解css、div、javascript(js)，容器、内容与修饰，引起对将来网站的思考

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

　　div是容器，它包含着内容

　　对网页中标签的理解，常见有table、div、ul+li这些可理解为容器，里面装着内容，如：h1-h六、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跑起来，还真是一件颇有风险的事情。

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