前端最最最基础的基础HTML基础
什么是HTML？
HTML就是超文本标记语言（HyperText Markup Language）的简写。
为什么说他是最最最基础的基础呢？
因为它定义了 Web网页 内容的 **含义 **和 结构，可以说它就是构成 Web 的一砖一瓦。
为什么叫超文本？
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 —— MDN
这个 MDN 的解释说白了，白说了，给我都看懵了。
其实我们看字面意思就是它的功能超越了一般的纯文本。
纯文本大家都知道吧，简单的讲就是字符串，记事本文件编辑显示的就是纯文本，内容就是单纯的字符，没有格式、没有跳转、没有多媒体关联。
大家平常看到的网页肯定不是纯文本的，至少会有些图片、视频这些其他的资源。
那 HTML 是怎么做到了呢？
超文本 的 超 就体现在，它在文本的基础上，增加了 超出纯文本的关联能力 —— 最核心的就是 超链接（Hyperlink），在 HTML 中我们能通过链接把不同位置的文本和资源关联起来，这些资源就包括图片、音频、视频、表格等内容。
标记语言？
别问我它为什么是标记语言，因为它就是设计成标记语言的。
如何创建HTML文档？
创建一个扩展名为 .html 的文本文件，我们就可以在里面编写HTML的内容了，下面就是一段简单的HTML代码（先不用管这些代码的含义，我们下面会拆解这段代码的）。
<!– hellohtml.html –>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HelloHTML</title>
</head>
<body>
<p>Hello HTML</p>
</body>
</html>
我们可以直接用浏览器中打开扩展名为 .html 的文本文件。
HTML的文档结构
下面是 WHATWG Living Standard 的 HTML 文档编写的规则
文件必须包含以下部分，并按照指定顺序排列：
我们就按这个规则出现的顺序来讲吧
注释
必须采用以下格式：
<!– 注释内容 –>
注意：注释内容不能破坏 <!– –> 的结构，就是不能以字符串>开头，也不能以字符串->开头，不能包含字符串<!–、–>或–！>，并且不能以字符串<!-结尾。
文档类型声明
上面规则就可以看到，这是HTML文档必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
我们只有记下面这种写法就行了。
<!DOCTYPE html>
文档类型声明的html后面可以添加可选的字段，我们一般开发是用不上的。
文档中也提到除非文档是由无法输出较短字符串的系统生成的，否则不应使用 DOCTYPE 保留字符串。
文档类型声明的编写规则，感兴趣的可以自己看看哈。
至于远古时期的 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 虽然也支持，但是很久很久很久以前的规范了，我甚至都不想写出来，初学者可以直接不看这一段（看了请马上忘掉）。
HTML元素
前面说 HTML 是构成 Web 的一砖一瓦，那么元素就是砖和瓦。
一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。
这里的标签其实就是一种标记，标记语言（callback）
我们上面的HTML文档中就有很多的元素
<html lang="en">
<head>
<title>HelloHTML</title>
</head>
<body>
<p>Hello HTML</p>
</body>
</html>
我可以看到元素是可以相互嵌套的，但是我们要注意每个元素的标签必须闭合。
元素类型
WHATWG Living Standard 中共有六种不同的元素类型：空元素、模板元素、纯文本元素、可转义纯文本元素、外部元素以及常规元素。
-
空元素（Void elements）
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
-
模板元素 （The template element）
template
-
纯文本元素（Raw text elements）
script, style
-
可转义纯文本元素（Escapable raw text elements）
textarea, title
-
外部元素 （Foreign elements）
来自 MathML 命名空间和 SVG 命名空间的元素。
-
常规元素 （Normal elements）
所有其他被允许的 HTML 元素均为常规元素。
这些不同的元素有很多的特性（我不想总结了，因为我感觉不能搞太复杂了），把 HTML元素规范 放这，感兴趣的可以自行查看哈。
还有MDN里面的 HTML 元素参考 列出了所有使用标签创建的 HTML 元素。
元素属性
元素的属性是在该元素的起始标签内进行定义的。
属性具有名称和值，一般情况下格式：name="value"。
在 HTML 语法中，属性名称（即使是针对外部元素的名称）可以由任何组合的 ASCII 小写字母和 ASCII 大写字母组成。
属性值由文本和字符引用组成，但有一个额外的限制，即文本中不能包含易混淆的“&”符号。
属性可以通过以下四种方式来指定：
空属性语法：
该值实际上是空字符串。
<input disabled>
未引号标识的属性值语法：
<input value=yes>
单引号属性值语法：
<input type='checkbox'>
双引号属性值语法（常用）：
<input name="be evil">
MDN里面也有 HTML 属性参考 还有 全局属性 和 按元素划分的属性，需要时可以在文档中查找，另外元素的详情里面也有其对应标准属性及其属性值。
常见的HTML元素
下面整理了一些开发中常用的元素，详细的用法可以查看 MDN 的 HTML 元素参考 。
文档结构类
| <html> | 页面根元素 | 需指定 lang 属性（如 lang="zh-CN"） |
| <head> | 页面元信息容器 | 不显示在页面，存 title/meta/link 等 |
| <body> | 页面可视内容容器 | 所有可见内容都嵌套在此 |
| <title> | 页面标题 | 影响 SEO 和浏览器标签显示 |
| <meta> | 页面元数据 | 常用：编码、视口、SEO 描述 |
| <link> | 引入外部资源 | 主要引入 CSS、图标、预加载资源 |
布局语义化类
| <header> | 页面 / 区块头部 | 网站导航、标题、logo 区域 |
| <nav> | 导航栏 | 主导航、侧边导航 |
| <main> | 页面核心内容（唯一） | 页面主要业务区域，避免重复 |
| <section> | 逻辑区块 | 文章章节、功能模块 |
| <article> | 独立完整内容 | 博客文章、评论、商品卡片 |
| <aside> | 侧边栏 / 辅助内容 | 广告、目录、相关推荐 |
| <footer> | 页面 / 区块底部 | 版权、联系方式、备案信息 |
| <div> | 通用容器（无语义） | 无法用语义标签时的兜底选择 |
文本内容类
| <h1>-<h6> | 标题（h1 唯一，层级递减） | 影响 SEO，不要单纯为样式用 |
| <p> | 段落 | 自动换行，有默认上下间距 |
| <span> | 行内通用容器 | 无默认样式，用于包裹行内文本 |
| <strong> | 重要文本（粗体） | 语义 + 样式，比 <b> 更推荐 |
| <em> | 强调文本（斜体） | 语义 + 样式，比 <i> 更推荐 |
| <br> | 换行（自闭合） | 只用于文本换行，不要用它控制间距 |
| <hr> | 分隔线（自闭合） | 分割不同主题内容 |
| <blockquote> | 长引用 | 通常有默认缩进 |
| <code> | 代码片段 | 行内代码，配合 <pre> 显示多行代码 |
列表类
| <ul> | 无序列表 | 导航菜单、选项列表（默认圆点） |
| <ol> | 有序列表 | 步骤、排名（默认数字） |
| <li> | 列表项（必须嵌套在 ul/ol 中） | 每个列表的子元素 |
| <dl> | 定义列表 | 术语 + 解释的组合 |
| <dt> | 定义术语 | 配合 dd 使用 |
| <dd> | 定义解释 | 通常有默认缩进 |
表单类
| <form> | 表单容器 | action（提交地址）、method（请求方式） |
| <input> | 输入框（多类型） | type（text/button/checkbox 等）、name、value |
| <button> | 按钮 | type（button/submit/reset） |
| <select> | 下拉选择框 | 配合 <option> 使用 |
| <option> | 下拉选项 | value 为提交值，selected 默认选中 |
| <textarea> | 多行文本框 | rows/cols 控制尺寸，placeholder 提示 |
| <label> | 表单标签 | for 绑定 input 的 id，提升可访问性 |
| <fieldset> | 表单分组 | 配合 <legend> 标注分组标题 |
多媒体 / 图形类
| <img> | 图片（自闭合） | src（地址）、alt（替代文本，必写）、loading="lazy"（懒加载） |
| <picture> | 响应式图片 | 配合 <source> 适配不同设备 |
| <audio> | 音频 | controls（控制栏）、autoplay（自动播放，需静音） |
| <video> | 视频 | controls、muted（静音）、poster（封面） |
| <canvas> | 像素绘图 | 需 JS 操作，动态生成图形 |
| <svg> | 矢量图形 | 无损缩放，适合图标、简单图形 |
链接 / 嵌入类
| <a> | 超链接 | href（链接地址）、target="_blank"（新窗口）、rel="noopener noreferrer"（安全） |
| <iframe> | 嵌入其他页面 | src、width/height、sandbox（安全限制） |
| <script> | 引入 / 执行 JS | src（外部 JS）、defer/async（异步加载） |
