插件窝 干货文章 HTML 元素

HTML 元素

我们 gt 元素 lt 566    来源:    2024-10-23

上周,您成为了一名 web 开发人员!干得好!我们开始研究 html 用于构建文档的不同类型的元素,以便 internet 浏览器可以读取该文档。但是,html 几乎所有事情都使用元素!本周,我们将介绍四种不同类型的元素以及如何使用它们,最后,您将向上周创建的页面添加内容!

如果您刚刚找到该系列,请查看该系列页面,或者如果您需要复习一下,请转到上周的文章!

文本元素

文本构成了互联网的大部分内容,您在任何页面上放置的最基本的内容之一就是文本!由于我们需要能够格式化该文本,因此 HTML 为我们提供了元素来环绕该文本并为我们的内容提供一些组织。

段落元素

要将常规文本添加到我们的页面,我们将该文本放置在开始和结束

标记之间!查看示例并亲自尝试一下!


头>

  <p>这是一些常规正文。</p>
  <p>还有更多!</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>
正文&gt;

为什么我们称其为“段落”?好吧,如果我们放置其中两个元素,它们将分别出现在不同的行上,从而有效地形成一个段落。如果您正在在线查看新闻文章,每次看到新段落时,您都会看到一个单独的

元素!

标题

如果一切都是正文,我们的页面看起来会非常平淡,帮助用户理解我们网站内容的最佳方法之一就是用信息丰富的标题对其进行标记。 HTML 有 6 个不同的标题元素,它们的语法并不难记住!

<h1>标题</h1>
<h2>副标题</h2>
<h3>标题</h3>
<h4>副标题</h4>
<h5>部分</h5>
<h6>小节</h6>

默认情况下,您的浏览器会将

标题设置为最大,将

标题设置为最小,但是当我们了解 CSS 时,您会发现情况并非如此。

对于标题,我们还需要遵循一些使用它们的规则:

  • 每个网页只能有一个

    标签。

  • 按顺序使用标题:

    之后,不要跳到

  • 使用所有标题来描述页面的内容!

如果您不遵循这些规则,您的网页仍然会呈现,但您的文档将不再格式良好。我们遵循这些规则是因为它使浏览器更容易阅读并解释您的页面,并且使搜​​索引擎更容易知道您页面上的重要信息是什么!

创建列表

我们还可以在列表中构建页面上的信息。 HTML 提供两种列表:有序列表和无序列表。您可能会分别将它们称为编号列表和项目符号列表。要创建列表,您将在您选择的列表类型中嵌套列表项元素!这里有几个例子:

<ol>
<li>第 1 项</li> <!-- 1. 第 1 项 -->
  <li>第 2 项</li> <!-- 2. 第 2 项 -->
  <li>第 3 项</li> <!-- 3. 第 3 项 -->
</ol>


  • 项目 1
  • 第 2 项
  • 第 3 项

在大多数情况下,您将使用无序列表,除非信息必须是连续的,例如食谱说明中。

添加图像

到目前为止,我们的页面上只有文本,但为了使我们的页面更​​有趣,我们可以添加图像、音频或视频! HTML 也有这些元素!

要将图像添加到我们的网站,我们将使用

就这样吧!您网页上的图像!

挑战

现在您已经掌握了一些新元素,本周有一个挑战!制作您自己的“关于我”页面。至少使用两个不同的标题级别、一个列表、一段有关您自己的信息,并包含一张图片!确保使用适当的元素并在您的网络浏览器上打开它!

下周见!