Young87

当前位置：首页 >个人收藏

温故知新----标签的语义化

日期： 2019-08-01    分类： 个人收藏 385次阅读

本项目主要练习标签的语义化，项目参考于：MDN Web Docs

已上传至gitHub

结构语义化：demo

任务介绍

- 块/结构语义：

- 你应该使用适当的结构来构造整体文档，包括doctype、<html> 、 <head>和<body>元素。

- 除下面提到的几点之外，这封信应该被标记成有着段落和标题的结构。 这封信有 1 个顶级标题（“回复：”那行）和 3 个二级标题。

- 使用适当类型的列表标记该学期的开学时间、学习科目和异域舞蹈。

- 两个地址可以直接放在段落中，<address> 元素不适合它们（想一下为什么）。此外，地址的每一行都应该另开新行，而不是新段落。

- 内联语义：

- 应着重显示发信人和收信人的姓名（以及“电话”和“电子邮件”字样）。

- 用适当的元素把文档中的四个日期标记成机器可读的日期。

- 为信中第一个地址和第一个日期设置一个类属性“sender-column”，这样就能通过添加CSS 来使它们右对齐，以符合经典信件的布局。

- 信件正文中有 5 个首字母缩略词/缩写词，标记出它们的扩展形式。

- 正确标注 6 个下标/上标（位于化学方程式、科学计数法中）。

- 试着标记至少对两个单词进行着重（<strong>）/ 强调（<em>）显示。

- 有两个地方应加上超链接，要为它们添加适当的标题。链接指向 https://example.com/ 即可。

- 用适当的元素标记校训和引文。

- 文档的头部：

- 用适当的元标签把文档的字符集声明为 utf-8。

- 用适当的元标签说明信件的作者。

- 用适当的标签引入我们提供的 CSS 代码。

demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="smile">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>韩梅梅学位申请</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <p class="sender-column ita">
    中国北京市门头沟区，102300<br>
    纽臂大学 纽臂科学院<br>
    <strong>李雷</strong> 教授<br>
    <strong>联系电话</strong>：123-456-7890<br>
    <strong>电子邮件</strong>：no_reply@example.com<br><br>
    <time style="font-style: normal">2019 年 2 月 22 日</time><br>
  </p>
  <p class="ita">
    中国海南省三亚市亚龙湾<br>
    <strong>韩梅梅</strong> 女士<br>
  </p>
  <h1>回复：韩梅梅学位申请</h1>
  <p>亲爱的韩同学：</p>
  <p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>
  <h2>开学日期</h2>
  <p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
  <ul>
    <li>第一学期：<time>2019 年 9 月 9 日</time></li>
    <li>第二学期：<time>2020 年 1 月 15 日</time></li>
    <li>第三学期：<time>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/">异域舞蹈研究</a> 网页。</p>
  <p>李雷 教授</p>
  <p>纽臂大学校训：<q>人人皆可纽臂</q>——<cite>诸葛中天 绅士</cite></p>
</body>
</html>

 

除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog

标签：web 标签语义化

上一篇： Scrapy的命令行工具

下一篇： 经常说的 CPU 上下文切换是什么意思？（上）

精华推荐