CSS基础 - 设计代码结构
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础 - 设计代码结构相关的知识，希望对你有一定的参考价值。
- 设计代码结构
- 有意义的文档的重要性
- 命名约定
- 什么时候使用ID和类名
- 微格式
- html CSS的不同版本
- 文档类型 DOCTYPE切换和浏览器模式
微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以 下事情：
- 在爬取Web内容时，能够更为准确地识别内容块的语义；
- 对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的：
<a href=”http://www.5icool.org” >Web Design Blog</a>
而现在我们要为这个代码元素<a>加上rel属性。
<a href=”http://www.5icool.org“ rel=”homepage”>Web Design Blog</a>
| 值 | 描述 |
|---|---|
| alternate | 文档的可选版本（例如打印页、翻译页或镜像）。 |
| stylesheet | 文档的外部样式表。 |
| start | 集合中的第一个文档。 |
| next | 集合中的下一个文档。 |
| prev | 集合中的前一个文档。 |
| contents | 文档目录。 |
| index | 文档索引。 |
| glossary | 文档中所用字词的术语表或解释。 |
| copyright | 包含版权信息的文档。 |
| chapter | 文档的章。 |
| section | 文档的节。 |
| subsection | 文档的子段。 |
| appendix | 文档附录。 |
| help | 帮助文档。 |
| bookmark | 相关文档。 |
| nofollow | Google 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接。 |
| licence | |
| tag | |
| friend |
hCard是一种微格式，用来发布个人，公司，组织，地点等详细的联系信息。它可以包含在(X)HTML，Atom，RSS等可扩展置标语言中。hCard使用vCard（RFC 2426）的属性和值来实现这些功能。
它可以使分析器（比如其他网站，Firefox的Operator插件）获得详细的信息，并通过别的网站或者地图工具进行显示，或者载入到地址簿等其他程序。
示例一
如下HTML代码：
<div>
<div>Joe Doe</div>
<div>The Example Company</div>
<div>604-555-1234</div>
<a href="http://example.com/">http://example.com/</a>
</div>
加入微格式后，成为：
<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/</a>
</div>
这里，正式名称（class=”fn”），组织（class=”org”），电话号码（class=”tel”）和url（class=”url”）分别用相应的class标示；同时，所有内容都包含在class="vcard"里。
示例二
这里是维基媒体基金会的联系方式，可以作为hCard的一个真实示例：
Wikimedia Foundation Inc.
200 2nd Ave. South #358
St. Petersburg, FL 33701-4313
USA
Phone: +1-727-231-0101
Email: [email protected]
Fax: +1-727-258-0207
加入微格式后，成为：
<div class="vcard">
<div class="fn org">Wikimedia Foundation Inc.</div>
<div class="adr">
<div class="street-address">200 2nd Ave. South #358</div>
<div>
<span class="locality">St. Petersburg</span>,
<span class="region">FL</span> <span class="postal-code">33701-4313</span>
</div>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-727-231-0101</span></div>
<div>Email: <span class="email">[email protected]</span></div>
<div>
<span class="tel"><span class="type">Fax</span>:
<span class="value">+1-727-258-0207</span></span>
</div>
</div>
注意，在这个例子中，正式名称（class=”fn”）和组织（class=”org”）写在了一个属性中，表示这是一个组织，而不是个人。
其他常用的hCard属性包括：
bday– 生日emailhonorific-prefix-（西式）名字前的尊称，例如：博士（Dr.）、牧师（Rev.）等，在东方会放在名字的后方。honorific-suffix-（西式）名字后的尊称，一般都是封衔，例如：太平绅士（JP）、大紫荆勋章（GBM），一般详列在名字的最后方。logonickname– 昵称、爱称或外号。西方人的名字一般都有简写，有时这些昵称或外号就用来分辨同名的人。例如：William “Bill” Gates 中间的”Bill”。notephotopost-office-box
Geo也可以被包含在hCard中，表示某个地址的坐标。Geo是一种在HTML和XHTML中标记WGS84地理坐标（经度，纬度）的微格式。尽管属于“草案”，其格式是稳定的并已经被使用。它还可以作为hCard微格式的一个子集。
以上是关于CSS基础 - 设计代码结构的主要内容，如果未能解决你的问题，请参考以下文章