HTML Marking Up Letter

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

    <!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

欢迎通过「邮件」或者点击「这里」告诉我你的想法
Welcome to tell me your thoughts via "email" or click "here"