什么是 HTML
HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，告诉浏览器如何组织你访问的网页。它由一系列元素组成，用这些元素来包围、包装或标记内容的不同部分。
- HTML 存在于
.html扩展名的文件中，称为 HTML 文档或文档 - 标签不区分大小写
剖析一个 HTML 元素
元素由三部分组成：
- 开始标签（opening tag）
- 内容（content）
- 结束标签（closing tag）
嵌套元素
<p>我们的小猫脾气<strong>很</strong>暴躁。</p>
空元素
只包含一个标签，不需要结束标签。
<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
alt="Firefox 图标" />
注意：
/>末尾的斜杠可以省略，写成<img>也是合法的。
属性
元素的额外信息，不会出现在内容中。
属性语法规则
- 元素名和属性名之间需要空格（多个属性之间也要空格）
- 使用
=连接属性名和值 - 属性值必须用引号包裹
示例
<img src="..." alt="hh" width="300" />
布尔属性
只有两种状态：存在即 true，不存在即 false
| 写法 | 状态 | 说明 |
|---|---|---|
<input disabled /> | ✅ true | 推荐简写 |
<input disabled="disabled" /> | ✅ true | 完整写法 |
<input disabled="false" /> | ✅ true | 值无关紧要 |
<input /> | ❌ false | 不包含该属性 |
效果图：
属性值省略引号（不推荐）
<!-- 可以运行 -->
<a href=https://www.mozilla.org/>最喜欢的网站</a>
<!-- 不可以运行 -->
<a href=https://www.mozilla.org/ title=The Mozilla homepage>最喜欢的网站</a>
浏览器会错误解析为：
title的值为TheMozilla和homepage是两个布尔属性
单引号还是双引号
两者都可以，不要混用：
<a href='https://www.example.com'>一个指向示例的链接。</a>
<a href="https://www.example.com">一个指向示例的链接。</a>
<!-- ❌ 错误：混用 -->
<a href="https://www.example.com'>一个指向示例的链接。</a>
在属性值中使用引号
<!-- 使用不同引号 -->
<a href="https://www.example.com" title="你觉得'好玩吗'？">
一个指向示例的链接。
</a>
<!-- 使用实体转义 -->
<a href="https://www.example.com" title="一个"有趣"的引用">
一个指向示例的链接。
</a>
剖析 HTML 文档
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的测试页面</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
元素说明
| 元素 | 作用 |
|---|---|
<!doctype html> | 文档类型声明，现代最短写法，确保页面正常渲染 |
<html> | 根元素，包裹页面上的所有内容 |
<head> | 头部容器，存放不直接显示的内容：关键字、CSS、字符集等 |
<meta charset="utf-8"> | 设置字符编码为 UTF-8，支持绝大多数语言字符 |
<title> | 设置页面标题，显示在浏览器标签页和书签中 |
<body> | 主体容器，包含页面上所有可见内容：文本、图像、视频等 |
HTML 中的空白
<p id="noWhitespace">狗狗很 呆 萌。</p>
<p id="whitespace">狗狗很
呆
萌。</p>
HTML 渲染结果：两者等价 - 无论多少空格或换行，都会减少为单个空格。
注意：JavaScript 读取
innerHTML时会保留原始空格和换行。
字符引用（在 HTML 中使用特殊字符）
语法：& 开头，; 结尾
| 字面字符 | 字符引用等效项 | 含义 |
|---|---|---|
< | < | less than（小于） |
> | > | greater than（大于） |
" | " | quotation（引语） |
' | ' | apostrophe（撇号） |
& | & | ampersand（和号） |
注释
<p>我不在注释里</p>
<!-- <p>但我在注释里</p> -->
练习示例
<h1>一些音乐</h1>
<p>
我非常喜欢<strong>打鼓</strong>。我最喜欢的鼓手之一是 Neal Peart，他曾在<a
href="https://zh.wikipedia.org/wiki/匆促樂團"
>匆促乐团</a
>中演奏。我最喜欢的匆促乐团专辑目前是
<a href="https://www.deezer.com/album/942295">Moving Pictures</a>。
</p>
<img
src="https://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"
alt="匆促乐团 Moving Pictures 专辑封面"
width="300" />
