300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 【HTML练习】使用html元素进行文本格式化

【HTML练习】使用html元素进行文本格式化

时间:2023-10-11 13:22:23

相关推荐

【HTML练习】使用html元素进行文本格式化

未格式化的信件原文和css代码:下载链接

题目要求:本项目中,你的任务为一封大学内网信件进行标记,这封信是研究人员对一名学生有关申请博士学位问题的回复。格式化之前为没有任何样式与换行的一大堆密密麻麻的文字。

块/结构语义:

你应该使用适当的结构来构造整体文档,包括doctype、<html>、<head>和<body>元素。除下面提到的几点之外,这封信应该被标记成有着段落和标题的结构。 这封信有 1 个顶级标题(“回复:”那行)和 3 个二级标题。使用适当类型的列表标记该学期的开学时间、学习科目和异域舞蹈。两个地址应该放在<address>元素下. 每行的地址应该放在新的一行而不是新的段落.

内联语义:

应着重显示发信人和收信人的姓名(以及“电话”和“电子邮件”字样)。用适当的元素把文档中的四个日期标记成机器可读的日期。为信中第一个地址和第一个日期设置一个类属性“sender-column”,这样就能通过添加CSS 来使它们右对齐,以符合经典信件的布局。信件正文中有 2 个首字母缩略词/缩写词,标记出它们的扩展形式。正确标注 6 个下标/上标(位于化学方程式、科学计数法中)。试着标记至少对两个单词进行着重(<strong>)/ 强调(<em>)显示。有两个地方应加上超链接,要为它们添加适当的标题。链接指向 / 即可。用适当的元素标记校训和引文。

文档的头部:

用适当的元标签把文档的字符集声明为 utf-8。用适当的元标签说明信件的作者。用适当的标签引入我们提供的 CSS 代码。

<!DOCTYPE HTML><html><head><title>博士生回信</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><meta charset="UTF-8"><meta name="author" value="Tokio"><meta name="viewport" content="width=device-width"></head><body><p class="sender-column">中国北京市门头沟区,102300<br />纽臂大学 纽臂科学院<br /><strong>李雷 教授</strong><br /><strong>联系电话:</strong>123-456-7890<br /><strong>电子邮件:</strong>no_reply@<br /></br /> 年 2 月 22 日</p><address><strong>韩梅梅 女士</strong><br />中国海南省三亚市亚龙湾</address><h1>回复:韩梅梅学位申请</h1><p>亲爱的韩同学:</p><p>感谢你申请纽臂大学科学院的哲学博士学位课程,下面我将就你的问题依次做出解答。</p><h2>开学日期</h2>欢迎你在任意时间来校学习,但在学期开始时来校更理想,每学期开学时间如下:<ul><li>第一学期: 年 9 月 9 日</li><li>第二学期: 年 1 月 15 日</li><li>第三学期: 年 5 月 2 日</li></ul><p>请告诉我你是否愿意在学期开始时来校,并告知你选择的学期。</p><p>你可以在我们的网站上找到更多关于 <a href=/">学校重要日期</a> 的信息。</p><h2>学习科目</h2>纽臂科学院本着兼容并蓄的原则,课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加,也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下(按优先度排序):<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>使用 HTML 和 CSS 构建乐谱。</li></ol>请针对上述课题提供更多的信息。包括研究时长、所需资源,以及其它未尽事宜,谢谢。<h2>异域舞蹈</h2>你说的没错!异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题,我在下面列出我个人最喜欢的舞蹈种类和相关介绍:<dl><dt>波利尼西亚小鸡舞</dt><dd>一种古老、神秘但影响广泛的舞蹈,可追溯至公元前 300 年,整个村庄围绕着一个小鸡形状的圈跳舞,祈祷牲畜肥美。</dd><dt>冰岛布尔曳步舞</dt><dd>在冰岛人学会用火取暖之前,他们之间流行着这种舞蹈,舞蹈时人们在地上拥成一个圈,用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</dd><dt>北极机器人舞</dt><dd>一个有趣的历史误传,二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈,这种舞蹈动作僵硬,流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。</dd></dl><p>更多信息请查看我的 <a href=/">异域舞蹈研究</a> 网页。</p><p>李雷 教授</p><p>纽臂大学校训:"人人皆可纽臂" —— 诸葛中天传</p></body></html>

实现效果如下:

总结:做之前以为很简单,实际动手才发现要和范例做的一样还要花点时间的,尤其是”异域舞蹈“那块,一开始没有想到自定义列表,试了好一会儿别的思路都不行,又去回头看了眼教学才想到可以自定义列表来着,可惜最后结果也还是和范例有所出入。路漫漫其修远兮啊~继续加油吧

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。