HTML Marking Up Letter

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Dr. Eleanor Gaye" />
    <title>Marking Up a Letter</title>
    <style>
      body {
        max-width: 800px;
        margin: 0 auto;
      }

      .sender-column {
        text-align: right;
      }

      h1 {
        font-size: 1.5em;
      }

      h2 {
        font-size: 1.3em;
      }

      p,
      ul,
      ol,
      dl,
      address {
        font-size: 1.1em;
      }

      p,
      li,
      dd,
      dt,
      address {
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <main>
      <address class="sender-column">
        <strong>Dr. Eleanor Gaye</strong><br />
        Awesome Science faculty<br />
        University of Awesome<br />
        Bobtown, CA 99999,<br />
        USA<br />
        <strong>Tel</strong>: 123-456-7890<br />
        <strong>Email</strong>: no_reply@example.com<br />

        <p>
          <time class="sender-column" datetime="2016-01-20"
            >20 January 2016</time
          >
        </p>
      </address>

      <address>
        <strong>Miss Eileen Dover</strong><br />
        4321 Cliff Top Edge<br />
        Dover, CT9 XXX<br />
        UK
      </address>

      <h1>Re: Eileen Dover university application</h1>

      <p>Dear Eileen,</p>
      <p>
        Thank you for your recent application to join us at the University of
        Awesome's science faculty to study as part of your
        <abbr title="Doctor of Philosophy">PhD</abbr> next year. I will answer
        your questions one by one, in the following sections.
      </p>

      <h2>Starting dates</h2>
      <p>
        We are happy to accommodate you starting your study with us at any time,
        however it would suit us better if you could start at the beginning of a
        semester; the start dates for each one are as follows:
      </p>

      <ul>
        <li>
          First semester: <time datetime="2016-01-20">9 September 2016</time>
        </li>
        <li>
          Second semester: <time datetime="2016-01-20">15 January 2017</time>
        </li>
        <li>Third semester: <time datetime="2016-01-20">2 May 2017</time></li>
      </ul>
      <p>
        Please let me know if this is ok, and if so which start date you would
        prefer.
      </p>
      <p>
        You can find more information about important university dates on our
        website.
      </p>
      <h2>Subjects of study</h2>
      <p>
        At the Awesome Science Faculty, we have a pretty open-minded research
        facility — as long as the subjects fall somewhere in the realm of
        science and technology. You seem like an intelligent, dedicated
        researcher, and just the kind of person we'd like to have on our team.
        Saying that, of the ideas you submitted we were most intrigued by are as
        follows, in order of priority:
      </p>
      <ol>
        <li>
          Turning H<sub>2</sub>O into wine, and the health benefits of
          Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)
        </li>
        <li>
          Measuring the effect on performance of funk bassplayers at
          temperatures exceeding 30°C (86°F), when the audience size
          exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3
          × 10<sup>4</sup>.)
        </li>
        <li>
          <abbr title="HyperText Markup Language">HTML</abbr> and
          <abbr title="Cascading Style Sheets">CSS</abbr> constructs for
          representing musical scores.
        </li>
      </ol>
      <p>
        So please can you provide more information on each of these subjects,
        including how long you'd expect the research to take, required staff and
        other resources, and anything else you think we'd need to know? Thanks.
      </p>
      <h2>Exotic dance moves</h2>
      <p>
        Yes, you are right! As part of my post-doctorate work, I did study
        exotic tribal dances. To answer your question, my favourite dances are
        as follows, with definitions:
      </p>
      <dl>
        <dt>Polynesian chicken dance</dt>
        <dd>
          A little known but <em>very</em> influential dance dating back as far
          as 300<abbr title="before Christ">BC</abbr>, a whole village would
          dance around in a circle like chickens, to encourage their livestock
          to be "fruitful".
        </dd>
        <dt>Icelandic brownian shuffle</dt>
        <dd>
          Before the Icelanders developed fire as a means of getting warm, they
          used to practice this dance, which involved huddling close together in
          a circle on the floor, and shuffling their bodies around in
          imperceptibly tiny, very rapid movements. One of my fellow students
          used to say that he thought this dance inspired modern styles such as
          Twerking.
        </dd>
        <dt>Arctic robot dance</dt>
        <dd>
          An interesting example of historic misinformation, English explorers
          in the 1960s believed to have discovered a new dance style
          characterized by "robotic", stilted movements, being practiced by
          inhabitants of Northern Alaska and Canada. Later on however it was
          discovered that they were just moving like this because they were
          really cold.
        </dd>
      </dl>
      <p>
        For more of my research, see my
        <strong>exotic dance research page</strong>.
      </p>
      <p>Yours sincerely,</p>
      <p>Dr Eleanor Gaye</p>
      <p>
        University of Awesome motto: <q>Be awesome to each other</q>. --
        <cite
          >The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></cite
        >
      </p>
    </main>
  </body>
</html>

练习基础和高级 HTML 文本格式化,使用 head

Layout of comment panels