HTML 基础
常用的元素
工具与规范
实例练习
空格
在 HTML 中会省略元素内容开头的空格，还会将多个空格合并成一个空格显示，比如以下的代码。
<p> 三眼鸭的编程教室</p>
<p>三眼鸭的 编程教室</p>
$$demo
<p> 三眼鸭的编程教室</p> <p>三眼鸭的 编程教室</p>
$$
HTML 这么做的目的是出于可读性，因为通常格式化后的代码会形成下例的形式，那么很明显文本开头的空格不是我们想要显示的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三眼鸭</title>
</head>
<body>
<p>
三眼鸭的编程教室
</p>
</body>
</html>
如果我们想插入多个空格有以下办法：
- 使用
代替，被称为转义字符。（推荐） - 使用
<pre>元素。（不推荐） - 设置
white-space样式为pre或pre-wrap。（不推荐）
以下是使用 的示例。
<!-- 在开头插入空格 -->
<p> 三眼鸭的编程教室</p>
<!-- 在中间插入多个空格 -->
<p>三眼鸭的 编程教室</p>
$$demo
<p> 三眼鸭的编程教室</p> <p>三眼鸭的 编程教室</p>
$$
转义字符
转义字符使得我们可以用某些字符序列来替代编程语言中的语法关键字符，避免产生歧义。
比如在 HTML 中，有一些字符是 HTML 语法的一部分，比如 < 、 > 、 " 、 ' 。比如你要将 <p> 作为文本显示，那么直接放置到代码中肯定不行，它会被解析成一个元素标签。
<p>这是<p>元素，表示段落</p>
那么最好的办法就是用转义字符代替。
<p>这是<p>元素，表示段落</p>
| 原字符 | 转义字符 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
| 空格（宽度不可控） | |
| 半角空格（一个半角空格等于半个中文字符的宽度） |   |
| 全角空格（一个全角空格等于一个中文字符的宽度） |   |
练习
1.显示以下的内容。
$$demo
<p>在 HTML 中一级标题是 <h1> 元素</p>
$$
$$answer
<p>在 HTML 中一级标题是 <h1> 元素</p>
$$
2.显示以下的内容。
$$demo
<p> 在 HTML 中表示空格。</p>
$$
$$answer
<p>&nbsp;在 HTML 中表示空格。</p>
$$