段落

在 HTML 中， <p> 元素表示一个段落，比如下面这个。

<p>这里是三眼鸭的编程教室</p>

$$warning

<p> 元素中不能嵌套块级元素。

标题

HTML 中有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6> ，分别对应着 1～6 级标题，与 WORD 等文档编辑软件中的概念类似。

如下所示，1~6 级的标题元素的默认字体大小也会逐级变小。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

$$demo

语义化的文本

通过一些带有语义化的元素，可以使得一段文本中的部分内容附带不同的含义。

强调

有的时候，我们需要强调某些词汇，例如下面这段，强调三眼鸭。

$$demo

<p>这里是<em>三眼鸭</em>的编程教室。</p>

这里就可以使用 <em> （emphasis 强调）元素，对于 <em> 元素内的文本浏览器的默认风格是斜体。

<p>这里是<em>三眼鸭</em>的编程教室。</p>

重要

有的时候，我们表示某些重要的词汇，例如下面这段中的三眼鸭。

$$demo

<p>这里是<strong>三眼鸭</strong>的编程教室。</p>

这里就可以使用 <strong> （strong importance 非常重要）元素，对于 <strong> 元素内的文本浏览器的默认风格是粗体。

<p>这里是<strong>三眼鸭</strong>的编程教室。</p>

删除

有的时候，我们表示某些词语已经删除，例如下面这段。

$$demo

<p>小樱是个<del>肥美</del>可爱的姑娘</p>

这里就可以使用 <del> （delete 删除）元素，对于 <del> 元素内的文本浏览器的默认风格是添加删除线。

<p>小樱是个<del>肥美</del>可爱的姑娘</p>

插入

有的时候，我们表示某些词语是插入的，例如下面这段。

$$demo

<p>小樱是个<ins>美丽</ins>大方的姑娘</p>

这里就可以使用 <ins> （insert 插入）元素，对于 <ins> 元素内的文本浏览器的默认风格是添加下划线。

<p>小樱是个<ins>美丽</ins>大方的姑娘</p>

$$tip

使用 <i>、<b>、<s>、<u> 同样可以达到以上的样式，但由于不含有语义，且不利于 SEO（搜索引擎优化）。在 HTML5 之后已不推荐使用。

预定义格式文本

在 HTML 中大多数文本元素会把多个空格合并成一个空格和取消换行。在明确需要显示文本的空格和换行的情况可以使用 <pre> 元素。

<pre>
        床前明月光，疑是地上霜。
        举头望明月，低头思故乡。
</pre>

$$demo

<pre>

    床前明月光，疑是地上霜。

    举头望明月，低头思故乡。

</pre>

$$warning

尽量不要使用 <pre>，它会造成页面的混乱，笔者在职业生涯中也从没使用过 <pre>。

练习

完成以下示例。

$$demo

$$answer

<p>为了<em>减肥</em>，我决定<strong>保持自律</strong>，天天早起<del>睡懒觉</del><ins>跑步</ins>。</p>

完成以下范例。

$$demo

<p>床前明月光，疑是地上霜。</p>

<p>举头望明月，低头思故乡。</p>

<p>风住尘香花已尽，日晚倦梳头。</p>

<p>物是人非事事休，欲语泪先流。</p>

<p>闻说双溪春尚好，也拟泛轻舟。</p>

<p>只恐双溪舴艋舟，载不动许多愁。</p>

$$answer

<h1>古诗词集</h1>
<h2>静夜思</h2>
<p><em>李白</em></p>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<h2>武陵春·春晚</h2>
<p><em>李清照</em></p>
<p>风住尘香花已尽，日晚倦梳头。</p>
<p>物是人非事事休，欲语泪先流。</p>
<p>闻说双溪春尚好，也拟泛轻舟。</p>
<p>只恐双溪舴艋舟，载不动许多愁。</p>