《30分钟重学HTML》之基础-文字处理（三）

izzy
323 阅读11分钟

⚡️ 预警，前方高能：

在本文中，若出现以下 emoji 表情包请特别留意:

  • 白色书签：🔖， 代表一级标题；
  • 橙色大四边形：🔶 ,代表二级标题；
  • 蓝色小四边形：🔹， 代表三级标题；
  • 黄色闪电：⚡️，代表强调；

HTML 的主要工作是编辑文本结构和文本内容（也称为语义 semantics），以便浏览器能正确的显示。 本文介绍了 HTML 的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。

🔖 标题和段落

大部分的文本结构由标题和段落组成。 不管是小说、报刊、教科书还是杂志等。

在 HTML 中,

段落是通过 <p>元素标签进行定义的。

举个 🌰 子：

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

标题是通过“标题标签”进行定义的。

举个 🌰 子：

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

共有六个标题元素标签 :

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

每个元素代表文档中不同级别的内容;

<h1> 表示主标题

<h2> 表示二级子标题

<h3> 表示三级子标题

以此类推

🔶 1.结构化

在一个故事中，<h1>表示故事的名字，<h2>表示每个章节的标题， <h3>表示每个章节下的子标题，以此类推。

<h1>三国演义</h1>

<p>罗贯中</p>

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

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

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

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

<h3>却说张飞</h3>

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

在创建此类结构时，只需要记住一些最佳实践：

  • 应该只对每个页面使用一次<h1> ，这是顶级标题。
  • 以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题。
  • 在可用的六个标题级别中，最好每页使用不超过三个。嵌套级别过多会难以导航和阅读。

⚡️ 结构化的优点：

  • 标题、段落清晰。
  • 符合用户阅读习惯，能迅速看到一些有用的内容。
  • SEO 表现更佳。搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。
  • 适配屏幕阅读器。
  • 让 css、javascript 更好的进行定位。

🔶 2.语义化

以上举例"⚡️ 结构化"的时候，同时又引出一个新的概念："⚡️ 语义化"。

下面简单介绍，后面的文章会有深入、详细的介绍（届时补充语义化）。

⚡️ 为什么需要语义化？

在我们身边的任何地方都要依赖语义学。 我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。 举个 🌰 子： 我们知道红色交通灯表示“停止”，绿色交通灯表示”通行“。

同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里，<h1>元素也是一个语义元素，它给出了包裹在您的页面上用来表示 ⚡️ 顶级标题的角色或意义的文本。

<h1>这是一个顶级标题</h1>

一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用 CSS 让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器（上文提到过的）。

在另一方面，你可以让任一元素看起来像一个顶级标题。

举个 🌰 子：

<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span>

这是一个<span>元素，它没有语义。

如果没有内容或样式的提示，你并不知道它代表的是一个标题。

在这里，我们只是对它使用了 CSS 来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的 HTML 元素来标记这个项目。

🔖 列表

列表在生活中随处可见——从你的购物清单到你的回家路线方案列表，再到你遵从的教程说明列表。在网络上，列表也到处存在，我们需要学习三种不同类型的列表。

🔶 无序列表

⚡️ 无序列表用来标记顺序并不重要的项目。

看下面的早点清单,举个 🌰 子：:

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</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 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

🔶 强调

当我们想要在口语中添加强调，我们重读某些词，以便隐含的说出我们想要说的意思。在写作中，我们通过将文字写成斜体来强调它。

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

<p>I am <em>glad</em> you were not <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>

🔶 粗体字、斜体字、下划线 (⚠️HTML5 进行了重新定义)

迄今为止我们已经讨论的元素都是意义清楚的语义元素。<b>, <i>, 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义，被称为表象元素（presentational elements）并且不应该再被使用。因为正如我们在之前看到的，语义对可访问性，SEO（搜索引擎优化）等非常重要。

HTML5 用新的语义规则重新定义了<b>,<i>和<u>,稍微有点混乱。

这里是最好的经验法则：使用<b>,<i>,<u> 来传达传统意义上的粗体，斜体或下划线是合适的，没有其他元素更适合这样用了。然而，斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。

  • 粗体字--<b>

    <b>元素(提醒注意- Bring Attention To)用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将<b>元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。

    概括: ⚡️ <b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……

    举个 🌰 子：

    <!-- 系列说明文字中需要突出的文字 -->
<ol>
  <li>
      <b>切</b>下两片面包，
  </li>
  <li>
      在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。
  </li>
</ol>>

  • 斜体字--<i>

    <i>元素用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

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

    举个 🌰 子：

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

  • 下划线--<u>

    <u>元素,（表意不清的标注元素）表示一个行内被渲染的非原文的注解。默认情况下渲染为一个实线下划线，可以用 CSS 替换。此元素以前在旧版本的 HTML 中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含 CSS text-decoration 属性设置为 underline 的样式。

    概括: ⚡️ <u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

    举个错误的 🌰 子：

    <p>
总有一天我会改掉写<u>措字</u>的毛病。
</p>

    一种关于下划线的警告：人们很容易把下划线和超链接联系起来。因此，在 Web 上，最好只在链接上使用下划线。当语义适合时使用<u>元素，但是有时候在 Web 上用 CSS 改变下划线默认的的样式更加合适。

🔖 总结

  • ✔️ 理解 HTML 的标题和段落
  • ✔️ 初步理解 HTML 的结构化和语义化
  • ✔️ 理解 HTML 的列表
  • ✔️ 理解 HTML 语气元素
  • ✔️ 理解 HTML5 重新定义的<b>、<i>、<u>元素

🔖 参考资料

avatar
文章
阅读
粉丝