根据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>

【Web前端开发】——HTML练习一：标记信件相关推荐

web无序列表去掉点_无序列表ul标记的type属性值可以为-智慧树Web前端开发技术（山东联盟）章节答案...
Web前端开发技术(山东联盟):无序列表ul标记的type属性值可以为[多选题] A:square B:circle C:disc D:line Web前端开发技术(山东联盟)章节测试答案: squa ...
零基础如何掌握web前端开发技能
很多零基础学员想要进入到互联网行业都会选择web前端做首选技术语言来学习,但是学习web前端不是那么容易的,想要成为一名合格的web前端工程师,所要掌握的技能一定要会,下面小编就为大家详细的介绍一下零 ...
十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
零基础开始学 Web 前端开发，有什么建议吗？--知
张立民 ,北京网站建设http://www.ookcn.com https://www.zhihu.com/question/19637373 https://www.zhihu.com/questi ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
Web前端中级认证php,1+x 证书 Web 前端开发中级理论考试 (试卷 6 )
1+x 证书 Web 前端开发中级理论考试 (试卷 6 ) 1+x 证书 web 前端开发中级理论考试(试卷 6 ) 官方 QQ 群 1+x 证书 Web 前端开发初级对应课程分析 http://bl ...
初学Web前端开发，你需要掌握的11项技能
你也许会觉得Web前端开发是一个很简单的工作,但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做前端开发就是先易后难,想成为一个优秀的We ...
Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
超级棒的170+款web前端开发工具汇总，千万要收藏好！
作者:web前端开发我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...

【Web前端开发】——HTML练习一：标记信件