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

根据MDN网站学习记录笔记
本次测验要求你为你一封写好的信做出标记,以测验你基础和高级的 HTML 文本格式化技能,包括超链接等等。此外将测验你对一些 HTML 内容的熟悉程度。

标记信件

  • 准备工作
  • 项目概要
    • 块/结构语义:
    • 内联语义:
    • 文档的头部:
  • 代码展示
  • 结果展示
  • 小结

准备工作

开始测验之前,请先下载信件的起始文本和CSS代码。然后用文本编辑器(我选择使用vs code)创建一个新的 .html 文件来进行测验。

项目概要

本项目中,你的任务为一封大学内网信件进行标记,这封信是研究人员对一名学生有关申请博士学位问题的回复。

块/结构语义:

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

内联语义:

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

文档的头部:

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

代码展示

css部分代码没有改变


<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="author" content="李雷">
    <title>纽臂科学院学位申请邮件往来title>
    
    <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>[email protected]   
    address>

    <p class="sender-column">
        

结果展示

【Web前端开发】——HTML练习一:标记信件_第1张图片

小结

通过本次练习,回顾了前面所学的HTML基础知识,更加熟悉一些常见or不常见元素的用法,起到查漏补缺的作用。

  1. 标签引入css
    链接一个外部样式表,href:定义被链接文档的位置;type定义被链接文档的MIME类型;rel必需!定义当前文档与被链接文档之间的关系。
<link href="标记信件.css" type="text/css" rel="stylesheet">
  1. 标签标记一个缩写元素
    标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。
  2. 标签定义文档或文章的作者/拥有着的联系信息,其中文本通常呈现为斜体
  3. 的引用标记对比
    标签定义块引用。
    之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。而元素用来标记短的引用;可选属性cite规定引用的来源
  4. 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题
  5. 标签,在定义列表中定义条目的定义部分
<dl>
   <dt>计算机dt>
   <dd>用来计算的仪器 ... ...dd>
   <dt>显示器dt>
   <dd>以视觉方式显示信息的装置 ... ...dd>
dl>
  1. 标签定义下标文本,标签定义上标文本
  2. 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
<time datetime="2008-02-14">情人节time> 

你可能感兴趣的:(web前端开发,前端,html,css)