什么是HTML？
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由一系列的元素组成，这些元素可以告诉浏览器如何显示网页中的文本和其他内容。通过使用HTML，开发者能够构建网站的基础结构，并定义文档中不同部分的功能，如标题、段落、列表等。
HTML非常容易
HTML的设计初衷是易于学习和理解。它的语法相对直观，即使是没有编程背景的人也能够在短时间内掌握其基本用法。例如，创建一个简单的网页只需要几行代码。随着技术的发展，虽然HTML本身变得更加丰富和强大，但它的核心原则依然保持简单，使得任何人都可以快速上手。
HTML 标签
HTML标签是用来定义HTML文档内各种类型内容的标记。它们总是以尖括号包围的形式出现，如<h1>表示一级标题，<a>用来创建链接等。合理地运用不同的标签可以帮助组织好网页信息结构，提高可读性和搜索引擎优化效果。
HTML 元素
HTML文档是由HTML元素构成的。每个元素通常由开始标签、结束标签以及两者之间的内容组成。比如<p>就是一个段落元素的开始标签，而</p>则表示该段落的结束。在这对标签之间放置的就是段落的实际文本内容。此外，还存在一些不需要闭合标签的单个标签，如换行符<br>或图像<img>。
示例：
示例：
代码：
copy
<p>这是一个段落。</p>
<p>这是第<br>二个段落。</p>输出结果：
这是第一个段落。
这是第
二个段落。
HTML与浏览器
当用户访问一个网页时，Web服务器会将相应的HTML文件发送给用户的浏览器。然后，浏览器解析这些HTML代码并按照指定的方式渲染页面。这意味着开发者所写的每一个HTML元素都将直接影响到最终用户看到的样子。因此，了解HTML如何与浏览器交互对于开发出既美观又功能强大的网站至关重要。
HTML页面结构
一个典型的HTML文档包含几个关键部分，它们共同构成了网页的基本框架。最外层是<html>标签，它包含了整个HTML文档。在<html>标签内部，首先是<head>部分，这里通常包括了页面的元数据（如字符集声明<meta charset="UTF-8">）、文档标题（使用<title>标签）、样式表链接（使用<link>标签）以及脚本引用等。接下来是<body>部分，这部分定义了用户可见的所有内容，包括文本、图片、视频以及其他多媒体资源。
HTML页面结构如下图所示：
示例：
示例：
copy
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="applicable-device" content="pc,mobile">
<meta name="renderer" content="webkit">
<link rel='stylesheet' id='style-css' href='../style.css' type='text/css' media='all' />
<title>这是页面标题</title>
<meta name="keywords" content="这是关键词" />
<meta name="description" content="这里是页面描述" />
<meta property="bytedance:published_time" content="2024-7-16T16:54:41+1:00" />
<meta property="bytedance:lrDate_time" content="2024-7-16T16:54:41+1:00" />
<meta property="bytedance:updated_time" content="2024-7-16T16:54:41+1:00" />
</head>
<body>
<header>
<!-- 这是网页头部 -->
<nav>
<!-- 这里是导航 -->
</nav>
</header>
<section>
<!-- 内容 -->
</section>
<article>
<!-- 内容 -->
</article>
<footer>
<!-- 页面底部 -->
</footer>
<!-- 注：JS可以放在页面<body>的任何地方，也可以<head>里面，建议放在页面底部 -->
<script type="text/javascript" src="../all.js"></script>
<script>
//JS代码..
</script>
</body>
</html>块级元素和内联元素
在 HTML 中有两种重要元素类别，块级元素和内联元素。尽管HTML5已经对元素有了新的分类方式，这里我们以两个不同的角度进行分类来理解。现在我们仅从块和内联的分类方式来解说，如何理解呢？
- 块级元素：这类元素会在页面上形成一个独立的区块，常见的块级元素有
<div>、<p>、<h1>到<h6>等。块级元素默认占据一行或多行空间，而且可以设置宽度、高度、内外边距等属性。
简单的来理解，就是块级元素的左右无论是否有空间，左右容不得其他元素，无论后面的其他任何元素都要另起一行，无论前面是什么元素块级元素自身会另起一行；因为就是说，始终独占一行。 - 内联元素：与块级元素不同，内联元素不会独占一行，而是根据内容的实际长度与其他内联元素并排显示。典型的内联元素包括
<span>、<a>、<strong>等。内联元素主要用于包裹文本或少量内容，并且通常不能直接设置宽度和高度。
示例：
每种元素也有自身不一样的特性，这是默认的；（可以通过css改变这些特性）
代码：
copy
<div style="background-color: red;">我是块级元素div，默认宽为100%。</div>
<table style="background-color: green;"><tr><td>我是块级元素table，默认宽度是根据其内容自动调整的。</td></tr></table>
<div><span>这是span</span>、<i>这是i</i>、<strong>这是strong</strong></div>输出结果：
| 我是块级元素table，默认宽度是根据其内容自动调整的。 |
注意：块级元素和内联元素这种分类方式仅仅是对纯粹的HTML元素的分法。在之后通过学习css3，你会看到复杂一些的自由定义。块级元素和内联元素是对HTML元素的入门级基础认识。
元素的属性
HTML元素可以通过属性来提供关于该元素的额外信息。属性总是出现在起始标签中，并且采用键值对的形式，即属性名="属性值"。例如，在超链接<a>标签中，href属性指定了链接指向的目标地址。另一个例子是<img>标签中的src属性，它定义了图像文件的路径。属性值应该始终被包含在引号之中。
大小写
HTML标签名及其属性名对大小写不敏感，也就是说，<p>和<P>在HTML中被认为是相同的。不过，遵循W3C标准推荐的做法是全部使用小写字母来书写HTML标签名和属性名，这样有助于保持代码的一致性并且更容易阅读。
使用单引号还是双引号？
在HTML中，无论是单引号还是双引号都可以用来包围属性值。选择哪种方式主要取决于个人偏好或团队约定。但是一旦选定了一种风格，就应当在整个项目中保持一致。值得注意的是，如果属性值本身包含单引号，则应使用双引号来包围这个值；反之亦然。
HTML中的空白
HTML处理空白字符（空格、制表符、换行符等）的方式比较特别。多个连续的空白字符会被当作一个空格处理，而换行符也会被视为单个空格。这意呀着在HTML源码中使用空格或换行来格式化文本不会影响实际展示效果。如果需要保留多个空白字符或特定格式的文本，可以使用<pre>标签或者CSS样式来控制。
特殊符号
由于某些字符在HTML中有特殊含义（如<和>用于定义标签），直接输入这些字符会导致解析错误。为此，HTML定义了一系列实体来代表这些特殊字符。例如，<代表小于号<，>代表大于号>，&用来表示&自身。当需要在HTML中显示这些特殊字符而不是让它们被解析为代码的一部分时，就需要使用相应的实体编码。
通过以上介绍，我们可以看出HTML是一种强大而灵活的语言，它不仅支持网页的基本构造，还提供了丰富的工具来定制和优化用户体验。无论是新手还是有经验的开发者，深入理解和正确使用这些基础知识都是非常有价值的。
| 字符 | 实体名称 | 实体编号 | 描述 | 字符 | 实体名称 | 实体编号 | 描述 |
| & | & | & | 与符号 | (空格) | |   | 不间断空格 |
| < | < | < | 小于号 | ¬ | ¬ | ¬ | 逻辑非符号 |
| > | > | > | 大于号 | µ | µ | µ | 微符号 |
| " | " | " | 双引号 | √ | √ | √ | 平方根 |
| ' | ' | ' | 单引号 | ∑ | ∑ | ∑ | 求和符号 |
| € | € | € | 欧元符号 | ∏ | ∏ | ∏ | 乘积符号 |
| ¥ | ¥ | ¥ | 日元符号 | ∂ | ∂ | ∂ | 偏导符号 |
| £ | £ | £ | 英镑符号 | ∫ | ∫ | ∫ | 积分符号 |
| § | § | § | 段落符号 | ∇ | ∇ | ∇ | 向量微分符号 |
| ¶ | ¶ | ¶ | 换行符号 | ∝ | ∝ | ∝ | 成比例符号 |
| ¢ | ¢ | ¢ | 分币符号 | ≈ | ≈ | ≈ | 约等于符号 |
| ∞ | ∞ | ∞ | 无限符号 | ≠ | ≠ | ≠ | 不等号 |
| ± | ± | ± | 正负号 | ≤ | ≤ | ≤ | 小于或等于 |
| × | × | × | 乘号 | ≥ | ≥ | ≥ | 大于或等于 |
| ÷ | ÷ | ÷ | 除号 | ⊕ | ⊕ | ⊕ | 直和符号 |
| ⊆ | ⊆ | ⊆ | 子集等于符号 | ⊗ | ⊗ | ⊗ | 张量积符号 |
| ⊇ | ⊇ | ⊇ | 超集等于符号 | ∩ | ∩ | ∩ | 交集符号 |
| ↔ | ↔ | ↔ | 左右箭头 | ∪ | ∪ | ∪ | 并集符号 |
| ↑ | ↑ | ↑ | 向上箭头 | ∅ | ∅ | ∅ | 空集符号 |
| ↓ | ↓ | ↓ | 向下箭头 | ∈ | ∈ | ∈ | 属于符号 |
| → | → | → | 向右箭头 | ∉ | ∉ | ∉ | 不属于符号 |
| ← | ← | ← | 向左箭头 | ∃ | ∃ | ∃ | 存在符号 |
| ↵ | ↵ | ↵ | 回车箭头符号 | ∀ | ∀ | ∀ | 对所有符号 |
| ✓ | ✓ | ✓ | 复选标记 | ⊂ | ⊂ | ⊂ | 子集符号 |
| ✗ | ✗ | ✗ | 错误标记 | ⊃ | ⊃ | ⊃ | 超集符号 |
| ♠ | ♠ | ♠ | 黑桃符号 | ♂ | ♂ | ♂ | 男性符号 |
| ♥ | ♥ | ♥ | 红心符号 | ♀ | ♀ | ♀ | 女性符号 |
| ♦ | ♦ | ♦ | 方块符号 | ☺ | ⌣ | ☺ | 笑脸 |
| ♣ | ♣ | ♣ | 梅花符号 | ☹ | &sad; | ☹ | 哭脸 |