元素的组成

看一个基本的 p 段落元素。

<p>三眼鸭的编程教室</p>

$$demo

<p>三眼鸭的编程教室</p>

$$

$$tip

除了字符内容外，几乎任何编程语言都是使用英文字符，所以开始编程前最好将你的输入法切换至英文。

$$

除了空元素外，一个元素至少由以上三个部分组成：

1. 开始标签：象征着一个元素的开始，由尖括号包含元素名。
2. 结束标签：象征着一个元素的结束，与开始标签类似，只是多了个斜杠在元素名前。
3. 元素内容：元素的主体内容。

空元素

不包含元素内容的元素被称为空元素，比如 <br> 换行元素。

<br />

常见的空元素还有 img 、 input 、 link 、 meta 等。

$$tip

<br /> 与 <br> 的写法都对的，更推荐加上斜杠。

$$

嵌套元素

一个元素可以嵌套另一个元素，这正是 HTML 最大的特点，使得所有的元素可以构成一个树形结构。

<p><strong>三眼鸭</strong>的编程教室</p>

$$demo

<p><strong>三眼鸭</strong>的编程教室</p>

$$

$$warning

新手常常犯的错误是开始标签没有与结束标签对齐，嵌套关系混乱。因此我们写一个元素时写了开始标签后立刻写结束标签，再来写元素内容，防止忘了写结束标签。

错误的示例：

<p><strong>三眼鸭</p>的编程教室</strong>

$$

元素属性

在元素的开始标签内可以设置元素的属性，例如以下的 <img> 元素。

属性的设定为 属性名="属性值" 的形式，多个属性间使用空格隔开。

<img src="https://3yya.com/logo-mini.png" alt="Logo" />

$$demo

<img src="https://3yya.com/logo-mini.png" alt="Logo" />

$$

布尔属性

有时会出现没有属性值的属性，这些属性被称为布尔属性。布尔属性只有两个值， true（是/真）、 false （否/假）。因此在 HTML 中被定义成了，当元素中有这个属性名时代表属性值为 true ，没有这个属性名则表示属性值为 false 。

disabled 表示禁用，当它出现在元素中时就表示 disabled 为 true ，元素将被禁用。当其不存在时，表示 disabled 为 false ，元素将不被禁用。

<input type="text" disabled placeholder="被禁用">
<input type="text" placeholder="不被禁用">

$$demo

<input type="text" disabled placeholder="被禁用"> <input type="text" placeholder="不被禁用">

$$

全局属性

一些属性是标签特有的，比如 <img> 元素的 src 属性。还有一些是几乎所有 HTML 元素共有的，这些属性被称为全局属性。

以下列出几个常见的全局属性，要了解更多可以查看 MDN 的全局属性文档。

属性名	描述
id	唯一标识符，该属性值必须是唯一的。可以使得 CSS 样式标记元素或 JavaScript 获取元素。
class	一个以空格分隔的元素的类名列表，同样使得 CSS 样式能标记元素或 JavaScript 获取元素。
style	元素的行内 CSS 样式。
title	元素相关的说明信息，在鼠标移到元素上时通常会显示 title 的说明信息。
data-*	自定义的元素属性。
contenteditable	元素是否可编辑，网页上的富文本编辑器通常会使用这个属性来实现。