📝 HTML 核心知识点笔记
一、HTML 基础概念
1.1 什么是 HTML
HTML 全称 HyperText Markup Language（超文本标记语言），是构建网页的标准标记语言。它不是编程语言 ，而是一种标记语言，通过一系列**标签（Tags）**来描述网页的结构和内容。
1.2 HTML 文档基本结构
一个标准的 HTML5 文档由以下几个部分组成：
<!DOCTYPE html>：文档类型声明，必须放在文档第一行，告诉浏览器使用 HTML5 标准解析页面。它不是标签，而是一条指令。<html>：根元素，包裹整个页面内容。通过lang属性声明页面语言，如lang="zh-CN"表示中文页面。<head>：头部区域，包含页面的元信息（如字符编码、标题、样式引入等），不会直接显示在页面上。<meta charset="UTF-8">：声明字符编码，UTF-8 支持中文等多语言字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：视口设置，响应式设计必备。<title>：定义浏览器标签页上显示的标题。
<body>：主体区域，所有用户可见的页面内容都写在这里。
二、常用文本标签
2.1 标题标签
HTML 提供了六个级别的标题标签，从 <h1> 到 <h6>，字号依次递减，重要性也依次降低。一个页面通常只使用一个 <h1> 作为主标题。
2.2 段落与文本格式化
<p>：定义段落，浏览器会自动在段落前后添加一定的间距。<br>：换行标签，属于空标签（无需闭合）。<hr>：水平分割线，用于主题分隔。
文本格式化标签分为有语义 和无语义两类：
| 效果 | 有语义（推荐） | 无语义 |
|---|---|---|
| 加粗 | <strong>（表示强调） |
<b> |
| 斜体 | <em>（表示强调） |
<i> |
| 高亮 | <mark> |
--- |
| 删除线 | <del>（表示删除） |
<s> |
| 下划线 | <ins>（表示插入） |
<u> |
| 上标/下标 | <sup> / <sub> |
--- |
2.3 特殊字符（HTML 实体）
在 HTML 中某些字符有特殊含义（如 < >），如果需要在页面上显示它们，需要使用实体名称或编号。常用的有：
| 要显示的字符 | 实体名称 | 实体编号 |
|---|---|---|
| 空格 | |
  |
< |
< |
< |
> |
> |
> |
& |
& |
& |
" |
" |
" |
| © | © |
© |
三、链接与图片
3.1 超链接 <a>
<a> 标签用于创建超链接，核心属性是 href，指定链接目标地址。
常用属性：
href：链接地址，可以是网页 URL、页面内锚点（如#section1）、邮箱（mailto:xxx@xx.com）、电话（tel:10086）等。target：控制链接打开方式。_self为当前窗口打开（默认），_blank为新标签页打开。rel：声明与目标页面的关系，外部链接建议加上rel="noopener"以提升安全性。download：指定该链接为下载链接，属性值可设置下载后的默认文件名。
锚点跳转 ：先给目标元素设置 id（如 id="section1"），然后用 <a href="#section1"> 即可实现页面内跳转。
3.2 图片 <img>
<img> 是一个空标签（无需闭合），用于在页面中嵌入图片。
核心属性：
src（必需）：图片路径，支持相对路径、绝对路径和网络地址。alt：替代文本，图片无法加载时显示。非常重要------屏幕阅读器会读取它、搜索引擎会用它做索引，不应省略。title：鼠标悬停时显示的提示文字。width/height：设置图片宽高。loading="lazy"：HTML5 原生懒加载，图片进入视口时才加载，提升页面性能。
图片路径写法： ./ 表示当前目录，../ 表示上级目录，images/photo.jpg 表示子目录，/ 开头表示根目录。
四、列表
4.1 无序列表 <ul>
用 <ul> 包裹，每个列表项用 <li> 表示。默认带有圆点标记，常用于导航菜单、商品列表等无顺序要求的内容。
4.2 有序列表 <ol>
用 <ol> 包裹，每个列表项同样用 <li> 表示。默认带有数字编号。
<ol> 支持以下属性：
type：编号样式，可选值有1（数字）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）。start：起始编号。reversed：倒序排列。
4.3 定义列表 <dl>
用于术语解释或键值对展示，由三部分组成：
<dl>：定义列表容器。<dt>：定义术语（term）。<dd>：术语的描述/定义（description）。
例如：<dl> 中包含 <dt>HTML</dt> 和 <dd>超文本标记语言，用于构建网页结构。</dd>。
五、表格
表格用于展示结构化的行列数据，由以下标签构成：
<table>：表格容器。<caption>：表格标题，放在<table>内部第一行。<thead>：表头区域，通常包含列标题。<tbody>：表体区域，包含实际数据行。<tfoot>：表尾区域，常用于汇总信息。<tr>：表格行（table row）。<th>：表头单元格（table header），默认加粗居中。<td>：普通数据单元格（table data）。
合并单元格：
rowspan="n"：跨 n 行合并（向下合并）。colspan="n"：跨 n 列合并（向右合并）。
💡 合并口诀：
rowspan管纵向，colspan管横向。被"吃掉"的单元格要删除，否则会多出来。
六、表单（重点）
6.1 表单基本结构
<form> 标签是所有表单控件的容器，核心属性有三个：
action：表单数据提交的目标 URL。method：提交方式。GET将参数拼接在 URL 中，适合查询；POST将参数放在请求体中，适合提交敏感或大量数据。enctype：编码类型。当表单包含文件上传时，必须设为multipart/form-data。
6.2 输入控件 <input>
<input> 是表单中最常用的控件，通过 type 属性决定输入类型：
| type 值 | 用途 | 常用属性 |
|---|---|---|
text |
单行文本 | placeholder、maxlength |
password |
密码 | minlength、maxlength |
email |
邮箱（自动验证格式） | placeholder |
number |
数字 | min、max、step |
date |
日期选择器 | --- |
datetime-local |
日期+时间 | --- |
color |
颜色选择器 | value（默认颜色） |
range |
滑块 | min、max、value |
file |
文件上传 | accept（限制文件类型）、multiple（多选） |
hidden |
隐藏字段 | 用于传递不展示给用户的数据 |
radio |
单选框 | name 相同才能互斥，checked 设置默认选中 |
checkbox |
复选框 | name 相同为一组，checked 设置默认选中 |
submit |
提交按钮 | value 设置按钮文字 |
reset |
重置按钮 | 将所有控件恢复为默认值 |
6.3 其他表单控件
<select>：下拉选择框，内部用<option>定义选项，<optgroup>可对选项分组。添加multiple属性可支持多选。<textarea>：多行文本域，通过rows和cols设置大小。<button>：按钮，type可以是submit（提交）、reset（重置）或button（普通按钮，常配合 JS 使用）。
6.4 <label> 标签
<label> 用于为表单控件添加标注文字，有两种关联方式：
- 方式一 ：
<label>的for属性值与输入控件的id值一致。 - 方式二 ：将输入控件直接包裹在
<label>内部。
好处是：点击 label 文字时，关联的输入框会自动获得焦点，提升用户体验和可访问性。
6.5 HTML5 表单验证属性
required：必填字段。pattern：正则表达式验证。title：验证失败时的提示文字。autocomplete：控制是否启用浏览器自动补全（on/off）。autofocus：页面加载后自动聚焦到该控件。
七、语义化标签（HTML5）
7.1 为什么要语义化？
- 对开发者：代码结构清晰，便于阅读、维护和团队协作。
- 对搜索引擎（SEO）：帮助搜索引擎更好地理解页面内容结构，提升搜索排名。
- 对无障碍访问：屏幕阅读器等辅助工具能更准确地解析页面，服务视障用户。
7.2 常用语义化标签
| 标签 | 用途 |
|---|---|
<header> |
页面或区域的头部，通常包含 Logo、导航等 |
<nav> |
导航链接区域 |
<main> |
页面主要内容区域，一个页面只能有一个 |
<article> |
独立的、可复用的内容块（如博客文章、新闻报道） |
<section> |
文档中的独立章节或区块 |
<aside> |
侧边栏或与主内容间接相关的内容 |
<footer> |
页面或区域的底部，通常包含版权、联系方式等 |
<figure> |
独立的内容单元（如图片、代码片段） |
<figcaption> |
<figure> 的标题或说明文字 |
<details> |
可折叠的详细信息区域 |
<summary> |
<details> 的摘要标题，点击可展开/折叠 |
<mark> |
高亮标记文本 |
<time> |
表示时间或日期 |
<progress> |
进度条 |
<meter> |
度量衡显示（如磁盘用量、评分等） |
7.3 经典页面布局结构
一个语义化的页面通常按如下层次组织：
- 最外层
<body>中包含<header>、<main>、<footer>三大区域。 <header>内放<nav>导航。<main>内放<article>（主体内容）和<aside>（侧边栏）。<article>内可用<section>划分章节。
八、多媒体标签
8.1 音频 <audio>
用于在页面中嵌入音频内容，常用属性有：
controls：显示播放控件（播放/暂停按钮、进度条、音量等）。autoplay：自动播放（现代浏览器要求必须配合muted才允许自动播放）。loop：循环播放。muted：默认静音。preload：预加载策略，可选auto（全部预加载）、metadata（仅加载元信息）、none（不预加载）。
内部用 <source> 标签指定音频文件，可提供多种格式（如 mp3、ogg）以兼容不同浏览器。
8.2 视频 <video>
用法与 <audio> 类似，额外支持：
width/height：设置播放器尺寸。poster：视频封面图，在视频未播放时显示。
同样用 <source> 提供多种格式（如 mp4、webm）以保证兼容性。
8.3 嵌入内容
<iframe>：嵌入外部页面，常用属性有src（嵌入地址）、width、height、frameborder（边框）。<svg>：内联 SVG 矢量图形，可直接在 HTML 中绘制图形（如圆形<circle>、矩形<rect>等）。
九、块级元素与行内元素
HTML 中的元素按显示方式大致分为两类：
块级元素（Block）
- 独占一行，前后会自动换行。
- 可以设置宽高，宽高设置生效。
- 上下 margin 和 padding 均有效。
- 可以包含行内元素和其他块级元素。
- 典型标签：
div、p、h1~h6、ul、ol、table、form、header、footer、section、article等。
行内元素（Inline）
- 不独占一行，与其他行内元素排在同一行。
- 设置宽高无效，宽高由内容决定。
- 上下 margin 无效，上下 padding 虽然可见但不影响周围元素的布局。
- 一般不能包含块级元素。
- 典型标签：
span、a、strong、em、img、input、label、br等。
通用容器
<div>：通用块级容器，没有语义，常用于页面布局分组。<span>：通用行内容器，没有语义，常用于对部分文字添加样式。