【Web前端开发】——HTML练习一：标记信件
发布时间
阅读量：
阅读量
根据MDN网站学习记录笔记
本次测验要求你为你一封写好的信做出标记，以测验你基础和高级的 HTML 文本格式化技能，包括超链接等等。此外将测验你对一些 HTML <head> 内容的熟悉程度。
标记信件
-
准备工作
-
项目概要
-
- 块/结构语义：
- 内联语义：
- 文档的头部：
-
代码展示
-
结果展示
-
小结
准备工作
开始测验之前，请先下载信件的起始文本和CSS代码。然后用文本编辑器（我选择使用vs code）创建一个新的 .html 文件来进行测验。
项目概要
本项目中，你的任务为一封大学内网信件进行标记，这封信是研究人员对一名学生有关申请博士学位问题的回复。
块/结构语义：
- 你应该使用适当的结构来构造整体文档，包括
doctype、<html> 、 <head>和<body>元素。 - 除下面提到的几点之外，这封信应该被标记成有着段落和标题 的结构。 这封信有 1 个顶级标题（“回复：”那行）和 3 个二级标题 。
- 使用适当类型的列表标记该学期的开学时间、学习科目和异域舞蹈。两个地址应该放在
<address>元素下. 每行的地址应该放在新的一行而不是新的段落.
内联语义：
- 应着重显示发信人和收信人的姓名 （以及“电话”和“电子邮件”字样）。
- 用适当的元素把文档中的四个日期标记成机器可读的日期 。
- 为信中第一个地址和第一个日期设置一个类属性“
sender-column”，这样就能通过添加CSS 来使它们右对齐 ，以符合经典信件的布局。 - 信件正文中有 2 个首字母缩略词/缩写词 ，标记出它们的扩展形式。
- 正确标注 6 个下标/上标（位于化学方程式、科学计数法中）。
- 试着标记至少对两个单词进行着重（
<strong>）/ 强调（<em>）显示。 - 有两个地方应加上超链接，要为它们添加适当的标题。链接指向 https://example.com/ 即可。
- 用适当的元素标记校训和引文。
文档的头部：
- 用适当的元标签把文档的字符集声明为 utf-8。
- 用适当的元标签说明信件的作者。
- 用适当的标签引入我们提供的 CSS 代码。
代码展示
css部分代码没有改变
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 用适当的元标签把文档的字符集声明为 utf-8 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="李雷">
<title>纽臂科学院学位申请邮件往来</title>
<!-- 用适当的标签引入我们提供的 CSS 代码 -->
<link href="标记信件.css" type="text/css" rel="stylesheet">
</head>
<body>
<address class="sender-column">
中国北京市门头沟区，102300<br>
纽臂大学 纽臂科学院<br>
<strong>李雷</strong> 教授<br>
<strong>联系电话</strong>：123-456-7890<br>
<strong>电子邮件</strong>：no_reply@example.com
</address>
<p class="sender-column">
<time datetime = "2019-02-22">2019 年 2 月 22 日</time>
</p>
<address>
中国海南省三亚市亚龙湾
<strong>韩梅梅 女士</strong>
</address><br>
<h1>回复：韩梅梅学位申请</h1>
<p>亲爱的韩同学：</p>
<p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>
<h2>开学日期</h2>
<p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
<ul>
<li>第一学期：<time datetime="2019-09-09">2019 年 9 月 9 日</time></li>
<li>第二学期：<time datetime="2020-01-15">2020 年 1 月 15 日</time></li>
<li>第三学期：<time datetime="2020-05-02">2020 年 5 月 2 日</time></li>
</ul>
<p>请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。</p>
<p>你可以在我们的网站上找到更多关于 <a href="https://example.com/ " title="学校重要日期">学校重要日期</a> 的信息。</p>
<h2>学习科目</h2>
<p>纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：</p>
<ol>
<li>把水（H<sub>2</sub>）转变为酒的方法，以及白藜芦醇（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 = "超文本标记语言"> HTML</abbr> 和<abbr title = "层叠样式">CSS</abbr>构建乐谱。</li>
</ol>
<p>请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢。</p>
<h2>异域舞蹈</h2>
<p>你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：</p>
<!-- 这里使用自定义列表 dl dt dd -->
<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><strong><em>李雷 教授</em></strong></p>
<p>纽臂大学校训：<q>人人皆可纽臂</q> —— <cite>诸葛中天传</cite></p>
</body>
</html>结果展示
小结
通过本次练习，回顾了前面所学的HTML基础知识，更加熟悉一些常见or不常见元素的用法，起到查漏补缺的作用。
- 用
<link>标签引入css
链接一个外部样式表，href：定义被链接文档的位置；type定义被链接文档的MIME类型；rel必需！定义当前文档与被链接文档之间的关系。
<link href="标记信件.css" type="text/css" rel="stylesheet">-
<abbr>标签标记一个缩写元素
在<abbr>标签中使用全局的 title 属性，这样就能够在鼠标指针移动到<abbr>元素上时显示出简称/缩写的完整版本。 -
<address>标签定义文档或文章的作者/拥有着的联系信息，其中文本通常呈现为斜体 -
<blockquote>和<q>的引用标记对比
<blockquote>标签定义块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。而"元素用来标记短的引用；可选属性cite规定引用的来源" -
<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 -
<dd>标签，在定义列表中定义条目的定义部分
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl><sub>标签定义下标文本，<sup>标签定义上标文本<time>标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
<time datetime="2008-02-14">情人节</time>全部评论 (0)
还没有任何评论哟~