我们如何与电脑交谈?

在语音识别技术出现之前，我们不能依靠人类的语音与他们交流，相反，我们创造了新的语言，让他们能够理解。

可以说，这些语言中最重要的是HTML。HTML是大多数网页的基础。这是我们告诉浏览器如何将内容组织成标题、标题、段落、图像、链接、列表、表单、表格等。

在这篇文章中，我们将了解什么是HTML以及它的用途。然后，我们将介绍如何编写自己的HTML文件，并回顾该语言中一些最常见的元素和属性。最后，我们将简要介绍一些可用于继续学习和编写HTML的资源。让我们开始吧。reybet雷竞技下载

1989年由Tim Berners-Lee首次发表，HTML是“超文本标记语言”的缩写。让我们逐字分解以更好地理解HTML是什么。

“超文本”是指包含对其他文本的引用的文本，也称为超链接。超链接允许你点击鼠标就可以在网上的任何地方。你可以使用超链接跳转到同一页面或网站上的另一个部分，或者跳转到一个全新的网站，而不是按照作者的线性顺序阅读网页（如印刷品）。超链接甚至可以打开PDF、电子邮件或多媒体，如视频或音频文件。下面是一个例子将读者发送回此博客文章顶部的超链接.

以这种方式链接信息彻底改变了网络。HTML和互联网结合在一起，使得任何人都可以按照自己希望的顺序访问世界各地的所有类型的信息。

“标记”是指HTML如何在HTML文件中用注释“标记”页面。这些注释不会显示在网页本身上。它们只是告诉浏览器如何向访问者显示文档。

“语言”是首字母缩写词中最容易理解的部分。与任何语言一样，HTML由独特的语法和字母组成。但它到底是一种什么样的语言呢?让我们下面来解决这个问题。

HTML是一种编程语言吗？

HTML在技术上是否是一种编程语言是web开发社区正在进行的争论。大多数人将HTML定义为一种标记语言，而不是一种编程语言，尽管有人认为两者并不相互排斥。

要理解这一区别，我们必须知道编程语言的定义。所有编程语言都有一些功能性的目的——它们需要“做”计算表达式、声明变量或修改数据。这些语言不仅指导计算机做什么，而且指导计算机如何做。JavaScript是web开发中使用最广泛的编程语言。

另一方面，HTML并没有真正“做”任何事情；它只是为浏览器提供需要显示的内容。HTML不关心浏览器如何显示内容，只要显示内容就行。换句话说，HTML具有结构化的目的，而不是功能性的目的。

尽管如此，一些开发人员还是用同样的逻辑来论证HTML真的是程序设计语言-它只是一种声明式编程语言。例如，诺丁汉大学的Brailsford教授说，声明性语言比其他语言更受限制，因为他们要求某些东西，不关心它是如何发生的，但这并不能使它们更像是一种编程语言。

虽然这是一个有趣而丰富的讨论点，但它不会影响如何编写或使用HTML。考虑到这一点，让我们继续讨论HTML的用途。

HTML的用途是什么？

HTML主要用于创建网页。由于它是开源的，并且受到所有现代浏览器的支持，HTML可以自由使用，并确保文本、图像和其他元素按预期显示。如果没有HTML，您将只有如下所示的纯文本文件：

图像源

使用HTML，您不仅可以使用标题、段落、列表和其他元素格式化文档，还可以通过超链接嵌入图像、视频、音频文件和其他多媒体。您还可以链接到同一网站或其他网站上的其他网页。这使访问者能够轻松地在您的网站以及存储在d上的网站之间导航不同的服务器。

甚至，在添加了标题、图片和超链接之后，你仍然有一个非常基本的网页——这是设计好的。HTML应该创建一个简单的基础，在此基础上可以添加层叠样式表(CSS)和JavaScript (JS)。使用CSS和JS，你可以定制你的布局，改变颜色，字体和对齐元素，并添加动态功能，如弹出窗口和照片滑块。

HTML用于创建多个网页。您可以使用它来创建用于组织数据的表。你可以创建表单用于收集用户信息、处理交易、预订和下订单等目的。你也可以使用HTML创建电子邮件.

无论您想创建网页、表格、表单还是电子邮件，都需要知道如何编写HTML。让我们把下面的过程分解一下。

如何编写HTML

如上所述，HTML只是带有标记和属性的文本注释。为了帮助您可视化此语法，下面是来自在线设计教师:

图像源

为了确保我们理解HTML元素的不同部分，我们将在下面仔细查看标记和属性。

标签

HTML元素由标记指定。大多数元素都有一个开始标记和结束标记。开始标记位于文本之前，并包含由括号“<”和“>”括起的元素名称。结束标记与开始标记相同，但元素名称之前的反斜杠除外。

假设你想在你的网页上添加一个段落，这个段落的文字是“This is a paragraph.”。您将用以下段落标签包装它:

这是一段

这三个部分共同构成一个HTML元素。每个HTML元素都是相同的：有开始标记、结束标记，中间有一些文本。

元素名称不区分大小写。也就是说，它可以用大写、小写或二者的组合来书写。例如，

标记可以写为

。但是，用小写字母书写名称被认为是最佳做法。

属性

虽然所有HTML元素都需要标记，但只有一些元素需要属性。这是因为属性提供了有关HTML元素的附加信息，这些信息可以是必需的，也可以是非必需的。

例如，一个象元一定要有一个源属性，其中包含图像URL或文件路径。否则，浏览器将不知道要渲染的图像。同样的道理也适用于美国锚定元件. 它一定有一个href属性，其中包含链接的目的地。否则，如果访问者单击锚元素，浏览器将不知道将其发送到何处。

其他属性不是必须包含的，但被认为是最佳实践。例如，浏览器可以在不使用alt属性，其中包含图像替换文本. 但是有视觉障碍的读者可能很难理解没有它的图像所传达的信息。

现在我们已经了解了属性的重要性，让我们确保我们了解如何查找和编写属性。属性始终位于HTML元素的开始标记中，其语法为：name=“value”。

假设您想用类名指定上面的段落，这样就可以使用CSS将元素作为目标。然后你会用一个类属性设置为您将记住的任何值，并将其放置在开始标记中。结果如下所示：

这是一段

如何创建HTML文件

要用HTML创建一个网站，首先需要创建一个HTML文件。这个文件将包含你网页的所有HTML，并被上传到你的网络服务器。这样，当访问者搜索你的网站时，服务器将加载文件，并相应地在访问者的浏览器上呈现网页。

由于HTML文件是标准文本格式，因此可以使用基本文本编辑器像记事本++一样创建和编辑文件。一旦选择了编辑器，编写实际代码就很容易了。我们将逐步完成此过程，以便您可以为web项目创建HTML文件。

首先，您需要将文档类型声明为HTML。为此，您需要添加特殊代码<！第一行的DOCTYPE html>。

然后要定义根元素。因为这个元素表示您将要用什么语言编写，所以它在HTML5文档中总是。在html元素的开始标记中，应该包含一个language属性并定义它。这将确保屏幕阅读器能够确定文档所用的语言，使您的网站更容易访问。如果没有语言属性，屏幕阅读器将默认使用操作系统的语言，这可能会导致页面上的标题和其他内容出现发音错误。由于我们是用英语撰写本文，因此将文件的lang属性设置为“en”

HTML文档由两部分组成：头部部分和正文部分。头部包含关于页面的元信息以及任何内部CSS。浏览器不会向读者显示此信息。正文部分包含前端可见的所有信息，如段落、图像和链接。要创建这些部分，只需在html元素中嵌套和标记。

在head部分中，您要命名文档。您将编写一个名称，然后将其包装在 标记中。我还将添加标记。在这些标记之间，您可以添加任何用于设置HTML样式的内部CSS。我不想制定一些规则集，我只想在CSS中添加注释.

笔记：在一些HTML文档中，您不会看到样式标记或任何CSS。这意味着站点没有样式表，或者它使用的是外部样式表。对于外部样式表，您将在文档的head部分看到一个链接。如果你正在加载引导CSS在您的项目中，它将如下所示：。为了这个演示，我将包括一个虚拟链接和一个HTML中的注释注意它是可选的。

在主体部分，现在让我们添加标题和段落。您将写出标题名并用

最后但并非最不重要的一点：不要忘记html元素的结束标记！

总之，这就是您的HTML文件的外观：

<！DOCTYPE html >
< >头





<！--只有在使用外部样式表时才需要此链接-->
这是标题
这是一段

下面是它在前端的外观。请注意，仅呈现正文部分的标题和段落。

图像源

如您所见，这是一个框架HTML文件。要填充它，我们需要查看一些常见的HTML元素。我们已经注意到了两个元素，标题1和段落元素。让我们仔细看看这些和下面的更多。

常见HTML元素

HTML的第一个版本共由18个标记组成。从那时起，已经发布了四个版本，每个版本都添加了几十个标签。在最新版本HTML5中，有110个HTML标记。

下面我们将了解最常见的元素及其标记。

段落(< p >)

HTML段落元素表示段落。通过在文本周围放置

下面是两个段落的例子:

这是一段
这是新的一行的另一段

下面是该代码在前端的呈现方式：

图像源

图像（）

HTML图像元素将图像嵌入到文档中。它需要源属性才能正确渲染。如果图像加载不正确或读卡器有视觉障碍，还应包括alt属性。

下面是一个具有source和alt属性的图像示例：

< img src = " https://scx1.b-cdn.net/raybetappcsz/news/800/2017/theoreticala.jpg " alt = "黑洞" >

下面是该代码在前端的呈现方式：

图像源

标题（

-

）

HTML标题元素表示不同级别的节标题。

是最高的节级，因此是最大的字体大小，而

是最低的，因此是最小的字体大小。

下面是第二级标题的示例：

标题1
标题2
标题3
标题4
品目5
标题6

下面是该代码在前端的呈现方式：

图像源

分部（

）

HTML内容划分元素是“流内容”的通用块级容器。流内容是包含文本或嵌入内容的HTML元素的一个类别。锚定、块报价和标题元素被视为流内容。

在后端，div元素帮助将代码组织成标记清楚的部分。在前端，除非使用CSS样式，否则它们对页面的内容或布局没有影响。

下面是一个环绕图像的div示例：

如果您尝试呈现此代码，那么图像看起来将与没有div包装元素时的图像相同。这是因为没有给这个div元素提供样式信息。要更改容器的外观以及容器内的图像，需要添加样式信息。

比如说，你想将图像居中. 然后可以使用以下代码：

如何使用“文本对齐”属性使图像居中
这只是为了显示照片居中

这将使页面上的图像水平居中，如下所示：

图像源

Span（）

HTMLSPAN元素是“短语内容”的通用内联容器。短语内容指文本及其包含的任何标记，如和

Span标记本质上并不代表任何东西，但是出于两个原因，它们被用于对措辞内容进行分组。第一种方法是将样式信息应用于文本的特定部分。例如，如果你是创建落差上限，您可以将文章每个部分开头段落的第一个字母包装在span标记中。

下面是嵌套在段落中的跨距示例：

This是虚拟文本。这是更多的虚拟文本

如果您试图呈现此代码，则该段落的外观将与不使用span元素时相同。这是因为没有包含样式信息。要更改跨度元素的外观，可以添加样式属性。

例如，您想创建一个落差。然后可以使用以下代码：

This是虚拟文本。这是更多的虚拟文本

这将把第一个字母变成一个下拉盖，如下所示:

图像源

使用span标记的第二个原因是对已经共享属性值的元素进行分组。例如，也许你有一个英语学习法语的网站。默认语言设置为英语，但在多个页面上，第一列可能包含法语术语，第二列可能包含英语翻译。在这种情况下，您可以将法语术语包装在span标记中，并将language属性设置为“fr”

锚（）

HTML锚元素创建一个超链接。锚点元素需要href属性，该属性指定链接的目标。目标可以是同一网页上的另一节或同一网站上的另一网页，也可以是外部网站、文件和电子邮件地址。

下面是嵌套在段落中的链接示例：

这是一个出现在段落中的链接

下面是该代码在前端的呈现方式：

图像源

无序列表(< ul >)

HTML无序列表元素用于在顺序无关紧要的情况下对项目进行分组。例如，购物清单不需要遵循特定的顺序。列表项必须由