练习:一封信

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="信件style.css">
<title>回信</title>
</head>

<body>
	<address class="sender-column">
    	中国北京市门头沟区,102300<br>
		纽臂大学 纽臂科学院<br>
		<strong>李雷 </strong>教授<br>
		<em>联系电话:123-456-7890</em><br>
		<em>电子邮件:no_reply@example.com</em><br>
    </address>
    <p><time class="sender-column" datetime="2019年2月22日">2019 年 2 月 22 日</time></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="#">学校重要日期</a> 的信息。</p>
    
	<h2>学习科目</h2>
    <p>纽臂科学院本着兼容并蓄的原则,课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加,也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下(按优先度排序):</p>
    
    <ol>
    	<li>把水(H<sub>2</sub>O)转变为酒的方法,以及白藜芦醇(C1<sub>4</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"> HTML</abbr><abbr title="CSS" >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="#"> 异域舞蹈研究</a> 网页。</p>
    
    <p>李雷 教授</p>
    
    <p>纽臂大学校训:<q>人人皆可纽臂</q> —— 诸葛中天传</p>
</body>
</html>

问题:

  1. 元数据表示作者没有表示出来
  2. 2019年2月22日没有靠右书写,因为将class属性写在了time标签中,若写在p标签中就没有问题。为什么?
  3. time标签中的datetime="2019-02-22"到底有什么用,为什么写2019-2-22和2019年2月22日,显示是一样的?
  4. 纠结第二组地址要用什么标签,结果是用address
  5. <a>标签除了href属性,还可以添加title属性
  6. “>”大于号应该用&gt;表示,没有注意到,但是浏览器显示没有问题,为什么?
  7. 最后的标语应该用<cite&gy;标签标记成引文。
  8. css文件可以直接用<style>标签围起来放在html文件中,也可以用link。

修改后的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta name="author" content="李雷">

<!--  <link rel="stylesheet" href="信件style.css">  -->
<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>
<title>回信</title>
</head>

<body>
	<address class="sender-column">
    	中国北京市门头沟区,102300<br>
		纽臂大学 纽臂科学院<br>
		<strong>李雷 </strong>教授<br>
		<em>联系电话:123-456-7890</em><br>
		<em>电子邮件:no_reply@example.com</em><br>
    </address>
    <p class="sender-column">
    	<time datetime="2019年2月22日">2019 年 2 月 22 日
    	</time>
    </p>

 	 <address>
 	  	 中国海南省三亚市亚龙湾<br>
 	  	 <strong>韩梅梅 女士</strong>
 	 </address>

    
	<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="#" title="纽臂大学大事时间表">学校重要日期</a> 的信息。</p>
    
	<h2>学习科目</h2>
    <p>纽臂科学院本着兼容并蓄的原则,课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加,也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下(按优先度排序):</p>
    
    <ol>
    	<li>把水(H<sub>2</sub>O)转变为酒的方法,以及白藜芦醇(C1<sub>4</sub>H<sub>12</sub>O<sub>3</sub>)对健康的帮助作用。</li>
        <li>测量室温 30°C(86°F)时,观众人数呈指数级增加对放克贝斯手表演的影响(3 × 10<sup>3</sup> &gt; 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="#" title="李雷的异域舞蹈研究站点"> 异域舞蹈研究</a> 网页。</p>
    
    <p>李雷 教授</p>
    
    <p>纽臂大学校训:<q>人人皆可纽臂</q> —— <cite>诸葛中天传</cite></p>
</body>
</html>

显示样式:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值