HTMLCSS简要教程【HTMLCSS培训教程】.docxVIP

HTML5 CSS3简要教程【HTML5 CSS3培训教程】Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。 我们可以在不使用内联font和br标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我 们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们 可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面就跟来看看是否真的能让我们 的设计提升到下一个高度吧…跟div说再见,欢迎语义化标签曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的div布局替代了table布局，并且开始调用外部样式表。但不 幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“div-soup” 综合症。也许你很熟悉下面的代码:divid=”news”divclass=”section”divclass=”article”divclass=”header”h1Div Soup Demonstration/h1pPosted on July 11th, 2009/p/divdivclass=”content”pLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./p/divdivclass=”footer”pTags: HMTL, code, demo/p/div/divdivclass=”aside”divclass=”header”h1Tangential Information/h1/divdivclass=”content”pLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./p/divdivclass=”footer”pTags: HMTL, code, demo/p/div/div/div /div尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值 得激动的是，HTML5解决“div-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的div标签，并同时为CSS的调 用提供了”自然”的CSS钩子。下面是兄弟连（）HTML5课程的解决方案实例:sectionsectionarticleheaderh1Div Soup Demonstration/h1pPosted on July 11th, 2009/p/headersectionpLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./p/sectionfooterpTags: HMTL, code, demo/p/footer/articleasideheaderh1Tangential Information/h1/headersectionpLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./ppLorem ipsum text blah blah blah./p/sectionfooterpTags: HMTL, code, demo/p/footer/aside/section /section正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的div标签。这种语义化的特性不仅提升 了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有 class和id的。正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的标签。这种语义化的特性不仅提升了我们网页的质量和语义