65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 & CSS3 初学者指南 - 第 2 部分/12: 基本元素

L. Auer
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (4投票s)

2014 年 3 月 30 日

CPOL

13分钟阅读

viewsIcon

10596

本文介绍了用于定义页面结构和数据的基本 HTML 元素。

引言

本文是“HTML5 和 CSS3 初学者指南”系列的第二部分。在本文中，您将学习实现 HTML 页面的基本元素。在本系列的第一个教程中，您已经学习了 HTML 页面的结构。本文将介绍 HTML 页面 body 部分的元素。HTML 元素标签的完整列表可以在例如 w3schools.com 网站上找到。

一些概念

首先需要定义一些概念。HTML 页面由标签定义，例如 <h1> 或 <p>。大多数标签都有一个开始标签，例如 <p>，以及一个匹配的结束标签 </p>。标签对（开始标签和结束标签）定义了一个元素。使用这些元素，您可以定义页面中的结构和数据。结构意味着一个元素是标题、段落、列表等。您想在浏览器中向读者显示的数据写在标签之间。

body 元素中的元素（body 本身也是一个元素，它有一个开始标签 <body> 和匹配的结束标签 </body>）分为块级元素和内联元素。块级元素在浏览器中显示时通常会开始一个新行。内联元素写在块级元素内部，因此不会开始新行。

块级元素

主要的块级元素有：

  • 标题：<h1> </h1> ... <h6> </h6>
  • 段落：<p> </p>
  • 无序列表：<ul> </ul>
  • 有序列表：<ol> </ol>
  • 预格式化文本：<pre> </pre>
  • 表格：<table> </table>
  • 水平线：<hr>

在接下来的章节中，将解释每个元素。每个元素在页面中显示时都有默认的字体大小、字体系列和边距。它们可以在 CSS 文件中重新定义。本文不解释这种重新定义。

标题

有六个标题元素。第一个是 <h1>，最后一个是 <h6>。<h1> 定义最重要的标题。每个页面至少应该有一个 <h1> 标题。请记住，您同时定义了结构和数据。当您阅读任何文本时，总会有一些内容告诉您文本的主题，即标题。Google 等搜索引擎将 <h1> 标题用作搜索的来源。标题的数字表示了页面中标题的使用顺序。

所有标题

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

以及它们在网页中的显示效果（具有默认格式）。

段落

段落是页面的文本。段落由 <p> 元素定义。下一段文本来自维基百科，春天（季节）。

<p>Spring is one of the four conventional temperate seasons, following winter and 
preceding summer. There are various technical definitions of spring, but local usage 
of the term varies according to local climate, cultures and customs.</p>

<p>When it is spring in the Northern Hemisphere, it will be autumn in the Southern 
Hemisphere. At the spring equinox, days are close to 12 hours long with day length 
increasing as the season progresses. Spring and "springtime" refer to the season, 
and also to ideas of rebirth, rejuvenation, renewal, resurrection and regrowth.</p>

这就是您在网页中看到的效果。请注意，段落中的换行根据浏览器窗口的宽度而变化，而不是代码中换行的地方。浏览器中的换行发生在单词之间。这使得段落文本能够适应不同的屏幕尺寸。默认情况下，段落之间以及文本的左侧和右侧都有一些间距。

列表

有无序列表、有序列表以及定义列表。首先介绍无序列表和有序列表。

在下图的左侧是无序列表。

定义列表时，首先要定义您想要无序列表 <ul> 还是有序列表 <ol>。列表项是 <li>。

无序列表的定义。注意 <ul> 的结束标签。列表项 <li> 位于 <ul> 元素内部。

<ul>
   <li>Flower</li>
   <li>Tree</li>
   <li>Bush</li>
   <li>Grass</li>
</ul>

有序列表的定义方式类似。唯一的区别是 <ul> 已更改为 <ol>。

<ol>
   <li>Flower</li>
   <li>Tree</li>
   <li>Bush</li>
   <li>Grass</li>
</ol>

在前面的示例中，您可以看到当一个元素嵌套在另一个元素内时，代码应该如何编写。使用了缩进。这使得代码对我们人类来说更易读。通常，HTML 编辑器都有一个可以自动进行这些缩进的命令。

您也可以在列表中嵌套列表，请参阅下图。

这是它的 HTML 代码。请注意“花”的 <li> 在哪里结束！ 在一个 <li> 元素内部有一个另一个 <ul> 元素。

<ul>
   <li>Flower
      <ul>
         <li>Daisy</li>
         <li>Rose</li>
         <li>Aster</li>
      </ul>
   </li>
   <li>Tree
      <ul>
         <li>Birch</li>
         <li>Spruce</li>
         <li>Oak</li>
         <li>Linden</li>
      </ul>
   </li>
   <li>Bush</li>
   <li>Grass</li>
</ul>

可以混合使用 <ul> 和 <ol> 列表，请参阅下面的示例。

<ol>
   <li>Flower
      <ul>
         <li>Daisy</li>
         <li>Rose</li>
         <li>Aster</li>
      </ul>
   </li>
   <li>Tree
      <ul>
         <li>Birch</li>
         <li>Spruce</li>
         <li>Oak</li>
         <li>Linden</li>
      </ul>
   </li>
   <li>Bush</li>
   <li>Grass</li>
</ol>

HTML定义列表 <dl> 中，您定义一个术语 <dt> 和与之相关的描述 <dd>（或任何文本）。

<dl>
   <dt>Daisy</dt>
   <dd>Daisy is a common garden flower with white and yellow color.</dd>
   <dt>Rose</dt>
   <dd>Roses are grown with many different colors.</dd>
</dl>

预格式化文本

预格式化文本通常用于在网页中呈现程序代码。预格式化文本在页面中的显示方式与代码中的写法完全相同。另请注意，默认字体为 Courier New，尽管它可以在 CSS 文件中重新定义。

对应的代码是。

<pre>This is 
   preformatted text
      and it is shown
in a browser page just as it is
   written in an html code.
</pre>

表格

表格是一种包含行和列的结构。行与列的交叉点是一个单元格。在 HTML 表格 <table> 中，您定义表格行 <tr> 和单元格（行中的表格数据 <td>）。您不定义列。

这里是一个包含两列五行的表格定义。请注意，您定义的是行。有五个 <tr> </tr> 元素。在一行内，您使用 <td> </td> 元素定义单元格。

<table border="1" style="width: 200px;">
   <tr>
      <td>Flower</td>
      <td>Tree</td>
   </tr>
   <tr>
      <td>Daisy</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Rose</td>
      <td>Spruce</td>
   </tr>
   <tr>
      <td>Aster</td>
      <td>Oak</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Linden</td>
   </tr>
</table>

这就是您在浏览器中看到的效果。<table> 标签有一些称为属性的额外定义，仅用于显示目的。属性提供有关 HTML 元素的额外信息。它们通常以键值对的形式出现，例如 border="1"。

属性 border="1" 为表格和单元格添加了边框。它在 HTML5 中已过时，但它是定义表格时一个方便的属性。另一个 style 属性用于设置表格的宽度，以便为单元格提供更多空间。

在“Linden”左侧的单元格中是&nbsp;。这表示空格，是 Non Breakable SPace 的缩写。它通常用于表格中，以防单元格为空。

同一个表格在 <table> 标签中没有属性。

可以定义某些列作为列标题。这可以使用 <th> 标签完成。请注意，<th> 元素的文本默认居中。

<table border="1" style="width: 200px;">
   <tr>
      <th>Flower</th>
      <th>Tree</th>
   </tr>
   <tr>
      <td>Daisy</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Rose</td>
      <td>Spruce</td>
   </tr>
   <tr>
      <td>Aster</td>
      <td>Oak</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Linden</td>
   </tr>
</table>

当然，<th> 标签也可以用于行标题。

<table border="1" style="width: 300px;">
   <tr>
      <th>Flower</th>
      <td>Daisy</td>
      <td>Rose</td>
      <td>Aster</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <th>Tree</th>
      <td>Birch</td>
      <td>Spruce</td>
      <td>Oak</td>
      <td>Linden</td>
   </tr>
</table>

在表格中，您可以定义相当复杂的结构。这是一个此类结构的示例。

第一列跨越四行（rowspan="4"）。第一行的第二列跨越三行。其他行则单元格较少。colspan 的工作方式类似。

这种结构手工编写起来相当困难。在 HTML 编辑器中，通常有一个表格工具来帮助定义和编码。

<table border="1" style="width: 250px;">
   <tr>
      <td rowspan="4">Trees</td>
      <td rowspan="3">deciduous trees</td>
      <td>Birch</td>
   </tr>
   <tr>
      <td>Oak</td>
   </tr>
   <tr>
      <td>Linden</td>
   </tr>
   <tr>
      <td>coniferous trees</td>
      <td>Spruce</td>
   </tr>
</table>

更复杂的 HTML 表格还可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 和 <tbody> 元素。

水平线

水平线由 <hr> 标签定义。此标签没有结束标签。

<p>Some text here.</p>
<hr>
<p>Some text here.</p>

HTML 代码中的注释

在任何代码中编写注释（程序员称之为注释）都很有用。它有助于您以后记住您做了什么以及为什么会采用特定的解决方案。这些注释存在于代码中，但在浏览器窗口中不可见。您在 HTML 代码中的注释写在 <!-- 和 --> 标签之间。

<!-- This is a note (a comment) -->

内联元素

顾名思义，内联元素是位于同一行中的。图像标签、链接（锚点）标签、换行和强调标签是定义内联元素的标签。

如果您需要强制在段落中换行，可以使用换行 <br> 标签。

<p>There is a need to <br>force the line break but not to start a new paragraph.</p>

需要
强制换行，但不是开始新段落。

强调文本

我们先来学习强调标签。当您想在一篇文本中强调某些内容时，您会使其与文本的其余部分略有不同：粗体 <b> 或 <strong>，斜体 <i>，删除线 <del>，标记 <mark>，下标 <sub>，上标 <sup>。

文本可以是粗体，强调，斜体，甚至是删除线。您也可以写一些物理学术语：水是 H2O，平方米是 m2。不同的背景颜色也能起到强调作用。

上一段的 HTML 代码是

<!-- Note that <b> and <strong> look the same in the browser window. -->
<p>The text can be <b>bold</b>, <strong>strong</strong>, <em>italic</em> or even <del>strikethrough</del>. 
You can write some physics terms as well: water is H<sub>2</sub>O, square meter is m<sup>2</sup>. 
Different <mark>background color</mark> also emphasizes.
</p>

页面中的图像

要在页面中显示图像，需要使用 <img> 标签。您还需要定义要显示的图像是什么。为此，有一个 src 属性（src = source）。您还应该使用纯文本描述图像的内容，以便盲人或视障人士能够理解。为此，有一个 alt 属性。<img> 标签还有 width 和 height 属性来指示图像的大小。您不应该使用这些属性。图像的大小应该根据页面所需的尺寸来定。互联网世界是移动化的，如果不在 HTML 代码中设置大小，更容易使图像适应不同的屏幕尺寸。响应式设计和实现将在后续文章中介绍（希望如此，在此阶段尚不确定）。

<img> 元素的语法是

<img src="path and name of the image" alt="description of the image" >.

请注意，当使用 HTML5 标准时，<img> 标签没有结束标签。属性及其值可以按任何顺序排列。属性的值用引号括起来。

<img> 是一个内联元素，所以它应该在某个元素“内部”。通常它在段落内部。假设图像与 HTML 页面位于同一个文件夹中，图像的名称是 daisy.jpg，则在页面中显示图像的代码将是。

<p><img alt="Daisy flowers in my garden." src="daisy.jpg"></p>

结果是：

Daisy flowers in my garden.

在 HTML5 标准中，还有一个元素用于在页面中显示图像。那就是 <figure> 配合 <figcaption>。<figure> 似乎是一个块级元素。实际显示的图像在 <img> 元素中定义。

<figure>
   <img src="daisy.jpg" alt="Daisy flower">
   <figcaption>Daisy flowers in my garder.</figcaption>
</figure>
Daisy flower
我的花园里的雏菊花。

页面中的链接（锚点）

链接或锚点（在 HTML 世界中称为 <a>）提供了一种跳转到其他位置的方式。链接可以指向

  • 此页面的开头
  • 此页面中的特定位置
  • 此网站中另一页面的开头
  • 此网站中另一页面中的特定位置
  • 另一个网站的第一页
  • 另一个网站页面中的开头
  • 另一个网站页面中的特定位置

锚点是一个内联元素，所以它应该在某个元素“内部”，就像 <img> 标签一样。通常锚点位于段落或 <li> 元素中。当定义网站导航时，会使用 <li> 元素。

让我们研究一下锚点元素的语法。

<a href="where to go" target="_blank">Link text</a>

target="_blank" 是可选的。如果链接应该在新窗口或新标签页中打开（取决于用户的浏览器设置），则使用它。如果链接将用户带出当前站点，则应使用新窗口或新标签页。

href 是 hypertext reference 的缩写。您可以在此处写入链接指向的页面的地址。

示例 1

<ul>
   <li>to the <a href="#">beginning of this page</a></li>
   <li>to <a href="#block">Block level elements</a> (a specific place in this page)</li>
</ul>

指向页面开头的地址是 "#" 或只是一个空字符串 ""。当需要“跳转”到页面中的特定位置时，该位置必须有一个唯一的名称。该唯一名称用作地址，例如 "#block"。该位置的名称使用 id 属性定义。在这种情况下：<h2 id="block">块级元素</h2>。请注意，id 属性值中没有 '#'，但在地址 '#block' 中使用了它。

示例 2

假设我的网站上有一个页面 flowers.html。为了简单起见，我假设它与我将要编写链接的页面位于同一个文件夹中。在该 flowers.html 中有一个 id="daisy" 的位置。请不要点击链接，那里没有定义地址。

在实际情况下，它们将这样定义。请注意，另一个页面中的特定位置在页面名称之后，并用 '#' 标记。

<ul>
   <li>to the <a href="flowers.html">beginning of another page</a> in this site</li>
   <li>to the <a href="flowers.html#daisy">specific place in another page</a> in this site</li>
</ul>

示例 3

这些示例将指向互联网上的另一个网站。根据您的浏览器设置，将会打开一个新窗口或一个新标签页，因为这些链接指向其他网站。

<ul>
   <li>to the first page of <a href="https://w3schools.org.cn/" target="_blank">
       w3schools.com</a></li>
   <li>to the beginning of the
       <a href="https://w3schools.org.cn/tags/default.asp" target="_blank">html 
       tags page</a> in w3schools.com</li>
   <li>to the <a href="https://w3schools.org.cn/tags/default.asp#bottomlinks" target="_blank">
       end of html tags page</a> in w3schools.com</li>
</ul>

每个链接都有 target="_blank" 定义，用于在新窗口或标签页中打开。href 属性中的地址以 "http://" 开头，后跟域名，即站点的主要地址。当只存在域名时，会显示站点的首页。当域名后存在特定页面时，会显示该页面。如果您想引导读者到页面中的特定位置，那么 '#place_id' 是地址的最后一部分。

示例 4

图像也可以是链接。缩略图可以链接到较大的图像。较大的图像将在新窗口/标签页中显示。

Daisy

<p><a href="daisy.jpg" target="_blank">
      <img src="daisy_tn.jpg" alt="Daisy">
    </a></p>

属性

HTML 元素可以有一个或多个定义的属性。属性为元素提供了一些额外的信息，或者属性是元素必不可少的。属性在元素的开始标签内以键值对的形式编写，并用 '=' 分隔。一个元素可以同时具有零个或多个属性。

<img> 元素有一个必不可少的属性 src，它告诉浏览器要显示在页面中的图像的路径和名称。<img> 元素还有一个 alt 属性，但它不是必不可少的。如果未定义它，浏览器仍能显示图像。

有一些通用属性可以用于所有 HTML 元素。

  • title：当鼠标指针悬停在元素上时显示额外文本
  • id：元素的唯一名称，可用于例如锚点定义
  • class：可以从 CSS 文件中编写对 HTML 类的引用
  • style：您可以使用 CSS 语法为单个元素编写特定的样式定义

示例

这里有一些文本。将鼠标指针放在文本上。

Daisy flower
将鼠标指针放在图像上

<p title="This text you see with a mouse" style="color: red;">Here is some text. Put your mouse 
pointer over the text.</p>
<p><a href="daisy.jpg" target="_blank">
<img alt="Daisy flower" src="daisy_tn.jpg" title="This is a link to a bigger image" ></a>
<br>Put your mouse pointer over the image</p>

如何编写易读的代码

HTML5 标准规定所有标签都必须用小写字母书写；因此 <p>、<h1> 等。

在程序员之间，已经形成了一种编写可读代码的标准。

  1. 缩进嵌套在其他事物（元素/标签/...）内部的内容。
  2. 如果元素内部有缩进的内容，则将开始标签和结束标签写在同一“列”中。
  3. 在块级元素之间或较长结构的前后留一个空行。
  4. 在代码中写注释。不要将您的代码翻译成您自己的语言，而是描述写了什么以及为什么。
  5. 请记住使用验证器检查您的代码，以确保 HTML 代码符合标准。这里是 W3C 验证器的链接。
  6. 查找您的 HTML 编辑器是否有一个命令可以重新格式化您的 HTML 代码。重新格式化通常会缩进应该缩进的行。

浏览器支持

HTML 标准一直在不断发展。浏览器（Internet Explorer、Opera、Safari、Firefox、Chrome）必须能够解释 HTML 和 CSS 代码，并在浏览器窗口中显示 HTML 文件的内容，其格式与作者意图一致。尽管新标准中存在新的 HTML 元素和 CSS 定义，但浏览器不一定能够解释它们。当新元素支持已实现时，将会出现新版本的浏览器。另一方面，一些旧的 HTML 元素在最新标准中已不再支持。浏览器可能仍然能够解释不支持的元素。

在 w3schools 网站 HTML 参考中，列出了 HTML5 标准元素。新元素已用 HTML5 徽标标记。不再支持的元素也已标记，并建议使用哪个元素代替，或者是否应该使用 CSS 定义代替。每个 HTML5 元素都有一个指向元素定义页面的链接，您可以在其中找到哪些浏览器及其版本支持该元素的信息。

© . All rights reserved.