标记一封信 - MDN html 作业

前言

本文将会解析来自MDN web docs的一份html作业,内容较为基础,有一定html知识的同学可以选择绕道。

作业描述

作业地址:标记一封信

将上述页面提供的一封信进行合适的html标记,使其成为一封传统的信件的格式。

答案

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Dr Eleanor Gaye">
<title>my test letter</title>
<link rel="stylesheet" type="text/css" href="styles/letter.css">
</head>
<body>
<p class="sender-column">
<i>
<b>Dr. Eleanor Gaye</b><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<b>Tel:</b> 123-456-7890<br>
<b>Email:</b> no_reply&#64;example.com
</i>
</p>

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

<p>
<i>
<b>Miss Eileen Dover</b>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK
</i>
</p>

<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="Philosophiae Doctor">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 accomodate 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-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
<li>Third semester: <time datetime="2017-05-02">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 <a target="_blank" href="http://example.com">important university dates</a> 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&deg;C (86&deg;F), when the audience size exponentially increases (effect of 3 &#215; 10<sup>3</sup> &gt; 3 &#215; 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 <em>did</em> 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 very 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 or 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 imperceptably 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 characterised 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 <a target="_blank" href="http://example.com">exotic dance research page</a>.</p>

<p>Yours sincerely,</p>

<pre>



</pre>

<p>Dr Eleanor Gaye</p>

<p>University of Awesome motto: <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">Be awesome to each other.</q> -- <cite title="http://example.com">Bill S Preston, <abbr title="Esquire">Esq</abbr></cite></p>
</body>
</html>

页面构建

创建DOCTYPE声明,用以表明文本格式。

创建htmlheadbody基础标签。

设置文本语言和字符集,在html的属性中和head标签的meta中。

引入css文件,在head中使用link标签。

设置文档title和必要的meta信息(作者)。

使用标题和段落标签进行排版。

样式调整

为发信人段落添加样式引用(class),并对其使用适当的斜体、加粗样式。

使用列表来标记信中列举出来的信息,用ol表示有序列表,用ul表示无序列表,用dl表示描述列表。

使用超链接标记站点信息,并设置合适的titletarget属性。

对文中的化学式、温度、公式使用合适的上下标,这里也可以对一些特殊字符使用url转义来在页面上展示,如&deg;表示&deg;。

使用pre标签保留文本中的换行。

语义标记

使用时间标签标记文档中的时间。

使用缩写标签对文档中的缩写进行解释。

使用强调标签对文中的某些短语做标记。

使用引用标签标示文中的引文和出处,qblockquote标签需要设置cite属性以表示出处(不显示),并且需要使用cite标签来显示出处。