Lecture 2：段落与基本格式

1 段落

如果不分段落的话，HTML 页面就会变成一大坨文字，不利于阅读。所以我们需要段落标记。这个标记就是 p 标记（paragraph）。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

在保存后用浏览器打开，就可以看到两个段落了。

至于段落之间空多大距离、段落的文字大小、颜色等样式，这些不是 HTML 所关心的，而是 CSS 的事情。CSS 是用来控制页面样式的。

p 标记是段落的意思。如果想在一个段落上换行，需要使用 br 标记（break）。

<p>这是一行文字。<br>这是另一行文字。</p>

注意，br 标记是一个自闭合标记，不需要结束标记。当然它也可以被写成 <br />。

更进一步，如果这篇文章有一个标题，如何凸显其地位呢？需要使用标题标记 h1 到 h6。

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

标题单独占据一行，所以不需要 br 标记。

对于排版对齐来说，中文字符和标点一个字就可以视作一个“词”，但是对于英文来说，若没有特殊标记，单词会在同一行显示完整，可能造成页面右边的不美观，这时候可以使用 wbr 标记（word break）。

<p>这是一个很长的英文单词：<wbr>supercalifragilisticexpialidocious</wbr></p>

在 HTML 5 中，对于相邻的标题，可以使用一个 hgroup 标记将它们包裹起来，表示这些标题是一个组合。

<hgroup>
  <h1>这是一个一级标题</h1>
  <h2>这是一个二级标题</h2>
</hgroup>

2 字体样式

粗体：b 标记（bold）。

<p>这是一段<b>粗体</b>文字。</p>

斜体：i 标记（italic）。

<p>这是一段<i>斜体</i>文字。</p>

他们也是可以嵌套的。

<p>这是一段<b>粗体<i>粗体斜体</i>粗体</b>文字。</p>

等宽字体：tt 标记（teletype）。

<p>这是一段<tt>等宽字体</tt>文字。</p>

小号字体：small 标记。

<p>这是一段<small>小号字体</small>文字。</p>

上面这些工作也可以用 CSS 来完成，但是这些标记在 HTML 中也是可以使用的。

删除线和下划线：del 标记（delete）和 ins 标记（insert）。

<p>这是一段<del>删除线</del>文字。</p>
<p>这是一段<ins>下划线</ins>文字。</p>

这不是格式，而是结构。删除线和下划线是两种不同的语义，所以需要用不同的标记来表示。

还有一种表示过时的标记，s 标记（strikethrough）。

<p>这是一段<s>过时的删除线</s>文字。</p>

上标与下标：sup 标记（superscript）和 sub 标记（subscript）。

<p>这是一段 H<sub>2</sub>O。</p>
<p>这是一段 x<sup>2</sup>。</p>

特别强调（HTML 5）：mark 标记。

<p>这是一段<mark>特别强调</mark>文字。</p>

3 短语格式

强调：em 标记（emphasis）。

<p>这是一段<em>强调</em>文字。</p>

重要：strong 标记。

<p>这是一段<strong>重要</strong>文字。</p>

定义：dfn 标记（definition）。

<p>这是一段<dfn>定义</dfn>文字。</p>

代码：code 标记。

<p>这是一段<code>代码</code>文字。</p>

例子代码：samp 标记（sample）。

<p>这是一段<samp>例子代码</samp>文字。</p>

键盘输入：kbd 标记（keyboard）。

<p>这是一段<kbd>键盘输入</kbd>文字。</p>

变量：var 标记（variable）。

<p>这是一段<var>变量</var>文字。</p>

cite 引用：cite 标记。

<p>这是一段<cite>引用</cite>文字。</p>

上面这些标记不会换行。

评论