什么是网页？
网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问。一个网站由很多网页组成，可以将多个网页放在一个文件夹中，这个文件夹还可以嵌套其它子文件夹，最终形成一个树状结构。
网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。
网页文件的后缀有很多种，比如.html、.php、.jsp、.asp等。但不管网页的后缀是什么，它的本质都是一样的，就是由 HTML 代码构成的纯文本文件。
什么是HTML？
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。
每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站
HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。
我们从 HTML 中文全称来分析一下它的本质：
超文本
也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。
超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网
标记语言
HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等
HTML 是一种用来开发网页的计算机语言，它通过标签（标记式指令）将文本、音视频、图片、表格、按钮、输入框等内容显示出来。也就是说，HTML 是用来给网页内容进行排版和布局的
web标准
什么是web标准
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织
为什么需要Web标准
- 浏览器不同，它们显示页面或者排版就有些许差异
- 遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点
- 让 Web 的发展前景更广阔。
- 内容能被更广泛的设备访问。
- 更容易被搜寻引擎搜索。
- 降低网站流量费用。
- 使网站更易于维护。
- 提高页面浏览速度。
web标准的构成
主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类 |
| 表现 | 表现用于设置网页元素的版式，颜色，大小等外观样式 |
| 行为 | 行为是指网页模型的定义及交互的编写 |
Web 标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中
- 结构类似身体
- 表现类似外观装饰
- 行为类似行为动作
- 相比较而言, 三者中结构最重要.
HTML语法规则
HTML 中的标签就像关键字一样，每个标签都有自己的语义（含义），根据标签的不同，浏览器会使用不同的方式展示标签中的内容。
在实际开发中，有时我们也将 HTML 标签称为 HTML 元素。
一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写
属性
↓
<div class="foo">HTML语法规则</div>
↑ ↑ ↑
开始标签 内容 结束标签
除了 class 属性外，开始标签中还可以包含其它属性信息
注意，虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写
当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中
有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加 /来进行闭合，这种标签称为单标签(自闭和标签)。
<img src="./logo.png" alt="Logo" /> <!-- 图像 -->
<hr /> <!-- 分割线 -->
<br /> <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" /> <!-- 文本输入框 -->
自闭和标签不用包围内容，所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的
- HTML 标签是由尖括号包围的关键词，例如
<html> - HTML 标签通常是成对出现的，例如
<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 - 有些特殊的标签必须是单个标签（极少情况），例如
<br />，我们称为单标签也加自闭和标签
标签的关系
双标签关系可以分为两类：包含关系和并列关系
包含关系
<head>
<title></title>
</head>
大多数 HTML 元素都是可以嵌套使用的，也就是说一个 HTML 标签中可以包含其他的 HTML 标签，我们编写的 HTML 文档就是由相互嵌套的 HTML 标签构成
HTML 标签的嵌套层次是没有限制的，但是我们应尽量保持 HTML 文档的简洁
并列关系
<head>
</head>
<body>
</body>
什么是属性
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为
attr="value"
attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围
注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号
一个标签可以没有属性，也可以有一个或者多个属性
专用属性
HTML 属性有很多，大体可以分为两类：
- 有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；
- 有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。
HTML 中的 <img> 标签就有 src 和 alt 两个专用属性，<a> 标签也有 href 和 target 两个专用属性
自定义属性
除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为
通用属性介绍
HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用
id
id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：
- 如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
- 如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。
注意：在一个 HTML 文档中 id 属性的值必须是唯一的。
class
与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值
当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中
title
title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值
将鼠标在链接处悬停片刻才能看到提示框
style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等
注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以<!--”开头，以“ -->结束
<!-- 在此处写注释 -->
注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的
由于HTML代码非常的杂乱并且很多，所以我们习惯用注释来划定区域方便后续的查找
特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kWsAYAk-1649853833217)(前端html.assets/1649835123863.png)]
HTML文档结构
基本的HTML文档
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本的HTML文档</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档。<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。<title>、</title>定义了网页标题，在浏览器标题栏显示。<body>、</body>之间的文本是可见的网页主体内容
DOCTYPE
<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
lang 语言种类
用来定义当前文档显示的语言。en定义语言为英语。zh-CN定义语言为中文。简单来说,定义为en 就是英文网页,定义为 zh-CN 就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
charset
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
2640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
