7.5.4 Grouping elements: the DIV and SPAN elements

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->

<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT SPAN - - (%inline;)*         -- generic language/style container -->

<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

携带id以及class属性的DIV和SPAN元素提供了向文档内加入结构的一般方法。这些元素定义了内容是行内的(使用SPAN)或者是块级别的(使用DIV),但不会给内容施加任何其他的展现逻辑。于是,作者可以使用这些元素并通过样式表,lang 属性等来裁剪HTML来适合他们自己的需要和口味。

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:

例如,假设我们想基于数据库中的客户信息来产生一个HTML文档。由于HTML中不包含可以描述诸如"client", "telephone number", "email address", 等等这样的元素,我们使用DIV和SPAN来达到希望的结构和展现效果。我们可以像下面的例子一样,使用TABLE元素来组织信息的结构。

<!-- Example of data from the client database: -->

<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">

<P><SPAN class="client-title">Client information:</SPAN>

<TABLE class="client-data">

<TR><TH>Last name:<TD>Boyera</TR>

<TR><TH>First name:<TD>Stephane</TR>

<TR><TH>Tel:<TD>(212) 555-1212</TR>

<TR><TH>Email:<TD>sb@foo.org</TR>

</TABLE>

</DIV>


<DIV id="client-lafon" class="client">

<P><SPAN class="client-title">Client information:</SPAN>

<TABLE class="client-data">

<TR><TH>Last name:<TD>Lafon</TR>

<TR><TH>First name:<TD>Yves</TR>

<TR><TH>Tel:<TD>(617) 555-1212</TR>

<TR><TH>Email:<TD>yves@coucou.com</TR>

</TABLE>

</DIV>

Later, we may easily add style sheet declarations to fine tune the presentation of these database entries.

在以后,我们可以很容易地加入样式表声明来改进这些数据库实体的展现方式。

For another example of usage, please consult the example in the section on the class and id attributes.

对于用法的另外的一个例子,请参见在class和id属性部分的相关示例。

Visual user agents generally place a line break before and after DIV elements, for instance:

可视化用户代理通常情况下会在DIV元素的前后各加一个折行(换行),例如:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

which is typically rendered as:

典型情况下会被展现成:

aaaaaaaaa

bbbbbbbbb


ccccc


ccccc

7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->

<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

标题元素简要描述它所介绍的部分的主题。标题信息可以被用户代理用来自动地创建一个文档的目录。

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

在HTML中有6个级别的标题,H1是最重要的,H6是最不重要的。可视化浏览器在展现时,通常对重要的标题所用的字体要比那些相对来说不重要的标题所使用的字体要大。

The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.

下面的例子显示了如何使用DIV元素即将标题与其后的文档部分关联起来。这样做可以允许用户为每一个部分分别定义样式(比如,为背景着色,设置字体等)。

<DIV class="section" id="forest-elephants" >

<H1>Forest elephants</H1>

<P>In this section, we discuss the lesser known forest elephants.
 ...this section continues...

<DIV class="subsection" id="forest-habitat" >

<H2>Habitat</H2>

<P>Forest elephants do not live in trees but among them.
 ...this subsection continues...

</DIV>

</DIV>

This structure may be decorated with style information such as:

上述结构可以使用类似下面的样式信息进行装饰:

<HEAD>

<TITLE>
... document title ...
</TITLE> <STYLE type="text/css"> DIV.section { text-align: justify; font-size: 12pt} DIV.subsection { text-indent: 2em } H1 { font-style: italic; color: green } H2 { color: green } </STYLE> </HEAD>

Numbered sections and references
HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2").

HTML本身产生标题的部分编码。但用户代理可以提供这种机制。过不了多久,诸如CSS之类的样式表语言会允许作者对部分编码的产生进行控制。

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

一些人认为跳跃式的标题级别是很不好的经验。他们接受H1 H2 H1然而他们不接受H1 H3 H1,因为标题级别H2被跳过了。

7.5.6 The ADDRESS element

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->

<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

ADDRESS元素可以被作者用来提供文档或诸如表单这样的文档主要部分的联系信息。该元素通常会出现在文档的开始或结尾。

For example, a page at the W3C Web site related to HTML might include the following contact information:

例如,W3C网站上与HTML有关的一个页面可能会包含如下联系信息:

<ADDRESS>

<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
contact persons for the <A href="Activity">W3C HTML Activity</A><BR> 
$Date: 1999/12/24 23:37:50 $

</ADDRESS>