HTML基础（1）

文本结构

正如Word中编辑文本一样，HTML拥有段落与标题用于控制文本的结构，在上一章中也简单介绍了<p>段落元素标签。另外，还有<h1>至<h6>六个标题元素标签，分别代表文档中的不同级别标题，<h1>代表主标题，<h2>代表二级子标题等。

通过正确使用上述标签，可以有效的将文档结构化，从而更好的管理文档，也能更好地表达出元素正确的语义。

<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

文本内容格式

在上一章中介绍了<i>、<em>等标签，通常在视觉上它们用于将文本置为斜体，但这依赖于浏览器默认的风格以及对元素样式的修改。除去视觉影响以外，这些标签更主要的功能是用于语义化其包括的文本，以帮助例如视觉障碍人群等更好的了解文档的内容。例如我们通常可以使用<em>标签强调文本中一些较为重要的部分。

以下列出了一些常见的语义化标签：

• <em>: 用于表示需要强调的内容，通常表示为斜体。
• <strong>: 用于表示非常重要的内容，通常表示为加粗字体。
• <del>: 用于表示被删除的内容，通常表示为在文字上显示删除线。

以下为不具有特定语义但表示了不同样式的标签：

• <i>: 用于斜体内容。
• <b>: 用于加粗内容。
• <u>: 用户下划线内容。

<span>元素标签是一个特殊的元素，它没有语义也没有特殊的样式表示，它通常会通过自定义样式表示出与语义无关的效果。

高级文本格式

除上述文本格式元素标签外，还有一些其它的标签，可以表示出更为复杂的文本格式。例如：

• <sup>: 上标
• <sub>: 下标
• <code>: 计算机代码
• <pre>: 保留原始格式，即若存在多个空格将不会被压缩为一个
• <kbd>: 键盘输入

对于更多的文本格式标签，可以在使用时参考文档。

列表

列表是一个常见的结构，正如上文中也大量使用了列表结构。在HTML中，列表分为了有序列表（<ol>）与无序列表（<ul>）两种。无论是有序列表或是无序列表，对于列表中的每一项，都需要使用<li>元素标签包括其内容。

有序列表通常用于表示一些与顺序相关的内容，在默认样式下列表中的每一项通常带有数字标号。

<ol>
  <li>7:00 起床</li>
  <li>7:05 洗漱</li>
  <li>7:10 吃早饭</li>
</ol>

无序列表则通常用于表示一些与顺序无关的内容，在默认样式下列表中的每一项前将带有实心的圆圈。

<ul>
  <li>土豆</li>
  <li>白菜</li>
  <li>胡萝卜</li>
</ul>

需要注意的是，此处的无序列表不代表浏览器渲染时会将列表中的内容无序展示。

嵌套列表

列表可以进行嵌套使用，且对于一个任意类型的列表，它可以嵌套不同类型的列表进行使用。

<ol>
  <li>Delta</li>
  <li>Omicron
    <ul>
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li>Beta</li>
</ol>

超链接

在上一章中，我们已经简单的介绍了超链接元素标签<a>，在本节中我们将继续深入了解。

<a href="https://www.baidu.com">Baidu.com</a>

对于一个简单的标签，基本上会有以下几个部分：

• 开始标签<a>与结束标签</a>。
• 属性href，用于指定超链接的目标地址。
• 内容，可以为文本或其它元素（例如图片等），若没有内容将可能在视觉上看不到该超链接的存在。

超链接的链接目标

超链接的目标具有一套较为复杂的规则，它可以是一个相对链接也可以是一个绝对链接。下面介绍几种常见的链接目标格式：

• 当前目录下的其它文件：<a href="page-b.html">
• 相对路径表示的其它文件：<a href="../dir2/page-b.html">
• 绝对路径表示的其它文件：<a href="/var/html/dir2/page-2.html">
• 通过URL指定的目标：<a href="https://www.baidu.com">

另外，链接的目标还可以使用#及名称链接到文档中的特定文档片段。在使用文档片段前需要对该文档片段分配id属性，例如：

<ol>
  <li><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
</ol>
<h1 id="section-1">Section 1</h1>
<p> ... </p>
<h1 id="section-2">Section 2</h1>
<p> ... </p>

在HTML5中，我们可以将超链接的目标设置为#或#top使其点击后回到网页顶端。

另外，链接的目标可以为一个电子邮件链接。对于一个电子邮件链接，目标地址前需要加上mailto:前缀。另外，目标地址中也可以提前定义邮件的主题、内容等信息。

<a href="mailto:example@example.com">发送邮件</a>
<a href="mailto:example@example.com?subject=Hello&body=Hello">发送预定义内容邮件</a>

超链接的更多属性

• target属性：用于指定超链接的目标窗口，默认为当前窗口，即_self。
• title属性：用于指定超链接的提示文本，鼠标悬停在超链接上时会显示该文本。
• download属性：用于指示浏览器下载URL指定的目标而非跳转至该目标。

欢迎大家搜索关注我的公众号“风纸”，或是直接扫描下方二维码关注👇，也可以在微信上查看本文。