HTML的领悟(HTML Mastery)[第一章第1节附加内容]
主翻译:水月あ无痕
协助翻译:MOMO
声明:本文档为爱好者翻译,请勿用于任何商业行为.
另,网络转载请在题目上方加亮注明链接.
以下行为在未得到译者的同意前是被禁止的:
1 电子书制作下载,电子书(带注释)将会在完结之后制作发布.
2 doc文档制作下载,doc文档(带注释)将会在完结之后制作发布.
3 平面媒体转载.
更多交流请发邮件到cqggff@gmail.com
MSN:cqggff@163.com
QQ:95526145
为了正确使用元素，标签以及属性，让我们说明一下在你书写（X）HTML时所应该注意的一些内容：ｄｉｖ，ｓｐａｎ，ｉｄ，ｃｌａｓｓ，ｂｌｏｃｋ和ｉｎｌｉｎｅ。作为一个网页设计师，你会经常它们，所以，知道它们是什么，有什么作用是至关重要的。
人们常常为这些内容烦恼，因为他们对它们的目的产生误解，或者使用它们的时候犯错误（举例来说，id只用于<div>而class只用于<span>。
Div和Span
Div和span是两个标签，如果运用得当，能够让你的页面看起来是良好逻辑的结构，并且以后能够更便利地增加一些额外的CSS以及特效。如果使用不恰当，则会让你的页面有很多不必要的垃圾信息，甚至会让你的布局，样式以及特效晦涩难懂。我会在第6章的时候详细解读这两个标签，这里，我将简单的指出它们之间的不同以及用法。
Div（division的缩写）被用作划分一块区域，就像文章里的分段一样，主部分，头部，尾部。显而易见的，它是一个区块元素（block element）。它能够被更深层的元素包容，甚至在必要的时候也包括div。但它不能被内嵌元素包容。
举个例子，一个简单的网页应该包含了一个头部（header），一个主框架（main column of content），一个二级内容框架（secondary column of content）以及一个尾部（footer）。这个（X）HTML样式会像下面这样：- <div id="header">
- ...
- </div>
- <div id="mainContent">
- ...
- </div>
- <div id="secondaryContent">
- ...
- </div>
- <div id="footer">
- ...
- </div>
Span被用来在一个区块元素中划分出一个小部分,有时也在一些内嵌元素内。它也是个内嵌元素，除了没有语义外，它和<em>，<strong>，<a>等元素是一样的——它就像一个简单的容器一样。它自己也能够包容内嵌元素，包括更多的span。
举个例子，你希望段落前两个字是红色，其他的字仍旧保持黑色，那么，你就可以使用span：- <p><span class="leadingWords">The first</span> two words of this a paragraph can now be styled differently.</p>
Div和span在微格式编排[ 微格式编排：原文为microformats]中被广泛的运用。我会在第5章中详细讲到。
区块和内嵌元素
简单来说，每一个元素在（X）HTML中都被一个盒子包裹，这个盒子有可能是区块层级（block-level）的，也有可能是内嵌层级（inline-level）的，你能够通过在CSS中定义边框或者轮廓看到它们的存在。这两者的区别很明确的在例图1里显示了出来。
例图1 盒子的模型清楚的把区块以及内嵌盒子展示了出来
一个区块盒子（block-level box），比如说div，段落或者一个头部，是以一个新行起始的并且迫使后面的元素在下面的新行开始。
这意味着如果是一个未被定义的页面，区块元素将会竖行依次靠左排列下来。它们也会膨胀以充满宽度来包容内部的元素。在没有CSS帮助的情况下是不能让两个层在同一行横向排列的。
一个内嵌盒子（inline-level box），比如<span>，<em>，在页面书写后会在没有任何强制行断命令（line-breaks）的情况下一字排开。内嵌元素更喜欢横向挪动而不是纵向，而且除非你在CSS中指出另外的排列方法或者它们被一个新的区块盒子所隔开。它们只占用它们内容一样大的空间。在没有使用CSS的情况下是不可能把两个相近的内嵌元素上下堆叠起来的。此外，这个元素是内嵌的话，如果你提供margin-top/bottom或者padding-top/bottom给它，是不会有作用的——margin或者padding只有对左右（margin-left/right或者padding-left/right）才会有影响。例图1-2展示了在例子中我给与了span padding 20px的情况下边框所产生的变化。
例图1-2 含有额外padding的内嵌元素
正如你所看到的一样，尽管它自身的盒子向四周膨胀了20px，顶部和底部却对周围的元素没有影响。
尽管你可以使用CSS使一个区块元素看起来像内嵌元素，反之亦然。但是你必须知道它并不能改变每个元素所拥有的含义。你仍然不能把一个div放入span中[ 插入/删除元素不是依靠前后的区块就是内嵌。如果你在区块中放入任意元素，那么它们就会扮演区块元素。但是如果你把它们放入区块元素或者内嵌元素中，它们只会扮演内嵌元素。我会在下章中重新详细讲述这两个元素。]。Id和Class属性
Id属性用于定义元素以及标注一个网站的功能区域，class属性则用于分类一个或多个元素。这个重要的属性会帮助你在使用样式或者特效的时候标注元素。我在整本书里都提及到这两个属性，但是现在你需要知道的是一个特殊的id元素每个页面只能使用一次，然而一个class属性却可以使用多次（这个属性本身可以在一个页面中使用多次）。比如，在页面开始时：
<body id="homepage">
之后你就不能再在同一页面的其他任何地方使用homepage这个id属性。然而，如果你用这个：
<body class="homepage">
这样你就可以在页面中自由的多次使用homepage这个class。但是请记住它仍然提供同样的CSS，不管你赋予了它什么样的标签。
当命名id或者class属性时，相比于它原本的名字而言，随心所欲的指定它的名字是非常诱人的，但是最好避免这样做。举个例子，像如下这样：
<div id="rightColumn">
<strong class="redText">
<p class="big">
不如使用下面的写法：
<div id="secondaryContent">
<strong class="important">
<p class="introduction">
为什么？很简单，当有一天你发现你需要<strong>元素不是红色而是蓝色，或者你想把你的二级目录从右栏换到左栏的时候——你会发现，你的id或者class名称将毫无效果。注意在XHTML中，你不可以以一个数字作为id名称的开头。所以像<body id="3columns">是错误的，<body id="columns3">是正确的。
<body id="homepage" class="page">
在CSS中这么定义它们，先命名它们然后在id的前面加上（#）前缀，在class的前面加上（.）前缀，像这样：
#homepage {
background: blue;
}
.page {
color: white;
}
这两个属性并不是捆绑在一个特殊的标签上，任何的标签都可以被赋予任一或者两个属性。 |
发表于 2008-7-28 09:46
| 
发表于 2008-8-22 23:00
| 
