17分钟剩余

我们如何与电脑对话?< / p ><!--more-->

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

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

立即下载:HTML和CSS的免费介绍指南

在这篇文章中,我们将了解什么是HTML以及它的用途。然后,我们将介绍如何编写自己的HTML文件,并回顾该语言中一些最常见的元素和属性。最后,我们将简要介绍一些可用于继续学习和编写HTML的资源。让我们开始吧。bob体育苹果系统下载安装< / p >

Tim Berners Lee于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 >

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

虽然这是一个有趣而丰富的讨论点,但它可能不会影响您在HTML中编写代码的方式。记住这一点,让我们继续讨论HTML的用途。< / p >

HTML的用途是什么?

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

一个纯文本文件,里面都是假文本

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

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

HTML也被用来创建网页以外的东西。你可以用它来制作用于组织数据的表格.你可以创建表单用于收集用户信息、处理事务、预订或下订单。你也可以用HTML创建电子邮件。< / p >

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

如何编写HTML

如前所述,HTML只是带有标记的纯文本注释。更准确地说,此标记由标记和属性组成。为了帮助您可视化此语法,下面是来自在线设计老师:< / p >

HTML元素标签开始标记、结束标记、属性、值和内容的注释图形

图片来源

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

HTML标记

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

假设你想添加一个段落到你的网页,段落的文本是“这是一个段落。”你可以用HTML段落标签来包装它:

。所以,HTML看起来是这样的:< / p >

这是一个段落< / 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 >

在head部分,您需要命名您的文档。写一个名字(本例中我们将使用“MyHTML页面”),然后将其包装在 标记中。< / p >

我还将添加标签内的头部部分。在这些标记之间,您可以添加用于样式化HTML的任何内部CSS。我不打算编造一些CSS规则,我只想在CSS中添加注释作为占位符。你可以在HTML中添加注释对于您不希望浏览器渲染的任何内容也是如此。< / p >

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

在主体部分,现在让我们添加一个标题和段落。你将写出标题名称并将其包装在

标签中,并写出段落并将其包装在

标签中。< / p >

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

HTML示例

总之,这就是您的HTML文件的外观:< / p >

<!DOCTYPE html >< / p >

< / p >

< / p >

<标题>我的HTML页面< /名称>< / p >

< / p >