展会信息港展会大全

《CSS实战精粹》读书笔记(一)详解
来源:互联网   发布日期:2016-03-25 15:53:32   浏览:2547次  

导读:一些有语义的html标签一些有语义的html标签是否真的需要div标签?是否真的需要一个class属性?自打CSS被越来越多的设计人员了解,在页面设计的时候,总是经常含有太多div标...

一些有语义的html标签

一些有语义的html标签

是否真的需要div标签?是否真的需要一个class属性?

自打CSS被越来越多的设计人员了解,在页面设计的时候,总是经常含有太多div标签或者是class属性。那么,在真实情况下,这些div标签是否真的有必要?这个class属性是否有必要加?在使用div时,根据上一条规则,你要想一下,在HTML中是否有比div更合适的标签存在,不要过分的迷恋div标签。

不要将单个元素包含进 div 标签中

上面只是书中的一个建议,其实有很多时候我们都并不需要div标签,看书中的例子吧:

<div id="menu">

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

</div>这样不是更好吗?还可以减少一层dom结构,要知道dom层次太多的话,无论是我们寻找DOM元素还是页面载入速度,都是有影响的。

<ul id="menu">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

程序员们还会在本该只需要在一个父对象上使用一次 class 属性的时候,在多个重复的元素中重复使用 class 属性

关于class属性的错误用法,这里也举一个示例吧,同样是抄的:

<ul>

<li class="cheese-type">Cheddar</li>

<li class="cheese-type">Mozzarella</li>

<li class="cheese-type">Parmesan</li>

<li class="cheese-type">Swiss</li>

</ul>这两种方法,哪个更优雅,自己想吧?

<ul class="cheese-types">

<li>Cheddar</li>

<li>Mozzarella</li>

<li>Parmesan</li>

<li>Swiss</li>

</ul>

不要忽略 DOCTYPE 标签

这里不解释HTML与XHTML的关系,也不说DOCTYPE标签使用的各种规范,如果感兴趣大家可以在这里找到 http://www.w3schools.com/tags/tag_DOCTYPE.asp。

自己写页面时,很少会写DOCTYPE标签,除非是IDE自动创建的,否则,真的懒的去写。用书中的话来讲就是:最被低估的标签。

那么,DOCTYPE标签到底能干什么?呵呵,这里网上相关的讨论很多,不再缀述,只是把W3C中的原话拿过来吧。呵。

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document.

For example, specifying the doctype of your document allows you to use tools such as the Markup Validator to check the syntax of your (X)HTML. Such tools won’t be able to work if they do not know what kind of document you are using.

But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a “standard” rendering mode.

现代Web文档的三层结构

一个Web文档一般由三个层次结构组成,其中(X)HTML是文档的结构层,CSS是文档的表现层,而JavaScript则是文档的行为层。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港