我们如何与电脑交谈?< / p ><！--more-->

在语音识别技术出现之前，我们不能依靠人类的语音与它们交流。相反，我们创造了计算机能够理解的新语言。< / p >

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

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

1989年由蒂姆·伯纳斯·李首次出版，92%的网站使用HTML，可能还有所有你拜访过的地方。HTML是“超文本标记语言”的简称。让我们逐字逐句地分析一下，以便更好地理解HTML的真正含义。< / p >

“超文本”是指包含对其他文本或页面的引用的文本，也称为超链接。超链接允许你去任何地方在网上与鼠标点击。我们可以使用超链接跳转到同一页面的另一个部分、当前网站的另一个页面，或者跳转到一个全新的网站，而不是按照作者列出的线性顺序阅读网页，就像在印刷中那样。例如，这是将读者送回本博客顶部的超链接．超链接还可以打开PDF、电子邮件或多媒体文件，比如视频或音频文件。< / p >

以这种方式将信息链接在一起，彻底改变了网络。HTML和互联网结合在一起，使任何人都有可能以他们想要的任何顺序访问世界各地的所有类型的信息。< / p >

“标记”指的是HTML如何在HTML文件中用注释“标记”页面。这些注释不会显示在网页上，它们在幕后工作，告诉浏览器如何向访问者显示文档。我们将很快了解更多关于这种标记的内容。< / p >

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

HTML是一种编程语言吗?

从技术上讲，HTML是否是一种编程语言一直是web开发人员和专家们争论的焦点。大多数人将HTML定义为标记语言，而不是编程语言，尽管有些人认为这两者并不是互斥的。< / p >

要理解这种区别，我们必须知道编程语言的定义。所有编程语言都有函数目的——它们需要“做”一些事情，无论是表达式求值，声明变量，还是修改数据。这些语言不仅指示计算机做什么，而且指示计算机如何做。JavaScript是web开发中使用最广泛的编程语言。其他流行的编程语言包括Python、Java和C/ c++。< / p >

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

尽管如此，一些开发者还是用同样的逻辑来论证超文本标记语言是一种编程语言-它只是一种声明性编程语言。例如，根据来自诺丁汉大学的David Brailsford教授的说法，声明性语言比其他语言受到更多的限制，因为它们要求某些东西，并且不在乎它是如何发生的，但这并不意味着它们不属于编程语言。< / p >

虽然这是一个有趣而丰富的讨论点，但它可能不会影响您如何在HTML中编写代码。考虑到这一点，让我们继续讨论HTML的用途。< / p >

HTML的用途是什么?

HTML主要用于创建网页。因为它是开源的，并且受到所有现代浏览器的支持，所以HTML可以免费使用，并确保您的文本、图像和其他元素按照预期的方式显示。如果没有HTML，所有的网页都是这样的纯文本文件:< / p >

使用HTML，你不仅可以用标题、段落、列表和其他元素来格式化文档——你还可以通过超链接嵌入图像、视频、音频文件和其他多媒体文件。而且，你可以链接到同一网站或其他网站的其他网页。这可以让访问者轻松浏览你的网站，并在存储在不同服务器上的网站之间跳转。< / p >

即使添加了标题、图片和超链接，你仍然有一个非常基本的网页——这是设计好的。HTML应该创建一个简单的基础层叠样式表(CSS)和JavaScript (JS)可以添加。使用CSS，您可以自定义样式和布局，更改元素的颜色、字体和对齐方式。使用和JS，您可以添加动态功能，如弹出窗口和照片滑块。< / p >

除了网页，HTML还被用来创建其他东西。你可以用它来制作表格来组织数据．你可以创建表单用于收集用户信息、处理交易、预订或下订单。你也可以用HTML创建电子邮件．< / p >

无论你是想创建网页、表格、表单还是电子邮件，你都需要知道如何编写HTML。让我们在下面分解这个过程。< / p >

如何编写HTML

如前所述，HTML只是用标记注释的纯文本。更准确地说，这个标记由标记和属性组成。为了帮助您可视化这个语法，这里有一个来自在线设计老师：< / p >

图片来源

下面让我们仔细看看元素的每个组件。< / p >

HTML标记

HTML元素由标签指定。大多数元素都有一个开始和结束标记。开始标记位于文本之前，包含由括号“<”和“>”包围的元素名称。结束标记与开始标记相同，只是元素名称前面有一个反斜杠。< / p >

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

这是一段话< / p >

这三样东西加在一起，就构成了HTML中的段落元素。大多数HTML元素都是一样的:开始标记、结束标记和中间的内容。一些HTML元素，如
(break)，只有一个开始标记——这些标记称为空标记。< / p >

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

标记也可以写成

。但是，最好总是用小写字母写名字。< / p >

HTML属性

虽然所有HTML元素都需要标签，但只有一些元素需要属性。属性提供关于HTML元素的附加信息，这些信息可以是必要的，也可以是非必要的。< / p >

例如,一个图像元素必须始终有一个源属性，其值为图像URL或文件路径。否则，浏览器将不知道要呈现什么图像。同理锚元素，用于创建超链接-它必须包含href属性其值指定链接的目的地。否则，如果访问者单击锚元素，浏览器将不会将他们发送到任何地方。< / p >

其他属性不是必须包含的，但被认为是一种良好的实践。例如，浏览器可以在没有alt属性,其中包含图像alt文本．但是，如果没有替代的文本描述，有视觉障碍的读者可能难以理解图像所表达的内容。< / p >

现在我们已经了解了属性的重要性，接下来我们要确保了解如何查找和编写属性。属性总是在HTML元素的开始标记中找到，其语法为:name= " value "。< / p >

许多元素都有自己的一组属性，这些属性会影响内容在页面上的呈现方式。属性可以在开始标记中以任何顺序写入。但是，不能在同一个HTML标记中放置同一个属性的多个实例。< / p >

如何创建一个HTML文件

要用HTML创建一个网站，首先需要创建一个HTML文件。这个文件将包含您的网页的所有HTML，并将被上传到您的web服务器。这样，当访问者搜索您的网站时，服务器将发送HTML文件到访问者的浏览器，浏览器将相应地呈现页面。< / p >

由于HTML文件是标准的文本格式，您可以使用基本的文本编辑器像notepad++来创建和编辑你的文件。选择编辑器后，编写实际代码就很简单了。我们将一步一步地走过这个过程，这样你就可以为你的web项目创建一个HTML文件。< / p >

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

接下来，您需要定义文档的根元素。因为这个元素表明你要用什么语言编写，所以在HTML5文档中它总是。在下一行中，添加一个开始标记。在下面，添加一个关闭的标签。< / p >

在html元素的开始标记中，还应该包含一个lang (language)属性。这将帮助屏幕阅读器确定文档使用的语言，让你的网站更容易访问．如果没有语言属性，屏幕阅读器将默认使用操作系统的语言，这可能导致标题和页面上其他内容的发音错误。因为我们是用英语写这篇文章的，所以我们将文件的lang属性值设置为“en”。< / p >

HTML文档由两部分组成:标题部分和正文部分。标题包含关于页面以及任何内部CSS的元信息。浏览器不会将此信息显示给读者。正文部分包含了所有可以在前端看到的信息，比如你的段落、图片和链接。要创建这些部分，在文档的和之间添加一个标签，然后在标签。< / p >

在标题部分，您需要为文档命名。写一个名字(在这个例子中我们用“My HTML Page”)，然后用 标签包装它。< / p >

我还将在标题部分中添加标签。在这些标记之间，您可以添加任何用于设置HTML样式的内部CSS。我不打算创建一些CSS规则，而是直接在CSS中添加注释作为一个占位符。你可以在HTML中添加推荐对于任何你不想让浏览器呈现的东西。< / p >

请注意:在许多HTML文档中，您不会看到样式标签或任何CSS。这很可能意味着页面正在使用外部样式表，这是一种常见的方式在HTML中添加CSS．对于外部样式表，您将在文档的标题部分看到一个链接。< / p >

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

最后，缩进嵌套的HTML元素是一种常见的做法。尽管这对处理文件的浏览器没有影响，但缩进可以可视化文档的结构，使其更容易阅读。< / p >

HTML例子

总之，这就是你的HTML文件的样子:< / p >

<！DOCTYPE html >< / p >
< html lang =“en”>< / p >
< >头< / p >
<标题>我的HTML页面< /名称>< / p >
 < / p >
<时尚>< / p >
/*如果你要添加内部CSS，这些样式标签是必需的< / p >
> < /风格< / p >
> < /头< / p >
身体< >< / p >
这是标题
< / p >
这是一段话< / p >
身体< / >< / p >
< / html >< / p >

下面是它在前端的样子。注意，只呈现主体部分的标题和段落。< / p >

看到这支笔简单的HTML页面作者:Christina Perricone (@hubspot)CodePen．

如您所见，这是一个漂亮的框架HTML文件。要填充它，我们需要查看一些更常见的HTML元素。我们已经注意到两个元素，

和

。下面让我们仔细看看这些元素和其他元素。< / p >

常见的HTML元素

HTML的第一个版本只有18个标签。从那时起，已经发布了四个版本，每个版本都添加了几十个标签。在最新的HTML5版本中，有110个HTML标签。下面我们将回顾最常见的元素及其标签。< / p >

段落(< p >)

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

下面是两个段落的例子:< / p >

看到这支笔p的例子作者:Christina Perricone (@hubspot)CodePen．

图像(< img >)

HTML image元素将图像嵌入到文档中。它需要一个src (source)属性来正确呈现。如果图片加载不正常或者读者有视觉障碍，也应该包含alt属性。< / p >

下面是一个带有source和alt属性的图像示例:< / p >

看到这支笔img的例子作者:Christina Perricone (@hubspot)CodePen．

标题(h1 > < - <编辑>)

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

是最高的切片水平，最突出，而

是最低的，最不突出。< / p >

看到这支笔标题的例子作者:Christina Perricone (@hubspot)CodePen．

部门(< div >)

的HTML内容分隔(div)元素是用于“流内容”的通用块级容器。流内容是一类包含文本或嵌入内容的HTML元素。锚、块引号和标题元素被视为流程内容。< / p >

在后端，div元素帮助将代码组织成标记清楚的部分。在前端，他们在内容之前和之后添加换行符。否则，除非使用CSS样式，否则它们不会影响页面的内容或布局。< / p >

下面是一个div环绕图像的例子:< / p >

看到这支笔div示例1作者:Christina Perricone (@hubspot)CodePen．

在这里，图像看起来与没有div包装元素时一样。这是因为没有给这个div元素提供样式信息。要更改容器的外观以及容器内的图像，需要添加样式信息。< / p >

比如说，你想要中心的形象．然后你可以使用以下代码将图像水平居中:< / p >

看到这支笔div示例2作者:Christina Perricone (@hubspot)CodePen．

跨度(< Span >)

HTML span元素是用于“措辞内容”的通用内联容器。措辞内容指的是文本及其包含的任何标记，如和

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

看到这支笔跨度的例子作者:Christina Perricone (@hubspot)CodePen．

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

锚(< >)

HTML锚元素创建了一个超链接。锚元素需要一个href属性，它指定链接的目的地。目的地可以是同一网页的另一个部分或同一网站的另一个网页，或外部网站、文件和电子邮件地址。< / p >

下面是一个链接嵌套在段落中的例子:< / p >

看到这支笔锚的例子作者:Christina Perricone (@hubspot)CodePen．

无序列表(< ul >)

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