一、HTML 页面基础结构（页面骨架元素）
- HTML 页面的基础骨架由
<!DOCTYPE html>声明和根元素<html>及其子元素<head>、<body>组成，是所有页面元素的承载容器。 <!DOCTYPE html>：声明 HTML5 文档类型，告诉浏览器以 HTML5 标准解析页面。<html>：页面根元素，所有其他元素都嵌套在其中，可通过lang属性指定页面语言。<head>：头部区域，用于存放页面元信息，不直接显示在页面可视区域，包含字符编码、页面标题、样式 / 脚本引用等。<body>：主体区域，所有页面可视内容（文本、图片、按钮等）都嵌套在其中。
二、文本内容元素
用于在页面中展示各类文本信息，分为标题元素、段落元素、行内文本元素三类，满足不同文本展示需求
- 标题元素（
<h1>–<h6>）：共 6 级，<h1>级别最高（字号最大、权重最重），<h6>级别最低，用于划分页面内容层级，一个页面建议只保留一个<h1>。 - 段落元素（
<p>）：用于包裹一段完整的文本内容，自动实现文本换行和上下间距。 - 行内文本元素：不独占一行，用于对段落内部分文本进行样式 / 语义标注，如
<span>（通用行内容器）、<strong>（强调文本，加粗显示）、<em>（斜体强调文本）。
三、媒体元素（图片 / 音频 / 视频）
用于在页面中嵌入多媒体内容，丰富页面展示形式，核心包括图片、音频、视频三种元素。
- 图片元素（
<img>）：自闭合标签，用于嵌入图片，必须指定src属性（图片地址，绝对路径 / 相对路径）和alt属性（图片加载失败时的替代文本，提升可访问性），可选width、height属性设置图片尺寸。 - 音频元素（
<audio>）：用于嵌入音频文件，支持mp3、wav等格式，src属性指定音频地址，controls属性显示播放控制栏，autoplay属性（可选）自动播放，loop属性（可选）循环播放。 - 视频元素（
<video>）：用于嵌入视频文件，支持mp4、webm等格式，属性与<audio>类似，额外可选poster属性设置视频封面图。
四、链接与导航元素（页面跳转 / 导航）
用于实现页面内部、页面之间的跳转，以及构建网站导航结构，核心元素为 <a>（锚点 / 链接），配合 <nav>（导航容器）提升语义化。
- 链接元素（
<a>）：核心属性href（指定跳转目标地址），target属性控制跳转方式： - 锚点链接：分为页面内锚点（跳转至当前页面指定位置）和跨页面锚点（跳转至其他页面指定位置），通过
id属性定位锚点目标。 - 导航容器（
<nav>）：语义化标签，用于包裹网站导航链接，提升页面可读性和搜索引擎优化（SEO）。
五、表单元素（用户交互 / 数据提交）
用于收集用户输入的信息并提交至服务器，是页面与用户交互的核心载体，由 <form> 容器和各类表单控件组成。
- 表单容器（
<form>）：包裹所有表单控件，核心属性action（指定表单数据提交的服务器地址）、method（提交方式，get或post）。 - 核心表单控件：
<input>：多功能输入控件，通过type属性切换类型（文本、密码、单选、复选、提交等）。<textarea>：多行文本输入框，用于收集大量文本（如留言、备注）。<select>/<option>：下拉选择框，<select>为容器，<option>为下拉选项。<button>：按钮控件，可用于提交表单、触发点击事件。
六、布局与容器元素（页面结构划分）
用于划分页面结构、布局排版，分为语义化布局元素（HTML5 新增）和通用容器元素，提升页面结构清晰度和可维护性。
- 语义化布局元素（HTML5）：具有明确含义的容器，便于开发者理解和搜索引擎解析。
<header>：页面头部，包含网站 logo、标题、导航等。<main>：页面核心内容区域，一个页面只能有一个<main>。<section>：内容章节 / 区块，用于划分页面不同主题的内容。<aside>：侧边栏区域，包含辅助信息（如推荐、广告、作者信息等）。<footer>：页面底部，包含版权信息、联系方式、友情链接等。
- 通用容器元素：无明确语义，用于灵活布局和样式控制。
<div>：块级通用容器，独占一行，可用于包裹任意元素，是布局的核心载体。<span>：行内通用容器，不独占一行，用于包裹行内元素进行样式调整。
七、列表元素（有序 / 无序 / 定义列表）
于展示一组具有关联性的内容，分为有序列表、无序列表、定义列表三类，满足不同展示场景。
- 无序列表（
<ul>+<li>）：列表项无先后顺序，默认以项目符号标记，常用于导航、推荐列表等。 - 有序列表（
<ol>+<li>）：列表项有明确先后顺序，默认以数字标记，可通过type属性修改标记类型（数字、字母、罗马数字）。 - 定义列表（
<dl>+<dt>+<dd>）：用于展示 “术语 – 解释” 对应关系，<dl>为容器，<dt>为术语，<dd>为术语解释。
示例
