1. HTML 基础

  2. 常用的元素

  3. 工具与规范

段落

在 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

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

$$

语义化的文本

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

强调

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

$$demo

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

$$

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

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

重要

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

$$demo

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

$$

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

<p>这里是<strong>三眼鸭</song>的编程教室。</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>

$$

练习

  1. 完成以下范例。

$$demo

<h1>古诗词集</h1>

<h2>静夜思</h2>

<em>李白</em>

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

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

<h2>武陵春·春晚</h2>

<em>李清照</em>

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

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

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

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

$$