2.1 HTML 语法

HTML 表示 HyperText Markup Language:

• HyperText（超文本） 表示使用HTTP协议。
• Markup（标记） 表示代码使用关键字注解。
• Language（语言） 表示遵循约定的语法，开发人员能编写，而计算机也能解释。

标签和元素

标记语言的基本规则是使用符号来规定内容边界，即内容从哪里开始到哪里结束。

回顾一下这个HTML代码：

<p>Hello World</p>

Hello World

在角括号（angle brackets） < 和 > 之间的是 HTML 标签（tags）。

每个标签都有其特定的含义，这里 p 代表 段落（paragraph）.

标签通常是成对出现：

• 开始标签 <p> 定义段落的 起始
• 关闭标签 </p> 定义段落的 结束

关闭标签比开始标签多一个 斜杠（slash） /。

开始标签和关闭标签之间的部分构成了一个 HTML 元素（element）。

在浏览器中打开时，结果如上面Result中所示，我们注意到HTML标签并不会被显示，它们只是用来告诉浏览器该如何解释那段内容。

创建第一个HTML文件

打开你的文本编辑器（如Sublime Text 3），新建文件，拷贝/粘贴如下内容，并保存为1.html文件：

<p>This is my first webpage!</p>

用你的浏览器打开这个文件，你会看到：

This is my first webpage!

属性（Attributes）

属性是为元素绑定的额外信息。属性被添加在HTML的开始标签中，因此它们也不会被浏览器所显示。

例如，href 属性用来定义一个链接（link）元素（使用 a 标签）的目标地址：

<a href="https://www.xnip.cn">小牛知识库</a>

<a href="https://www.xnip.cn/wp-content/uploads/2021/docimg15/13-fbjtsfdboj1.png" alt="">

上面的alt属性是为了用于图片地址不可用时显示的说明性文字。

注释（Comments）

和其他语言一样，写好注释是一个良好的编程习惯，用于提高代码可读性，便于维护。注释会被浏览器忽略。

注释开始于 <!-- 结束于 -->。

<!-- 第一段HTML代码注释 -->
<p>Hello World!</p>

Hello World!

自关闭（Self-enclosing）元素

有些元素如图片（img）、换行符（br）、输入框（input）只有开始标签，被称之为自关闭的元素：

<br> <!-- line-break -->
<img src="//placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

由于没有关闭标签，自关闭元素不能包含其他元素。