Skip to main content

文字处理

标题和段落

<p>

在 HTML 中,每个段落是通过 <p> 元素标签进行定义的,比如下面这样:

<p>我是一个段落,千真万确。</p>

<h1>

每个标题(Heading)是通过“标题标签”进行定义的:

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1><h2><h3><h4><h5><h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题(the main heading),<h2> 表示二级子标题(subheadings),<h3> 表示三级子标题(sub-subheadings),等等。

标题和段落层次结构

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势,分久必合,合久必分。周末七国分争,并入于秦。及秦灭之后,楚、汉分争,又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖,陇西临洮人也,官拜河东太守,自来骄傲。当日怠慢了玄德,张飞性发,便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒,乘马从馆驿前过,见五六十个老人,皆在门前痛哭。飞问其故,众老人答曰:“督邮逼勒县吏,欲害刘公;我等皆来苦告,不得放入,反遭把门人赶打!”……</p>

列表

无序列表

Unordered,无序列表用于标记列表项目顺序无关紧要的列表 — 让我们以早点清单为例。

豆浆
油条
豆汁
焦圈

每份无序的清单从 <ul> 元素开始——需要包裹清单上所有被列出的项目:

<ul>
豆浆
油条
豆汁
焦圈
</ul>

然后就是用 <li> 元素把每个列出的项目单独包裹起来:

<ul>
<li>豆浆</li>
<li>油条</li>
<li>豆汁</li>
<li>焦圈</li>
</ul>

有序列表

Ordered。有序列表需要按照项目的顺序列出来——让我们以一组方向为例:

沿着条路走到头
右转
直行穿过第一个十字路口
在第三个十字路口处左转
继续走 300 米,学校就在你的右手边

这个标记的结构和无序列表一样,除了需要用<ol> 元素将所有项目包裹,而不是<ul>

<ol>
<li>沿着条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米,学校就在你的右手边</li>
</ol>

嵌套列表

<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。</li>
<li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。</li>
<li>鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。</li>
<li>在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。
<ul>
<li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。</li>
<li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。</li>
</ul>
</li>
</ol>

突出显示

在 HTML 中我们用<em>(emphasis)元素来标记这样的情况。这样做既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出。浏览器默认风格为斜体,但你不应该纯粹使用这个标签来获得斜体风格,为了获得斜体风格,你应该使用<span>元素和一些 CSS,或者是<i>元素(见下文)。

强调

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

非常强调

在 HTML 中我们用<strong> (strong importance) 元素来标记这样的情况。这样做既可以让文档更加地有用,也可以被屏幕阅读器识别出来,并以不同的语调发出。浏览器默认风格为粗体,但你不应该纯粹使用这个标签来获得粗体风格,为了获得粗体风格,你应该使用<span>元素和一些 CSS,或者是 <b> 元素 (见下文)。

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>
最后更新于:2022-8-01

其他特殊形态

斜体

<i> 被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……

下划线

<u> 被用来传达传统上用下划线表达的意义:专有名词,拼写错误……

<!-- 学名 -->
<p>
红喉北蜂鸟(学名:<i>Archilocus colubris</i>
是北美东部最常见的蜂鸟品种。
</p>

<!-- 舶来词 -->
<p>
菜单上有好多舶来词汇,比如 <i lang="uk-latn">vatrushka</i>(东欧乳酪面包),
<i lang="id">nasi goreng</i>(印尼炒饭)以及<i lang="fr">soupe à l'oignon</i>(法式洋葱汤)。
</p>

<!-- 已知的错误书写 -->
<p>
总有一天我会改掉写<u style="text-decoration-line: underline; text-decoration-style: wavy;">措字</u>的毛病。
</p>

<!-- 在一组指令中突出显示关键字 -->
<ol>
<li>
<b></b>下两片面包,
</li>
<li>
在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。
</li>
</ol>
最后更新于:2022-8-01