理解基本HTML代码的5个步骤

众所周知，HTML是网络的重要组成部分。尽管很少有Web设计人员通过手动键入HTML来创建页面，但对它有所了解仍然很方便。

我们将研究该语言的一些基础知识，包括HTML的真正含义，一些内容。基本概念，以及它如何与其他语言交互。

HTML基础知识：什么是HTML？

HTML代表超文本标记语言。尽管有时会与编程语言混为一谈，但这并不准确。

作为标记语言，HTML仅允许您创建页面的显示布局。像Java或C ++一样，真正的编程语言包含执行的逻辑和命令。

虽然简单，但是HTML是Web上每个页面的骨干。它负责将文本显示为粗体，添加图像并链接到其他页面。我们有一个HTML常见问题解答，可以解释更多内容。

您可以在浏览器中右键单击大多数网页，然后选择查看页面源代码或类似内容以查看其背后的HTML。

即使您对标记或编程语言的经验为零，对HTML的一些了解也会使您变得更加富有。通知网络用户。让我们逐步完成五个基本步骤，以帮助您了解HTML的工作原理。我们将在此过程中提供示例。

步骤1：了解标签的概念

HTML使用标签系统对广告的不同元素进行分类

大多数标签是成对出现的，以将受影响的文本包装在其中。这是一个简单的示例（标记使文本加粗；稍后我们将进一步讨论。）

<strong>This is some bold text</strong>.

注意结束标记如何以正斜杠（/）开头。这表示结束标记，这一点很重要。如果您不关闭标签，则从头开始所有内容都会具有该属性。

但是，并非所有标签都有一对。某些称为空元素的HTML元素没有内容，而是独立存在。一个示例是
标记，它是一个换行符。您可以通过添加斜杠（例如
）来“关闭"此类标签，但这并不是绝对必要的。

步骤2：骨架HTML布局

正确的HTML文档必须定义某些标记，以便正确布局。这些是必不可少的部分：

  • 每个HTML文档都必须以<！DOCTYPE html>开头才能声明自己。因此，其结束标记是HTML文件中的最后一项。
  • 接下来，部分包含诸如页面标题，页面上运行的各种脚本之类的信息。顾名思义，这通常在初始标记之后。最终用户在这些标记中看不到太多内容。
  • 最后，标记保存了页面的文本，读者看到了（还有更多）。在这里，您将找到图像，链接等。

    • 由于部分构成了HTML文档的大部分，其余部分步骤3：格式化的基本HTML标签

    接下来，让我们看一下组成HTML文档的一些常见标签。当然，不可能涵盖所有元素，因此我们将回顾一些最重要的元素。如果这些标签不能满足您的要求，我们将介绍更多的HTML示例。

    如果这些标签看起来很基础，请记住HTML早在1993年就创建了。网络很大程度上是基于文本的

    HTML支持基本的文本样式，就像您在Microsoft Word中可以找到的一样：

  • 标签使文本粗体。
  • 标签（代表“强调"）将斜体化文本。

    • HTML还支持较旧的标记，用于粗体和斜体。但是，最好使用上面的代码。

    简而言之，和显示应该如何理解，而后面的标记仅告诉您外观。视障人士使用的屏幕阅读器更容易访问这些以前的标记。

    HTML的

    标记可用于定义文档的一部分。通常，它与CSS配对（见下文）以某种方式格式化节。

    标记可让您划分文本分成几段。浏览器会自动在这些前后放置一些空间，让您自然地将文本分开。

    您可以在文档中添加标题，并使用

    通过
    标签。 H1是最重要的标头，而H6是最不重要的标头。几乎每篇PCPC.me文章都使用H2和H3标头来组织信息。

    按 Enter 在HTML文档中添加换行符实际上不会显示它们。相反，您可以使用
    添加换行符。

    以下是使用所有这些示例的示例：

    <div class="example"><h2>Example Heading</h2><p>This is one paragraph.</p><p>This is a second<br>paragraph split between two lines.</p></div>

    图片是大多数网页的重要组成部分。您可以使用HTML轻松添加它们，甚至可以为其设置不同的属性。

    使用 width 和高度元素以指定图像出现的像素数。

    将它们全部放在一起，图像标签如下所示：

    步骤5：添加链接

    如果没有其他页面的链接，万维网将不会是一个很大的网络。使用标记，您可以链接到任何文本的其他页面。

    在标记， href 属性可以告诉您要链接的位置。只需粘贴URL就可以了。您可以使用 title 元素添加一些文本，当有人将鼠标悬停在链接上时出现。

    基本链接如下所示：< 

    <a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>

    标记还有许多其他可能的元素，但我们在这里不做介绍。

    如何HTML与CSS和JavaScript连接

    我们已经研究了HTML的基本知识以及如何建立网页。但您可以想象，仅HTML并不能满足现代网络的需求。简单的HTML网页在“ Web 1.0"时代很普遍，那时大多数网站只不过是静态文本。

    但是现在，我们有了更多的东西。 CSS（层叠样式表）是一种语言，用于描述您在HTML中准备的文本的外观。还记得我们讨论的

    标记吗？在此标签（和其他标签）中，您可以定义 class 属性。然后，在随附的CSS文档中，您可以编写有关 class 外观的说明。

    您可以在HTML中内联定义这些样式元素。代码，但这被认为是不好的做法，因为它很难维护。通过这些简单的CSS示例了解详情。

    我们已经看到HTML定义了内容，而CSS决定了外观。 JavaScript是对Web至关重要的三重奏的最终成员，它允许网页响应人们的行为而无需每次都加载新页面。

    例如，JavaScript允许网站警告您输入密码输入的内容不符合要求，然后再尝试提交。网页设计师可能会使用JavaScript在幻灯片中循环浏览图像或提示用户输入。

    这些只是一些基本示例。 JavaScript是一种功能强大的脚本语言，相对而言，它比HTML和CSS复杂得多。有关更多信息，请参见我们的JavaScript概述。

    查看网页设计的完整范围不在本文讨论范围之内，但是可以说HTML与其他语言进行交互以创建我们今天所知道的网页

    HTML的演进

    请务必注意，HTML不是静态的。 HTML经过了几次修订，最近一次是HTML5。值得注意的是，该标准支持本机视频嵌入，而不是依赖于Adobe Flash等专有格式。

    HTML的新版本还声明某些过时的标记已弃用时。其中包括常见的可怕标记，例如和（分别滚动和闪烁文本）在1990年代设计网站。因此，请记住，标准会随着时间而变化。

    一点点HTML知识会大有帮助

    我们简要介绍了HTML文档的工作原理。现在，您知道了网页结构的基本原理。即使您不继续构建网页，也对每天使用的网页有了更多了解。

    要了解更多信息，请使用基本工具升级Web开发技能。

    图片来源：Belyaevskiy / Depositphotos

    标签: HTML HTML5 JavaScript 编程 Web开发 网站管理员工具

    分类本周热门