Web - 第九章 | HTML 撰寫一封信
以前的e-mail，都只有單純的文字格式；而現在我們可以用HTML格式來豐富我們的郵件，透過HTML我們可以在郵件上展示出包括標題、重點、超連結⋯等等。
項目簡介
塊/結構語義：
- 使用適當的結構來構造整體文件，包括doctype、<html>、<head>和<body>元素。
- 除下面提到的幾點之外，這封信應該被標記成有著段落和標題的結構。這封信有1 個頂級標題（“回覆：”那行）和3 個二級標題。
- 使用適當類型的列表標記該學期的開學時間、學習科目和異域舞蹈。
- 兩個地址可以直接放在段落中，<address>元素不適合它們（想一下為什麼）。此外，地址的每一行都應該另開新行，而不是新段落。
內聯語義：
- 應著重顯示發信人和收信人的姓名（以及“電話”和“電子郵件”字樣）。
- 用適當的元素把文件中的四個日期標記成機器可讀的日期。
- 為信中第一個地址和第一個日期設置一個類屬性“ sender-column”，這樣就能通過添加CSS來使它們右對齊，以符合經典信件的佈局。
- 信件正文中有5 個首字母縮略詞/縮寫詞，標記出它們的擴展形式。
- 正確標註6 個下標/上標（位於化學方程式、科學計數法中）。
- 試著標記至少對兩個單詞進行著重（<strong>）/強調（<em>）顯示。
- 有兩個地方應加上超連結，要為它們添加適當的標題。連結指向https://example.com/ 即可。
- 用適當的元素標記校訓和引文。
文件的頭部：
- 用適當的元標籤把文件的字符集聲明為utf-8。
- 用適當的元標籤說明信件的作者。
- 用適當的標籤引入我們提供的CSS 代碼。
信件範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| 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;
}
|
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
| <html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta name="author" content="李雷">
<title>紐臂科學院學位申請郵件往來</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="sender-column italic">
中國北京市門頭溝區，102300<br>
紐臂大學 紐臂科學院<br>
<strong>李雷</strong> 教授<br>
<strong>聯繫電話</strong>：123-456-7890<br>
<strong>電子郵件</strong>：no_reply@example.com
</p>
<p class="sender-column">
<time datetime="2019-2-22">2019 年 2 月 22 日</time>
</p>
<p class="italic">
中國海南省三亞市亞龍灣<br>
<strong>韓梅梅 女士</strong>
</p>
<h1>回复：韓梅梅學位申請</h1>
<p>親愛的韓同學：</p>
<p>感謝你申請紐臂大學科學院的哲學博士學位課程，下面我將就你的問題依次做出解答。 </p>
<h2>開學日期</h2>
<p>歡迎你在任意時間來校學習，但在學期開始時來校更理想，每學期開學時間如下：</p>
<ul>
<li>第一學期：<time datetime="2019-9-9">2019 年 9 月 9 日</time></li>
<li>第二學期：<time datetime="2020-1-15">2020 年 1 月 15 日</time></li>
<li>第三學期：<time datetime="2020-5-2">2020 年 5 月 2 日</time></li>
</ul>
<p>請告訴我你是否願意在學期開始時來校，並告知你選擇的學期。 </p>
<p>你可以在我們的網站上找到更多關於 <a href="https://example.com/">學校重要日期</a> 的訊息。 </p>
<h2>學習科目</h2>
<p>紐臂科學院本著兼容並蓄的原則，課題涉及一些科技領域。歡迎有才智、態度專注的研究人員參加，也歡迎符合我們價值觀的朋友加入。我們最感興趣的課題如下（按優先度排序）：</p>
<ol>
<li>把水（H<sub>2</sub>O）轉變為酒的方法，以及白藜蘆醇（C<sub>14</sub>H<sub>12</sub>O<sub >3</sub>）對健康的幫助作用。 </li>
<li>測量室溫30°C（86°F）時，觀眾人數呈指數級增加對放克貝斯手錶演的影響（3 × 10<sup>3</sup> > 3 × 10<sup>4 </sup> 效應）。 </li>
<li>使用 <abbr title="超文本標記語言（HyperText Markup Language）">HTML</abbr> 和 <abbr title="層疊樣式表（Cascading Style Sheets）">CSS</abbr> 構建樂譜。 </li>
</ol>
<p>請針對上述課題提供更多的訊息。包括研究時長、所需資源，以及其它未盡事宜，謝謝。 </p>
<h2>異域舞蹈</h2>
<p>你說的沒錯！異域部落舞蹈是我博士後研究項目的一部分。為了回答你的問題，我在下面列出我個人最喜歡的舞蹈種類和相關介紹：</p>
<dl>
<dt>波利尼西亞小雞舞</dt>
<dd>一種古老、神秘但影響廣泛的舞蹈，可追溯至公元前 300 年，整個村莊圍繞著一個小雞形狀的圈跳舞，祈禱牲畜肥美。 </dd>
<dt>冰島布爾曳步舞</dt>
<dd>在冰島人學會用火取暖之前，他們之間流行著這種舞蹈，舞蹈時人們在地上擁成一個圈，用極小極快的動作晃動身體。我有一個學生說冰島曳步舞是現代甩臀舞的鼻祖。 </dd>
<dt>北極機器人舞</dt>
<dd>一個有趣的歷史誤傳，二十世紀六十年代的英國探險者宣稱發現了一種像“機器人跳舞”的舞蹈，這種舞蹈動作僵硬，流行於加拿大和阿拉斯加北部地區。後來人們發現這裡的居民是因為天氣太冷了才做出這樣的動作。 </dd>
</dl>
<p>更多訊息請查看我的 <a href="https://example.com/" title="李雷的異域舞蹈研究站點">異域舞蹈研究</a> 網頁。 </p>
<p>李雷 教授</p>
<p>紐臂大學校訓：<q>人人皆可紐臂</q> —— <cite>諸葛中天 紳士</cite></p>
</body>
</html>
|
最後再使用瀏覽器打開 letter.html ，將會看到一個郵件範例，這邊就不特別截圖了。
這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。
註：以上參考了
MDN web docs 的 Marking up a letter
文章。
