1.HTML简单介绍
HTML 全称是 Hypertext Markup Language（超文本标记语言）。
- HTML：结构层，定义页面内容和骨架（标题、段落、图片等）
- CSS：样式层，控制页面外观和布局（颜色、字体、位置等）
- JS：行为层，实现页面交互和动态功能（点击响应、动画、数据请求等）
1.1 HTML 标签简介
HTML 通过一系列的 标签（也称为元素） 来定义文本、图像、链接等等。HTML 标签是由尖括号包围的关键字。 标签通常成对出现，包括开始标签和结束标签（也称为双标签），内容位于这两个标签之间，例如：
预览
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>
除了双标签，也存在单标签，例如：
预览
<input type="text">
<br>
<hr>
区别：单标签用于没有内容的元素，双标签用于有内容的元素。
1.2 HTML 文件结构简介
<!– 这里放置文档的元信息 –>
<!DOCTYPE html>
<html>
<head>
<!– 这里放置文档的元信息 –>
<title>文档标题</title>
<meta charset="UTF-8">
<!– 连接外部样式表或脚本文件等 –>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!– 这里放置页面内容 –>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
<!– 其他内容 –>
</body>
</html>
2.标签
2.1 常用标签
文本标签：
| <h1>~<h6> | 标题，h1最大，h6最小 |
| <p> | 段落 |
| <strong> | 加粗（强调） |
| <em> | 斜体（强调） |
| <mark> | 高亮 |
| <del> | 删除线 |
| <ins> | 下划线 |
| <small> | 小号文本 |
| <blockquote> | 长引用 |
| <pre> | 预格式化文本（保留空格/换行） |
| <sup> | 上标 |
| <sub> | 下标 |
| <br> | 换行 |
| <hr> | 水平分割线 |
| <abbr> | 缩写 |
列表：
| <ul> | 无序列表 |
| <ol> | 有序列表 |
| <li> | 列表项（ul/ol 的子项） |
| <dl> | 定义列表 |
| <dt> | 定义术语 |
| <dd> | 术语描述 |
表格：
| <table> | 表格 |
| <tr> | 行 |
| <td> | 单元格 |
| <th> | 表头单元格 |
| <thead> | 表头组 |
| <tbody> | 表格主体 |
| <tfoot> | 表尾组 |
| <caption> | 表格标题 |
其他常用标签：
| <div> | 块级容器，用于布局 |
| <span> | 行内容器 |
| <a> | 超链接 |
| <img> | 图片 |
| <input> | 输入框 |
| <button> | 按钮 |
| <form> | 表单 |
| <textarea> | 多行文本输入 |
| <select> / <option> | 下拉选择框 |
| <nav> | 导航栏 |
| <header> | 页眉 |
| <footer> | 页脚 |
| <section> | 区域分区 |
| <article> | 独立文章/内容块 |
| <aside> | 侧边栏 |
| <iframe> | 嵌入其他页面 |
| <video> | 视频 |
| <audio> | 音频 |
| <canvas> | 绘图 |
| <script> | 引入/编写 JS |
| <link> | 引入外部资源（如 CSS） |
| <meta> | 元数据（编码、视口等） |
| <style> | 内嵌 CSS |
示例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落。</p>
<p>这是<strong>加粗</strong>和<em>斜体</em>文本。</p>
<p>这是<mark>高亮</mark>、<del>删除线</del>、<ins>下划线</ins>、<small>小号</small>文本。</p>
<blockquote>这是引用块</blockquote>
<pre>这是
预格式化的
文本</pre>
<p>上标：2<sup>10</sup>=1024，下标：H<sub>2</sub>O</p>
<p>换行<br>在这里</p>
<hr>
<p>缩写：<abbr title="World Wide Web">WWW</abbr></p>
<table border="1">
<caption>成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
</tr>
</tbody>
</table>
效果 
2.1.1 一些重要标签解析
a标签
< a> 标签用于创建超链接，核心属性：
| href | 链接目标 URL | https://example.com、#section、mailto:a@b.com |
| target | 打开方式 | _self（当前窗口）、_blank（新窗口) |
| rel | 与目标的关系 | noopener noreferrer（安全新窗口） |
| download | 强制下载 | download="文件名.pdf" |
| title | 悬停提示文本 | "点击访问" |
img标签
< img > 用于在页面嵌入图片。 核心属性
| src | 是 | 图片路径（绝对/相对 URL） |
| alt | 是 | 替代文本（图片加载失败时显示，也用于无障碍） |
| width | 否 | 宽度（px 或 %） |
| height | 否 | 高度（px 或 %） |
| loading | 否 | 加载策略：eager（立即加载）/ lazy（懒加载） |
| sizes | 否 | 响应式：告诉浏览器在不同断口下图片渲染宽度 |
| srcset | 否 | 响应式：提供多张不同分辨率的图片供浏览器选择 |
| decoding | 否 | 解码方式：sync / async / auto |
| referrerpolicy | 否 | 请求图片时携带的 Referer 信息 |
| crossorigin | 否 | 跨域设置：anonymous / use-credentials |
| ismap | 否 | 服务端图片映射（配合 <a>） |
| usemap | 否 | 客户端图片映射（配合 <map>） |
width / height 建议只设一个，另一个等比缩放。同时设置可能拉伸变形。
div标签
< div > 是无语义的块级容器标签，用于布局分组。它本身不表示任何特定内容，纯粹作为结构容器。
没有专有属性，只支持全局属性（所有 HTML 元素通用的）：
| id | 唯一标识符，用于 CSS/JS 定位 |
| class | 类名，用于 CSS 样式/JS 选择 |
| style | 内联样式 |
| title | 悬停提示 |
| data-* | 自定义数据属性，存任意值 |
| hidden | 隐藏元素 |
| tabindex | Tab 键导航顺序 |
| lang | 语言 |
| dir | 文本方向（ltr / rtl） |
典型用途
<!– 页面分区 –>
<div class="header">…</div>
<div class="sidebar">…</div>
<div class="main-content">…</div>
<div class="footer">…</div>
<!– 配合 CSS 做布局 –>
<div class="container">
<div class="row">
<div class="col">列1</div>
<div class="col">列2</div>
</div>
</div>
<!– JS 操作容器 –>
<div id="app"></div>
span标签
< span > 是无语义的行内容器标签，不会换行，默认只占内容所需宽度。与
（块级）相对，
是行内级。
属性: 同 < div >，无专有属性，只支持全局属性（id、class、style、data-* 等）。
form标签
< form > 用于创建表单，收集用户输入并提交到服务器。 专有属性：
| action | 提交数据的 URL |
| method | HTTP 方法：get / post |
| enctype | 编码方式：application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）、text/plain |
| target | 提交后响应打开方式：_self / _blank / _parent / _top / framename |
| name | 表单名称 |
| autocomplete | 自动填充：on / off |
| novalidate | 布尔属性，关闭浏览器内置验证 |
| rel | 与 action URL 的关系 |
| accept-charset | 接受的字符编码 |
method 对比：
| get | URL 查询参数 | 低 | 约 2KB | 搜索、查询 |
| post | 请求体 | 较高 | 无 | 登录、注册、上传 |
按钮类型:
| submit | 提交表单（默认） |
| reset | 重置表单到初始值 |
| button | 无默认行为，配合 JS 使用 |
type标签
是自闭合行内元素，用于创建各种输入控件，类型由 type 决定。 通用属性（所有 type 共用）
| type | 控件类型（见下表） |
| name | 字段名，提交时作为 key |
| value | 初始值 |
| id | 配合 <label for> 使用 |
| class / style | 样式 |
| placeholder | 占位提示文本 |
| disabled | 禁用（不提交） |
| readonly | 只读（会提交） |
| required | 必填 |
| autofocus | 页面加载自动聚焦 |
| autocomplete | 自动填充：on / off |
| tabindex | Tab 键顺序 |
| maxlength | 最大字符数 |
| minlength | 最小字符数 |
| pattern | 正则验证，如 [A-Za-z]{3} |
| form | 关联某个 form 的 id（可跨表单） |
| formaction | 覆盖 form 的 action（仅 submit/image） |
| formmethod | 覆盖 form 的 method（仅 submit/image） |
| formenctype | 覆盖 form 的 enctype（仅 submit/image） |
| formtarget | 覆盖 form 的 target（仅 submit/image） |
| formnovalidate | 覆盖 form 的 novalidate（仅 submit/image） |
type 类型：
| text | 单行文本（默认） | list、maxlength、minlength、pattern、placeholder、size |
| password | 密码（内容隐藏） | 同 text |
| 邮箱（自动校验格式） | 同 text，支持 multiple（逗号分隔多个邮箱） | |
| url | URL（自动校验格式） | 同 text |
| tel | 电话（不自动校验，可 pattern） | 同 text |
| number | 数字 | min、max、step |
| search | 搜索框 | 同 text |
| file | 文件选择 | accept（限定类型）、multiple（多文件）、capture |
| hidden | 隐藏字段，提交但不可见 | 无 |
| checkbox | 复选框 | checked（默认选中） |
| radio | 单选框 | checked，同 name 一组互斥 |
| submit | 提交按钮 | value（按钮文字） |
| reset | 重置按钮 | value |
| button | 普通按钮 | value |
| image | 图片提交按钮 | src、alt、width、height |
| color | 颜色选择器 | value（格式 #rrggbb） |
| date | 日期（年-月-日） | min、max、step |
| datetime-local | 本地日期+时间 | min、max、step |
| month | 月份 | min、max、step |
| week | 周 | min、max、step |
| time | 时间 | min、max、step |
| range | 滑块 | min、max、step、value（默认居中） |
示例
<!– 文本 –>
<input type="text" name="username" placeholder="请输入用户名" maxlength="20" required>
<!– 数字 –>
<input type="number" name="age" min="0" max="150" step="1">
<!– 文件 –>
<input type="file" name="avatar" accept="image/*" multiple>
<!– 单选/复选 –>
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="code"> 编程
<input type="checkbox" name="hobby" value="music"> 音乐
<!– 隐藏 –>
<input type="hidden" name="token" value="abc123">
<!– 滑块 –>
<input type="range" name="volume" min="0" max="100" value="50">
<!– 日期 –>
<input type="date" name="birthday" min="1900-01-01" max="2026-12-31">
<!– 搜索框 –>
<input type="search" name="q" placeholder="搜索…" list="suggestions">
<datalist id="suggestions">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
</datalist>
2.2 HTML 属性
属性在 HTML 中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。
基本语法：
<开始标签 属性名="属性值">
- 每个 HTML 元素可以具有不同的属性
<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>
- 属性名称不区分大小写，属性值对大小写敏感
<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!– 前两者相同，第三个与前两个不一样 –>
2.2.1 适用于大多数 HTML 元素的属性
| class | 为 HTML 元素定义一个或多个类名 (类名从样式文件引入) |
| id | 定义元素唯一的 id |
| style | 规定元素的行内样式 |
例如：
<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>
3.块元素和行内元素
3.1 块元素
块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。
- 块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
- 可以包含其他块级元素和行内元素。
- 常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>、<table>、<form> 等。
3.2 行内元素
行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。
- 行内元素通常在同一行内呈现，不会独占一行。
- 它们只占据其内容所需的宽度，而不是整行的宽度。
- 行内元素不能包含块级元素，但可以包含其他行内元素。
- 常见的行内元素包括 <span>、<a>、<strong>、<em>、<img>、<br>、<input> 等。
