|
|
|||||||||||
|
|||||||||||||
| 当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
| CSS:HTML5语义化标记抛弃DIV标记 | |||
| 2009-9-2 11:44:07 文/佚名 出处:网页教学网 | |||
|
＜div id="news"＞ ＜div class="section"＞ ＜div class="article"＞ ＜div class="header"＞ ＜h1＞Div Soup Demonstration＜/h1＞ ＜p＞Posted on July 11th, 2009＜/p＞ ＜/div＞ ＜div class="content"＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜/div＞ ＜div class="footer"＞ ＜p＞Tags: HMTL, code, demo＜/p＞ ＜/div＞ ＜/div＞ ＜div class="aside"＞ ＜div class="header"＞ ＜h1＞Tangential Information＜/h1＞ ＜/div＞ ＜div class="content"＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜/div＞ ＜div class="footer"＞ ＜p＞Tags: HMTL, code, demo＜/p＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜/div＞ 尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“＜div＞-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的＜div＞标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例: ＜section＞ ＜section＞ ＜article＞ ＜header＞ ＜h1＞Div Soup Demonstration＜/h1＞ ＜p＞Posted on July 11th, 2009＜/p＞ ＜/header＞ ＜section＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜/section＞ ＜footer＞ ＜p＞Tags: HMTL, code, demo＜/p＞ ＜/footer＞ ＜/article＞ ＜aside＞ ＜header＞ ＜h1＞Tangential Information＜/h1＞ ＜/header＞ ＜section＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜p＞Lorem ipsum text blah blah blah.＜/p＞ ＜/section＞ ＜footer＞ ＜p＞Tags: HMTL, code, demo＜/p＞ ＜/footer＞ ＜/aside＞ ＜/section＞ ＜/section＞ 正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的＜div＞标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id的。 |
|||
| 最新热点 | 最新推荐 | 相关文章 | ||
| CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程：CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见？ CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
| 关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
|
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |
