HTML4.01規範-HTML文檔的頂層結構(4)

時間 2019-12-24

原文原文鏈接

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: requiredcss

開始標籤：必須，結束標籤：必須
html

Attributes defined elsewhere數據庫

在其餘地方定義的屬性
瀏覽器

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
align (alignment)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (intrinsic events)

id, class (文檔做用域的標識符)
lang (語言信息), dir (文本方向)
title (元素標題)
style (行內樣式信息)
align (對齊方式)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (內建事件)

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.app

攜帶id以及class屬性的DIV和SPAN元素提供了向文檔內加入結構的通常方法。這些元素定義了內容是行內的（使用SPAN）或者是塊級別的（使用DIV），但不會給內容施加任何其餘的展示邏輯。因而，做者可使用這些元素並經過樣式表，lang 屬性等來裁剪HTML來適合他們本身的須要和口味。less

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:ide

例如，假設咱們想基於數據庫中的客戶信息來產生一個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.網站

在之後，咱們能夠很容易地加入樣式表聲明來改進這些數據庫實體的展示方式。ui

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

開始標籤：必須，結束標籤：必須

Attributes defined elsewhere

在其餘地方定義的屬性

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
align (alignment)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (intrinsic events)

id, class (文檔做用域的標識符)
lang (語言信息), dir (文本方向)
title (元素標題)
style (行內樣式信息)
align (對齊方式)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (內建事件)

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

開始標籤：必須，結束標籤：必須

Attributes defined elsewhere

其餘地方定義的屬性

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (intrinsic events)

id, class (文檔做用域標識符)
lang (語言信息), dir (t文本方向)
title (元素標題)
style (行內形式的樣式表信息)
ondblclick, onmouseup, onmousemove, onkeypress, onkeydown, onkeyup (內建事件)

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>