文章/答案/技术大牛

发布

问商务信函( HTML )
EN

Code Review用户

提问于 2012-12-01 11:59:58

回答 3查看 22.5K关注 0票数 7

这是我改革的第一次努力:我给一位朋友写了一封商务信。我希望你能给我一份评论。(是的，我知道这是一个微不足道的例子，如果能对更复杂的事情进行审查，那就更有好处了。)但我现在想在坏习惯植入我之前，把它们扼杀在萌芽中。)

<!DOCTYPE HTML>

<html>
    <head>
        <style type="text/css">
            .bodyBody {
                margin: 10px;
                font-size: 1.50em;
            }
            .divHeader {
                text-align: right;
                border: 1px solid;
            }
            .divReturnAddress {
                text-align: left;
                float: right;
            }
            .divSubject {
                clear: both;
                font-weight: bold;
                padding-top: 80px;
            }
            .divAdios {
                float: right;
                padding-top: 50px;
            }
        </style>
    </head>
    <body class="bodyBody">
        <div class="divReturnAddress">
            Lopes de Almeido, Evanildo<br/>
            Bläsiring 161 <br/>
            4057 Basel <br/>    
            <br/>
            01 Dezember, 2012
        </div>

        <div class="divSubject">
            Betreff:  Vertretung waehrend Reise
        </div>

        <div class="divContents">
            <p>
                Sehr geehrte Frau Graf,
            </p>

            <p>
                Ich fliege nach Brasilien am 29. Dezember 2012 für 6 Wochen.
                Meine Nichte kann mich vertreten.  Sie arbeitet sehr gesissenhaft.
                Sie heisst Yasmin.  Ihre Nummer ist xxx.
            </p>
        </div>

        <div class="divAdios">
            Freundliche Grüsse <br/>
            <!-- Space for signature. -->
            <br/>
            <br/>
            <br/>
            Evanildo Lopes do Almeida <br/>
            Hauswart Binningerstrasse 19/23 <br/>
        </div>
    </body>
</html>

css

html

回答 3

Code Review用户

发布于 2012-12-02 04:51:47

CSS

因为这是一个单一的文档，而不是一个网站的网页，所以可以在style元素中使用内部CSS，而不是链接到外部样式表。但是，如果您计划在将来写更多的字母，您应该创建一个样式表，其中包含所有典型的信函共享样式，并从每个字母(<link rel="stylesheet" href="letter.css" />)链接到它。

您可以将您的类命名为更有意义的类，但这只是一个良好的实践，而不是一个要求。

您可以在body上省略这个类。

Encoding/Charset

应该将编码添加到文档中。如果您想使用UTF-8 (推荐)，添加<meta charset="utf-8" />作为head元素的第一个子元素。

`title`元素

您缺少title元素，这是必需的。将其添加为head：<title>Vertretung während Reise – 1. Dezember 2012</title>的子级

返回地址

<br/>的使用在这里是正确的。但是，日期不是地址的一部分，因此不应该用br分隔。将日期放在它自己的元素中。HTML5提供time元素。

因为这是您的地址(而不是收件人地址)，所以应该将其括在address元素中。

您可以在header元素中附上回信地址和日期。还可以将返回地址封装在footer元素中，将time包含在header中(可能与h1一起使用)，但这可能是过分的；

主题线/ Betreff

与其对主题使用无意义的div，不如在这里使用h1，因为它是整个文档的标题。

Salution / Anrede

可以说，敬礼本身就是一个段落，或者是第一段的一部分。我认为在后面加上逗号时，它应该是以下段落的一部分。但这并不是无可争议的(我对字母的语义没有详细的了解)。

问候

在这里，使用br元素将问候语与肛门分开是正确的。但是，不要仅仅因为想要添加更多的间距而使用多个br元素。只使用一个，并将一个类应用到它，这样您就可以给它一个更高的垂直margin (CSS)。

另外，将其包含在p中而不是div中。

示例

所以你的信看起来像：

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8" /> <!-- first element so that the encoding is applied to the title etc. -->
    <title>Vertretung während Reise – 1. Dezember 2012</title>
    <link rel="stylesheet" href="letter.css" />
  </head>

  <body>

    <header> 
      <address class="return-address">
        Lopes de Almeido, Evanildo<br/>
        Bläsiring 161 <br/>
        4057 Basel <br/>    
      </address>

      <time datetime="2012-12-01">01 Dezember, 2012</time>
    </header>

    <h1>
      Betreff:  Vertretung waehrend Reise
    </h1>

    <div class="content"> <!-- use this div only if it is required for styling -->
        <p>
          Sehr geehrte Frau Graf,
          <br class="salution" />

          Ich fliege nach Brasilien am 29. Dezember 2012 für 6 Wochen.
          Meine Nichte kann mich vertreten.  Sie arbeitet sehr gesissenhaft.
          Sie heisst Yasmin.  Ihre Nummer ist xxx.
        </p>
        <p>
          …
        </p>
      </div>

      <p class="adios">
        Freundliche Grüsse 
        <br class="greets" />
        Evanildo Lopes do Almeida <br/>
        Hauswart Binningerstrasse 19/23
      </p>

  </body>

</html>

票数 6

Code Review用户

发布于 2012-12-01 16:04:11

首先，既然你用HTML写了一封商务信函，我假设你想发一封HTML电子邮件？由于电子邮件客户端是远离采用标准并需要特殊战术，所以这可能不是练习编写HTML的最佳领域。例如，您应该将CSS从HTML中分离出来(就像Ben建议的那样)，但是无法在HTML电子邮件中做到这一点。

现在，专注于您的代码，我主要可以重复Ben所写的内容(特别是使用div.name而不是divName，使用body标记body而不是选择器.bodyBody)。

此外，我建议您使用utf-8编码，这样您就可以键入您的德国货币(a，n，ü)而不是ä。通过在你的头后面插入这一行来做到这一点(并且实际上在你的文本编辑器中保存在UTF-8中！)

<head> 
  <meta charset="utf-8">

另外，只有当您真正想要换行时才使用<br />。它通常被滥用为“快速和肮脏的”间隔，更好的方法是，使用<p>标签作为您的Freundlicheüe，并给它一个空白，就像这样：

div.adios p {
  margin-bottom: 30px;
}

如果您有几个<p>，则只能选择以下第一个子项：

div.adios p:first-child {

最后，我想我会将.subject包装成.contents，但这只是个人偏好。也许，在语义上，只使用h1标记而不是像这样的.subject是有意义的：

<div class="contents">
  <h1>Betreff: Vertretung während Reise</h1>
  <p>Sehr geehrte Frau Graf,</p>
  <p>Ich fliege am 29. Dezember 2012 für 6 Wochen nach Brasilien...</p>
</div>

票数 2

Code Review用户

发布于 2012-12-01 13:05:34

首先，使用外部css文件。创建style.css，将所有css代码放在其中，然后将其链接到html文件中的头标签中：

<link rel="stylesheet" href="style.css">

不需要用选择器名称作为类的前缀。它不是语义的，您限制自己只在特定的选择器上使用它。不是字面上而是语义上。

如果类名中有两个单词，不要这样写: myCustomClass，用破折号代替我的自定义类。

阅读css指南，非常好：https://github.com/necolas/idiomatic-css和html：https://github.com/necolas/idiomatic-html指南

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/19204

复制

相似问题

问商务信函( HTML )
EN

回答 3

Code Review用户

CSS

Encoding/Charset

`title`元素

返回地址

主题线/ Betreff

Salution / Anrede

问候

示例

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问商务信函( HTML )EN

回答 3

Code Review用户

CSS

Encoding/Charset

title元素

返回地址

主题线/ Betreff

Salution / Anrede

问候

示例

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问商务信函( HTML )
EN

`title`元素