2.1 HTML语法

与任何语言一样，HTML具有规则，这个规则就叫做语法。

1. HTML 语法

HTML是 HyperText Markup Language的缩写(超文本标记语言)。

• HyperText 意味着它使用了互联网的HTTP部分。
• 标记是指你所写的代码被注释为关键字的意思。
• 语言是指人和计算机都能读懂的语言。

和任何语言一样，HTML也有一套规则。这些规则相对简单。它归结起来就是定义边界，知道某事从哪里开始，哪里结束。

下面是一个HTML的示例段落:

<p>如果说俄罗斯方块教会了我什么，那就是错误堆积起来，成绩就会消失。</p>

结果：

如果说俄罗斯方块教会了我什么，那就是错误堆积起来，成就就会消失。

你所看到的角括号< 和 > 是 HTML 标签。它们定义了事物的起点和终点。

它们中的每一个都有特定的含义。在这种情况下，p代表段落。

它们通常是成对出现的：

• 开头标记 <p> 定义了段落的开始。
• 结尾标签</p>定义了它的结尾。

开头标记和关闭标记之间的唯一区别是标记名称前面的斜线/。

当你把一个开头标记、一个结束标记以及中间的所有内容结合起来，你就得到了一个HTML元素。整个行是一个HTML元素，它使用了HTML标签<p>和</p>。

如果你在浏览器中查看这个示例，你会发现HTML标签不会被浏览器显示。它们只会被浏览器读取，以知道你写了什么类型的内容。

2. 在哪里写HTML

你可能遇到过一些简单的文本文件，那些有.txt扩展名的文本文件。

要使这样的文本文件成为一个HTML文档（而不是文本文档），你需要使用.html扩展名。

打开你的文本编辑器，然后复制粘贴以下内容。

<p>这是我的第一个网页！</p>

将此文件保存为my-first-webpage.html，用浏览器打开后，你就会看到。

这是我的第一个网页!

注意：

• 使用像Notepad++这样的文本编辑器来创建HTML文档。
• 使用像火狐浏览器一样的网页浏览器打开HTML文档

3. 属性 Attributes

属性的作用就像绑定在HTML元素上的额外信息。它们被写在一个HTML标记中。因此，它们也不会被浏览器显示出来。

例如， href属性用于定义链接的目标（使用 anchor 锚标记）。

<a href="https://www.mozilla.com/firefox">下载火狐浏览器</a>

结果

下载Firefox

有16个HTML属性可以用在任何HTML元素上。所有这些属性都是可选的。

你主要会使用class（用于CSS）和title（也就是悬停项目时出现的工具提示）。

有些HTML元素有强制性的属性。例如，当插入图片时，你必须使用 src（source）属性提供图片的位置。

<img src="#" alt="图片的描述">

考虑到<img>元素的目的是显示一个图片，所以要求图片的路径是合理的。

4. 注释 Comments

如果你在代码中写了一些东西而不破坏浏览器如何显示你的页面，你可以写注释。它们会被浏览器忽略，只对我们这些编写代码的人有用。

注释以<!------开头，以---->结尾。

<!---这句话将被浏览器忽略--->
<p>Hello World!</p>

结果：

Hello World!

5. 自闭式元素 Self-enclosing elements

有些HTML元素只有一个开场标记。

<br> <!----断行--->
<img src="https://placehold.it/50x50" alt="Description"> <!--图片--> <!
<input type="text"> <!-- 文本输入-->

由于它们没有封闭标签，因此不能包含任何东西，自闭式元素通常带有一些属性，为它们提供额外的信息。