百度前端技术学园

# 文字排版综合任务练习

# 前言

上一节我们学习了 HTML 的基本标签，成功制作了一份属于你自己专属的在线简历。
我们今天将更加深入学习标签的语义化，知道什么时候他应该用什么标签，让网页更具有可读性，而不是一堆没有意义标签的堆砌。但在开始之前，推荐你把昨天的阅读材料和自己写的代码花上半小时时间，回顾一下。

# 课程目标

我们希望你能够通过简单的实践，你能更加清楚掌握以下几点

  • 了解 HTML 语义化 是什么.
  • 学习基本的 HTML 语义化标签，理解各种语义化签的使用场景.
  • 掌握 HTML 表格基本的内容，明白怎么去创建一个最基本的表格。

# 任务预览

带着任务去学习，学习目标会更准确，学习效率也会更高。所以今天希望您能够按照我们的最终显示的示例图 (opens new window)来标记这篇文字样例。里面涉及了更加复杂的 HTML 文本格式标签例如<address>,<figure>,<figcaption>，和定义列表，还出现了表格的应用，所以让我们开始学习吧！

# 阅读学习

在编写个人博客之前，我们需要先学习 HTML 语义化标签，学会选择合适的标签构建我们的页面。那首先请您思考什么是语义化以及为什么要使用语义化呢？带着思考去学习可能会事半功倍。
语义化是对文本内容的结构化，选择合乎语义的标签，便于开发者阅读，维护写出更优雅的代码，让浏览蓝旗的爬虫和辅助技术能够更好的解析
您可以通过下面的资料，学习什么是语义化。

以上你知道了为什么要用语义化的标签来组织构建页面重的文本结构和文本内容。接下来我们来学习基本的语义化标签您需要掌握 header,nav,footer,main,section 的用法

接下来深入学习 HTML 更复杂的文本内容标签，以便我们成功展示各式各样的文字

table 是表格元素用来创建一个表格,下面是 table 标签的具体用法讲解,您需要重点掌握表格基础语法,后面我们还将深入学习表格进阶内容。

# 任务作业

希望您能够按照我们的最终显示的示例图 (opens new window)来标记这篇文字样例water.txt (opens new window)，形成一个在线文章博客。

开始任务之前，请先下载文章的起始样例和。然后用文本编辑器（用 JSBin 或 coddpen 等在线编辑工具亦可）创建一个新的 HTML 文件来进行测验。

  • 步骤和提示
  • 你应该首先先构造 HTML 基本结构，包括:<doctype>、<html>、 <head>和<body>元素。
  • 运用元标签把文档的字符集声明为 utf-8。
  • 运用合适的标签引入我们提供的 CSS 代码。

块/结构语义：

  • 这个文档搭建了基本结构之后，应该用适当的 HTML 语义标签来表明文档大致分几个部分,比如：
    • header表示标题部分
    • <main>代表主题部分
    • <footer>包裹页脚联系方式部分
  • 这篇文章应该被标记成有着段落和标题的结构。 这篇文章有 1 个顶级标题（文章分享博客）， 1 个二级标题 （水） 和 三个三级标题。
  • 使用适当类型的列表标记水在机体内的功能
  • 使用适当的类型的标签标记（海水淡化）这个二级标题下的的两个两个定义(多级闪蒸(MSF),低温多效蒸馏(MSF)
  • 地址应该放在<address>元素下. 每行的地址应该放在新的一行而不是新的段落.

内联语义：

  • 用适当的元素把(水)这个一级标题下的发布时间标记成机器可读的日期。
  • 下划线添加：
    • 用适当元素为 文本 "点赞" 添加下划线表示
    • 用适当元素为 文本 "它是包括无机化合。。。" 添加下划线表示
  • 超链接添加：
    • 用适当元素为 文本 "更多相关" 加上超链接。链接指向 https://baike.baidu.com/item/水/34133
    • 用适当元素为 文本 "“科普中国”科学百科词条编写与应用工作项目" 加上超链接。链接指向 https://baike.baidu.com/science
  • 加粗显示强调
    • 着重显示 "水(化学式为 H₂O),是由氢、氧两种元素组成的无机物"
    • 强调显示文本 "重水的主要用途"
    • 在试着标记至少对一些别的文本进行着重（<strong>）/ 强调（<em>）显示。
  • 文章引用
    • 用合适的标签表明这段话引用 "水是地球上最常见的物质之一。地球表面有 71%被水覆盖...才有较为明显的导电性"，出自戚桓瑜主编的《光伏材料制备与加工[M]》.2015 第 40 页
  • 图片添加和图片说明
  • 名词缩写
    • 用合适的元素将 "多级闪蒸 MSF"中的"MSF"标记为机器可读的缩写名词，全称为"Multistage Flashing Systom"
    • 用合适的元素将 "低温多效蒸馏 LT-MED"中的"LT-MED"标记为机器可读的缩写名词，全称为"MultipleEffectDistillation"
  • 上标下标
    • 正确标注 文章中需要涉及的下标/上标（位于化学方程式、引用标记[n]）。
  • 地址信息
    • 用合适的元素包裹文章末尾的联系方式方式，并且设置一个类属性“sender-column”，这样就能通过添加 CSS 来使它们右对齐
  • 表格创建
    • 这篇文章有一个表格，表格只有主体部分，用合适的语义元素结构这个最简单的表格

# 自测问题

下面的问题，需要您进行一个自我思考，然后进行自我回答来检验自己本次学习的理论知识掌握程度。

  • 说说你的语义化的理解？语义化可以给我们带来什么样的好处呢？
  • 分别说出<header>，<section>，<nav>，<footer>，<main>标签都适用于表示什么内容
  • 是不是有了语义化标签我们就再也不使用 <div> 标签了
  • <figure> 和 <figcaption>也可以应用于 video 和 gifs 吗？
  • 区分<strong>和<b>以及<strong>和<em>
  • 使用什么元素可以创建一个 link-break?
  • 使用什么元素显示文本斜体？

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

    今天的内容看似比较多，但是实际你在编码的过程中多去运用这些 HTML 标签，你就会很快掌握它们，开始行动起来吧。

# 预告

下一节我们将继续深入学习表格进阶用法，学习表格语义化相关内容，以及运用更多表格属性实现表格不一样的结构。

# 相关元素

  • 文本相关元素
  • 布局相关元素

← 实现一个美食营养表 →