基础HTML界面结构

HTML 定义了 Internet 上每个网页的内容。通过使用 HTML 标记“标记”原始内容,可以告诉 Web 浏览器您希望内容的不同部分如何显示。创建具有正确标记内容的 HTML 文档是开发网页的第一步。
wp editor md 2240cbe6aa66fff983e0de1e2376b095 - 基础HTML界面结构
图:原始内容转化为 HTML 标记转化为网页

在本章中,我们将构建我们的第一个网页。它现在看起来像奇奇怪怪的,这是因为它没有加载任何 CSS文件。作为 Web 开发人员每天使用的 HTML 元素的,今天我们将对它进行全面介绍。

在浏览这些示例时,请尝试将它们视为更实用的 WYSIWYG 编辑器版本,例如 Google Docs 或 Microsoft Word。我们将使用所有相同类型的内容(标题、段落、列表等),我们将使用 HTML 更明确地定义它们。

开始

让我们开始使用 Atom 编辑器创建一个名为 basic-web-pages 的新项目。然后,在该文件夹中创建一个名为basics.html的新文件。这个 HTML 文件代表一个网页,我们将在其中存放本篇文章的所有代码示例。如果你尚未设置 Atom,请务必阅读本教程系列的简介。
wp editor md f585986bbd621519168358ea1f638295 - 基础HTML界面结构
图表:在文本编辑器中编辑 HTML 代码并在 Web 浏览器中查看更改

请记住,Web 开发人员的基本工作流程是在文本编辑器中编辑 HTML 并在 Web 浏览器中查看这些更改,这正是你学习过本章每个部分后所做的事情。

网页的结构

将以下 HTML 片段添加到我们的basics.html文件中。开始生成一个新的网页。通常,我们会使用某种模板引擎来避免重新输入多余的部分,但在本教程中,我们将专注于原始 HTML内容。

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata goes here -->
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

<!DOCTYPE html>首先,我们需要告诉浏览器这是一个带有该行的 HTML5 网页 。这只是浏览器在尝试显示我们的网页时寻找的一个特殊字符串,它总是需要看起来与上面的完全一样。

然后,我们的整个网页需要被包裹在<html> 标签中。实际的<html>文本称为“开始标签”,而</html>称为“结束标签”。这些标签中的所有内容都被认为是<html>“元素”的一部分,这是 Web 浏览器解析 HTML 标签时创建的。
wp editor md a75b13c23416ec18cdb31c95105554fd - 基础HTML界面结构
图:由开始标签和结束标签组成的 HTML 元素

<html>元素内部,我们还有两个称为<head><body>的元素。网页的头部包含其所有元数据,例如页面标题、任何 CSS 样式表链接以及呈现页面所需的其他内容,但我们不希望用户看到。大部分 HTML 标记将存在于<body>元素中,该元素内的东西代表页面的可见内容。需要注意,在网络浏览器中打开刚刚创建的页面不会显示任何内容,因为它只有一个空的<body>.
wp editor md d2e42192915622f17b6d70cc5f9846af - 基础HTML界面结构
图:网页分为 <head><body> 元素

在我们开始使用 CSS 之后,这个<head>/拆分的目的将在几章中变得更加清晰。<body>

还要注意上面代码片段中的 HTML 注释语法。任何以<!--和结尾的内容-->方式包裹的内容都将被浏览器完全忽略。这样做对于为文档写上注释非常又有。

页面标题

最重要的元素之一是网页的标题,由<title>元素定义。浏览器会在您页面的标签中显示它,而 Google 会在搜索引擎结果中显示它。

更新basic.html文件中的<head>元素内容:

<!DOCTYPE html>
<html>
  <head>
    <title>Interneting Is Easy!</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

浏览器中重新加载页面时,应该仍会看到一个空白页面,但还会看到Interneting Is Easy!在浏览器选项卡中:
wp editor md 9e947e9a6226577f2e029efaa9a34920 - 基础HTML界面结构
显示在浏览器选项卡中显示的<title> 元素的网页

请注意我们网页中的所有 HTML 标记是如何整齐嵌套的。确保没有重叠的元素非常重要。例如,<title>元素应该在 内部<head>,所以你永远不想在结束 标签之前添加结束</title> 标签:

<!-- (永远别这么写) -->
<head>
  <title>Interneting Is Easy!</head>
</title>

段落

标题都很好,但让我们做一些我们可以实际看到的事情。<p>元素将其中的所有文本标记为不同的段落。尝试将以下<p>元素添加到我们网页的正文中:

<!DOCTYPE html>
<html>
  <head>
    <title>Interneting Is Easy!</title>
  </head>
  <body>
    <p>First, we need to learn some basic HTML.</p>
  </body>
</html>

现在应该能够在页面上看到一些内容。同样,由于这是我们要显示的内容,它需要写在<body> 元素中,而不是<head>.
wp editor md 2a81871b4365283b64c35831db1ff30b - 基础HTML界面结构
显示<p> 元素的网页,其中包含一些内容
还要注意<p><title> 元素是如何缩进两次的,而<body><head>是如何缩进一次的。像这样缩进嵌套元素是一个重要的最佳实践,它可以让其他开发人员更容易阅读您的 HTML(或者如果您在 5 个月后回来并想要更改一些内容,也可以让您自己阅读)。

由您和您的开发团队决定是否要使用空格或制表符进行缩进。您可以在Atom > Preferences > Editor下的文本编辑器中设置此首选项,然后向下滚动到Tab Type设置。

标题

标题就像标题,但它们实际上显示在页面上。HTML 提供了六级标题,对应的元素是: <h1>, <h2>, <h3>, … , <h6>. 数字越大,标题越不突出。

页面上的第一个标题通常应该是<h1>,所以让我们在现有<p>元素上方插入一个。<h1>第一个元素与<title>文档的匹配是很常见的,如下所示:

<body>
  <h1>Interneting Is Easy!</h1>
  <p>First, we need to learn some basic HTML.</p>
</body>

默认情况下,浏览器会以较小的字体呈现不太重要的标题。例如,让我们包含一个二级标题,看看会发生什么:

<html>
  <head>
    <title>Interneting Is Easy!</title>
  </head>
  <body>
    <h1>Interneting Is Easy!</h1>
    <p>First, we need to learn some basic HTML.</p>

    <h2>Headings</h2>
    <p>Headings define the outline of your site. There are six levels of
    headings.</p>
  </body>
</html>

这应该会产生一个看起来像这样的网页:
wp editor md 32a3d20bbacb1889aa3f22f62c113a0c - 基础HTML界面结构

显示大<h1> 元素和较小<h2> 元素的网页
标题是标记内容不同部分的主要方式。它们定义了人类和搜索引擎都看到的网页轮廓,这使得选择相关标题对于高质量网页至关重要。

无序列表
每当您用 HTML 标记包围一段文本时,您就是在为该文本添加新的含义。在标签中包装内容会<ul>告诉浏览器,里面的任何内容都应该呈现为“无序列表”。要表示该列表中的单个项目,请将它们包装在<li>标签中,如下所示:

<h2>Lists</h2>

<p>This is how you make an unordered list:</p>

<ul>
  <li>Add a "ul" element (it stands for unordered list)</li>
  <li>Add each item in its own "li" element</li>
  <li>They don't need to be in any particular order</li>
</ul>

将此标记添加到元素后(在现有内容下方),您应该会看到一个项目符号列表,其中每个元素<body>都有一个专用项目符号:

  • wp editor md 1cf535ad1bb20afdd847b9ed4f874529 - 基础HTML界面结构
    显示<ul> 的网页,其中包含<li> 元素
    HTML 规范定义了关于哪些元素可以进入其他元素的严格规则。在这种情况下,<ul>元素应该只包含<li>元素,这意味着你永远不应该写这样的东西:
    <!-- (This is bad!) -->
    <ul>
      <p>Add a "ul" element (it stands for unordered list)</p>
    </ul>
    

    相反,您应该用<li> 标签包装该段落:

    <!-- (Do this instead) -->
    <ul>
      <li><p>Add a "ul" element (it stands for unordered list)</p></li>
    </ul>
    

    我们怎么知道<ul>它只接受<li>元素并且<li>允许嵌套段落?因为Mozilla 开发者网络(MDN) 是这么说的。MDN 是一个极好的 HTML 元素参考。在本教程中,我们将尝试尽可能多地介绍如何使用基本 HTML 元素,但是当您不确定某个特定元素时,请在 Google 上快速搜索“MDN ”。

    有序列表

    对于无序列表,重新排列<li>元素不应改变列表的含义。如果列表项的顺序确实很重要,则应该使用“有序列表”。要创建有序列表,只需将父<ul>元素更改为<ol>. 将以下内容附加到basics.html文件的列表部分:

    <p>This is what an ordered list looks like:</p>
    
    <ol>
      <li>Notice the new "ol" element wrapping everything</li>
      <li>But, the list item elements are the same</li>
      <li>Also note how the numbers increment on their own</li>
      <li>You should be noticing things is this precise order, because this is
          an ordered list</li>
    </ol>
    

    在浏览器中重新加载页面时,你会注意到浏览器会自动增加每个<li> 元素的计数。在Hello, CSS中,我们将学习如何更改显示的数字类型。
    wp editor md 21ac365d71f369a4326737f4a51ebf72 - 基础HTML界面结构
    显示<ol> 的网页,其中包含<li> 元素
    无序列表和有序列表之间的区别可能看起来很愚蠢,但它确实对 Web 浏览器、搜索引擎,当然还有人类读者具有重要意义。它也比手动为每个列表项编号更容易。

    诸如食谱、说明甚至目录之类的分步程序都是有序列表的良好候选者,而<ul> 列表更适合表示项目库存、产品特性、优缺点比较和导航菜单。

    强调(斜体)元素

    到目前为止,我们只使用“块级元素”(也称为“流内容”)。另一种主要类型的内容是“内联元素”或“行级元素”,它们的处理方式略有不同。块级元素总是在新行上绘制,而行内元素可以影响一行中任何位置的文本部分。
    wp editor md ffaa0423c4905e228e2d5d040bcad1c4 - 基础HTML界面结构
    图:块元素(包装几个内联元素)与内联元素(块元素内部)的比较
    例如,<p>是块级元素, 而是影响段落内<em>文本范围的内联元素 。它代表“强调”,通常显示为斜体文本。尝试在我们的示例网页中添加一个展示强调文本的新部分:

    <h2>Inline Elements</h2>
    
    <p><em>Sometimes</em>, you need to draw attention to a particular word or phrase.</p>
    

    包裹在<em>标签中的部分应呈现为斜体,如下所示。注意只有行的一部分受到影响,这是行内元素的特征。在CSS 盒子模型一章中,我们将发现内联和块状元素如何对页面布局产生巨大影响。

    突出显示使用<em> 元素创建的斜体文本的网页
    以防万一它还没有进入, 正确嵌套 HTML 元素非常重要。当您使用多个内联元素时,更容易弄乱标签的顺序,因此请确保仔细检查您的标记永远不会像这样:

    <!-- (Again, don't ever do this) -->
    <p>This is some <em>emphasized text</p></em>
    

    强(粗体)元素

    如果你想比<em>标签更强调,你可以使用<strong>. 它是一个类似的内联元素<em>,看起来像这样:

    <p>Other times you need to <strong>strong</strong>ly emphasize the importance
    of a word or phrase.</p>
    

    它应该以粗体文本呈现,如下所示:

    突出显示使用<strong> 元素创建的粗体文本的网页
    为了让你的一段文本更加引人注目,你可以<strong>在一个元素中嵌套一个<em>元素(反之亦然)。这将为您提供既强大又强调的文本:

    <p><em><strong>And sometimes you need to shout!</strong></em></p>
    

    正如示例文本所暗示的那样,这实际上是强调重点的印刷等价物。在对粗体和斜体字体过于疯狂之前,请阅读Web Typography章节。

    突出显示由<strong> 元素包裹在<em> 元素中的粗斜体文本的网页

    结构与表现

    您可能想知道为什么我们使用术语“强调”和“强”而不是“斜体”和“粗体”。这给我们带来了 HTML 和 CSS 之间的重要区别。HTML 标记应该提供有关您的内容的语义信息,而不是表示信息。换句话说,HTML 应该定义文档的结构,将其外观留给 CSS。

    图表:HTML 作为节点的抽象树,而 CSS 作为各种类型的渲染文本
    伪过时<b><i> 元素就是这方面的经典例子。它们过去分别代表“粗体”和“斜体”,但 HTML5 试图在文档结构和表示之间创建一个清晰的分离。因此,<i>被替换为<em>,因为除了斜体之外,强调的文本可以以各种方式显示(例如,以不同的字体、不同的颜色或更大的尺寸)。<b>和 相同<strong>

    正如我们将在Hello, CSS中发现的那样,我们可以更改浏览器对和<em>元素的默认呈现 。这进一步说明了我们不应该将其称为 HTML 中的斜体或粗体文本——这是由 CSS 决定的。

    空 html 元素

    到目前为止,我们遇到的 HTML 标记要么包装文本内容(例如, <p>),要么包装其他 HTML 元素(例如,<ol>)。并非所有 HTML 元素都是如此。其中一些可能是“空的”或“自动关闭的”。换行符和水平线是您会发现的最常见的空元素。

    换行符

    HTML 将连续的空格、制表符或换行符(统称为“空白”)压缩为一个空格。要查看我们正在谈论的内容,请将以下部分添加到我们的basics.html文件中:

    <h2>Empty Elements</h2>
    
    <p>Thanks for reading! Interneting should be getting easier now.</p>
    
    <p>Regards,
    The Authors</p>
    

    上面代码片段中的换行符Regards将被转换为空格,而不是显示为换行符:

    显示纯文本换行符的网页折叠到呈现页面中的空间
    这种行为可能看起来违反直觉,但 Web 开发人员经常将他们的文本编辑器设置为将行长限制在 80 个字符左右。作为程序员,以这种方式管理代码更容易,但是在呈现的页面中显示每个换行符会严重破坏预期的页面布局。

    为了告诉浏览器我们想要一个硬换行符,我们需要使用一个显式<br/>元素,如下所示:

    <p>Regards,<br/>
    The Authors</p>
    

    <br/>元素在文本格式重要的任何地方都很有用。Haiku、音乐歌词和签名只是它可能派上用场的几个例子。

    使用
    元素突出显示实际换行符的网页
    但是,要非常小心不要滥用<br/>标签。你使用的每一个都应该传达意义——你不应该用它来,比如说,在段落之间添加一堆空格:

    <!-- (You will be shunned for this) -->
    <p>This paragraph needs some space below it...</p>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <p>So, I added some hard line breaks.</p>
    

    正如上一节所讨论的,这种表示信息应该在您的 CSS 而不是 HTML 中定义。

    水平规则

    <hr/>元素是一个“水平规则”,它代表了一个主题中断。从故事的一个场景到下一个场景的过渡,或者在一封信的结尾和一个附言之间的过渡,是一个很好的例子,说明什么时候水平规则可能是合适的。例如:

    <h2>Empty Elements</h2>
    
    <p>Thanks for reading! Interneting should be getting easier now.</p>
    
    <p>Regards,<br/>
    The Authors</p>
    
    <hr/>
    
    <p>P.S. This page might look like crap, but we'll fix that with some CSS
    soon.</p>
    

    本章的主题之一是内容(HTML)与表示(CSS)的分离,<hr/>也不例外。就像<em>and一样<strong>,它有一个默认的外观(一条水平线),但是一旦我们开始使用 CSS,我们就可以将它渲染为部分之间的更多空间、装饰性的重音字符或几乎任何我们想要的东西。

    展示 <hr/> 元素的网页

    <br/>,<hr/>应该带有含义——当你只是为了美观而想显示一条线时不要使用它。为此,您需要使用 CSS border属性,我们将在几章中讨论。

    考虑<hr/>元素的另一种方式是,它的重要性低于新标题元素创建的分隔,但比新段落更重要。

    可选的尾随斜杠

    所有空 HTML 元素中的尾部斜杠 ( /) 完全是可选的。上面的代码片段也可以这样标记(注意 and标记/中缺少 ):


    <p>Regards,<br>
    The Authors</p>
    
    <hr>
    

    您选择哪种约定并没有真正的区别,但为了保持一致性,请选择一个并坚持下去。在本教程中,我们将包含尾随/字符,因为它清楚地表明它是一个自闭合元素。这将有助于防止您的眼睛在文档的其他地方搜索结束标记。

    总结

    本章可能看起来像是一个无穷无尽的 HTML 元素列表,而且,基本上是这样。当涉及到它时,HTML 非常简单。网页由 HTML 元素组成,每个元素为其包含的文本添加不同的含义,并且元素可以相互嵌套。

    我们在本章中所做的始终是 Web 开发过程的第一步——您需要先定义您想说的内容 (HTML),然后再定义您想说的方式 (CSS)。希望 basics.html我们在本章中创建的文件将作为核心 HTML 元素的有用快速参考。如果你碰巧放错了地方,它应该是这样的:
    wp editor md 38396f6a29e4a73a8ef517ee12acbb91 - 基础HTML界面结构
    显示<title><p><h1><ol> 和其他基本 HTML 元素的网页
    我们谈到了编写 HTML 有点像在所见即所得的文档编辑器中操作内容。HTML 显然是一个更加手动的过程,但代价是其令人难以置信的灵活性。您可以将其显示在网页、移动设备、平板电脑或打印的纸上,每种都有不同的布局。您甚至可以通过更改单行 CSS 来重新设置多个文档的样式。Microsoft Word 没有接近 HTML 和 CSS 作为内容媒体的潜力。

    在下一章中,我们将使用您每天都会遇到的其余元素来完善我们的 HTML 教育:链接和图像。对于更晦涩的元素,我们将让您自行探索 MDN 的HTML 元素参考。

  • 发表回复 0